nucleus-core-ts 0.8.6 → 0.8.8

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

@@ -0,0 +1,221 @@
+"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";
+export function EditableCell({ column, row, rowIndex, width, isHovered, onSave, cellMiddleware }) {
+    const cellRef = useRef(null);
+    const inputRef = useRef(null);
+    const iconRef = useRef(null);
+    const store = useDataTableStore();
+    const theme = dataTableTheme;
+    const columnKey = String(column.key);
+    const isEditing = store.editingCell?.row === rowIndex && store.editingCell?.column === columnKey;
+    const editConfig = column.editConfig ?? {
+        type: "text",
+        showIconOnHover: true
+    };
+    const getValue = ()=>{
+        const key = column.key;
+        return row[key];
+    };
+    const value = getValue();
+    const stringValue = value === null || value === undefined ? "" : String(value);
+    useGSAP(()=>{
+        if (!iconRef.current) return;
+        gsap.killTweensOf(iconRef.current);
+        if (isHovered && !isEditing && editConfig.showIconOnHover !== false) {
+            gsap.to(iconRef.current, {
+                opacity: 1,
+                scale: 1,
+                duration: 0.15,
+                ease: "power2.out",
+                overwrite: true
+            });
+        } else {
+            gsap.set(iconRef.current, {
+                opacity: 0,
+                scale: 0.8
+            });
+        }
+    }, [
+        isHovered,
+        isEditing,
+        editConfig.showIconOnHover
+    ]);
+    useGSAP(()=>{
+        if (isEditing && inputRef.current) {
+            gsap.fromTo(inputRef.current, {
+                opacity: 0,
+                scale: 0.95
+            }, {
+                opacity: 1,
+                scale: 1,
+                duration: 0.2,
+                ease: "power2.out"
+            });
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [
+        isEditing
+    ]);
+    const handleStartEdit = ()=>{
+        store.startEditing(rowIndex, columnKey, stringValue);
+    };
+    const handleSave = ()=>{
+        onSave(store.editValue);
+        store.cancelEditing();
+    };
+    const handleCancel = ()=>{
+        store.cancelEditing();
+    };
+    const handleKeyDown = (e)=>{
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            handleSave();
+        } else if (e.key === "Escape") {
+            handleCancel();
+        }
+    };
+    const renderContent = ()=>{
+        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;
+            }
+        }
+        return stringValue;
+    };
+    const renderInput = ()=>{
+        const inputType = editConfig.type ?? "text";
+        if (inputType === "textarea") {
+            return /*#__PURE__*/ _jsx("textarea", {
+                ref: inputRef,
+                value: store.editValue,
+                onChange: (e)=>store.setEditValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                placeholder: editConfig.placeholder,
+                maxLength: editConfig.maxLength,
+                className: cn("w-full resize-none rounded border border-blue-500 bg-white px-2 py-1 text-sm", "focus:outline-none focus:ring-2 focus:ring-blue-500", "dark:border-blue-400 dark:bg-zinc-800 dark:text-white"),
+                rows: 2
+            });
+        }
+        if (inputType === "select" && editConfig.selectOptions) {
+            return /*#__PURE__*/ _jsx("select", {
+                value: store.editValue,
+                onChange: (e)=>store.setEditValue(e.target.value),
+                onKeyDown: handleKeyDown,
+                className: cn("w-full rounded border border-blue-500 bg-white px-2 py-1 text-sm", "focus:outline-none focus:ring-2 focus:ring-blue-500", "dark:border-blue-400 dark:bg-zinc-800 dark:text-white"),
+                children: editConfig.selectOptions.map((option)=>/*#__PURE__*/ _jsx("option", {
+                        value: option.value,
+                        children: option.label
+                    }, option.value))
+            });
+        }
+        return /*#__PURE__*/ _jsx("input", {
+            ref: inputRef,
+            type: inputType === "number" ? "number" : "text",
+            value: store.editValue,
+            onChange: (e)=>store.setEditValue(e.target.value),
+            onKeyDown: handleKeyDown,
+            placeholder: editConfig.placeholder,
+            maxLength: editConfig.maxLength,
+            className: cn("w-full rounded border border-blue-500 bg-white px-2 py-1 text-sm", "focus:outline-none focus:ring-2 focus:ring-blue-500", "dark:border-blue-400 dark:bg-zinc-800 dark:text-white")
+        });
+    };
+    if (isEditing) {
+        return /*#__PURE__*/ _jsx("td", {
+            ref: cellRef,
+            "data-column-key": columnKey,
+            style: {
+                width: `${width}px`,
+                minWidth: column.minWidth,
+                maxWidth: column.maxWidth
+            },
+            className: cn(theme.body.cell.base, "p-1", column.cellClassName),
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "flex flex-col gap-1",
+                children: [
+                    renderInput(),
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex justify-end gap-1",
+                        children: [
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleSave,
+                                className: cn("rounded bg-green-500 px-2 py-0.5 text-xs text-white", "hover:bg-green-600 transition-colors"),
+                                children: "Save"
+                            }),
+                            /*#__PURE__*/ _jsx("button", {
+                                type: "button",
+                                onClick: handleCancel,
+                                className: cn("rounded bg-gray-400 px-2 py-0.5 text-xs text-white", "hover:bg-gray-500 transition-colors dark:bg-zinc-600 dark:hover:bg-zinc-500"),
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("td", {
+        ref: cellRef,
+        "data-column-key": columnKey,
+        style: {
+            width: `${width}px`,
+            minWidth: column.minWidth,
+            maxWidth: column.maxWidth
+        },
+        className: cn(theme.body.cell.base, theme.body.cell.padding, theme.body.cell.text, theme.body.cell.color, theme.body.cell.truncate, theme.body.cell.transition, "group relative", column.cellClassName),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center gap-2",
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    className: "flex-1 truncate",
+                    children: renderContent()
+                }),
+                column.editable && /*#__PURE__*/ _jsx("button", {
+                    ref: iconRef,
+                    type: "button",
+                    onClick: handleStartEdit,
+                    "aria-label": "Edit cell",
+                    className: cn("flex-shrink-0 rounded p-1 opacity-0", "text-gray-500 hover:bg-gray-200 hover:text-gray-700", "dark:text-gray-400 dark:hover:bg-zinc-700 dark:hover:text-gray-200", "transition-colors"),
+                    children: /*#__PURE__*/ _jsxs("svg", {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "14",
+                        height: "14",
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": "true",
+                        children: [
+                            /*#__PURE__*/ _jsx("path", {
+                                d: "M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"
+                            }),
+                            /*#__PURE__*/ _jsx("path", {
+                                d: "m15 5 4 4"
+                            })
+                        ]
+                    })
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+export function EmptyState({ message = "No data available", className }) {
+    const theme = dataTableTheme.empty;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.wrapper, className),
+        children: [
+            /*#__PURE__*/ _jsx("svg", {
+                className: theme.icon,
+                fill: "none",
+                viewBox: "0 0 24 24",
+                stroke: "currentColor",
+                "aria-hidden": "true",
+                children: /*#__PURE__*/ _jsx("path", {
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    strokeWidth: 1.5,
+                    d: "M20 13V6a2 2 0 00-2-2H6a2 2 0 00-2 2v7m16 0v5a2 2 0 01-2 2H6a2 2 0 01-2-2v-5m16 0h-2.586a1 1 0 00-.707.293l-2.414 2.414a1 1 0 01-.707.293h-3.172a1 1 0 01-.707-.293l-2.414-2.414A1 1 0 006.586 13H4"
+                })
+            }),
+            /*#__PURE__*/ _jsx("p", {
+                className: theme.text,
+                children: message
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { ResizeHandle } from "./ResizeHandle";
+import { SortIcon } from "./SortIcon";
+export function HeaderCell({ column, width, sortDirection, isResizing, isSorted, onSort, onResizeStart, onDoubleClick, headerMiddleware }) {
+    const cellRef = useRef(null);
+    const contentRef = useRef(null);
+    const theme = dataTableTheme.header.cell;
+    const handleClick = ()=>{
+        if (column.sortable && onSort) {
+            onSort();
+        }
+    };
+    const renderContent = ()=>{
+        if (column.headerRenderer) {
+            return column.headerRenderer(column);
+        }
+        if (headerMiddleware) {
+            const middlewareResult = headerMiddleware(column, column.key);
+            if (middlewareResult !== undefined) {
+                return middlewareResult;
+            }
+        }
+        return column.header;
+    };
+    return /*#__PURE__*/ _jsxs("th", {
+        ref: cellRef,
+        scope: "col",
+        "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.transition, theme.hover, column.sortable && theme.sortable, isSorted && theme.sorted, column.headerClassName),
+        onClick: handleClick,
+        onDoubleClick: onDoubleClick,
+        "aria-sort": isSorted ? sortDirection === "asc" ? "ascending" : "descending" : undefined,
+        children: [
+            /*#__PURE__*/ _jsxs("div", {
+                ref: contentRef,
+                className: "flex items-center",
+                children: [
+                    /*#__PURE__*/ _jsx("span", {
+                        className: "truncate",
+                        children: renderContent()
+                    }),
+                    column.sortable && /*#__PURE__*/ _jsx(SortIcon, {
+                        direction: sortDirection,
+                        isActive: isSorted
+                    })
+                ]
+            }),
+            column.resizable !== false && /*#__PURE__*/ _jsx(ResizeHandle, {
+                type: "column",
+                isActive: isResizing,
+                onResizeStart: onResizeStart
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,66 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+import { LoadingSpinner } from "./LoadingSpinner";
+export function InfiniteScrollTrigger({ isLoading, hasMoreData, onTrigger, scrollContainerRef, autoFetchUntilScroll = false, className }) {
+    const triggerRef = useRef(null);
+    const observerRef = useRef(null);
+    const hasCheckedOverflow = useRef(false);
+    const checkAndFetchIfNoScroll = ()=>{
+        if (!autoFetchUntilScroll || !scrollContainerRef.current || isLoading || !hasMoreData) return;
+        const container = scrollContainerRef.current;
+        const hasScroll = container.scrollHeight > container.clientHeight;
+        if (!hasScroll) {
+            onTrigger();
+        }
+    };
+    useEffect(()=>{
+        if (!autoFetchUntilScroll || !hasMoreData) return;
+        const timeoutId = setTimeout(()=>{
+            checkAndFetchIfNoScroll();
+        }, 100);
+        return ()=>clearTimeout(timeoutId);
+    }, [
+        autoFetchUntilScroll,
+        hasMoreData,
+        isLoading
+    ]);
+    useEffect(()=>{
+        hasCheckedOverflow.current = false;
+    }, []);
+    const setupObserver = (element)=>{
+        if (observerRef.current) {
+            observerRef.current.disconnect();
+        }
+        if (!element || !hasMoreData) return;
+        observerRef.current = new IntersectionObserver((entries)=>{
+            const entry = entries[0];
+            if (entry?.isIntersecting && !isLoading && hasMoreData) {
+                onTrigger();
+            }
+        }, {
+            threshold: 0.1,
+            rootMargin: "100px"
+        });
+        observerRef.current.observe(element);
+    };
+    const theme = dataTableTheme.infiniteScroll;
+    if (!hasMoreData && !isLoading) {
+        return null;
+    }
+    return /*#__PURE__*/ _jsx("div", {
+        ref: (el)=>{
+            triggerRef.current = el;
+            setupObserver(el);
+        },
+        className: cn(theme.trigger, className),
+        children: isLoading && /*#__PURE__*/ _jsx("div", {
+            className: theme.loader,
+            children: /*#__PURE__*/ _jsx(LoadingSpinner, {
+                text: "Loading more..."
+            })
+        })
+    });
+}

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

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { dataTableTheme } from "../theme";
+import { cn } from "../utils/cn";
+export function LoadingSpinner({ text = "Loading...", className }) {
+    const theme = dataTableTheme.loading;
+    return /*#__PURE__*/ _jsxs("div", {
+        className: cn(theme.wrapper, className),
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                className: cn(theme.spinner.base, theme.spinner.size, theme.spinner.color)
+            }),
+            text && /*#__PURE__*/ _jsx("span", {
+                className: theme.text,
+                children: text
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,41 @@
+"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 ResizeHandle({ type, isActive, onResizeStart, className }) {
+    const handleRef = useRef(null);
+    useGSAP(()=>{
+        if (!handleRef.current) return;
+        if (isActive) {
+            gsap.to(handleRef.current, {
+                scaleY: type === "column" ? 1.1 : 1,
+                scaleX: type === "row" ? 1.1 : 1,
+                duration: dataTableTheme.animation.resize.duration,
+                ease: dataTableTheme.animation.resize.ease
+            });
+        } else {
+            gsap.to(handleRef.current, {
+                scaleY: 1,
+                scaleX: 1,
+                duration: dataTableTheme.animation.resize.duration,
+                ease: dataTableTheme.animation.resize.ease
+            });
+        }
+    }, [
+        isActive,
+        type
+    ]);
+    const theme = type === "column" ? dataTableTheme.header.resizeHandle : dataTableTheme.body.resizeHandle;
+    return /*#__PURE__*/ _jsx("button", {
+        ref: handleRef,
+        type: "button",
+        "aria-label": `Resize ${type}`,
+        className: cn(theme.base, isActive ? theme.active : theme.idle, theme.hitArea, "appearance-none border-none bg-transparent p-0", className),
+        onMouseDown: onResizeStart,
+        onTouchStart: onResizeStart
+    });
+}

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

@@ -0,0 +1,105 @@
+"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";
+export function SelectionCell({ rowIndex, isHovered, isHeader = false, totalRows = 0 }) {
+    const cellRef = useRef(null);
+    const numberRef = useRef(null);
+    const checkboxRef = useRef(null);
+    const store = useDataTableStore();
+    const theme = dataTableTheme;
+    const isSelected = isHeader ? false : store.selectedRows.includes(rowIndex);
+    const allSelected = isHeader && totalRows > 0 && store.selectedRows.length === totalRows;
+    const someSelected = isHeader && store.selectedRows.length > 0 && store.selectedRows.length < totalRows;
+    useGSAP(()=>{
+        if (!numberRef.current || !checkboxRef.current) return;
+        gsap.killTweensOf([
+            numberRef.current,
+            checkboxRef.current
+        ]);
+        if (isHovered || isSelected) {
+            gsap.set(numberRef.current, {
+                opacity: 0,
+                display: "none"
+            });
+            gsap.set(checkboxRef.current, {
+                opacity: 1,
+                display: "flex"
+            });
+        } else {
+            gsap.set(numberRef.current, {
+                opacity: 1,
+                display: "flex"
+            });
+            gsap.set(checkboxRef.current, {
+                opacity: 0,
+                display: "none"
+            });
+        }
+    }, [
+        isHovered,
+        isSelected
+    ]);
+    const handleToggle = (e)=>{
+        e.stopPropagation();
+        if (isHeader) {
+            if (allSelected || someSelected) {
+                store.clearSelection();
+            } else {
+                store.selectAllRows(totalRows);
+            }
+        } else {
+            store.toggleRowSelection(rowIndex);
+        }
+    };
+    if (isHeader) {
+        return /*#__PURE__*/ _jsx("th", {
+            ref: cellRef,
+            scope: "col",
+            className: cn(theme.header.cell.base, theme.header.cell.padding, theme.header.cell.text, theme.header.cell.color, "w-12 text-center"),
+            children: /*#__PURE__*/ _jsx("div", {
+                className: "flex items-center justify-center",
+                children: /*#__PURE__*/ _jsx("input", {
+                    type: "checkbox",
+                    checked: allSelected,
+                    ref: checkboxRef,
+                    onChange: ()=>{},
+                    onClick: handleToggle,
+                    className: cn("h-4 w-4 cursor-pointer rounded border-gray-300", "text-blue-600 focus:ring-blue-500", "dark:border-gray-600 dark:bg-zinc-700"),
+                    style: {
+                        opacity: someSelected ? 0.5 : 1
+                    }
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx("td", {
+        ref: cellRef,
+        className: cn(theme.body.cell.base, theme.body.cell.padding, theme.body.cell.text, theme.body.cell.color, "w-12 text-center"),
+        children: /*#__PURE__*/ _jsxs("div", {
+            className: "flex items-center justify-center relative",
+            children: [
+                /*#__PURE__*/ _jsx("span", {
+                    ref: numberRef,
+                    className: "text-gray-400 dark:text-gray-500 text-xs font-medium",
+                    children: rowIndex + 1
+                }),
+                /*#__PURE__*/ _jsx("input", {
+                    ref: checkboxRef,
+                    type: "checkbox",
+                    checked: isSelected,
+                    onChange: ()=>{},
+                    onClick: handleToggle,
+                    className: cn("absolute h-4 w-4 cursor-pointer rounded border-gray-300", "text-blue-600 focus:ring-blue-500", "dark:border-gray-600 dark:bg-zinc-700"),
+                    style: {
+                        display: "none"
+                    }
+                })
+            ]
+        })
+    });
+}

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

@@ -0,0 +1,56 @@
+"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";
+export function SkeletonRow({ columnCount, rowIndex, columnWidths, hasActionColumn }) {
+    const rowRef = useRef(null);
+    const theme = dataTableTheme;
+    useGSAP(()=>{
+        if (!rowRef.current) return;
+        gsap.fromTo(rowRef.current, {
+            opacity: 0,
+            y: 10
+        }, {
+            opacity: 1,
+            y: 0,
+            duration: 0.3,
+            delay: rowIndex * 0.05,
+            ease: "power2.out"
+        });
+    }, [
+        rowIndex
+    ]);
+    const totalColumns = hasActionColumn ? columnCount + 1 : columnCount;
+    return /*#__PURE__*/ _jsx("tr", {
+        ref: rowRef,
+        className: cn(theme.body.row.base, theme.body.row.transition, rowIndex % 2 === 0 ? theme.body.row.zebra.even : theme.body.row.zebra.odd),
+        children: Array.from({
+            length: totalColumns
+        }).map((_, colIndex)=>/*#__PURE__*/ _jsx("td", {
+                style: {
+                    width: columnWidths[colIndex] ?? 150
+                },
+                className: cn(theme.body.cell.base, theme.body.cell.padding),
+                children: /*#__PURE__*/ _jsx(SkeletonCell, {})
+            }, colIndex))
+    });
+}
+function SkeletonCell() {
+    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-3/4 rounded bg-gradient-to-r from-gray-200 via-gray-300 to-gray-200 bg-[length:200%_100%] dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700"
+    });
+}