Component Typings for @doist/reactist

global.d.ts

declare module "@doist/reactist" {
  export declare const ToolTip: React.ComponentType<TooltipProps>;
  export interface TooltipProps {
    position?: PositionValues;
    allowVaguePositioning?: boolean;
    text: React.ReactNode;
    hideOnScroll?: boolean;
    delayShow?: number;
    delayHide?: number;
    wrapperClassName?: string;
    tooltipClassName?: string;
    inverted?: boolean;
    gapSize?: number;
    withArrow?: boolean;
  }

  export declare const Tip: React.ComponentType<TipProps>;
  export interface TipProps {
    top?: boolean;
    title: string;
    message: React.ReactNode;
    className?: string;
  }

  export declare const Time: React.ComponentType<TimeProps>;
  export interface TimeProps {
    className?: string;
    time: number;
    expandOnHover?: boolean;
    expandFullyOnHover?: boolean;
    tooltipOnHover?: boolean;
    refresh?: boolean;
    tooltip?: string;
    config?: {
      locale?: string;
      shortFormatCurrentYear?: string;
      shortFormatPastYear?: string;
      fullFormat?: string;
      daysSuffix?: string;
      hoursSuffix?: string;
      minutesSuffix?: string;
      momentsAgo?: string;
    };
  }

  export declare const Tabs: React.ComponentType<TabsProps>;
  export interface TabsProps {
    defaultTab?: string | number;
    spreadLayout?: boolean;
    onChange?: (tab: string | number) => void;
  }

  export declare const Tab: React.ComponentType<TabProps>;
  export interface TabProps {
    value?: number | string;
    title: string;
    disabled?: boolean;
    className?: string;
  }

  export declare const Select: React.ComponentType<SelectProps>;
  export interface SelectProps {
    value: SelectValue;
    onChange: (val: SelectValue) => void;
    options: {
      key?: SelectValue;
      value: SelectValue;
      text?: SelectValue;
      disabled?: boolean;
    };
    disabled?: boolean;
    className?: string;
  }
  export type SelectValue = string | number;

  export declare const RangeInput: React.ComponentType<RangeInputProps>;
  export interface RangeInputProps {
    value: number;
    min?: number;
    max?: number;
    stepSize?: number;
    onPlus?: RangeInputChangeHandler;
    onMinus?: RangeInputChangeHandler;
    onChange: RangeInputChangeHandler;
    className?: string;
  }
  export type RangeInputChangeHandler = (val: number) => void;

  export declare const ProgressBar: React.ComponentType<ProgressBarProps>;
  export interface ProgressBarProps {
    fillPercentage?: number;
    className?: string;
  }

  export declare const Popover: React.ComponentType<PopoverProps>;
  export interface PopoverProps
    extends Pick<
      React.HTMLAttributes<HTMLSpanElement>,
      "onClick" | "onMouseEnter" | "onMouseLeave"
    > {
    position?: PositionValues;
    allowVaguePositioning?: boolean;
    visible: boolean;
    content: React.ReactNode;
    trigger?: React.ReactNode;
    wrapperClassName?: string;
    popoverClassName?: string;
    arrowClassName?: string;
    withArrow?: boolean;
    gapSize?: number;
    wrapperRef?: any;
    popoverRef?: any;
  }

  export declare const Modal: {
    Body: React.ComponentType<ModalBodyProps>;
    Header: React.ComponentType<ModalHeaderProps>;
    Box: React.ComponentType<ModalBoxProps>;
    Actions: React.ComponentType<ModalActionsProps>;
  };
  export interface ModalBoxProps {
    className?: string;
    style?: React.CSSProperties;
    large?: boolean;
    medium?: boolean;
    closeOnOverlayClick?: boolean;
  }
  export interface ModalHeaderProps {
    title?: string;
    subtitle?: string;
    beforeClose: () => void;
  }
  export interface ModalBodyProps {
    icon?: React.ReactNode;
    showCloseIcon?: boolean;
    className?: string;
    style?: React.CSSProperties;
    plain?: boolean;
  }
  export interface ModalActionsProps {}

  export declare const MenuButton: React.ComponentType<MenuButtonProps>;
  export interface MenuButtonProps {}

  export declare const MenuButtonItem: React.ComponentType<MenuButtonItemProps>;
  export interface MenuButtonItemProps
    extends Pick<React.HTMLAttributes<HTMLDivElement>, "onClick"> {
    className?: string;
  }

  export declare const Loading: React.ComponentType<LoadingProps>;
  export interface LoadingProps {
    className?: string;
    spinnerColor?: string;
    bgColor?: string;
    size?: number;
  }

  export declare const LinkButton: React.ComponentType<LinkButtonProps>;
  export interface LinkButtonProps {
    name: string;
    onClick?: () => void;
    disabled?: boolean;
    className?: string;
  }

  export declare const KeyCapturer: React.ComponentType<KeyCapturerProps>;
  export interface KeyCapturerProps {
    eventName?: KeyEvents;
    onArrowUp?: KeyHandler;
    onArrowRight?: KeyHandler;
    onArrowDown?: KeyHandler;
    onArrowLeft?: KeyHandler;
    onEnter?: KeyHandler;
    onBackspace?: KeyHandler;
    onEscape?: KeyHandler;
    propogateArrowUp?: boolean;
    propogateArrowDown?: boolean;
    propogateArrowRight?: boolean;
    propogateArrowLeft?: boolean;
    propogateEnter?: boolean;
    propogateBackspace?: boolean;
    propogateEscape?: boolean;
  }
  export type KeyHandler = () => void;
  export type KeyEvents = "onKeyDown" | "onKeyPress" | "onKeyUp";

  export declare const SUPPORTED_KEYS: {
    ARROW_UP: "ArrowUp";
    ARROW_RIGHT: "ArrowRight";
    ARROW_DOWN: "ArrowDown";
    ARROW_LEFT: "ArrowLeft";
    ENTER: "Enter";
    BACKSPACE: "Backspace";
    ESCAPE: "Escape";
  };

  export declare const Input: React.ComponentType<InputProps>;
  export interface InputProps extends React.HTMLAttributes<HTMLInputElement> {
    className?: string;
  }

  export declare const Icon: React.ComponentType<IconProps>;
  export interface IconProps {
    image?: string;
    hoveredImage?: string;
    onClick?: () => void;
    tooltip?: string;
    disabled?: boolean;
    icon?: React.ReactNode;
    className?: string;
  }

  export declare const ErrorMessage: React.ComponentType<ErrorMessageProps>;
  export interface ErrorMessageProps {
    message?: React.ReactNode;
    timeout?: number;
    onHide?: () => void;
  }

  export declare const Dropdown: {
    Box: React.ComponentType<DropdownBoxProps>;
    Trigger: React.ComponentType<DropdownTriggerProps>;
    Body: React.ComponentType<DropdownBodyProps>;
  };
  export interface DropdownBoxProps {
    top?: boolean;
    right?: boolean;
    scrolling_parent?: string;
    allowBodyInteractions?: bxoolean;
    onShowBody: () => void;
    onHideBody: () => void;
    className?: string;
  }
  export interface DropdownTriggerProps
    extends Pick<React.HTMLAttributes<HTMLDivElement>, "onClick"> {}
  export interface DropdownBodyProps {}

  export declare const ColorPicker: React.ComponentType<ColorPickerProps>;
  export interface ColorPickerProps {
    color: number;
    onChange?: (idx: number) => void;
    small?: boolean;
    colorList: (string | { color: string; name: string })[];
  }

  export declare const Checkbox: React.ComponentType<CheckboxProps>;
  export interface CheckboxProps {
    onChange?: (val: boolean) => void;
    checked?: boolean;
    disabled?: boolean;
    label?: React.ReactNode;
  }

  export declare const Button: React.ComponentType<ButtonProps>;
  export interface ButtonProps {
    name?: string;
    onClick?: () => void;
    secondary?: boolean;
    small?: boolean;
    large?: boolean;
    white?: boolean;
    loading?: boolean;
    disabled?: boolean;
    danger?: boolean;
    data_tip?: React.ReactNode;
    className?: string;
  }

  export declare const Avatar: React.ComponentType<AvatarProps>;
  export interface AvatarProps {
    user: { name: string; email: string };
    avatarUrl?: string;
    className?: string;
    colorList?: string[];
    size?: AvatarSizes;
  }
  export type AvatarSizes =
    | "xxs"
    | "xs"
    | "s"
    | "m"
    | "l"
    | "xl"
    | "xxl"
    | "xxxl";

  export type PositionValues =
    | "auto"
    | "top"
    | "right"
    | "bottom"
    | "left"
    | "horizontal"
    | "vertical";
}