@woobee/ui 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,578 @@
+import React, { ButtonHTMLAttributes, ReactNode, CSSProperties, ReactElement, ThHTMLAttributes } from 'react';
+
+type ButtonVariant = 'primary' | 'secondary' | 'form-input' | 'flat';
+type ButtonSize = 'small' | 'medium' | 'big' | 'huge';
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'type'> {
+    children?: ReactNode;
+    onClick?: () => void;
+    placeholder?: ReactNode;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    className?: string;
+    type?: 'button' | 'submit' | 'reset';
+    loading?: boolean;
+    disabled?: boolean;
+    leftIcon?: ReactNode;
+    rightIcon?: ReactNode;
+    compact?: boolean;
+}
+declare function Button({ children, onClick, placeholder, variant, size, className, type, loading, disabled, leftIcon, rightIcon, compact, ...props }: ButtonProps): React.JSX.Element;
+
+type TagSize = 'small' | 'medium';
+interface TagProps {
+    children?: ReactNode;
+    className?: string;
+    onRemove?: () => void;
+    color?: string;
+    style?: CSSProperties;
+    size?: TagSize;
+}
+declare function Tag({ children, className, onRemove, color, style, size, }: TagProps): React.JSX.Element;
+
+interface TagItem {
+    id?: string;
+    name: string;
+    color?: string;
+}
+interface TagGroupProps {
+    tags?: TagItem[];
+    onRemove?: (tag: TagItem) => void;
+    placeholder?: string;
+    className?: string;
+}
+declare function TagGroup({ tags, onRemove, placeholder, className, }: TagGroupProps): React.JSX.Element;
+
+interface TabOption {
+    id: string;
+    label: string;
+}
+interface TabsProps {
+    value: string;
+    onChange: (id: string) => void;
+    options?: TabOption[];
+    className?: string;
+}
+declare function Tabs({ value, onChange, options, className, }: TabsProps): React.JSX.Element;
+
+type ToggleSize = 'small' | 'medium';
+interface ToggleProps {
+    listening?: boolean;
+    size?: ToggleSize;
+    name?: string;
+    value: boolean;
+    onChange: (value: boolean) => void;
+    className?: string;
+}
+declare const Toggle: React.ForwardRefExoticComponent<ToggleProps & React.RefAttributes<HTMLSpanElement>>;
+
+type LoadingLayout = 'fixed' | 'fill';
+interface LoadingProps {
+    title?: string;
+    layout?: LoadingLayout;
+    className?: string;
+    spinClassName?: string;
+    spinSizeClassName?: string;
+}
+declare function Loading({ title, layout, className, spinClassName, spinSizeClassName, }: LoadingProps): React.JSX.Element;
+
+interface CheckboxListProps<T = Record<string, unknown>> {
+    items?: T[];
+    selected?: (T | string)[];
+    onToggle?: (item: T) => void;
+    itemKey?: string | ((item: T) => string | number);
+    itemLabel?: string | ((item: T) => ReactNode);
+    isChecked?: (item: T, selected: (T | string)[]) => boolean;
+    loading?: boolean;
+    placeholder?: ReactNode;
+}
+declare function CheckboxList<T extends Record<string, unknown> = Record<string, unknown>>({ items, selected, onToggle, itemKey, itemLabel, isChecked, loading, placeholder, }: CheckboxListProps<T>): React.JSX.Element;
+
+type ConfirmationType = 'danger' | 'warning' | 'info';
+interface ConfirmationBoxProps {
+    open: boolean;
+    title?: string;
+    description?: string;
+    cancelText?: string;
+    confirmText?: string;
+    confirmColor?: string;
+    type?: ConfirmationType;
+    disabled?: boolean;
+    onClose?: () => void;
+    onConfirm?: () => void;
+}
+declare function ConfirmationBox({ open, title, description, cancelText, confirmText, confirmColor, type, disabled, onClose, onConfirm, }: ConfirmationBoxProps): React.JSX.Element;
+
+type ModalSize = 'small' | 'medium' | 'large' | 'full';
+interface ModalOpts {
+    darkMode?: boolean;
+    sidebarPosition?: 'left' | 'right';
+    mobileSidebarPosition?: 'top' | 'above' | 'bottom';
+}
+interface ModalProps {
+    wrapperClassName?: string;
+    open: boolean;
+    size?: ModalSize;
+    title?: string;
+    description?: string;
+    transparent?: boolean;
+    header?: ReactNode;
+    sidebar?: ReactNode;
+    footer?: ReactNode;
+    children?: ReactNode;
+    disabled?: boolean;
+    onClose?: () => void;
+    onExited?: () => void;
+    onCancel?: () => void;
+    onSubmit?: (e?: React.MouseEvent) => void;
+    onChange?: () => void;
+    closeText?: string;
+    submitText?: string;
+    submitColor?: string;
+    changeText?: string;
+    fullscreen?: boolean;
+    opts?: ModalOpts;
+}
+declare function Modal({ wrapperClassName, open, size, title, description, transparent, header, sidebar, footer, children, disabled, onClose, onExited, onCancel, onSubmit, onChange, closeText, submitText, submitColor, changeText, fullscreen, opts, }: ModalProps): React.ReactPortal | null;
+
+type DrawerLevel = 'base' | 'middle' | 'top' | 'ceil' | 'extra-wide' | 'full';
+type DrawerTheme = 'WHITE' | 'BLACK' | 'RED' | 'ORANGE' | 'YELLOW' | 'LIME' | 'GREEN' | 'BROWN' | 'BLUE' | 'DARK_BLUE' | 'PURPLE' | 'FLAMINGO' | 'PINK';
+interface DrawerAnimationProps {
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+}
+interface DrawerProps {
+    theme?: DrawerTheme;
+    open: boolean;
+    onClose?: () => void;
+    title?: string;
+    level?: DrawerLevel;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    animation?: DrawerAnimationProps;
+    wrapperClassName?: string;
+    sectionClassName?: string;
+}
+declare function Drawer({ theme, open, onClose, title, level, description, children, footer, animation, wrapperClassName, sectionClassName, }: DrawerProps): React.JSX.Element;
+
+interface TransitionProps {
+    show?: boolean;
+    appear?: boolean;
+    enter?: string;
+    enterFrom?: string;
+    enterTo?: string;
+    leave?: string;
+    leaveFrom?: string;
+    leaveTo?: string;
+    children: ReactElement;
+    onEnter?: (node: HTMLElement) => void;
+    onEntering?: (node: HTMLElement) => void;
+    onEntered?: (node: HTMLElement) => void;
+    onExit?: (node: HTMLElement) => void;
+    onExiting?: (node: HTMLElement) => void;
+    onExited?: (node: HTMLElement) => void;
+}
+declare function Transition({ show, appear, ...rest }: TransitionProps): React.JSX.Element;
+
+type SortDirection = 'ASC' | 'DESC';
+interface SortIconProps {
+    direction?: SortDirection;
+}
+declare function SortIcon({ direction }: SortIconProps): React.JSX.Element | null;
+
+interface InlinePromptProps {
+    title: ReactNode;
+    onConfirm: () => void;
+    className?: string;
+    withText?: boolean;
+    confirmText?: string;
+    cancelText?: string;
+    opts?: {
+        condensed?: boolean;
+        blocked?: boolean;
+    };
+}
+declare function InlinePrompt({ title, onConfirm, className, withText, confirmText, cancelText, opts, }: InlinePromptProps): React.JSX.Element;
+
+interface HTMLHeadingProps {
+    id?: string;
+    className?: string;
+    children?: ReactNode;
+}
+declare function H1({ className, children }: HTMLHeadingProps): React.JSX.Element;
+declare function H2({ className, children }: HTMLHeadingProps): React.JSX.Element;
+declare function H3({ id, className, children }: HTMLHeadingProps): React.JSX.Element;
+declare function H4({ id, className, children }: HTMLHeadingProps): React.JSX.Element;
+interface BoldProps {
+    children?: ReactNode;
+}
+declare function B({ children }: BoldProps): React.JSX.Element;
+
+interface TableProps {
+    children?: ReactNode;
+    className?: string;
+}
+declare function Table({ children, className }: TableProps): React.JSX.Element;
+
+interface TheadProps {
+    children?: ReactNode;
+}
+declare function Thead({ children }: TheadProps): React.JSX.Element;
+
+interface TrProps {
+    children?: ReactNode;
+}
+declare function Tr({ children }: TrProps): React.JSX.Element;
+
+interface ThProps extends Omit<ThHTMLAttributes<HTMLTableCellElement>, 'className'> {
+    condensed?: boolean;
+    className?: string;
+    children?: ReactNode;
+    sticky?: boolean;
+}
+declare function Th({ condensed, className, children, sticky, ...opts }: ThProps): React.JSX.Element;
+
+interface TbodyProps {
+    children?: ReactNode;
+}
+declare function Tbody({ children }: TbodyProps): React.JSX.Element;
+
+interface TdProps {
+    className?: string;
+    align?: 'left' | 'center' | 'right';
+    colSpan?: number;
+    condensed?: boolean;
+    narrow?: boolean;
+    children?: ReactNode;
+}
+declare function Td({ className, align, colSpan, condensed, narrow, children }: TdProps): React.JSX.Element;
+
+type InputType = 'text' | 'password' | 'email' | 'url' | 'date' | 'month' | 'time' | 'date-time' | 'datetime-local' | 'week' | 'number' | 'search' | 'tel' | 'color' | 'radio' | 'checkbox' | 'hidden' | 'button';
+interface InputProps {
+    id?: string;
+    theme?: string;
+    className?: string;
+    label?: string;
+    placeholder?: string;
+    active?: boolean;
+    pattern?: string;
+    maxLength?: number;
+    inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
+    prefix?: string;
+    type?: InputType;
+    info?: string;
+    defaultValue?: string | number;
+    checked?: boolean;
+    min?: number | string;
+    max?: number | string;
+    error?: boolean;
+    errorMessage?: string;
+    readOnly?: boolean;
+    name?: string;
+    autoComplete?: 'on' | 'off';
+    autoFocus?: boolean;
+    spellCheck?: boolean;
+    noBorder?: boolean;
+    listening?: boolean;
+    onChange?: (value: string | boolean) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
+    onKeyUp?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement>) => void;
+    hideIndicator?: boolean;
+    darkMode?: boolean;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface LabelProps {
+    className?: string;
+    error?: boolean;
+    htmlFor?: string;
+    info?: string;
+    mandatory?: boolean;
+    opts?: {
+        dark?: boolean;
+    };
+    children?: ReactNode;
+}
+declare function Label({ className, error, htmlFor, info, mandatory, opts, children, }: LabelProps): React.JSX.Element;
+
+interface SelectProps {
+    id?: string;
+    loading?: boolean;
+    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
+    error?: boolean;
+    errorMessage?: string;
+    info?: string;
+    readOnly?: boolean;
+    name?: string;
+    children?: ReactNode;
+    value?: string | number;
+}
+declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface SelectInputItem {
+    id: string;
+    name: string;
+}
+interface SelectInputProps {
+    className?: string;
+    placeholder?: string;
+    items?: SelectInputItem[];
+    selectedValue?: string;
+    readOnly?: boolean;
+    error?: boolean;
+    onChange?: (value: string) => void;
+}
+declare const SelectInput: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<HTMLSelectElement>>;
+
+interface TextareaProps {
+    id?: string;
+    className?: string;
+    onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
+    onMouseDown?: (e: React.MouseEvent<HTMLTextAreaElement>) => void;
+    placeholder?: string;
+    error?: boolean;
+    errorMessage?: string;
+    info?: string;
+    readOnly?: boolean;
+    name?: string;
+    defaultValue?: string;
+    rows?: number;
+    opts?: {
+        plateFocus?: string;
+    };
+    autoFocus?: boolean;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+interface TagInputProps {
+    name?: string;
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+}
+declare function TagInput({ name, defaultValue, onChange, placeholder, }: TagInputProps): React.JSX.Element;
+
+interface NoDataProps {
+    className?: string;
+}
+declare function NoData({ className }: NoDataProps): React.JSX.Element;
+
+declare function ThemeToggle(): React.JSX.Element;
+
+interface PopoverActionItem {
+    id: string;
+    label: string;
+    action?: () => void | Promise<void>;
+    onClick?: () => void | Promise<void>;
+}
+interface PopoverAction {
+    id: string;
+    section?: string;
+    items: PopoverActionItem[];
+}
+interface PopoverState {
+    show: boolean;
+    style: React.CSSProperties | null;
+    tooltipStyle: React.CSSProperties | null;
+    position: 'top' | 'bottom' | null;
+    description?: string | null;
+    actions: PopoverAction[] | null;
+}
+interface PopoverContextProps {
+    showPopover: boolean;
+    setPopover: (params: PopoverState) => void;
+}
+declare const PopoverContext: React.Context<PopoverContextProps | undefined>;
+declare function PopoverProvider({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+declare function usePopoverContext(): PopoverContextProps;
+
+interface PopoverProps {
+    className?: string;
+    description?: string | null;
+    actions: PopoverAction[];
+    children: React.ReactNode;
+    opts?: {
+        activated?: boolean;
+        condensed?: boolean;
+        compact?: boolean;
+        asBlock?: boolean;
+        align?: string;
+    };
+}
+declare function Popover({ className, description, actions, children, opts }: PopoverProps): React.JSX.Element;
+
+interface DraggerProps {
+    type?: 'table' | 'div';
+    parentClassName?: string;
+    header?: React.ReactNode;
+    records: any[];
+    timestamp?: any;
+    disabled?: boolean;
+    children: React.ReactElement;
+    onChange?: (updatedRecords: any[]) => void;
+}
+declare function Dragger({ type, parentClassName, header, records, timestamp, disabled, children, onChange }: DraggerProps): React.JSX.Element;
+
+interface ExcelColumn {
+    id: string;
+    label: string | React.ReactNode;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    type?: 'text' | 'number' | 'textarea' | 'checkbox';
+}
+interface ExcelTableProps {
+    columns: ExcelColumn[];
+    data: any[];
+    onChange?: (newData: any[]) => void;
+    onRowAdd?: () => void;
+    onRowDelete?: (index: number) => void;
+    placeholder?: string | ((rowIndex: number) => string);
+    isAddRowVisible?: boolean;
+    addRowLabel?: string;
+}
+declare function ExcelTable({ columns, data, onChange, onRowAdd, onRowDelete, placeholder, isAddRowVisible, addRowLabel }: ExcelTableProps): React.JSX.Element;
+
+interface CoverflowImage {
+    id?: string | number;
+    imageUrl: string;
+    imageTitle?: string;
+    imageDescription?: string;
+}
+interface CoverflowProps {
+    images: CoverflowImage[];
+    onClose?: () => void;
+}
+declare function Coverflow({ images, onClose }: CoverflowProps): React.ReactPortal | null;
+
+interface DataGridHeaderConfig {
+    id: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    grow?: boolean;
+    noWrap?: boolean;
+    sort?: boolean;
+    type?: 'currency' | 'number' | 'change' | 'datetime' | 'thumbnail' | 'text';
+    hidden?: boolean;
+    error?: string;
+    menu?: any[];
+    params?: any;
+    vertical?: string;
+    lineClamp?: number;
+}
+interface DataGridProps {
+    headers: DataGridHeaderConfig[];
+    data: any[];
+    selectedId?: string | null;
+    footers?: any[] | null;
+    opts?: {
+        stickyHeader?: boolean;
+        darkMode?: boolean;
+        showCurrency?: boolean;
+        labelTitle?: string;
+        labelCentered?: boolean;
+        vertical?: string;
+    };
+    onSelect?: (row: any) => void;
+}
+declare function DataGrid({ headers, data, selectedId, footers, opts, onSelect }: DataGridProps): React.JSX.Element;
+
+interface ModalContextValue {
+    modalShowing: boolean;
+    drawerShowing: boolean;
+    setModalShowing: (value: boolean) => void;
+    setDrawerShowing: (value: boolean) => void;
+}
+declare const ModalContext: React.Context<ModalContextValue>;
+declare function useModalContext(): ModalContextValue;
+interface ModalProviderProps {
+    children: ReactNode;
+}
+declare function ModalProvider({ children }: ModalProviderProps): React.JSX.Element;
+
+interface ThemeContextProps {
+    theme: string;
+    darkMode: boolean;
+    handleToggleTheme: (theme: string) => void;
+}
+declare const ThemeContext: React.Context<ThemeContextProps | undefined>;
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    defaultTheme?: string;
+}
+declare function ThemeProvider({ children, defaultTheme }: ThemeProviderProps): React.JSX.Element;
+declare function useThemeContext(): ThemeContextProps;
+
+declare function useDebounce<T extends (...args: any[]) => void>(callback: T, delay: number, deps?: any[]): ((this: any, ...args: Parameters<T>) => void)[];
+
+interface ResizeListenerProps {
+    mobileAgent?: boolean;
+}
+interface ResizeValues {
+    screenWidth: number;
+    screenHeight: number;
+    viewport: 'mobile' | 'desktop' | null;
+    viewMode: 'portrait-view' | 'landscape-view' | null;
+    mobileView: boolean | null;
+    tabletView: boolean | null;
+}
+declare function useResizeListener(props?: ResizeListenerProps): {
+    screenWidth: number;
+    screenHeight: number;
+    viewport: "mobile" | "desktop" | null;
+    viewMode: "portrait-view" | "landscape-view" | null;
+    mobileView: boolean | null;
+    tabletView: boolean | null;
+};
+
+/**
+ * Builds a className string from an object mapping class names to boolean values.
+ *
+ * @example
+ * classNames({ "text-sm": true, "font-bold": isActive, "hidden": false })
+ * // => "text-sm font-bold" (if isActive is true)
+ */
+declare function classNames(classNameHash: Record<string, boolean | undefined | null>): string;
+/**
+ * Converts a space-separated className string into an object mapping each
+ * class name to `true`. Useful for spreading into a `classNames()` call.
+ *
+ * @example
+ * classNameObject("text-sm font-bold")
+ * // => { "text-sm": true, "font-bold": true }
+ */
+declare function classNameObject(classNameString?: string | null): Record<string, boolean>;
+
+declare function bestTextColorForBg(hex?: string | null): 'white' | 'black';
+declare const numberFormatter: (x?: number | string | null, decimal?: number | null, opts?: {
+    decimalSign?: string;
+    thousandSign?: string;
+}) => string;
+declare function moveItem<T>(items: T[], movedItem: T, fromIndex: number, toIndex: number): T[];
+
+declare function debounce<T extends (...args: any[]) => void>(fn: T, delay: number): (this: any, ...args: Parameters<T>) => void;
+
+interface ModalFooterProps {
+    footer?: ReactNode;
+    disabled?: boolean;
+    onCancel?: () => void;
+    onSubmit?: (e?: React.MouseEvent) => void;
+    onChange?: () => void;
+    closeText?: string;
+    submitText?: string;
+    submitColor?: string;
+    changeText?: string;
+    darkMode?: boolean;
+}
+
+export { B, type BoldProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, CheckboxList, type CheckboxListProps, ConfirmationBox, type ConfirmationBoxProps, type ConfirmationType, Coverflow, type CoverflowImage, type CoverflowProps, DataGrid, type DataGridHeaderConfig, type DataGridProps, Dragger, type DraggerProps, Drawer, type DrawerAnimationProps, type DrawerLevel, type DrawerProps, type DrawerTheme, type ExcelColumn, ExcelTable, type ExcelTableProps, H1, H2, H3, H4, type HTMLHeadingProps, InlinePrompt, type InlinePromptProps, Input, type InputProps, type InputType, Label, type LabelProps, Loading, type LoadingLayout, type LoadingProps, Modal, ModalContext, type ModalFooterProps, type ModalOpts, type ModalProps, ModalProvider, type ModalSize, NoData, type NoDataProps, Popover, type PopoverAction, type PopoverActionItem, PopoverContext, type PopoverContextProps, type PopoverProps, PopoverProvider, type PopoverState, type ResizeListenerProps, type ResizeValues, Select, SelectInput, type SelectInputItem, type SelectInputProps, type SelectProps, type SortDirection, SortIcon, type SortIconProps, type TabOption, Table, type TableProps, Tabs, type TabsProps, Tag, TagGroup, type TagGroupProps, TagInput, type TagInputProps, type TagItem, type TagProps, type TagSize, Tbody, Td, type TdProps, Textarea, type TextareaProps, Th, type ThProps, Thead, ThemeContext, type ThemeContextProps, ThemeProvider, ThemeToggle, Toggle, type ToggleProps, type ToggleSize, Tr, Transition, type TransitionProps, bestTextColorForBg, classNameObject, classNames, debounce, moveItem, numberFormatter, useDebounce, useModalContext, usePopoverContext, useResizeListener, useThemeContext };