@datacrest/dcuikit 0.1.6 → 1.0.1

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/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 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, selectable, onSelectionChange, }: TableProps<T>) => JSX.Element;
 export default Table;

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

@@ -1,5 +1,19 @@
-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;
+    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

@@ -1,19 +1,52 @@
+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 TruncationOptions {
+    enableTruncation?: boolean;
+    maxWords?: number;
+}
+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;
+    maxWords?: number;
 }
-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 +54,10 @@ 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;
+    selectable?: boolean;
+    onSelectionChange?: (selectedRows: T[]) => void;
 }

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

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

@@ -0,0 +1,50 @@
+import React from 'react';
+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;
+    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, 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;
+        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, truncationOptions?: TruncationOptions) => 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,18 @@
+export interface PersonData extends Record<string, unknown> {
+    name?: string;
+    email?: string;
+    joinDate?: string;
+    status?: string;
+    description?: 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;
+    DESCRIPTION_KEY: string;
+};

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

@@ -1,3 +1,7 @@
 import Table from './Table';
-export { Table };
-export type { TableProps, TableColumn, TableColumnAlign } from './Table.types';
+import TableCell from './TableCell';
+import TableHeader, { renderSortIcon, renderHeader, renderTableHeader } from './TableHeader';
+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

@@ -0,0 +1,24 @@
+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;
+};
+export declare const truncateText: (text: string, maxWords?: number) => string;

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;