@datacrest/dcuikit 0.0.5 → 0.0.8

package/build/components/Molecule/Carousel/Carousel.stories.d.ts

@@ -0,0 +1,50 @@
+import React from 'react';
+import type { CarouselProps } from './types';
+declare const _default: {
+    title: string;
+    component: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & CarouselProps & React.RefAttributes<HTMLDivElement>>;
+    argTypes: {
+        orientation: {
+            control: "select";
+            options: string[];
+            description: string;
+            defaultValue: string;
+        };
+        showArrows: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        showDots: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        autoPlay: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        interval: {
+            control: "number";
+            description: string;
+            defaultValue: number;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        defaultSlide: {
+            control: "number";
+            description: string;
+            defaultValue: number;
+        };
+        onSlideChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const Carousel: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, CarouselProps>;

package/build/components/Molecule/Carousel/Carousel.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Carousel/const.d.ts

@@ -0,0 +1,15 @@
+export declare const CAROUSEL_DEFAULTS: {
+    INTERVAL: number;
+    DEFAULT_SLIDE: number;
+    TRANSITION_DURATION: number;
+};
+export declare const CAROUSEL_VARIANTS: {
+    readonly DEFAULT: "default";
+    readonly FADE: "fade";
+    readonly SLIDE: "slide";
+};
+export declare const CAROUSEL_CONTROLS: {
+    readonly DOTS: "dots";
+    readonly ARROWS: "arrows";
+    readonly NONE: "none";
+};

package/build/components/Molecule/Carousel/index.d.ts

@@ -0,0 +1,2 @@
+import Carousel from './Carousel';
+export { Carousel };

package/build/components/Molecule/Carousel/types.d.ts

@@ -0,0 +1,22 @@
+export interface CarouselProps {
+    children: React.ReactNode;
+    showArrows?: boolean;
+    showDots?: boolean;
+    autoPlay?: boolean;
+    interval?: number;
+    disabled?: boolean;
+    onSlideChange?: (index: number) => void;
+    defaultSlide?: number;
+    orientation?: 'x' | 'y';
+}
+export interface CarouselItemProps {
+    children: React.ReactNode;
+}
+export interface CarouselApi {
+    selectedIndex: number;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+    canScrollNext: boolean;
+    canScrollPrev: boolean;
+    setSelectedIndex: (index: number) => void;
+}

package/build/components/Molecule/Chart/Chart.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { ChartProps } from './types';
+declare const Chart: ({ data, title, description, showDetail, chartType, height, yAxisWidth, colors, colorPreset, }: ChartProps) => React.JSX.Element;
+export default Chart;

package/build/components/Molecule/Chart/Chart.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import ChartComponent from './Chart';
+declare const _default: Meta<typeof ChartComponent>;
+export default _default;
+export declare const Chart: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, import("./types").ChartProps>;

package/build/components/Molecule/Chart/Chart.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Chart/const.d.ts

@@ -0,0 +1,5 @@
+import { ChartColors, ChartData } from './types';
+export declare const CHART_COLOR_PRESETS: Record<string, ChartColors>;
+export declare const CHART_DATA: ChartData[];
+export declare const DEFAULT_CHART_TYPE = "bar";
+export declare const CHART_TYPES: readonly ["bar", "line"];

package/build/components/Molecule/Chart/index.d.ts

@@ -0,0 +1,2 @@
+import Chart from './Chart';
+export { Chart };

package/build/components/Molecule/Chart/types.d.ts

@@ -0,0 +1,24 @@
+export type ChartData = {
+    date: string;
+    revenue: number;
+    expenses?: number;
+    profit?: number;
+};
+export type ChartColors = {
+    revenue: string;
+    expenses?: string;
+    profit?: string;
+};
+export type ChartType = 'bar' | 'line';
+export interface ChartProps {
+    data: ChartData[];
+    title?: string;
+    description?: string;
+    showDetail?: boolean;
+    chartType?: ChartType;
+    height?: string;
+    yAxisWidth?: number;
+    colors?: ChartColors;
+    colorPreset?: ColorPreset;
+}
+export type ColorPreset = 'default' | 'blue' | 'green' | 'warm';

package/build/components/Molecule/Collapse/Collapse.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CollapseProps } from './types';
+declare const Collapse: React.FC<CollapseProps>;
+export default Collapse;

package/build/components/Molecule/Collapse/Collapse.stories.d.ts

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+import CollapseComponent from './Collapse';
+import { CollapseProps } from './types';
+declare const _default: Meta<typeof CollapseComponent>;
+export default _default;
+type TemplateProps = CollapseProps & {
+    exampleType: 'simple' | 'complex' | 'faq' | 'faq1' | 'faq2' | 'faq3';
+};
+export declare const Collapse: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TemplateProps>;

package/build/components/Molecule/Collapse/Collapse.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Collapse/CollapseData.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+declare const CollapseData: {
+    simple: {
+        title: string;
+        content: React.JSX.Element;
+    };
+    complex: {
+        title: string;
+        content: React.JSX.Element;
+    };
+    faq: {
+        title: string;
+        content: React.JSX.Element;
+    }[];
+};
+export default CollapseData;

package/build/components/Molecule/Collapse/FAQCollapseGroup.d.ts

@@ -0,0 +1,4 @@
+import { FC } from 'react';
+import { CollapseProps } from './types';
+declare const FAQCollapseGroup: FC<Omit<CollapseProps, 'title' | 'children'>>;
+export default FAQCollapseGroup;

package/build/components/Molecule/Collapse/const.d.ts

@@ -0,0 +1,10 @@
+import { CollapseIconType, CollapseIconPosition } from './types';
+export declare const COLLAPSE_DEFAULTS: {
+    DEFAULT_OPEN: boolean;
+    ICON: CollapseIconType;
+    ICON_POSITION: CollapseIconPosition;
+    CLASS_NAME: string;
+    HEADER_CLASS_NAME: string;
+    CONTENT_CLASS_NAME: string;
+    ANIMATION_DURATION: number;
+};

package/build/components/Molecule/Collapse/index.d.ts

@@ -0,0 +1,4 @@
+import Collapse from './Collapse';
+import CollapseData from './CollapseData';
+import FAQCollapseGroup from './FAQCollapseGroup';
+export { Collapse, CollapseData, FAQCollapseGroup };

package/build/components/Molecule/Collapse/types.d.ts

@@ -0,0 +1,17 @@
+import { ReactNode } from 'react';
+export type CollapseIconType = 'chevron' | 'none';
+export type CollapseIconPosition = 'left' | 'right';
+export type CollapseExampleType = 'simple' | 'complex' | 'faq1' | 'faq2' | 'faq3' | 'faq';
+export interface CollapseProps {
+    title: string;
+    children: ReactNode;
+    defaultOpen?: boolean;
+    icon?: CollapseIconType;
+    iconPosition?: CollapseIconPosition;
+    className?: string;
+    headerClassName?: string;
+    contentClassName?: string;
+    animationDuration?: number;
+    onToggle?: (isOpen: boolean) => void;
+    exampleType?: CollapseExampleType;
+}

package/build/components/Molecule/DatePicker/DatePicker.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DatePickerProps } from './types';
+declare const DatePicker: React.ForwardRefExoticComponent<DatePickerProps & React.RefAttributes<HTMLDivElement>>;
+export default DatePicker;

package/build/components/Molecule/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import type { DatePickerProps } from './types';
+declare const _default: Meta<DatePickerProps>;
+export default _default;
+export declare const DatePicker: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DatePickerProps>;

package/build/components/Molecule/DatePicker/DatePicker.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/DatePicker/const.d.ts

@@ -0,0 +1 @@
+export declare const DEFAULT_DATE_FORMAT = "PPP";

package/build/components/Molecule/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+import DatePicker from './DatePicker';
+export { DatePicker };

package/build/components/Molecule/DatePicker/types.d.ts

@@ -0,0 +1,22 @@
+export type DatePickerType = 'single' | 'range';
+export interface DateRange {
+    from: Date | undefined;
+    to: Date | undefined;
+}
+export interface DatePickerProps {
+    type?: 'single' | 'range';
+    value?: Date | DateRange;
+    onChange?: (date: Date | DateRange | undefined) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+    label?: string;
+    error?: string;
+    required?: boolean;
+    clearable?: boolean;
+    format?: string;
+    variant?: 'primary' | 'secondary' | 'tertiary';
+    dataTestId?: string;
+}

package/build/components/Molecule/Dialog/CustomDialogContent.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DialogContentProps } from './types';
+declare const CustomDialogContent: ({ title, description, cancelText, confirmText, onConfirm, onCancel, variant, showCloseButton, size, className, onClose, fields, onOpenChange, }: DialogContentProps) => React.JSX.Element;
+export default CustomDialogContent;

package/build/components/Molecule/Dialog/Dialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { DialogProps } from './types';
+declare const Dialog: {
+    ({ trigger, isOpen, closeOnOutsideClick, ...props }: DialogProps): React.JSX.Element;
+    displayName: string;
+};
+export default Dialog;

package/build/components/Molecule/Dialog/Dialog.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { DialogProps } from './types';
+declare const _default: Meta<DialogProps>;
+export default _default;
+export declare const Dialog: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DialogProps>;

package/build/components/Molecule/Dialog/Dialog.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Dialog/const.d.ts

@@ -0,0 +1,15 @@
+export declare const DIALOG_DEFAULTS: {
+    readonly CANCEL_TEXT: "Cancel";
+    readonly CONFIRM_TEXT: "Confirm";
+    readonly VARIANT: "default";
+    readonly SIZE: "medium";
+    readonly POSITION: "center";
+    readonly CLOSE_ON_OUTSIDE_CLICK: true;
+    readonly SHOW_CLOSE_BUTTON: false;
+};
+export declare const VARIANT_STYLES: {
+    readonly default: {
+        readonly button: "bg-primary text-primary-foreground hover:bg-primary/90";
+        readonly destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90";
+    };
+};

package/build/components/Molecule/Dialog/index.d.ts

@@ -0,0 +1,2 @@
+import Dialog from './Dialog';
+export { Dialog };

package/build/components/Molecule/Dialog/types.d.ts

@@ -0,0 +1,53 @@
+import { PropsWithChildren } from 'react';
+export interface DialogField {
+    label: string;
+    name: string;
+    type: 'text' | 'email' | 'password' | 'number';
+    placeholder?: string;
+    required?: boolean;
+    defaultValue?: string;
+}
+export interface BaseDialogProps {
+    title: string;
+    description: string;
+    cancelText?: string;
+    confirmText?: string;
+    onConfirm?: (data?: Record<string, unknown>) => void;
+    onCancel?: () => void;
+    variant?: 'default' | 'destructive';
+    isOpen?: boolean;
+    size?: 'small' | 'medium' | 'large' | 'extraLarge' | 'full';
+    position?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+    closeOnOutsideClick?: boolean;
+    showCloseButton?: boolean;
+    className?: string;
+    onClose?: () => void;
+    fields?: DialogField[];
+}
+export interface DialogProps extends BaseDialogProps {
+    trigger: string;
+}
+export interface DialogContentProps extends BaseDialogProps {
+    onOpenChange: (open: boolean) => void;
+}
+export interface MockDialogPrimitiveProps extends PropsWithChildren {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    'data-testid'?: string;
+}
+export interface MockDialogContentProps extends PropsWithChildren {
+    'data-testid'?: string;
+}
+export interface MockDialogFooterProps extends PropsWithChildren {
+    className?: string;
+    'data-testid'?: string;
+}
+export interface MockButtonProps extends PropsWithChildren {
+    onClick?: () => void;
+    className?: string;
+    variant?: string;
+    'data-variant'?: string;
+    type?: 'button' | 'submit' | 'reset';
+    role?: string;
+    'aria-label'?: string;
+}

package/build/components/Molecule/Dialog/utils.d.ts

@@ -0,0 +1 @@
+export declare const getSizeClass: (size: string) => "sm:max-w-[425px]" | "sm:max-w-[725px]" | "sm:max-w-[925px]" | "sm:max-w-[90vw]" | "sm:max-w-[525px]";

package/build/components/Molecule/Drawer/Drawer.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DrawerProps } from './types';
+declare const Drawer: ({ children, isOpen, onClose, size, title, description, showCloseButton, }: DrawerProps) => React.JSX.Element;
+export default Drawer;

package/build/components/Molecule/Drawer/Drawer.stories.d.ts

@@ -0,0 +1,43 @@
+import React from 'react';
+import type { DrawerProps } from './types';
+declare const _default: {
+    title: string;
+    component: ({ children, isOpen, onClose, size, title, description, showCloseButton, }: DrawerProps) => React.JSX.Element;
+    argTypes: {
+        side: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        isOpen: {
+            control: "boolean";
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        showCloseButton: {
+            control: "boolean";
+            description: string;
+        };
+        overlay: {
+            control: "boolean";
+            description: string;
+        };
+        onClose: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Drawer: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DrawerProps>;

package/build/components/Molecule/Drawer/Drawer.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Drawer/const.d.ts

@@ -0,0 +1,10 @@
+export declare const DRAWER_SIZES: {
+    readonly small: "h-64";
+    readonly medium: "h-80";
+    readonly large: "h-96";
+    readonly extraLarge: "h-[448px]";
+    readonly full: "h-screen";
+};
+export declare const DRAWER_SIDES: {
+    readonly bottom: "bottom-0";
+};

package/build/components/Molecule/Drawer/index.d.ts

@@ -0,0 +1,2 @@
+import Drawer from './Drawer';
+export { Drawer };

package/build/components/Molecule/Drawer/types.d.ts

@@ -0,0 +1,13 @@
+export type DrawerSide = 'bottom';
+export type DrawerSize = 'small' | 'medium' | 'large' | 'extraLarge' | 'full';
+export interface DrawerProps {
+    children?: React.ReactNode;
+    isOpen: boolean;
+    onClose: () => void;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    title?: string;
+    description?: string;
+    showCloseButton?: boolean;
+    overlay?: boolean;
+}

package/build/components/Molecule/Dropdown/Dropdown.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { DropdownProps } from './types';
+declare const Dropdown: React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<HTMLButtonElement>>;
+export default Dropdown;

package/build/components/Molecule/Dropdown/Dropdown.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta } from '@storybook/react';
+import { DropdownProps } from './types';
+declare const _default: Meta<DropdownProps>;
+export default _default;
+export declare const Dropdown: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, DropdownProps>;

package/build/components/Molecule/Dropdown/Dropdown.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Dropdown/const.d.ts

@@ -0,0 +1,3 @@
+import { SizeVariant, VariantStyle } from './types';
+export declare const sizeVariants: Record<string, SizeVariant>;
+export declare const variantStyles: Record<string, VariantStyle>;

package/build/components/Molecule/Dropdown/index.d.ts

@@ -0,0 +1,2 @@
+import Dropdown from './Dropdown';
+export { Dropdown };

package/build/components/Molecule/Dropdown/types.d.ts

@@ -0,0 +1,45 @@
+import { ReactNode } from 'react';
+export type SizeVariant = {
+    trigger: string;
+    icon: string;
+    optionIcon: string;
+    option: string;
+    optionText: string;
+    description: string;
+};
+export type VariantStyle = {
+    trigger: string;
+    content: string;
+};
+export type VariantType = 'basic' | 'shadow';
+export type SizeType = 'small' | 'medium' | 'large';
+export type DropdownOption = {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: ReactNode;
+    disabled?: boolean;
+};
+export type DropdownClassNames = {
+    trigger?: string;
+    content?: string;
+    item?: string;
+    itemIcon?: string;
+    itemText?: string;
+    description?: string;
+    separator?: string;
+};
+export interface DropdownProps {
+    options: DropdownOption[];
+    value?: string;
+    onValueChange?: (value: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    showIcons?: boolean;
+    size?: SizeType;
+    variant?: VariantType;
+    className?: string;
+    classNames?: DropdownClassNames;
+    searchable?: boolean;
+    onSearch?: (query: string) => void;
+}

package/build/components/Molecule/Loader/Loader.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LoaderProps } from './types';
+declare const LoaderComponent: React.FC<LoaderProps>;
+export default LoaderComponent;

package/build/components/Molecule/Loader/Loader.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import LoaderComponent from './Loader';
+declare const meta: Meta<typeof LoaderComponent>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Loader: Story;

package/build/components/Molecule/Loader/Loader.test.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/build/components/Molecule/Loader/const.d.ts

@@ -0,0 +1,2 @@
+import { LoaderSize } from './types';
+export declare const LOADER_SIZES: Record<LoaderSize, string>;

package/build/components/Molecule/Loader/index.d.ts

@@ -0,0 +1,2 @@
+import LoaderComponent from './Loader';
+export { LoaderComponent };

package/build/components/Molecule/Loader/types.d.ts

@@ -0,0 +1,29 @@
+export type LoaderSize = 'small' | 'medium' | 'large';
+export type LoaderType = 'spinner' | 'dots' | 'bars' | 'orbit';
+export interface LoaderProps {
+    /**
+     * Type of animation
+     * @default 'spinner'
+     */
+    variant?: LoaderType;
+    /**
+     * Size of the loader
+     * @default ''
+     */
+    size?: LoaderSize;
+    /**
+     * Visual style variant
+     * @default ''
+     */
+    /**
+     * Additional CSS classes
+     */
+    className?: string;
+    /**
+     * Accessibility label
+     * @default 'Loading'
+     */
+    ariaLabel?: string;
+}
+export declare const types: LoaderType[];
+export declare const sizes: LoaderSize[];

package/build/components/Molecule/Message/Message.d.ts

@@ -1,13 +1,4 @@
-import React, { ReactElement } from 'react';
-import { MessageVariants } from './Message.types';
-export interface MessageProps {
-    id: string;
-    destroy: () => void;
-    title: string | ReactElement;
-    duration?: number;
-    variant: MessageVariants;
-    animationDuration?: number;
-    icon?: React.ReactNode;
-    dataTestId?: string;
-}
-export declare const MessageComponent: ({ id, destroy, title, variant, duration, animationDuration, icon, dataTestId, }: MessageProps) => React.JSX.Element;
+import React from 'react';
+import { MessageProps } from './Message.types';
+declare const MessageComponent: ({ id, destroy, title, description, variant, duration, animationDuration, icon, dataTestId, }: MessageProps) => React.JSX.Element;
+export default MessageComponent;