nucleus-core-ts 0.8.7 → 0.8.8

package/dist/fe/components/Checkbox/theme/index.js

@@ -0,0 +1,221 @@
+export const checkboxTheme = {
+    container: {
+        base: "flex flex-col",
+        spacing: "gap-1",
+        disabled: "pointer-events-none"
+    },
+    wrapper: {
+        base: "inline-flex items-center cursor-pointer select-none",
+        gap: {
+            sm: "gap-2",
+            md: "gap-2.5",
+            lg: "gap-3"
+        }
+    },
+    label: {
+        base: "cursor-pointer",
+        text: {
+            size: {
+                sm: "text-sm",
+                md: "text-base",
+                lg: "text-lg"
+            },
+            color: {
+                light: "text-gray-700",
+                dark: "dark:text-gray-200"
+            }
+        },
+        disabled: "opacity-50 cursor-not-allowed"
+    },
+    checkbox: {
+        base: "relative flex items-center justify-center overflow-hidden",
+        size: {
+            sm: "w-4 h-4",
+            md: "w-5 h-5",
+            lg: "w-6 h-6"
+        },
+        border: {
+            base: "border-2",
+            width: "border-2",
+            color: {
+                light: "border-gray-300",
+                dark: "dark:border-gray-600"
+            },
+            focused: "ring-2 ring-offset-2 ring-blue-500 dark:ring-offset-gray-900"
+        },
+        background: {
+            unchecked: {
+                light: "bg-white",
+                dark: "dark:bg-gray-800"
+            },
+            checked: {
+                primary: "bg-blue-500",
+                secondary: "bg-purple-500",
+                success: "bg-emerald-500",
+                warning: "bg-amber-500",
+                danger: "bg-red-500",
+                info: "bg-cyan-500"
+            }
+        },
+        rounded: "rounded-md",
+        shadow: "shadow-sm",
+        transition: "transition-all duration-200",
+        disabled: {
+            opacity: "opacity-50",
+            cursor: "cursor-not-allowed"
+        }
+    },
+    checkIcon: {
+        base: "absolute",
+        size: {
+            sm: "w-3 h-3",
+            md: "w-3.5 h-3.5",
+            lg: "w-4 h-4"
+        },
+        stroke: {
+            width: "stroke-[3]",
+            color: "stroke-white"
+        }
+    },
+    indeterminateIcon: {
+        base: "absolute",
+        size: {
+            sm: {
+                width: "w-2",
+                height: "h-0.5"
+            },
+            md: {
+                width: "w-2.5",
+                height: "h-0.5"
+            },
+            lg: {
+                width: "w-3",
+                height: "h-0.5"
+            }
+        },
+        background: "bg-white",
+        rounded: "rounded-full"
+    },
+    switch: {
+        track: {
+            base: "relative inline-flex items-center cursor-pointer",
+            size: {
+                sm: {
+                    width: "w-8",
+                    height: "h-4"
+                },
+                md: {
+                    width: "w-11",
+                    height: "h-6"
+                },
+                lg: {
+                    width: "w-14",
+                    height: "h-7"
+                }
+            },
+            background: {
+                unchecked: {
+                    light: "bg-gray-200",
+                    dark: "dark:bg-gray-700"
+                },
+                checked: {
+                    primary: "bg-blue-500",
+                    secondary: "bg-purple-500",
+                    success: "bg-emerald-500",
+                    warning: "bg-amber-500",
+                    danger: "bg-red-500",
+                    info: "bg-cyan-500"
+                }
+            },
+            border: {
+                base: "border",
+                color: {
+                    light: "border-gray-300",
+                    dark: "dark:border-gray-600"
+                }
+            },
+            rounded: "rounded-full",
+            shadow: "shadow-inner",
+            transition: "transition-all duration-300 ease-out",
+            disabled: {
+                opacity: "opacity-50",
+                cursor: "cursor-not-allowed"
+            }
+        },
+        thumb: {
+            base: "absolute flex items-center justify-center bg-white rounded-full shadow-lg",
+            size: {
+                sm: "w-3 h-3",
+                md: "w-5 h-5",
+                lg: "w-6 h-6"
+            },
+            background: {
+                light: "bg-white",
+                dark: "bg-white"
+            },
+            shadow: "shadow-md",
+            rounded: "rounded-full",
+            transition: "transition-all duration-300 ease-out",
+            position: {
+                sm: {
+                    unchecked: "left-0.5",
+                    checked: "left-[calc(100%-14px)]"
+                },
+                md: {
+                    unchecked: "left-0.5",
+                    checked: "left-[calc(100%-22px)]"
+                },
+                lg: {
+                    unchecked: "left-0.5",
+                    checked: "left-[calc(100%-26px)]"
+                }
+            }
+        },
+        icon: {
+            base: "absolute",
+            size: {
+                sm: "w-2 h-2",
+                md: "w-3 h-3",
+                lg: "w-3.5 h-3.5"
+            },
+            color: {
+                unchecked: {
+                    light: "text-gray-400",
+                    dark: "text-gray-500"
+                },
+                checked: "text-current"
+            }
+        }
+    },
+    ripple: {
+        base: "absolute inset-0 rounded-full opacity-0",
+        size: "scale-0",
+        color: {
+            primary: "bg-blue-400/30",
+            secondary: "bg-purple-400/30",
+            success: "bg-emerald-400/30",
+            warning: "bg-amber-400/30",
+            danger: "bg-red-400/30",
+            info: "bg-cyan-400/30"
+        }
+    },
+    errorText: {
+        base: "mt-1",
+        text: "text-sm",
+        color: "text-red-500"
+    },
+    helperText: {
+        base: "mt-1",
+        text: "text-sm",
+        color: {
+            light: "text-gray-500",
+            dark: "dark:text-gray-400"
+        }
+    }
+};
+export function extendCheckboxTheme(overrides) {
+    return {
+        ...checkboxTheme,
+        ...overrides
+    };
+}

package/dist/fe/components/Checkbox/types/index.js

@@ -0,0 +1 @@
+export { };

package/dist/fe/components/Checkbox/utils/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/fe/components/DataTable/DataTable.js

@@ -0,0 +1,225 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { EmptyState } from "./components/EmptyState";
+import { InfiniteScrollTrigger } from "./components/InfiniteScrollTrigger";
+import { LoadingSpinner } from "./components/LoadingSpinner";
+import { SkeletonTable } from "./components/SkeletonTable";
+import { TableHeader } from "./components/TableHeader";
+import { TableRow } from "./components/TableRow";
+import { useAutoFitColumn } from "./hooks/useAutoFitColumn";
+import { useResizeColumn } from "./hooks/useResizeColumn";
+import { useDataTableStore } from "./store";
+import { dataTableTheme } from "./theme";
+import { cn } from "./utils/cn";
+gsap.registerPlugin(useGSAP);
+const DEFAULT_CONFIG = {
+    hasClickAction: false,
+    hasDoubleClickAction: false,
+    isFrontendSort: true,
+    enableInfiniteScroll: false,
+    infiniteScrollThreshold: 100,
+    pageSize: 20,
+    autoFetchUntilScroll: true,
+    defaultColumnWidth: 150,
+    defaultRowHeight: 48,
+    minColumnWidth: 60,
+    minRowHeight: 32,
+    enableSelection: false,
+    selectionColumnWidth: 48
+};
+export function DataTable({ data, columns, actionColumns, keyExtractor, callbacks, config: userConfig, className, headerMiddleware, cellMiddleware, isLoading, isPending, skeletonRowCount = 5, emptyMessage, selectionToolbar, isLoadingMore = false, hasMoreData = false }) {
+    const config = {
+        ...DEFAULT_CONFIG,
+        ...userConfig
+    };
+    const tableRef = useRef(null);
+    const scrollContainerRef = useRef(null);
+    const store = useDataTableStore();
+    const theme = dataTableTheme;
+    const { startResize, isJustResized } = useResizeColumn({
+        minWidth: config.minColumnWidth,
+        tableRef,
+        onResizeStart: (columnKey)=>{
+            store.setResizingColumn(columnKey);
+        },
+        onResizeEnd: (columnKey, width)=>{
+            store.setResizingColumn(null);
+            store.setColumnWidth(columnKey, width);
+            callbacks?.onColumnResize?.(columnKey, width);
+        }
+    });
+    const { autoFit } = useAutoFitColumn({
+        onAutoFit: (columnKey, contentWidth)=>{
+            store.autoFitColumn(columnKey, contentWidth);
+        }
+    });
+    const hasInitialized = useRef(false);
+    useGSAP(()=>{
+        if (!tableRef.current || hasInitialized.current) return;
+        gsap.fromTo(tableRef.current, {
+            opacity: 0
+        }, {
+            opacity: 1,
+            duration: 0.3,
+            ease: "power2.out"
+        });
+        hasInitialized.current = true;
+    }, []);
+    const handleSort = (columnKey)=>{
+        if (isJustResized()) return;
+        const column = columns.find((c)=>c.key === columnKey);
+        if (!column?.sortable) return;
+        let newDirection = "asc";
+        if (store.sortColumnKey === columnKey) {
+            if (store.sortDirection === "asc") {
+                newDirection = "desc";
+            } else if (store.sortDirection === "desc") {
+                newDirection = null;
+            }
+        }
+        store.setSortState(String(columnKey), newDirection);
+        if (!config.isFrontendSort) {
+            callbacks?.onSort?.(columnKey, newDirection);
+        }
+    };
+    const handleResizeStart = (columnKey, e)=>{
+        startResize(columnKey, e);
+    };
+    const handleColumnDoubleClick = (columnKey)=>{
+        autoFit(columnKey, tableRef.current);
+    };
+    const handleLoadMore = ()=>{
+        if (isLoadingMore) return;
+        callbacks?.onLoadMore?.();
+    };
+    const getSortedData = ()=>{
+        if (!config.isFrontendSort || !store.sortColumnKey || !store.sortDirection) {
+            return data;
+        }
+        const columnKey = store.sortColumnKey;
+        const direction = store.sortDirection;
+        return [
+            ...data
+        ].sort((a, b)=>{
+            const aValue = a[columnKey];
+            const bValue = b[columnKey];
+            if (aValue === bValue) return 0;
+            if (aValue === null || aValue === undefined) return 1;
+            if (bValue === null || bValue === undefined) return -1;
+            const comparison = aValue < bValue ? -1 : 1;
+            return direction === "asc" ? comparison : -comparison;
+        });
+    };
+    const sortedData = getSortedData();
+    const selectedData = store.selectedRows.map((index)=>sortedData[index]).filter((item)=>item !== undefined);
+    const hasSelection = store.selectedRows.length > 0;
+    if (isLoading) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(theme.container.base, theme.container.border, theme.container.rounded, className),
+            children: /*#__PURE__*/ _jsx(LoadingSpinner, {})
+        });
+    }
+    if (isPending) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(theme.container.base, theme.container.border, theme.container.rounded, theme.container.shadow, className),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.scrollContainer.base, theme.scrollContainer.maxHeight, theme.scrollContainer.scrollbar),
+                children: /*#__PURE__*/ _jsx(SkeletonTable, {
+                    columns: columns,
+                    actionColumns: actionColumns,
+                    rowCount: skeletonRowCount,
+                    defaultColumnWidth: config.defaultColumnWidth
+                })
+            })
+        });
+    }
+    if (data.length === 0) {
+        return /*#__PURE__*/ _jsx("div", {
+            className: cn(theme.container.base, theme.container.border, theme.container.rounded, className),
+            children: /*#__PURE__*/ _jsx(EmptyState, {
+                message: emptyMessage
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.container.base, theme.container.border, theme.container.rounded, theme.container.shadow, className),
+        children: [
+            config.enableSelection && hasSelection && selectionToolbar && /*#__PURE__*/ _jsxs("div", {
+                className: "flex items-center justify-between border-b border-gray-200 bg-blue-50 px-4 py-2 dark:border-gray-700 dark:bg-blue-900/20",
+                children: [
+                    /*#__PURE__*/ _jsxs("span", {
+                        className: "text-sm text-gray-600 dark:text-gray-300",
+                        children: [
+                            store.selectedRows.length,
+                            " item selected"
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx("div", {
+                        className: "flex items-center gap-2",
+                        children: selectionToolbar({
+                            selectedRows: store.selectedRows,
+                            selectedData,
+                            totalCount: sortedData.length,
+                            onClearSelection: store.clearSelection
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                ref: scrollContainerRef,
+                className: cn(theme.scrollContainer.base, theme.scrollContainer.maxHeight, theme.scrollContainer.scrollbar),
+                children: [
+                    /*#__PURE__*/ _jsxs("table", {
+                        ref: tableRef,
+                        className: cn(theme.table.base, theme.table.layout),
+                        children: [
+                            /*#__PURE__*/ _jsx(TableHeader, {
+                                columns: columns,
+                                actionColumns: actionColumns,
+                                columnWidths: store.columnWidths,
+                                sortColumnKey: store.sortColumnKey,
+                                sortDirection: store.sortDirection,
+                                resizingColumn: store.resizingColumn,
+                                defaultColumnWidth: config.defaultColumnWidth,
+                                onSort: handleSort,
+                                onResizeStart: handleResizeStart,
+                                onColumnDoubleClick: handleColumnDoubleClick,
+                                headerMiddleware: headerMiddleware,
+                                enableSelection: config.enableSelection,
+                                totalRows: sortedData.length
+                            }),
+                            /*#__PURE__*/ _jsx("tbody", {
+                                className: theme.body.wrapper.base,
+                                children: sortedData.map((row, rowIndex)=>/*#__PURE__*/ _jsx(TableRow, {
+                                        row: row,
+                                        rowIndex: rowIndex,
+                                        columns: columns,
+                                        actionColumns: actionColumns,
+                                        defaultColumnWidth: config.defaultColumnWidth,
+                                        hasClickAction: config.hasClickAction,
+                                        hasDoubleClickAction: config.hasDoubleClickAction,
+                                        onCellClick: callbacks?.onCellClick,
+                                        onCellDoubleClick: callbacks?.onCellDoubleClick,
+                                        onCellEdit: callbacks?.onCellEdit,
+                                        cellMiddleware: cellMiddleware,
+                                        animationDelay: rowIndex * theme.animation.row.stagger,
+                                        enableSelection: config.enableSelection
+                                    }, keyExtractor(row, rowIndex)))
+                            })
+                        ]
+                    }),
+                    config.enableInfiniteScroll && /*#__PURE__*/ _jsx(InfiniteScrollTrigger, {
+                        isLoading: isLoadingMore,
+                        hasMoreData: hasMoreData,
+                        onTrigger: handleLoadMore,
+                        scrollContainerRef: scrollContainerRef,
+                        autoFetchUntilScroll: config.autoFetchUntilScroll
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/fe/components/DataTable/components/ActionCell.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef } from "react";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+export function ActionCell({ column, row, rowIndex, width }) {
+    const cellRef = useRef(null);
+    const theme = dataTableTheme.body.cell;
+    const params = {
+        row,
+        rowIndex,
+        columnKey: column.key
+    };
+    const renderContent = ()=>{
+        return column.renderer(params);
+    };
+    return /*#__PURE__*/ _jsx("td", {
+        ref: cellRef,
+        style: {
+            width: `${width}px`,
+            minWidth: column.minWidth
+        },
+        className: cn(theme.base, theme.padding, theme.text, theme.color, theme.transition, column.cellClassName),
+        children: renderContent()
+    });
+}

package/dist/fe/components/DataTable/components/DataCell.js

@@ -0,0 +1,76 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import { useRef } from "react";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+gsap.registerPlugin(useGSAP);
+export function DataCell({ column, row, rowIndex, width, isHovered, hasClickAction, hasDoubleClickAction, onClick, onDoubleClick, cellMiddleware }) {
+    const cellRef = useRef(null);
+    const theme = dataTableTheme.body.cell;
+    const { contextSafe } = useGSAP({
+        scope: cellRef
+    });
+    const handleMouseEnter = contextSafe(()=>{
+        if (!cellRef.current || !isHovered) return;
+        gsap.to(cellRef.current, {
+            scale: dataTableTheme.animation.cell.hover.scale,
+            duration: dataTableTheme.animation.cell.duration
+        });
+    });
+    const handleMouseLeave = contextSafe(()=>{
+        if (!cellRef.current) return;
+        gsap.to(cellRef.current, {
+            scale: 1,
+            duration: dataTableTheme.animation.cell.duration
+        });
+    });
+    const getValue = ()=>{
+        const key = column.key;
+        return row[key];
+    };
+    const renderContent = ()=>{
+        const value = getValue();
+        const params = {
+            value: value,
+            row,
+            rowIndex,
+            columnKey: column.key,
+            column
+        };
+        if (column.cellRenderer) {
+            return column.cellRenderer(params);
+        }
+        if (cellMiddleware) {
+            const middlewareResult = cellMiddleware(params);
+            if (middlewareResult !== undefined) {
+                return middlewareResult;
+            }
+        }
+        if (value === null || value === undefined) {
+            return "";
+        }
+        return String(value);
+    };
+    return /*#__PURE__*/ _jsx("td", {
+        ref: cellRef,
+        "data-column-key": String(column.key),
+        style: {
+            width: `${width}px`,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth
+        },
+        className: cn(theme.base, theme.padding, theme.text, theme.color, theme.truncate, theme.transition, (hasClickAction || hasDoubleClickAction) && "cursor-pointer", column.cellClassName),
+        onClick: hasClickAction ? onClick : undefined,
+        onDoubleClick: hasDoubleClickAction ? onDoubleClick : undefined,
+        onKeyDown: hasClickAction || hasDoubleClickAction ? (e)=>{
+            if (e.key === "Enter" && hasClickAction && onClick) {
+                onClick();
+            }
+        } : undefined,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        children: renderContent()
+    });
+}