@datacrest/dcuikit 0.1.5 → 1.0.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { CardProps } from './types';
 declare const Card: {
-    ({ title, description, variant, size, image, footer, className, children, badge, width, height, }: CardProps): React.JSX.Element;
+    ({ title, description, children, variant, size, shadow, hoverEffect, borderRadius, image, imagePosition, imageHeight, badge, badgePosition, footer, header, padding, spacing, width, height, maxWidth, className, contentClassName, titleClassName, descriptionClassName, imageClassName, onClick, href, interactive, disabled, }: CardProps): React.JSX.Element;
     displayName: string;
 };
 export default Card;

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

@@ -5,18 +5,62 @@ export declare const CARD_SIZES: {
         readonly titleSize: "text-base sm:text-lg";
         readonly descSize: "text-sm sm:text-base";
         readonly imageHeight: "h-24 sm:h-32 md:h-36";
+        readonly spacing: "space-y-2";
     };
     readonly medium: {
         readonly padding: "p-4 sm:p-5 md:p-6";
         readonly titleSize: "text-lg sm:text-xl md:text-2xl";
         readonly descSize: "text-sm sm:text-base md:text-lg";
         readonly imageHeight: "h-32 sm:h-40 md:h-48 lg:h-56";
+        readonly spacing: "space-y-3";
     };
     readonly large: {
         readonly padding: "p-5 sm:p-6 md:p-7 lg:p-8";
         readonly titleSize: "text-xl sm:text-2xl md:text-3xl";
         readonly descSize: "text-base sm:text-lg md:text-xl";
         readonly imageHeight: "h-40 sm:h-48 md:h-56 lg:h-64";
+        readonly spacing: "space-y-4";
     };
+    readonly custom: {
+        readonly padding: "";
+        readonly titleSize: "text-lg";
+        readonly descSize: "text-base";
+        readonly imageHeight: "";
+        readonly spacing: "space-y-3";
+    };
+};
+export declare const CARD_SPACING: {
+    readonly none: "";
+    readonly sm: "space-y-2";
+    readonly md: "space-y-3";
+    readonly lg: "space-y-4";
+};
+export declare const CARD_SHADOWS: {
+    readonly none: "";
+    readonly sm: "shadow-sm";
+    readonly md: "shadow";
+    readonly lg: "shadow-md";
+    readonly xl: "shadow-lg";
+};
+export declare const CARD_HOVER_EFFECTS: {
+    readonly none: "";
+    readonly lift: "transition-transform duration-300 hover:-translate-y-1";
+    readonly glow: "transition-shadow duration-300 hover:shadow-glow";
+    readonly scale: "transition-transform duration-300 hover:scale-[1.02]";
+    readonly border: "transition-colors duration-300 hover:border-primary";
+};
+export declare const CARD_BORDER_RADIUS: {
+    readonly none: "rounded-none";
+    readonly sm: "rounded";
+    readonly md: "rounded-lg";
+    readonly lg: "rounded-xl";
+    readonly xl: "rounded-2xl";
+    readonly full: "rounded-3xl";
+};
+export declare const BADGE_POSITIONS: {
+    readonly 'top-right': "absolute right-4 top-4 z-10";
+    readonly 'top-left': "absolute left-4 top-4 z-10";
+    readonly 'bottom-right': "absolute right-4 bottom-4 z-10";
+    readonly 'bottom-left': "absolute left-4 bottom-4 z-10";
 };
 export declare const CARD_VARIANTS: Record<CardVariant, VariantStyles>;

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

@@ -1,18 +1,39 @@
 import { ReactNode } from 'react';
-export type CardVariant = 'default' | 'gradiant';
-export type CardSize = 'small' | 'medium' | 'large';
+export type CardVariant = 'default' | 'gradiant' | 'outline' | 'solid' | 'glass';
+export type CardSize = 'small' | 'medium' | 'large' | 'custom';
+export type CardShadow = 'none' | 'sm' | 'md' | 'lg' | 'xl';
+export type HoverEffect = 'none' | 'lift' | 'glow' | 'scale' | 'border';
+export type BorderRadius = 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 export interface CardProps {
     title?: string;
     description?: string;
+    children?: ReactNode;
     variant?: CardVariant;
     size?: CardSize;
+    shadow?: CardShadow;
+    hoverEffect?: HoverEffect;
+    borderRadius?: BorderRadius;
     image?: string;
+    imagePosition?: 'top' | 'background';
+    imageHeight?: string;
+    badge?: string | ReactNode;
+    badgePosition?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     footer?: ReactNode;
-    className?: string;
-    children?: ReactNode;
-    badge?: string;
+    header?: ReactNode;
+    padding?: string;
+    spacing?: 'none' | 'sm' | 'md' | 'lg';
     width?: string | number;
     height?: string | number;
+    maxWidth?: string | number;
+    className?: string;
+    contentClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
+    imageClassName?: string;
+    onClick?: () => void;
+    href?: string;
+    interactive?: boolean;
+    disabled?: boolean;
 }
 interface BaseVariantStyles {
     kind: CardVariant;

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

@@ -1,3 +1,4 @@
 import CustomDialogContent from './CustomDialogContent';
 import Dialog from './Dialog';
-export { Dialog, CustomDialogContent };
+export { Dialog };
+export { CustomDialogContent };

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

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

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

@@ -29,6 +29,10 @@ declare const _default: {
             control: "object";
             description: string;
         };
+        isDropdownOpen: {
+            control: "boolean";
+            description: string;
+        };
     };
 };
 export default _default;

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

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
+import { PROFILE_CARD_SIZES } from './const';
 export interface DropdownItem {
     name: string;
     icon?: ReactNode;
     link?: string;
     isDisabled?: boolean;
+    onClick?: () => void;
 }
 export interface ProfileCardProps {
     avatarUrl: string;
@@ -11,6 +13,8 @@ export interface ProfileCardProps {
     email?: string;
     position?: string;
     dropdownItems?: DropdownItem[];
-    size?: 'small' | 'medium' | 'large';
+    size?: (typeof PROFILE_CARD_SIZES)[keyof typeof PROFILE_CARD_SIZES];
     className?: string;
+    isDropdownOpen?: boolean;
+    onToggleDropdown?: () => void;
 }

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import { JSX } from 'react';
 import { TableProps } from './Table.types';
-declare const Table: React.FC<TableProps>;
+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;
 export default Table;

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

@@ -1,5 +1,16 @@
-import { StoryFn, Meta } from '@storybook/react';
-import { TableProps } from './Table.types';
+import { Meta } from '@storybook/react';
+import { PAGE_SIZES } from './const';
 declare const _default: Meta;
 export default _default;
-export declare const Table: StoryFn<TableProps>;
+interface TableStoryProps {
+    sortable: boolean;
+    pagination: boolean;
+    searchable: boolean;
+    currentPage: number;
+    pageSize: (typeof PAGE_SIZES)[number];
+    showCustomCells: boolean;
+    showActions: boolean;
+    useBuiltInStatus: boolean;
+    swapPaginationLayout: boolean;
+}
+export declare const Table: import("@storybook/core/csf").AnnotatedStoryFn<import("@storybook/react").ReactRenderer, TableStoryProps>;

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

@@ -1,19 +1,47 @@
+import { FilterFn } from '@tanstack/react-table';
+import { ReactNode } from 'react';
 export declare enum TableColumnAlign {
     Left = "left",
     Center = "center",
     Right = "right"
 }
-export interface TableColumn {
+export declare enum PaginationPosition {
+    Left = "left",
+    Right = "right",
+    Center = "center"
+}
+export type PageSizeOptions = 5 | 10 | 20 | 50;
+export declare enum CellType {
+    Text = "text",
+    Date = "date",
+    Status = "status",
+    Custom = "custom"
+}
+export interface DateFormat {
+    input?: string;
+    output: string;
+}
+export interface TableColumn<T extends Record<string, unknown>> {
     key: string;
     title: string;
     width?: string;
     sortable?: boolean;
     align?: TableColumnAlign;
+    type?: CellType | string;
+    dateFormat?: DateFormat;
+    filterFn?: FilterFn<T>;
+    customCell?: (value: unknown, row: T) => ReactNode;
+    customHeader?: (column: ColumnInfo<T>) => ReactNode;
 }
-export type PageSizeOptions = 5 | 10 | 20 | 50;
-export interface TableProps {
-    columns: TableColumn[];
-    data: Record<string, any>[];
+export interface ColumnInfo<T> {
+    toggleSorting: (desc?: boolean) => void;
+    getIsSorted: () => false | 'asc' | 'desc';
+    key: string;
+    data: T[];
+}
+export interface TableProps<T extends Record<string, unknown>> {
+    columns: TableColumn<T>[];
+    data: T[];
     sortable?: boolean;
     pagination?: boolean;
     searchable?: boolean;
@@ -21,4 +49,8 @@ export interface TableProps {
     pageSize?: PageSizeOptions;
     onSort?: (key: string, direction: 'asc' | 'desc') => void;
     onPageChange?: (page: number) => void;
+    actions?: (row: T) => ReactNode;
+    showCustomCells?: boolean;
+    useBuiltInStatus?: boolean;
+    swapPaginationLayout?: boolean;
 }

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

@@ -0,0 +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;
+export default TableCell;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { TableColumn as TableColumnType, TableColumnAlign } 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;
+}) => TableColumnType<T>;
+export declare const createDateColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
+    width?: string;
+    sortable?: boolean;
+    align?: TableColumnAlign;
+    inputFormat?: string;
+    outputFormat?: string;
+    customCell?: (value: unknown, row: T) => React.ReactNode;
+}) => TableColumnType<T>;
+export declare const createStatusColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
+    width?: string;
+    sortable?: boolean;
+    align?: TableColumnAlign;
+    customCell?: (value: unknown, row: T) => React.ReactNode;
+}) => TableColumnType<T>;
+export declare const createPersonDataColumns: (showCustomCells: boolean) => 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;
+    }) => TableColumnType<T>;
+    createDateColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
+        width?: string;
+        sortable?: boolean;
+        align?: TableColumnAlign;
+        inputFormat?: string;
+        outputFormat?: string;
+        customCell?: (value: unknown, row: T) => React.ReactNode;
+    }) => TableColumnType<T>;
+    createStatusColumn: <T extends Record<string, unknown>>(key: string, title: string, options?: {
+        width?: string;
+        sortable?: boolean;
+        align?: TableColumnAlign;
+        customCell?: (value: unknown, row: T) => React.ReactNode;
+    }) => TableColumnType<T>;
+    createPersonDataColumns: (showCustomCells: boolean) => TableColumnType<PersonData>[];
+};
+export default TableColumn;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { TableColumn, ColumnInfo } from './Table.types';
+export declare const renderSortIcon: <T extends Record<string, unknown>>(column: TableColumn<T>, sortConfig: {
+    key: string;
+    direction: "asc" | "desc";
+} | null) => React.JSX.Element;
+export declare const renderHeader: <T extends Record<string, unknown>>(column: TableColumn<T>, columnInfoFn: (key: string) => ColumnInfo<T>, handleSort: (column: TableColumn<T>) => void, sortable: boolean, sortConfig: {
+    key: string;
+    direction: "asc" | "desc";
+} | null) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+export declare const renderTableHeader: <T extends Record<string, unknown>>(column: TableColumn<T>, getColumnInfo: (key: string) => ColumnInfo<T>, handleSort: (column: TableColumn<T>) => void, sortable: boolean, sortConfig: {
+    key: string;
+    direction: "asc" | "desc";
+} | null) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+declare const TableHeader: {
+    renderSortIcon: <T extends Record<string, unknown>>(column: TableColumn<T>, sortConfig: {
+        key: string;
+        direction: "asc" | "desc";
+    } | null) => React.JSX.Element;
+    renderHeader: <T extends Record<string, unknown>>(column: TableColumn<T>, columnInfoFn: (key: string) => ColumnInfo<T>, handleSort: (column: TableColumn<T>) => void, sortable: boolean, sortConfig: {
+        key: string;
+        direction: "asc" | "desc";
+    } | null) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+    renderTableHeader: <T extends Record<string, unknown>>(column: TableColumn<T>, getColumnInfo: (key: string) => ColumnInfo<T>, handleSort: (column: TableColumn<T>) => void, sortable: boolean, sortConfig: {
+        key: string;
+        direction: "asc" | "desc";
+    } | null) => string | number | bigint | boolean | Iterable<React.ReactNode> | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null | undefined> | React.JSX.Element | null | undefined;
+};
+export default TableHeader;

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

@@ -0,0 +1,16 @@
+export interface PersonData extends Record<string, unknown> {
+    name?: string;
+    email?: string;
+    joinDate?: string;
+    status?: string;
+}
+export declare const SAMPLE_DATA: PersonData[];
+export declare const PAGE_SIZES: readonly [5, 10, 20, 50];
+export declare const STATUS_COLOR_MAP: Record<string, string>;
+export declare const DEFAULT_COLUMN_CONFIG: {
+    NAME_KEY: string;
+    NAME_WIDTH: string;
+    EMAIL_KEY: string;
+    JOIN_DATE_KEY: string;
+    STATUS_KEY: string;
+};

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

@@ -1,3 +1,6 @@
 import Table from './Table';
-export { Table };
-export type { TableProps, TableColumn } from './Table.types';
+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 * from './Table.types';

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

@@ -0,0 +1,23 @@
+import { TableColumn, TableColumnAlign, ColumnInfo, PaginationPosition } from './Table.types';
+import React from 'react';
+export declare const getFlexAlignment: (align?: TableColumnAlign) => string;
+export declare const columnInfo: <T extends Record<string, unknown>>(key: string, columns: TableColumn<T>[], onSort: ((key: string, direction: "asc" | "desc") => void) | undefined, paginatedData: T[], sortConfig: {
+    key: string;
+    direction: "asc" | "desc";
+} | null, setSortConfig: React.Dispatch<React.SetStateAction<{
+    key: string;
+    direction: "asc" | "desc";
+} | null>>) => ColumnInfo<T>;
+export declare const getColumnInfo: <T extends Record<string, unknown>>(key: string, columns: TableColumn<T>[], onSort: ((key: string, direction: "asc" | "desc") => void) | undefined, paginatedData: T[], sortConfig: {
+    key: string;
+    direction: "asc" | "desc";
+} | null, setSortConfig: React.Dispatch<React.SetStateAction<{
+    key: string;
+    direction: "asc" | "desc";
+} | null>>) => ColumnInfo<T>;
+export declare const getShowingEntriesPositionClass: (showingEntriesPosition: PaginationPosition) => "ml-auto order-2" | "mx-auto" | "order-1";
+export declare const getPaginationContainerClass: (paginationPosition: PaginationPosition) => "ml-auto order-2" | "mx-auto" | "order-1";
+export declare const getEffectivePositions: (swapPaginationLayout?: boolean) => {
+    effectivePaginationPosition: PaginationPosition;
+    effectiveEntriesPosition: PaginationPosition;
+};

package/build/components/ui/TruncatedText.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface Props {
+    text: string;
+    className?: string;
+}
+declare const TruncatedText: FC<Props>;
+export default TruncatedText;

package/build/hooks/useTruncatedText.d.ts

@@ -0,0 +1,5 @@
+declare const useTruncatedText: () => {
+    textRef: import("react").RefObject<HTMLSpanElement | null>;
+    isTruncated: boolean;
+};
+export default useTruncatedText;