@appbuckets/react-ui/generic.d.ts

Just Another React UI Framework

import {
  ReactNode,
  ElementType,
  ChangeEvent,
  FocusEvent as ReactFocusEvent,
  MouseEvent as ReactMouseEvent,
  ComponentProps,
  JSXElementConstructor,
} from 'react';
import {
  ShorthandContent,
  ShorthandItem,
  ShorthandCollection,
  CreateFunction,
} from '@appbuckets/react-ui-core';
import { IconName } from '@fortawesome/fontawesome-svg-core';
export { ShorthandItem, ShorthandCollection };
/** Generic Object */
export declare type AnyObject = {
  [key: string]: any;
};
export declare type ExcludeKeys<
  P extends {},
  K extends string | number | symbol
> = {
  [KK in keyof P as KK extends K ? KK : never]: P[KK];
};
export declare type Merge<P extends {}, T extends {}> = {
  [K in keyof P]: K extends keyof T ? T[K] : P[K];
};
export declare type Subtract<P extends {}, T extends {}> = {
  [K in keyof P]: K extends keyof T ? never : P[K];
};
export declare type Extensible<P extends {}> = P & AnyObject;
export declare type PropsWithAs<P extends {}> = P & {
  as?: ElementType;
};
export declare type AppBucketsIcon<T> = IconName | T;
export declare type Creatable<
  C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
> = C & {
  create: CreateFunction<ComponentProps<C>>;
};
export declare type UIMutableComponentProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = PropsWithAs<UIComponentProps<P, E>>;
export declare type UIMutableVoidComponentProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = PropsWithAs<UIMutableComponentProps<P, E>>;
export declare type UIComponentProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = ComponentDisplayProps & Extensible<UIComponentStrictProps<P, E>>;
export declare type UIVoidComponentProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = ComponentDisplayProps & Extensible<UIVoidComponentStrictProps<P, E>>;
export declare type UIMutableComponentStrictProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = PropsWithAs<UIComponentStrictProps<P, E>>;
export declare type UIMutableVoidComponentStrictProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = PropsWithAs<UIMutableVoidComponentProps<P, E>>;
export declare type UIComponentStrictProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = P &
  Omit<CoreUIComponentProps, keyof P> &
  Omit<JSX.IntrinsicElements[E], keyof P>;
export declare type UIVoidComponentStrictProps<
  P extends {},
  E extends keyof JSX.IntrinsicElements = 'div'
> = P &
  Omit<CoreUIVoidComponentProps, keyof P> &
  Omit<JSX.IntrinsicElements[E], keyof P>;
/** An interface with Structural AppBuckets Props */
export interface CoreUIComponentProps extends CoreUIVoidComponentProps {
  /** Main Component Content */
  children?: ReactNode;
  /** Content Shorthand */
  content?: ShorthandContent;
}
/** Component Props without children */
export interface CoreUIVoidComponentProps {
  /** User Defined Class Names */
  className?: string;
}
/** Shared props to change component display style */
export interface ComponentDisplayProps {
  /** Choose Main background Color */
  backgroundColor?: AppBucketsColor;
  /** Set element display */
  display?: ResponsiveProps<ElementDisplay>;
  /** Define the main Font Weight */
  fontWeight?: FontWeight;
  /** Change component size */
  size?: ElementSize;
  /** Define Text Align */
  textAlign?: ContentAlign;
  /** Choose main text color */
  textColor?: AppBucketsColor;
}
/** Shared props to change component appearance */
export interface AppearanceProps {
  /** Manually set the Element appearance by Color Pool */
  appearance?: AppBucketsColor;
  /** Set the Danger State */
  danger?: boolean;
  /** Set the Info State */
  info?: boolean;
  /** Set the Primary State */
  primary?: boolean;
  /** Set the Secondary State */
  secondary?: boolean;
  /** Set the Success State */
  success?: boolean;
  /** Set the Warning State */
  warning?: boolean;
}
/**
 * Generate a Type to extends Component Props
 * with useful Flexbox container props
 */
export interface FlexboxContainerProps {
  /** Set content horizontal disposition */
  columnsAlign?: ResponsiveProps<FlexContentHorizontalAlign>;
  /** Set content vertical disposition */
  verticalAlign?: ResponsiveProps<FlexContentVerticalAlign>;
  /** Set if it must avoid gutter between columns */
  withoutGap?: ResponsiveProps<boolean>;
}
/**
 * Generate a Type to extends Component Props
 * with useful Flexbox content props
 */
export interface FlexboxContentProps {
  /** Set the base Content Width */
  width?: ResponsiveContentWidth;
  /** Set the Content Offset */
  offsetBy?: ResponsiveContentOffset;
  /** Set the Content Vertical disposition */
  verticalAlign?: ResponsiveProps<FlexContentVerticalAlign>;
}
export declare type ChangeHandler<H, P> = (e: ChangeEvent<H>, props: P) => void;
export declare type FocusHandler<H, P> = (
  e: ReactFocusEvent<H>,
  props: P
) => void;
export declare type MouseHandler<H, P> = (
  e: ReactMouseEvent<H>,
  props: P
) => void;
export declare type VoidHandler<P> = (nothing: null, props: P) => void;
export declare type ContentAlign = 'left' | 'center' | 'right';
export declare type FontWeight = 'light' | 'regular' | 'semi bold' | 'bold';
export declare type VerticalAlign = 'on top' | 'on bottom' | 'center';
export declare type ElementDisplay =
  | 'block'
  | 'grid'
  | 'inline block'
  | 'inline flex'
  | 'inline'
  | 'flex'
  | 'table'
  | 'table column group'
  | 'table header group'
  | 'table footer group'
  | 'table row group'
  | 'table cell'
  | 'table column'
  | 'table row'
  | 'none';
export declare type ElementSize =
  | 'extra small'
  | 'small'
  | 'normal'
  | 'large'
  | 'big'
  | 'huge';
export declare type Spacer =
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | '0'
  | '1'
  | '2'
  | '3'
  | '4'
  | '5'
  | '6'
  | '7'
  | '8';
export declare type ShadowElevation =
  | 0
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | '0'
  | '1'
  | '2'
  | '3'
  | '4'
  | '5'
  | '6'
  | '7'
  | '8'
  | '9'
  | '10'
  | '11'
  | '12';
export declare type FlexContentVerticalAlign = VerticalAlign | 'stretched';
export declare type FlexContentHorizontalAlign =
  | 'on start'
  | 'centered'
  | 'on end'
  | 'spaced between'
  | 'spaced around';
export declare type FlexContentOffset =
  | 1
  | 2
  | 3
  | 4
  | 5
  | 6
  | 7
  | 8
  | 9
  | 10
  | 11
  | 12
  | 13
  | 14
  | 15
  | 16
  | 17
  | 18
  | 19
  | 20
  | 21
  | 22
  | 23
  | '1'
  | '2'
  | '3'
  | '4'
  | '5'
  | '6'
  | '7'
  | '8'
  | '9'
  | '10'
  | '11'
  | '12'
  | '13'
  | '14'
  | '15'
  | '16'
  | '17'
  | '18'
  | '19'
  | '20'
  | '21'
  | '22'
  | '23';
export declare type FlexContentWidth = FlexContentOffset | 24 | '24' | 'auto';
export interface ResponsiveValue<T> {
  /** Set value on phone up screen */
  phoneUp?: T;
  /** Set value on table up screen */
  tabletUp?: T;
  /** Set value on desktop up screen */
  desktopUp?: T;
  /** Set value on large desktop up screen */
  largeDesktopUp?: T;
}
export declare type ResponsiveProps<T> = T | ResponsiveValue<T>;
export declare type ResponsiveContentWidth = ResponsiveProps<FlexContentWidth>;
export declare type ResponsiveContentOffset =
  ResponsiveProps<FlexContentOffset>;
export declare type BrandColor =
  | 'primary'
  | 'danger'
  | 'warning'
  | 'success'
  | 'info';
export declare type UIColor =
  | 'text'
  | 'text secondary'
  | 'black'
  | 'white'
  | 'white shade'
  | 'blue'
  | 'teal'
  | 'green'
  | 'yellow'
  | 'orange'
  | 'red'
  | 'pink'
  | 'purple'
  | 'cloud light'
  | 'cloud'
  | 'cloud dark';
export declare type AppBucketsColor = BrandColor | UIColor;