@datacrest/dcuikit 0.0.5 → 0.0.8

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

@@ -1,4 +1,59 @@
-import { StoryFn, Meta } from '@storybook/react';
-declare const _default: Meta;
+import React from 'react';
+import { MessageProps, MessageVariants, MessagePosition } from './Message.types';
+declare const _default: {
+    title: string;
+    component: ({ id, destroy, title, description, variant, duration, animationDuration, icon, dataTestId, }: MessageProps) => React.JSX.Element;
+    argTypes: {
+        variant: {
+            control: "select";
+            options: MessageVariants[];
+            description: string;
+            defaultValue: MessageVariants;
+        };
+        position: {
+            control: "select";
+            options: MessagePosition[];
+            description: string;
+            defaultValue: MessagePosition;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        duration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        animationDuration: {
+            control: {
+                type: "number";
+                min: number;
+                max: number;
+                step: number;
+            };
+            description: string;
+        };
+        icon: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        dataTestId: {
+            control: "text";
+            description: string;
+        };
+    };
+};
 export default _default;
-export declare const Message: StoryFn;
+export declare const Message: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, Omit<MessageProps, "destroy"> & {
+    position: MessagePosition;
+}>;

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

@@ -1,6 +1,27 @@
+import { ReactElement, ReactNode } from 'react';
 export declare enum MessageVariants {
     Success = "success",
     Error = "error",
     Warning = "warning",
     Info = "info"
 }
+export declare enum MessagePosition {
+    TopCenter = "top-center",
+    TopLeft = "top-left",
+    TopRight = "top-right",
+    BottomCenter = "bottom-center",
+    BottomLeft = "bottom-left",
+    BottomRight = "bottom-right"
+}
+export interface MessageProps {
+    id?: string;
+    destroy: () => void;
+    title: string | ReactElement;
+    description?: string | ReactElement;
+    duration?: number;
+    position?: string;
+    variant?: MessageVariants;
+    animationDuration?: number;
+    icon?: ReactNode;
+    dataTestId?: string;
+}

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

@@ -1,20 +1,22 @@
-import { MessageProps } from './Message';
+import { MessageProps, MessagePosition } from './Message.types';
 export interface MessageOptions extends Omit<MessageProps, 'id' | 'destroy'> {
     id?: string;
+    position?: MessagePosition;
 }
 export declare class MessageManager {
     private isSetup;
-    private containerRef;
-    private root;
+    private containers;
+    private roots;
     private messages;
     constructor();
     setup(): void;
     show(options: MessageOptions): void;
-    destroy(id: string): void;
+    destroy(id: string, position?: MessagePosition): void;
     success(options: Omit<MessageOptions, 'variant'>): void;
     error(options: Omit<MessageOptions, 'variant'>): void;
     warning(options: Omit<MessageOptions, 'variant'>): void;
     info(options: Omit<MessageOptions, 'variant'>): void;
+    private getPositionStyles;
     private render;
 }
 export declare const message: MessageManager;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { OTPInputProps } from './types';
+declare const OTPInput: {
+    ({ value, maxLength, onChange, disabled, isError, placeholder, className, }: OTPInputProps): React.JSX.Element;
+    displayName: string;
+};
+export default OTPInput;

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import type { OTPInputProps } from './types';
+declare const _default: {
+    title: string;
+    component: {
+        ({ value, maxLength, onChange, disabled, isError, placeholder, className, }: OTPInputProps): React.JSX.Element;
+        displayName: string;
+    };
+    argTypes: {
+        maxLength: {
+            control: "number";
+            description: string;
+            defaultValue: number;
+        };
+        disabled: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        isError: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        placeholder: {
+            control: "text";
+            description: string;
+            defaultValue: string;
+        };
+        showControls: {
+            control: "boolean";
+            description: string;
+            defaultValue: boolean;
+        };
+        value: {
+            control: "text";
+            description: string;
+        };
+        onChange: {
+            action: string;
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const OTPInput: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, OTPInputProps>;

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

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

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

@@ -0,0 +1,7 @@
+export declare const DEFAULT_LENGTH = 6;
+export declare const DEFAULT_PLACEHOLDER = "\u25CB";
+export declare const INPUT_VARIANTS: {
+    readonly default: "default";
+    readonly error: "error";
+    readonly disabled: "disabled";
+};

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

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

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

@@ -0,0 +1,10 @@
+export interface OTPInputProps {
+    value: string;
+    maxLength?: number;
+    onChange?: (value: string) => void;
+    disabled?: boolean;
+    isError?: boolean;
+    placeholder?: string;
+    className?: string;
+    showControls?: boolean;
+}

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PaginationComponentProps } from './types';
+declare const PaginationComponent: ({ currentPage, totalPages, onPageChange, siblingCount, className, disabled, isLoading, enableKeyboardNav, showEllipsis, }: PaginationComponentProps) => React.JSX.Element | null;
+export default PaginationComponent;

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

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

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

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

package/build/components/Molecule/Pagination/PaginationState.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { PaginationStateProps } from './types';
+declare const PaginationWithState: (props: PaginationStateProps) => React.JSX.Element;
+export default PaginationWithState;

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

@@ -0,0 +1,7 @@
+export declare const DOTS = "...";
+export declare const DEFAULT_SIBLING_COUNT = 1;
+export declare const DEFAULT_PAGE = 1;
+export declare const MAX_PAGES = 100;
+export declare const MIN_PAGES = 1;
+export declare const MAX_SIBLINGS = 3;
+export declare const MIN_SIBLINGS = 0;

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

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

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

@@ -0,0 +1,13 @@
+export interface PaginationComponentProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    siblingCount?: number;
+    className?: string;
+    disabled?: boolean;
+    isLoading?: boolean;
+    enableKeyboardNav?: boolean;
+    showEllipsis?: boolean;
+}
+export interface PaginationStateProps extends Omit<PaginationComponentProps, 'currentPage' | 'onPageChange'> {
+}

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

@@ -0,0 +1 @@
+export declare const getPaginationRange: (currentPage: number, totalPages: number, siblingCount: number, showEllipsis: boolean) => (string | number)[];

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

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import type { PopoverContentProps } from './types';
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

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

@@ -0,0 +1,40 @@
+import React from 'react';
+import type { PopoverStoryProps } from './types';
+declare const _default: {
+    title: string;
+    component: React.FC<import("@radix-ui/react-popover").PopoverProps>;
+    argTypes: {
+        side: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        align: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        variant: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        title: {
+            control: "text";
+            description: string;
+        };
+        description: {
+            control: "text";
+            description: string;
+        };
+        buttonText: {
+            control: "text";
+            description: string;
+        };
+        onOpenChange: {
+            action: string;
+        };
+    };
+};
+export default _default;
+export declare const Popover: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, PopoverStoryProps>;

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

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

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

@@ -0,0 +1,10 @@
+export declare const POPOVER_SIDES: readonly ["top", "right", "bottom", "left"];
+export declare const POPOVER_ALIGN_OPTIONS: readonly ["start", "center", "end"];
+export declare const DEFAULT_SIDE = "bottom";
+export declare const DEFAULT_ALIGN = "center";
+export declare const DEFAULT_SIDE_OFFSET = 4;
+export declare const ANIMATION_DURATION = 150;
+export declare const POPOVER_VARIANTS: {
+    readonly DEFAULT: "default";
+    readonly FORM: "form";
+};

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

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

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

@@ -0,0 +1,21 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Root> {
+    children: React.ReactNode;
+}
+export interface PopoverStoryProps extends PopoverProps {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    variant?: 'default' | 'form';
+    title?: string;
+    description?: string;
+    buttonText?: string;
+}
+export interface PopoverTriggerProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Trigger> {
+    asChild?: boolean;
+}
+export interface PopoverContentProps extends React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+    className?: string;
+    align?: 'start' | 'center' | 'end';
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+}

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

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

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

@@ -0,0 +1,35 @@
+import React from 'react';
+import { ProfileCardProps } from './types';
+declare const _default: {
+    title: string;
+    component: React.FC<ProfileCardProps>;
+    argTypes: {
+        size: {
+            control: "select";
+            options: string[];
+            description: string;
+        };
+        avatarUrl: {
+            control: "text";
+            description: string;
+        };
+        name: {
+            control: "text";
+            description: string;
+        };
+        email: {
+            control: "text";
+            description: string;
+        };
+        position: {
+            control: "text";
+            description: string;
+        };
+        dropdownItems: {
+            control: "object";
+            description: string;
+        };
+    };
+};
+export default _default;
+export declare const ProfileCard: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, ProfileCardProps>;

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

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

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

@@ -0,0 +1,18 @@
+export declare const PROFILE_CARD_SIZES: {
+    readonly small: "small";
+    readonly medium: "medium";
+    readonly large: "large";
+};
+export declare const SAMPLE_PROFILES: {
+    name: string;
+    email: string;
+    date: string;
+    title: string;
+    content: string;
+    avatarUrl: string;
+}[];
+export declare const sizeClasses: {
+    small: string;
+    medium: string;
+    large: string;
+};

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

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

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

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface DropdownItem {
+    name: string;
+    icon?: ReactNode;
+    link?: string;
+    isDisabled?: boolean;
+}
+export interface ProfileCardProps {
+    avatarUrl: string;
+    name: string;
+    email?: string;
+    position?: string;
+    dropdownItems?: DropdownItem[];
+    size?: 'small' | 'medium' | 'large';
+    className?: string;
+}

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { SheetProps, SheetTriggerProps, SheetContentProps, SheetHeaderProps, SheetFooterProps, SheetTitleProps, SheetDescriptionProps, SheetDrawerProps } from './types';
+declare const Sheet: {
+    ({ children, side, overlay, showFooter, title, description, buttonText, className, fullWidth, fullHeight, ...props }: SheetProps): React.JSX.Element;
+    displayName: string;
+};
+declare const SheetTrigger: React.ForwardRefExoticComponent<SheetTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React.ForwardRefExoticComponent<SheetPrimitive.DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;
+declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: React.ForwardRefExoticComponent<SheetHeaderProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetFooter: React.ForwardRefExoticComponent<SheetFooterProps & React.RefAttributes<HTMLDivElement>>;
+declare const SheetTitle: React.ForwardRefExoticComponent<SheetTitleProps & React.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React.ForwardRefExoticComponent<SheetDescriptionProps & React.RefAttributes<HTMLParagraphElement>>;
+declare const SheetDrawer: React.ForwardRefExoticComponent<SheetDrawerProps & React.RefAttributes<HTMLDivElement>>;
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetDrawer, };

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

@@ -0,0 +1,9 @@
+import { Meta } from '@storybook/react';
+import { SheetProps } from './types';
+declare const _default: Meta<SheetProps & {
+    isDrawer: boolean;
+}>;
+export default _default;
+export declare const SheetStory: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, SheetProps & {
+    isDrawer: boolean;
+}>;

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

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

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

@@ -0,0 +1,8 @@
+export declare const SHEET_SIDES: readonly ["top", "right", "bottom", "left"];
+export type SheetSide = (typeof SHEET_SIDES)[number];
+export declare const DEFAULT_SIDE: SheetSide;
+export type SheetTransition = {
+    in: string;
+    out: string;
+};
+export declare const SHEET_TRANSITIONS: Record<SheetSide, SheetTransition>;

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

@@ -0,0 +1,2 @@
+import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from './Sheet';
+export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };

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

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as SheetPrimitive from '@radix-ui/react-dialog';
+import { SHEET_SIDES } from './const';
+export type SheetSide = (typeof SHEET_SIDES)[number];
+export interface SheetCustomProps {
+    side?: SheetSide;
+    overlay?: boolean;
+    showFooter?: boolean;
+    title?: string;
+    description?: string;
+    buttonText?: string;
+    className?: string;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+}
+export interface SheetProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Root>, SheetCustomProps {
+}
+export interface SheetTriggerProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Trigger> {
+    asChild?: boolean;
+}
+export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>, Pick<SheetCustomProps, 'side' | 'overlay' | 'fullWidth' | 'fullHeight'> {
+}
+export interface SheetHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface SheetFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export interface SheetTitleProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title> {
+}
+export interface SheetDescriptionProps extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description> {
+}
+export interface SheetDrawerProps extends SheetProps {
+    contentProps?: Omit<SheetContentProps, 'children'>;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+export declare const variants: readonly ["card", "table", "simple", "dashboard"];
+export declare const DEFAULT_VARIANT = "card";
+export declare const DEFAULT_ROW_HEIGHT = "h-4";
+export declare const DEFAULT_MAIN_HEIGHT = "h-24";
+export declare const DEFAULT_FIRST_ROW_WIDTH = "w-3/5";
+export declare const DEFAULT_SECOND_ROW_WIDTH = "w-4/5";
+export declare const DEFAULT_ROWS = 3;
+export declare const DEFAULT_HEADER_ROWS = 2;
+export declare const DEFAULT_CONTENT_ROWS = 3;
+export declare const DEFAULT_HEADER_ROW_HEIGHT = "h-6";
+export declare const DEFAULT_CONTENT_ROW_HEIGHT = "h-5";
+export declare const DEFAULT_GRID_COLS = 2;
+export declare const DEFAULT_GRID_HEIGHT = "h-64";

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

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

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

@@ -0,0 +1,18 @@
+import { variants } from './const';
+export type Variant = (typeof variants)[number];
+export interface SkeletonProps {
+    variant?: Variant;
+    rows?: number;
+    className?: string;
+    showHeader?: boolean;
+    rowHeight?: string;
+    mainHeight?: string;
+    firstRowWidth?: string;
+    secondRowWidth?: string;
+    headerRows?: number;
+    contentRows?: number;
+    headerRowHeight?: string;
+    contentRowHeight?: string;
+    gridCols?: number;
+    gridHeight?: string;
+}

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

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

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

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

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

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

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

@@ -0,0 +1,59 @@
+export declare const STEPPER_SIZE_STYLES: {
+    small: {
+        node: string;
+        innerDot: {
+            active: string;
+            completed: string;
+            default: string;
+        };
+        text: string;
+        description: string;
+        connectorTop: string;
+        connectorHeight: string;
+        spacing: string;
+        marginRight: string;
+        verticalConnector: {
+            left: string;
+            top: string;
+            height: string;
+        };
+    };
+    medium: {
+        node: string;
+        innerDot: {
+            active: string;
+            completed: string;
+            default: string;
+        };
+        text: string;
+        description: string;
+        connectorTop: string;
+        connectorHeight: string;
+        spacing: string;
+        marginRight: string;
+        verticalConnector: {
+            left: string;
+            top: string;
+            height: string;
+        };
+    };
+    large: {
+        node: string;
+        innerDot: {
+            active: string;
+            completed: string;
+            default: string;
+        };
+        text: string;
+        description: string;
+        connectorTop: string;
+        connectorHeight: string;
+        spacing: string;
+        marginRight: string;
+        verticalConnector: {
+            left: string;
+            top: string;
+            height: string;
+        };
+    };
+};

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

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