@datacrest/dcuikit 1.0.0 → 1.0.2

package/build/components/Atom/TextArea/TextArea.d.ts

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

package/build/components/Atom/TextArea/TextArea.stories.d.ts

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

package/build/components/Atom/TextArea/TextArea.test.d.ts

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

package/build/components/Atom/TextArea/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TextArea';
+export * from './types';

package/build/components/Atom/TextArea/types.d.ts

@@ -0,0 +1,25 @@
+import { TextareaHTMLAttributes, ChangeEvent, FocusEvent } from 'react';
+export type TextAreaResize = boolean;
+export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'onChange' | 'onFocus' | 'onBlur'> {
+    error?: boolean;
+    resize?: TextAreaResize;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    label?: string;
+    helperText?: string;
+    showCharCount?: boolean;
+    floatingLabel?: boolean;
+    onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
+    onFocus?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    rows?: number;
+    maxLength?: number;
+    required?: boolean;
+    readOnly?: boolean;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    fluid?: boolean;
+    width?: string;
+    className?: string;
+}

package/build/components/Atom/TextArea/utils.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+export interface Prop {
+    resize: boolean;
+    disabled: boolean;
+    floatingLabel: boolean;
+    isLabelFloated: boolean;
+    focused: boolean;
+    error: boolean;
+    fluid: boolean;
+    width?: string;
+    className?: string;
+    value?: string;
+    currentValue: string;
+}
+export declare const generateBaseClasses: (resize: boolean) => string;
+export declare const generateContainerClasses: ({ disabled, floatingLabel, isLabelFloated, focused, error, }: Pick<Prop, "disabled" | "floatingLabel" | "isLabelFloated" | "focused" | "error">) => string;
+export declare const generateWrapperClasses: ({ fluid, width, className, }: Pick<Prop, "fluid" | "width" | "className">) => string;
+export declare const generateWrapperStyle: (width?: string) => React.CSSProperties;
+export declare const getCurrentLength: (value?: string, currentValue?: string) => number;
+export declare const generateFloatingLabelClasses: ({ isLabelFloated, focused, error, }: {
+    isLabelFloated: boolean;
+    focused: boolean;
+    error: boolean;
+}) => string;
+export declare const generateBorderClasses: (focused: boolean, error: boolean) => string;
+export declare const generateNotchWidth: (label?: string, required?: boolean) => number;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 import type { AlertDialogProps } from './types';
-declare const AlertDialogComponent: ({ title, description, trigger, action, cancel, onAction, onCancel, variant, disabled, }: AlertDialogProps) => React.JSX.Element;
+declare const AlertDialogComponent: ({ title, description, trigger, action, cancel, onAction, onCancel, variant, disabled, open, onOpenChange, }: AlertDialogProps) => React.JSX.Element;
 export default AlertDialogComponent;

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

@@ -2,7 +2,7 @@ import React from 'react';
 import type { AlertDialogProps } from './types';
 declare const _default: {
     title: string;
-    component: ({ title, description, trigger, action, cancel, onAction, onCancel, variant, disabled, }: AlertDialogProps) => React.JSX.Element;
+    component: ({ title, description, trigger, action, cancel, onAction, onCancel, variant, disabled, open, onOpenChange, }: AlertDialogProps) => React.JSX.Element;
     argTypes: {
         title: {
             control: "text";

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

@@ -1,2 +1,3 @@
-import AlertDialogComponent from './AlertDialog';
-export { AlertDialogComponent };
+export * from './AlertDialog';
+export * from './const';
+export * from './types';

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

@@ -1,11 +1,14 @@
+import { ReactNode } from 'react';
 export interface AlertDialogProps {
     title: string;
     description: string;
-    trigger: string;
-    action: string;
+    trigger: string | ReactNode;
+    action: string | ReactNode;
     cancel?: string;
     onAction?: () => void;
     onCancel?: () => void;
     variant?: 'default' | 'destructive';
     disabled?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
 }

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,19 @@
+export declare const DEFAULT_MAX_SIZE: number;
+export declare const DEFAULT_MAX_FILES = 5;
+export declare const ACCEPTED_FILE_TYPES: {
+    IMAGE: string;
+    PDF: string;
+    DOCUMENT: string;
+    ALL: string;
+};
+export declare const FILE_UPLOAD_ERRORS: {
+    FILE_TOO_LARGE: string;
+    TOO_MANY_FILES: string;
+    INVALID_FILE_TYPE: string;
+    UPLOAD_FAILED: string;
+};
+export declare const UPLOAD_STATUS: {
+    readonly UPLOADING: "uploading";
+    readonly SUCCESS: "success";
+    readonly ERROR: "error";
+};

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

@@ -0,0 +1,3 @@
+export * from './FileUploader';
+export * from './const';
+export * from './types';

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

@@ -0,0 +1,32 @@
+export interface FileAction {
+    label: string;
+    onClick: (file: UploadedFile) => void;
+    variant?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'harford' | 'link';
+    icon?: React.ReactNode;
+}
+export interface FileUploaderProps {
+    onFilesChange: (files: File[]) => void;
+    accept: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    className?: string;
+    width?: string;
+    children?: React.ReactNode;
+    fileActions?: FileAction[];
+    showRemoveButton?: boolean;
+}
+export interface FileWithPreview extends File {
+    preview?: string;
+}
+export interface UploadedFile {
+    id: string;
+    file: File;
+    name: string;
+    size: number;
+    type: string;
+    preview?: string;
+    status: 'uploading' | 'success' | 'error';
+    progress?: number;
+}

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

@@ -0,0 +1,4 @@
+export declare const formatFileSize: (bytes: number) => string;
+export declare const parseAccept: (acceptProp: string) => {
+    [x: string]: never[];
+} | undefined;

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

@@ -1,4 +1,4 @@
 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;
+declare const MessageComponent: ({ id, destroy, title, description, variant, position, duration, animationDuration, icon, dataTestId, }: MessageProps) => React.JSX.Element;
 export default MessageComponent;

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

@@ -2,7 +2,7 @@ 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;
+    component: ({ id, destroy, title, description, variant, position, duration, animationDuration, icon, dataTestId, }: MessageProps) => React.JSX.Element;
     argTypes: {
         variant: {
             control: "select";

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

@@ -1,4 +1,6 @@
-import { MessagePosition, MessageProps, MessageVariants } from './Message.types';
+import MessageComponent from './Message';
+import { MessageProps } from './Message.types';
 import { message, MessageOptions } from './MessageManager';
-export { message, MessageVariants, MessagePosition };
+export * from './Message.types';
 export type { MessageProps, MessageOptions };
+export { MessageComponent, message };

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

@@ -1,4 +1,4 @@
 import { JSX } from 'react';
 import { TableProps } from './Table.types';
-declare const Table: <T extends Record<string, unknown>>({ columns, data, sortable, pagination, searchable, currentPage, pageSize, onSort, onPageChange, actions, showCustomCells, useBuiltInStatus, swapPaginationLayout, }: TableProps<T>) => JSX.Element;
+declare const Table: <T extends Record<string, unknown>>({ columns, data, sortable, pagination, searchable, currentPage, pageSize, onSort, onPageChange, actions, showCustomCells, useBuiltInStatus, swapPaginationLayout, selectable, onSelectionChange, }: TableProps<T>) => JSX.Element;
 export default Table;

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

@@ -12,5 +12,8 @@ interface TableStoryProps {
     showActions: boolean;
     useBuiltInStatus: boolean;
     swapPaginationLayout: boolean;
+    selectable: boolean;
+    enableTextTruncation: boolean;
+    maxWords: number;
 }
 export declare const Table: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStoryProps>;

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

@@ -21,6 +21,10 @@ export interface DateFormat {
     input?: string;
     output: string;
 }
+export interface TruncationOptions {
+    enableTruncation?: boolean;
+    maxWords?: number;
+}
 export interface TableColumn<T extends Record<string, unknown>> {
     key: string;
     title: string;
@@ -32,6 +36,7 @@ export interface TableColumn<T extends Record<string, unknown>> {
     filterFn?: FilterFn<T>;
     customCell?: (value: unknown, row: T) => ReactNode;
     customHeader?: (column: ColumnInfo<T>) => ReactNode;
+    maxWords?: number;
 }
 export interface ColumnInfo<T> {
     toggleSorting: (desc?: boolean) => void;
@@ -53,4 +58,6 @@ export interface TableProps<T extends Record<string, unknown>> {
     showCustomCells?: boolean;
     useBuiltInStatus?: boolean;
     swapPaginationLayout?: boolean;
+    selectable?: boolean;
+    onSelectionChange?: (selectedRows: T[]) => void;
 }

package/build/components/Molecule/Table/TableCell.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { TableColumn } from './Table.types';
-declare const TableCell: <T extends Record<string, unknown>>(column: TableColumn<T>, row: T, showCustomCells: boolean, useBuiltInStatus: boolean) => React.JSX.Element | null;
+declare const TableCell: <T extends Record<string, unknown>>(column: TableColumn<T>, row: T, showCustomCells: boolean, useBuiltInStatus: boolean) => React.JSX.Element;
 export default TableCell;

package/build/components/Molecule/Table/TableColumn.d.ts

@@ -1,11 +1,12 @@
 import React from 'react';
-import { TableColumn as TableColumnType, TableColumnAlign } from './Table.types';
+import { TableColumn as TableColumnType, TableColumnAlign, TruncationOptions } from './Table.types';
 import { PersonData } from './const';
 export declare const createTextColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
     width?: string;
     sortable?: boolean;
     align?: TableColumnAlign;
     customCell?: (value: unknown, row: T) => React.ReactNode;
+    maxWords?: number;
 }) => TableColumnType<T>;
 export declare const createDateColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
     width?: string;
@@ -21,13 +22,14 @@ export declare const createStatusColumn: <T extends Record<string, unknown>>(key
     align?: TableColumnAlign;
     customCell?: (value: unknown, row: T) => React.ReactNode;
 }) => TableColumnType<T>;
-export declare const createPersonDataColumns: (showCustomCells: boolean) => TableColumnType<PersonData>[];
+export declare const createPersonDataColumns: (showCustomCells: boolean, truncationOptions?: TruncationOptions) => TableColumnType<PersonData>[];
 declare const TableColumn: {
     createTextColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
         width?: string;
         sortable?: boolean;
         align?: TableColumnAlign;
         customCell?: (value: unknown, row: T) => React.ReactNode;
+        maxWords?: number;
     }) => TableColumnType<T>;
     createDateColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
         width?: string;
@@ -43,6 +45,6 @@ declare const TableColumn: {
         align?: TableColumnAlign;
         customCell?: (value: unknown, row: T) => React.ReactNode;
     }) => TableColumnType<T>;
-    createPersonDataColumns: (showCustomCells: boolean) => TableColumnType<PersonData>[];
+    createPersonDataColumns: (showCustomCells: boolean, truncationOptions?: TruncationOptions) => TableColumnType<PersonData>[];
 };
 export default TableColumn;

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

@@ -3,6 +3,7 @@ export interface PersonData extends Record<string, unknown> {
     email?: string;
     joinDate?: string;
     status?: string;
+    description?: string;
 }
 export declare const SAMPLE_DATA: PersonData[];
 export declare const PAGE_SIZES: readonly [5, 10, 20, 50];
@@ -13,4 +14,5 @@ export declare const DEFAULT_COLUMN_CONFIG: {
     EMAIL_KEY: string;
     JOIN_DATE_KEY: string;
     STATUS_KEY: string;
+    DESCRIPTION_KEY: string;
 };

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

@@ -1,6 +1,7 @@
 import Table from './Table';
 import TableCell from './TableCell';
-import TableColumn, { createTextColumn, createDateColumn, createStatusColumn } from './TableColumn';
 import TableHeader, { renderSortIcon, renderHeader, renderTableHeader } from './TableHeader';
-export { Table, TableCell, TableColumn, TableHeader, renderSortIcon, renderHeader, renderTableHeader, createTextColumn, createDateColumn, createStatusColumn, };
+export { Table, TableCell, TableHeader, renderSortIcon, renderHeader, renderTableHeader, };
 export * from './Table.types';
+export * from './TableColumn';
+export * from './utils';

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

@@ -21,3 +21,4 @@ export declare const getEffectivePositions: (swapPaginationLayout?: boolean) =>
     effectivePaginationPosition: PaginationPosition;
     effectiveEntriesPosition: PaginationPosition;
 };
+export declare const truncateText: (text: string, maxWords?: number) => string;