nucleus-core-ts 0.8.7 → 0.8.9

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

@@ -0,0 +1,83 @@
+"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 { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { SkeletonRow } from "./SkeletonRow";
+export function SkeletonTable({ columns, actionColumns, rowCount = 5, defaultColumnWidth = 150 }) {
+    const tableRef = useRef(null);
+    const theme = dataTableTheme;
+    useGSAP(()=>{
+        if (!tableRef.current) return;
+        gsap.fromTo(tableRef.current, {
+            opacity: 0
+        }, {
+            opacity: 1,
+            duration: 0.3,
+            ease: "power2.out"
+        });
+    }, []);
+    const columnWidths = columns.map((col)=>col.width ?? defaultColumnWidth);
+    if (actionColumns?.length) {
+        actionColumns.forEach((col)=>{
+            columnWidths.push(col.width ?? defaultColumnWidth);
+        });
+    }
+    return /*#__PURE__*/ _jsxs("table", {
+        ref: tableRef,
+        className: cn(theme.table.base, theme.table.layout),
+        children: [
+            /*#__PURE__*/ _jsx("thead", {
+                className: theme.header.wrapper.base,
+                children: /*#__PURE__*/ _jsxs("tr", {
+                    className: theme.header.row.base,
+                    children: [
+                        columns.map((column, colIndex)=>/*#__PURE__*/ _jsx("th", {
+                                style: {
+                                    width: columnWidths[colIndex]
+                                },
+                                className: cn(theme.header.cell.base, theme.header.cell.padding, theme.header.cell.text, theme.header.cell.color),
+                                children: /*#__PURE__*/ _jsx(SkeletonHeaderCell, {})
+                            }, String(column.key))),
+                        actionColumns?.map((column)=>/*#__PURE__*/ _jsx("th", {
+                                style: {
+                                    width: column.width ?? defaultColumnWidth
+                                },
+                                className: cn(theme.header.cell.base, theme.header.cell.padding, theme.header.cell.text, theme.header.cell.color),
+                                children: /*#__PURE__*/ _jsx(SkeletonHeaderCell, {})
+                            }, column.key))
+                    ]
+                })
+            }),
+            /*#__PURE__*/ _jsx("tbody", {
+                className: theme.body.wrapper.base,
+                children: Array.from({
+                    length: rowCount
+                }).map((_, rowIndex)=>/*#__PURE__*/ _jsx(SkeletonRow, {
+                        columnCount: columns.length,
+                        rowIndex: rowIndex,
+                        columnWidths: columnWidths,
+                        hasActionColumn: Boolean(actionColumns?.length)
+                    }, rowIndex))
+            })
+        ]
+    });
+}
+function SkeletonHeaderCell() {
+    const cellRef = useRef(null);
+    useGSAP(()=>{
+        if (!cellRef.current) return;
+        gsap.to(cellRef.current, {
+            backgroundPosition: "200% 0",
+            duration: 1.5,
+            repeat: -1,
+            ease: "none"
+        });
+    }, []);
+    return /*#__PURE__*/ _jsx("div", {
+        ref: cellRef,
+        className: "h-4 w-1/2 rounded bg-gradient-to-r from-gray-300 via-gray-400 to-gray-300 bg-[length:200%_100%] dark:from-zinc-600 dark:via-zinc-500 dark:to-zinc-600"
+    });
+}

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

@@ -0,0 +1,39 @@
+"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 SortIcon({ direction, isActive, className }) {
+    const iconRef = useRef(null);
+    useGSAP(()=>{
+        if (!iconRef.current) return;
+        const rotation = isActive && direction === "desc" ? 180 : 0;
+        gsap.to(iconRef.current, {
+            rotation,
+            opacity: isActive ? 1 : 0.4,
+            duration: dataTableTheme.animation.sort.duration,
+            ease: dataTableTheme.animation.sort.ease
+        });
+    }, [
+        direction,
+        isActive
+    ]);
+    const theme = dataTableTheme.header.sortIcon;
+    return /*#__PURE__*/ _jsx("svg", {
+        ref: iconRef,
+        className: cn(theme.base, isActive ? theme.active : theme.inactive, className),
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: /*#__PURE__*/ _jsx("path", {
+            d: "M6 2L10 7H2L6 2Z",
+            fill: "currentColor"
+        })
+    });
+}

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

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { HeaderCell } from "./HeaderCell";
+import { SelectionCell } from "./SelectionCell";
+export function TableHeader({ columns, actionColumns, columnWidths, sortColumnKey, sortDirection, resizingColumn, defaultColumnWidth, onSort, onResizeStart, onColumnDoubleClick, headerMiddleware, enableSelection, totalRows = 0 }) {
+    const theme = dataTableTheme.header;
+    const getColumnWidth = (key, defaultWidth)=>{
+        return columnWidths[key] ?? defaultWidth ?? defaultColumnWidth;
+    };
+    return /*#__PURE__*/ _jsx("thead", {
+        className: cn(theme.wrapper.base, theme.wrapper.background),
+        children: /*#__PURE__*/ _jsxs("tr", {
+            className: cn(theme.row.base, theme.row.border),
+            children: [
+                enableSelection && /*#__PURE__*/ _jsx(SelectionCell, {
+                    rowIndex: -1,
+                    isHovered: false,
+                    isHeader: true,
+                    totalRows: totalRows
+                }),
+                columns.map((column)=>{
+                    const columnKey = String(column.key);
+                    return /*#__PURE__*/ _jsx(HeaderCell, {
+                        column: column,
+                        width: getColumnWidth(columnKey, column.width),
+                        sortDirection: sortColumnKey === column.key ? sortDirection : null,
+                        isResizing: resizingColumn === columnKey,
+                        isSorted: sortColumnKey === column.key,
+                        onSort: ()=>onSort(column.key),
+                        onResizeStart: (e)=>onResizeStart(columnKey, e),
+                        onDoubleClick: ()=>onColumnDoubleClick(columnKey),
+                        headerMiddleware: headerMiddleware
+                    }, columnKey);
+                }),
+                actionColumns?.map((column)=>/*#__PURE__*/ _jsx("th", {
+                        scope: "col",
+                        style: {
+                            width: `${getColumnWidth(column.key, column.width)}px`,
+                            minWidth: column.minWidth
+                        },
+                        className: cn(theme.cell.base, theme.cell.padding, theme.cell.text, theme.cell.color, column.headerClassName),
+                        children: column.header
+                    }, column.key))
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,118 @@
+"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 { useDataTableStore } from "../store";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { ActionCell } from "./ActionCell";
+import { DataCell } from "./DataCell";
+import { EditableCell } from "./EditableCell";
+import { SelectionCell } from "./SelectionCell";
+gsap.registerPlugin(useGSAP);
+export function TableRow({ row, rowIndex, columns, actionColumns, defaultColumnWidth, hasClickAction, hasDoubleClickAction, onCellClick, onCellDoubleClick, onCellEdit, cellMiddleware, animationDelay = 0, enableSelection }) {
+    const rowRef = useRef(null);
+    const store = useDataTableStore();
+    const theme = dataTableTheme.body.row;
+    const animConfig = dataTableTheme.animation.row;
+    const isHovered = store.hoveredRow === rowIndex;
+    const columnWidths = store.columnWidths;
+    const hasAnimated = useRef(false);
+    useGSAP(()=>{
+        if (!rowRef.current || hasAnimated.current) return;
+        gsap.fromTo(rowRef.current, {
+            opacity: animConfig.enter.opacity,
+            y: animConfig.enter.y
+        }, {
+            opacity: animConfig.visible.opacity,
+            y: animConfig.visible.y,
+            duration: animConfig.duration,
+            delay: animationDelay,
+            ease: "power2.out"
+        });
+        hasAnimated.current = true;
+    }, []);
+    const getColumnWidth = (key, defaultWidth)=>{
+        return columnWidths[key] ?? defaultWidth ?? defaultColumnWidth;
+    };
+    const isEven = rowIndex % 2 === 0;
+    const handleCellClick = (columnKey, isActionColumn)=>{
+        if (!onCellClick) return;
+        const value = isActionColumn ? null : row[columnKey];
+        onCellClick({
+            value,
+            row,
+            rowIndex,
+            columnKey,
+            isActionColumn
+        });
+    };
+    const handleCellDoubleClick = (columnKey, isActionColumn)=>{
+        if (!onCellDoubleClick) return;
+        const value = isActionColumn ? null : row[columnKey];
+        onCellDoubleClick({
+            value,
+            row,
+            rowIndex,
+            columnKey,
+            isActionColumn
+        });
+    };
+    return /*#__PURE__*/ _jsxs("tr", {
+        ref: rowRef,
+        className: cn(theme.base, theme.border, theme.transition, theme.hover, isEven ? theme.zebra.even : theme.zebra.odd),
+        onMouseEnter: ()=>store.setHoveredRow(rowIndex),
+        onMouseLeave: ()=>store.setHoveredRow(null),
+        children: [
+            enableSelection && /*#__PURE__*/ _jsx(SelectionCell, {
+                rowIndex: rowIndex,
+                isHovered: isHovered
+            }),
+            columns.map((column)=>{
+                const columnKey = String(column.key);
+                const columnWidth = getColumnWidth(columnKey, column.width);
+                if (column.editable) {
+                    return /*#__PURE__*/ _jsx(EditableCell, {
+                        column: column,
+                        row: row,
+                        rowIndex: rowIndex,
+                        width: columnWidth,
+                        isHovered: isHovered,
+                        onSave: (newValue)=>{
+                            if (onCellEdit) {
+                                const oldValue = row[column.key];
+                                onCellEdit({
+                                    row,
+                                    rowIndex,
+                                    columnKey: column.key,
+                                    oldValue,
+                                    newValue
+                                });
+                            }
+                        },
+                        cellMiddleware: cellMiddleware
+                    }, columnKey);
+                }
+                return /*#__PURE__*/ _jsx(DataCell, {
+                    column: column,
+                    row: row,
+                    rowIndex: rowIndex,
+                    width: columnWidth,
+                    isHovered: isHovered,
+                    hasClickAction: hasClickAction,
+                    hasDoubleClickAction: hasDoubleClickAction,
+                    onClick: ()=>handleCellClick(column.key, false),
+                    onDoubleClick: ()=>handleCellDoubleClick(column.key, false),
+                    cellMiddleware: cellMiddleware
+                }, columnKey);
+            }),
+            actionColumns?.map((column)=>/*#__PURE__*/ _jsx(ActionCell, {
+                    column: column,
+                    row: row,
+                    rowIndex: rowIndex,
+                    width: getColumnWidth(column.key, column.width)
+                }, column.key))
+        ]
+    });
+}

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

@@ -0,0 +1,14 @@
+export { ActionCell } from "./ActionCell";
+export { DataCell } from "./DataCell";
+export { EditableCell } from "./EditableCell";
+export { EmptyState } from "./EmptyState";
+export { HeaderCell } from "./HeaderCell";
+export { InfiniteScrollTrigger } from "./InfiniteScrollTrigger";
+export { LoadingSpinner } from "./LoadingSpinner";
+export { ResizeHandle } from "./ResizeHandle";
+export { SelectionCell } from "./SelectionCell";
+export { SkeletonRow } from "./SkeletonRow";
+export { SkeletonTable } from "./SkeletonTable";
+export { SortIcon } from "./SortIcon";
+export { TableHeader } from "./TableHeader";
+export { TableRow } from "./TableRow";

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

@@ -0,0 +1,2 @@
+export { useAutoFitColumn } from "./useAutoFitColumn";
+export { useResizeColumn } from "./useResizeColumn";

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

@@ -0,0 +1,23 @@
+"use client";
+export function useAutoFitColumn({ onAutoFit }) {
+    const autoFit = (columnKey, tableRef)=>{
+        if (!tableRef) return;
+        const cells = tableRef.querySelectorAll(`td[data-column="${columnKey}"], th[data-column="${columnKey}"]`);
+        let maxWidth = 0;
+        cells.forEach((cell)=>{
+            const content = cell.firstElementChild;
+            if (content) {
+                const contentWidth = content.scrollWidth;
+                maxWidth = Math.max(maxWidth, contentWidth);
+            } else {
+                maxWidth = Math.max(maxWidth, cell.scrollWidth);
+            }
+        });
+        if (maxWidth > 0) {
+            onAutoFit(columnKey, maxWidth);
+        }
+    };
+    return {
+        autoFit
+    };
+}

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

@@ -0,0 +1,122 @@
+"use client";
+import { useRef } from "react";
+export function useResizeColumn({ minWidth, tableRef, onResizeStart, onResizeEnd }) {
+    const startXRef = useRef(0);
+    const startWidthRef = useRef(0);
+    const columnKeyRef = useRef("");
+    const currentWidthRef = useRef(0);
+    const justResizedRef = useRef(false);
+    const getHeaderCell = (columnKey)=>{
+        if (!tableRef.current) return null;
+        return tableRef.current.querySelector(`th[data-column-key="${columnKey}"]`);
+    };
+    const getColumnElements = (columnKey)=>{
+        if (!tableRef.current) return [];
+        const headerCell = getHeaderCell(columnKey);
+        const dataCells = tableRef.current.querySelectorAll(`td[data-column-key="${columnKey}"]`);
+        const elements = [];
+        if (headerCell) elements.push(headerCell);
+        for (const cell of Array.from(dataCells)){
+            elements.push(cell);
+        }
+        return elements;
+    };
+    const freezeAllColumnWidths = (excludeLastColumn)=>{
+        if (!tableRef.current) return;
+        const allHeaders = Array.from(tableRef.current.querySelectorAll("th[data-column-key]"));
+        const lastIndex = allHeaders.length - 1;
+        for(let i = 0; i < allHeaders.length; i++){
+            const header = allHeaders[i];
+            if (!header) continue;
+            const columnKey = header.getAttribute("data-column-key");
+            if (!columnKey) continue;
+            const isLast = i === lastIndex;
+            const width = header.offsetWidth;
+            const elements = getColumnElements(columnKey);
+            for (const el of elements){
+                if (excludeLastColumn && isLast) {
+                    el.style.width = "";
+                } else {
+                    el.style.width = `${width}px`;
+                    el.style.minWidth = `${width}px`;
+                    el.style.maxWidth = `${width}px`;
+                }
+            }
+        }
+    };
+    const updateColumnWidth = (width)=>{
+        const elements = getColumnElements(columnKeyRef.current);
+        for (const el of elements){
+            el.style.width = `${width}px`;
+            el.style.minWidth = `${width}px`;
+            el.style.maxWidth = `${width}px`;
+        }
+        currentWidthRef.current = width;
+    };
+    const handleMouseMove = (e)=>{
+        e.preventDefault();
+        const diff = e.clientX - startXRef.current;
+        const newWidth = Math.max(minWidth, startWidthRef.current + diff);
+        updateColumnWidth(newWidth);
+    };
+    const handleTouchMove = (e)=>{
+        e.preventDefault();
+        const touch = e.touches[0];
+        if (!touch) return;
+        const diff = touch.clientX - startXRef.current;
+        const newWidth = Math.max(minWidth, startWidthRef.current + diff);
+        updateColumnWidth(newWidth);
+    };
+    const cleanup = ()=>{
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+        justResizedRef.current = true;
+        setTimeout(()=>{
+            justResizedRef.current = false;
+        }, 100);
+    };
+    const isJustResized = ()=>justResizedRef.current;
+    const handleMouseUp = ()=>{
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
+        cleanup();
+        onResizeEnd(columnKeyRef.current, currentWidthRef.current);
+    };
+    const handleTouchEnd = ()=>{
+        document.removeEventListener("touchmove", handleTouchMove);
+        document.removeEventListener("touchend", handleTouchEnd);
+        cleanup();
+        onResizeEnd(columnKeyRef.current, currentWidthRef.current);
+    };
+    const startResize = (columnKey, e)=>{
+        e.preventDefault();
+        e.stopPropagation();
+        const headerCell = getHeaderCell(columnKey);
+        if (!headerCell) return;
+        const actualWidth = headerCell.offsetWidth;
+        columnKeyRef.current = columnKey;
+        startWidthRef.current = actualWidth;
+        currentWidthRef.current = actualWidth;
+        freezeAllColumnWidths(true);
+        onResizeStart(columnKey);
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+        if ("touches" in e) {
+            const touch = e.touches[0];
+            if (!touch) return;
+            startXRef.current = touch.clientX;
+            document.addEventListener("touchmove", handleTouchMove, {
+                passive: false
+            });
+            document.addEventListener("touchend", handleTouchEnd);
+        } else {
+            startXRef.current = e.clientX;
+            document.addEventListener("mousemove", handleMouseMove);
+            document.addEventListener("mouseup", handleMouseUp);
+        }
+    };
+    return {
+        startResize,
+        isJustResized
+    };
+}

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

@@ -0,0 +1,3 @@
+export { DataTable } from "./DataTable";
+export { useDataTableStore } from "./store";
+export { dataTableTheme, extendTheme } from "./theme";

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

@@ -0,0 +1,97 @@
+import { batch, createStore } from "h-state";
+const initialState = {
+    sortColumnKey: null,
+    sortDirection: null,
+    columnWidths: {},
+    rowHeights: {},
+    resizingColumn: null,
+    resizingRow: null,
+    hoveredRow: null,
+    hoveredCell: null,
+    editingCell: null,
+    editValue: "",
+    isLoadingMore: false,
+    selectedRows: []
+};
+const { useStore } = createStore(initialState, {
+    setSortState: (store)=>(columnKey, direction)=>{
+            batch(()=>{
+                store.sortColumnKey = columnKey;
+                store.sortDirection = direction;
+            });
+        },
+    setColumnWidth: (store)=>(columnKey, width)=>{
+            store.columnWidths[columnKey] = width;
+        },
+    setRowHeight: (store)=>(rowIndex, height)=>{
+            store.rowHeights[rowIndex] = height;
+        },
+    setResizingColumn: (store)=>(columnKey)=>{
+            store.resizingColumn = columnKey;
+        },
+    setResizingRow: (store)=>(rowIndex)=>{
+            store.resizingRow = rowIndex;
+        },
+    setHoveredRow: (store)=>(rowIndex)=>{
+            store.hoveredRow = rowIndex;
+        },
+    setHoveredCell: (store)=>(cell)=>{
+            store.hoveredCell = cell;
+        },
+    setEditingCell: (store)=>(cell)=>{
+            store.editingCell = cell;
+        },
+    setEditValue: (store)=>(value)=>{
+            store.editValue = value;
+        },
+    startEditing: (store)=>(row, column, initialValue)=>{
+            batch(()=>{
+                store.editingCell = {
+                    row,
+                    column
+                };
+                store.editValue = initialValue;
+            });
+        },
+    cancelEditing: (store)=>()=>{
+            batch(()=>{
+                store.editingCell = null;
+                store.editValue = "";
+            });
+        },
+    setIsLoadingMore: (store)=>(isLoading)=>{
+            store.isLoadingMore = isLoading;
+        },
+    resetWidths: (store)=>()=>{
+            batch(()=>{
+                store.columnWidths = {};
+                store.rowHeights = {};
+            });
+        },
+    autoFitColumn: (store)=>(columnKey, contentWidth)=>{
+            store.columnWidths[columnKey] = Math.max(contentWidth + 32, 60);
+        },
+    toggleRowSelection: (store)=>(rowIndex)=>{
+            const index = store.selectedRows.indexOf(rowIndex);
+            if (index === -1) {
+                store.selectedRows = [
+                    ...store.selectedRows,
+                    rowIndex
+                ];
+            } else {
+                store.selectedRows = store.selectedRows.filter((i)=>i !== rowIndex);
+            }
+        },
+    selectAllRows: (store)=>(rowCount)=>{
+            store.selectedRows = Array.from({
+                length: rowCount
+            }, (_, i)=>i);
+        },
+    clearSelection: (store)=>()=>{
+            store.selectedRows = [];
+        },
+    isRowSelected: (store)=>(rowIndex)=>{
+            return store.selectedRows.includes(rowIndex);
+        }
+});
+export { useStore as useDataTableStore };