@neasg/design-system 0.2.1 → 0.4.2

package/dist/use-file-upload.js

@@ -0,0 +1,133 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+export function useFileUpload(options = {}) {
+    const [uploadProgress, setUploadProgress] = useState(new Map());
+    const [isUploading, setIsUploading] = useState(false);
+    const xhrRefs = useRef([]);
+    const updateProgress = useCallback((fileName, updates) => {
+        setUploadProgress((prev) => {
+            var _a;
+            const newMap = new Map(prev);
+            const current = (_a = newMap.get(fileName)) !== null && _a !== void 0 ? _a : {
+                name: fileName,
+                progress: 0,
+                status: "pending",
+            };
+            newMap.set(fileName, { ...current, ...updates });
+            return newMap;
+        });
+    }, []);
+    const uploadSingleFile = useCallback((file, folder) => {
+        var _a;
+        const endpoint = (_a = options.endpoint) !== null && _a !== void 0 ? _a : "/api/upload";
+        const extraFields = options.extraFields;
+        return new Promise((resolve) => {
+            const xhr = new XMLHttpRequest();
+            xhrRefs.current.push(xhr);
+            xhr.upload.onprogress = (event) => {
+                if (event.lengthComputable) {
+                    const progress = Math.round((event.loaded / event.total) * 100);
+                    updateProgress(file.name, { progress, status: "uploading" });
+                }
+            };
+            xhr.onload = () => {
+                var _a;
+                if (xhr.status >= 200 && xhr.status < 300) {
+                    try {
+                        const response = JSON.parse(xhr.responseText);
+                        const uploadedFile = (_a = response.files) === null || _a === void 0 ? void 0 : _a[0];
+                        const result = {
+                            name: file.name,
+                            progress: 100,
+                            status: "complete",
+                            result: uploadedFile,
+                        };
+                        updateProgress(file.name, result);
+                        resolve(result);
+                    }
+                    catch {
+                        const result = {
+                            name: file.name,
+                            progress: 0,
+                            status: "error",
+                            error: "Failed to parse response",
+                        };
+                        updateProgress(file.name, result);
+                        resolve(result);
+                    }
+                }
+                else {
+                    const result = {
+                        name: file.name,
+                        progress: 0,
+                        status: "error",
+                        error: `Upload failed: ${xhr.statusText}`,
+                    };
+                    updateProgress(file.name, result);
+                    resolve(result);
+                }
+            };
+            xhr.onerror = () => {
+                const result = {
+                    name: file.name,
+                    progress: 0,
+                    status: "error",
+                    error: "Network error",
+                };
+                updateProgress(file.name, result);
+                resolve(result);
+            };
+            xhr.onabort = () => {
+                const result = {
+                    name: file.name,
+                    progress: 0,
+                    status: "error",
+                    error: "Upload cancelled",
+                };
+                updateProgress(file.name, result);
+                resolve(result);
+            };
+            const formData = new FormData();
+            formData.append("files", file);
+            formData.append("folder", folder);
+            if (extraFields) {
+                for (const [key, value] of Object.entries(extraFields)) {
+                    formData.append(key, value);
+                }
+            }
+            updateProgress(file.name, { status: "pending", progress: 0 });
+            xhr.open("POST", endpoint);
+            xhr.send(formData);
+        });
+    }, [options.endpoint, options.extraFields, updateProgress]);
+    const uploadFiles = useCallback(async (files, folder) => {
+        var _a, _b, _c;
+        const uploadFolder = (_a = folder !== null && folder !== void 0 ? folder : options.folder) !== null && _a !== void 0 ? _a : "attachments";
+        setIsUploading(true);
+        xhrRefs.current = [];
+        const results = await Promise.all(files.map((file) => uploadSingleFile(file, uploadFolder)));
+        setIsUploading(false);
+        (_b = options.onComplete) === null || _b === void 0 ? void 0 : _b.call(options, results);
+        const errors = results.filter((r) => r.status === "error");
+        if (errors.length > 0) {
+            (_c = options.onError) === null || _c === void 0 ? void 0 : _c.call(options, new Error(`${errors.length} file(s) failed to upload`));
+        }
+        return results;
+    }, [options, uploadSingleFile]);
+    const reset = useCallback(() => {
+        setUploadProgress(new Map());
+        setIsUploading(false);
+    }, []);
+    const cancel = useCallback(() => {
+        xhrRefs.current.forEach((xhr) => xhr.abort());
+        xhrRefs.current = [];
+        setIsUploading(false);
+    }, []);
+    return {
+        uploadProgress,
+        isUploading,
+        uploadFiles,
+        reset,
+        cancel,
+    };
+}

package/dist/use-sticky-sentinel.d.ts

@@ -0,0 +1,16 @@
+import { type RefObject } from "react";
+export interface UseStickySentinelOptions {
+    root?: Element | Document | null;
+    rootMargin?: string;
+    threshold?: number;
+    debounceMs?: number;
+    initialSticky?: boolean;
+    disabled?: boolean;
+    resetOnUnmount?: boolean;
+    onStickyChange?: (isSticky: boolean) => void;
+}
+export interface UseStickySentinelReturn<TElement extends Element> {
+    isSticky: boolean;
+    sentinelRef: RefObject<TElement>;
+}
+export declare function useStickySentinel<TElement extends Element = HTMLDivElement>({ root, rootMargin, threshold, debounceMs, initialSticky, disabled, resetOnUnmount, onStickyChange, }?: UseStickySentinelOptions): UseStickySentinelReturn<TElement>;

package/dist/use-sticky-sentinel.js

@@ -0,0 +1,62 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+export function useStickySentinel({ root = null, rootMargin = "0px", threshold = 0, debounceMs = 0, initialSticky = false, disabled = false, resetOnUnmount = false, onStickyChange, } = {}) {
+    const [isSticky, setIsSticky] = useState(initialSticky);
+    const sentinelRef = useRef(null);
+    const timeoutRef = useRef(null);
+    const lastValueRef = useRef(null);
+    const onStickyChangeRef = useRef(onStickyChange);
+    useEffect(() => {
+        onStickyChangeRef.current = onStickyChange;
+    }, [onStickyChange]);
+    useEffect(() => {
+        if (disabled || typeof IntersectionObserver === "undefined")
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        const clearPendingUpdate = () => {
+            if (timeoutRef.current !== null) {
+                window.clearTimeout(timeoutRef.current);
+                timeoutRef.current = null;
+            }
+        };
+        const commitStickyState = (nextSticky) => {
+            var _a;
+            lastValueRef.current = nextSticky;
+            setIsSticky(nextSticky);
+            (_a = onStickyChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onStickyChangeRef, nextSticky);
+        };
+        const scheduleStickyState = (nextSticky) => {
+            if (nextSticky === lastValueRef.current)
+                return;
+            clearPendingUpdate();
+            if (debounceMs > 0) {
+                timeoutRef.current = window.setTimeout(() => {
+                    timeoutRef.current = null;
+                    commitStickyState(nextSticky);
+                }, debounceMs);
+                return;
+            }
+            commitStickyState(nextSticky);
+        };
+        const observer = new IntersectionObserver(([entry]) => scheduleStickyState(!entry.isIntersecting), {
+            root,
+            rootMargin,
+            threshold,
+        });
+        observer.observe(sentinel);
+        return () => {
+            var _a;
+            clearPendingUpdate();
+            observer.disconnect();
+            if (resetOnUnmount) {
+                (_a = onStickyChangeRef.current) === null || _a === void 0 ? void 0 : _a.call(onStickyChangeRef, false);
+            }
+        };
+    }, [debounceMs, disabled, resetOnUnmount, root, rootMargin, threshold]);
+    return {
+        isSticky,
+        sentinelRef,
+    };
+}

package/dist/use-table-sort.d.ts

@@ -0,0 +1,28 @@
+import type { TableSortDirection, TableSortingProps } from "./table";
+export interface UseTableSortOptions<Field extends string = string> {
+    /** Initial sort field. */
+    defaultField?: Field | null;
+    /** Initial sort direction. */
+    defaultDirection?: TableSortDirection;
+    /**
+     * Toggle cycle when clicking the same column again.
+     * - "asc-desc" (default): asc → desc → asc
+     * - "asc-desc-none": asc → desc → unsorted → asc
+     */
+    cycle?: "asc-desc" | "asc-desc-none";
+    /** Called whenever sort changes — use for server-side query params. */
+    onChange?: (field: Field | null, direction: TableSortDirection) => void;
+}
+export interface UseTableSortReturn<Field extends string = string> {
+    field: Field | null;
+    direction: TableSortDirection;
+    /** Pass directly to `<Table sorting={...} />`. */
+    sorting: TableSortingProps;
+    /** Imperatively set sort (e.g. restore from URL). */
+    setSort: (field: Field | null, direction?: TableSortDirection) => void;
+    /** Reset to the default field/direction. */
+    reset: () => void;
+    /** Client-side helper: returns a sorted copy of rows using the given accessor. */
+    sortRows: <Row>(rows: Row[], accessor: (row: Row, field: Field) => unknown) => Row[];
+}
+export declare function useTableSort<Field extends string = string>({ defaultField, defaultDirection, cycle, onChange, }?: UseTableSortOptions<Field>): UseTableSortReturn<Field>;

package/dist/use-table-sort.js

@@ -0,0 +1,53 @@
+import * as React from "react";
+export function useTableSort({ defaultField = null, defaultDirection = "asc", cycle = "asc-desc", onChange, } = {}) {
+    const [field, setField] = React.useState(defaultField);
+    const [direction, setDirection] = React.useState(defaultDirection);
+    const emit = React.useCallback((nextField, nextDirection) => {
+        setField(nextField);
+        setDirection(nextDirection);
+        onChange === null || onChange === void 0 ? void 0 : onChange(nextField, nextDirection);
+    }, [onChange]);
+    const onSort = React.useCallback((nextField) => {
+        const typed = nextField;
+        if (field !== typed) {
+            emit(typed, "asc");
+            return;
+        }
+        if (direction === "asc") {
+            emit(typed, "desc");
+            return;
+        }
+        if (cycle === "asc-desc-none") {
+            emit(null, "asc");
+            return;
+        }
+        emit(typed, "asc");
+    }, [field, direction, cycle, emit]);
+    const setSort = React.useCallback((nextField, nextDirection = "asc") => {
+        emit(nextField, nextDirection);
+    }, [emit]);
+    const reset = React.useCallback(() => {
+        emit(defaultField, defaultDirection);
+    }, [emit, defaultField, defaultDirection]);
+    const sortRows = React.useCallback((rows, accessor) => {
+        if (!field)
+            return rows;
+        const multiplier = direction === "asc" ? 1 : -1;
+        return [...rows].sort((a, b) => {
+            const av = accessor(a, field);
+            const bv = accessor(b, field);
+            if (av == null && bv == null)
+                return 0;
+            if (av == null)
+                return 1;
+            if (bv == null)
+                return -1;
+            if (typeof av === "number" && typeof bv === "number") {
+                return (av - bv) * multiplier;
+            }
+            return String(av).localeCompare(String(bv)) * multiplier;
+        });
+    }, [field, direction]);
+    const sorting = React.useMemo(() => ({ field, direction, onSort }), [field, direction, onSort]);
+    return { field, direction, sorting, setSort, reset, sortRows };
+}

package/dist/use-viewport-threshold.d.ts

@@ -0,0 +1,12 @@
+import { type RefObject } from "react";
+export interface UseViewportThresholdOptions {
+    collapseAt: number;
+    expandAt?: number;
+    initialPastThreshold?: boolean;
+    disabled?: boolean;
+}
+export interface UseViewportThresholdReturn<TElement extends Element> {
+    isPastThreshold: boolean;
+    sentinelRef: RefObject<TElement>;
+}
+export declare function useViewportThreshold<TElement extends Element = HTMLDivElement>({ collapseAt, expandAt, initialPastThreshold, disabled, }: UseViewportThresholdOptions): UseViewportThresholdReturn<TElement>;

package/dist/use-viewport-threshold.js

@@ -0,0 +1,43 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+export function useViewportThreshold({ collapseAt, expandAt = collapseAt, initialPastThreshold = false, disabled = false, }) {
+    const [isPastThreshold, setIsPastThreshold] = useState(initialPastThreshold);
+    const sentinelRef = useRef(null);
+    useEffect(() => {
+        if (disabled)
+            return;
+        const sentinel = sentinelRef.current;
+        if (!sentinel)
+            return;
+        let frameId = null;
+        const updateThresholdState = () => {
+            frameId = null;
+            const sentinelTop = sentinel.getBoundingClientRect().top;
+            setIsPastThreshold((prev) => {
+                if (prev) {
+                    return sentinelTop <= expandAt;
+                }
+                return sentinelTop <= collapseAt;
+            });
+        };
+        const requestUpdate = () => {
+            if (frameId !== null)
+                return;
+            frameId = window.requestAnimationFrame(updateThresholdState);
+        };
+        requestUpdate();
+        window.addEventListener("scroll", requestUpdate, { passive: true });
+        window.addEventListener("resize", requestUpdate);
+        return () => {
+            if (frameId !== null) {
+                window.cancelAnimationFrame(frameId);
+            }
+            window.removeEventListener("scroll", requestUpdate);
+            window.removeEventListener("resize", requestUpdate);
+        };
+    }, [collapseAt, disabled, expandAt]);
+    return {
+        isPastThreshold,
+        sentinelRef,
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neasg/design-system",
-  "version": "0.2.1",
+  "version": "0.4.2",
   "description": "NEA shared design system primitives, theme tokens, and Storybook docs.",
   "license": "UNLICENSED",
   "type": "module",
@@ -35,27 +35,33 @@
     "@dnd-kit/utilities": "^3.2.2",
     "@govtechsg/sgds-web-component": "^3.8.1",
     "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.13",
     "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
+    "date-fns": "^4.1.0",
     "input-otp": "^1.4.2",
     "libphonenumber-js": "^1.12.41",
     "lucide-react": "^0.555.0",
     "motion": "^12.33.0",
+    "react-day-picker": "^9.14.0",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@fontsource/inter": "^5.2.8",
-    "@storybook/addon-docs": "10.2.19",
-    "@storybook/addon-themes": "10.2.19",
-    "@storybook/react": "10.2.19",
-    "@storybook/react-vite": "10.2.19",
+    "@storybook/addon-docs": "10.3.5",
+    "@storybook/addon-mcp": "^0.5.0",
+    "@storybook/addon-themes": "10.3.5",
+    "@storybook/react-vite": "10.3.5",
     "@testing-library/jest-dom": "^6.9.1",
     "@types/node": "^20.10.5",
     "@types/react": "^18.2.45",
@@ -66,7 +72,7 @@
     "postcss": "^8.4.31",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "storybook": "10.2.19",
+    "storybook": "10.3.5",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3",
     "vitest": "^4.1.0"
@@ -88,6 +94,10 @@
       "types": "./dist/badge.d.ts",
       "import": "./dist/badge.js"
     },
+    "./back-button": {
+      "types": "./dist/back-button.d.ts",
+      "import": "./dist/back-button.js"
+    },
     "./button": {
       "types": "./dist/button.d.ts",
       "import": "./dist/button.js"
@@ -168,6 +178,14 @@
       "types": "./dist/page-header.d.ts",
       "import": "./dist/page-header.js"
     },
+    "./page-section": {
+      "types": "./dist/page-section.d.ts",
+      "import": "./dist/page-section.js"
+    },
+    "./popover": {
+      "types": "./dist/popover.d.ts",
+      "import": "./dist/popover.js"
+    },
     "./pagination": {
       "types": "./dist/pagination.d.ts",
       "import": "./dist/pagination.js"
@@ -176,6 +194,10 @@
       "types": "./dist/search-input.d.ts",
       "import": "./dist/search-input.js"
     },
+    "./section-nav": {
+      "types": "./dist/section-nav.d.ts",
+      "import": "./dist/section-nav.js"
+    },
     "./styles.css": "./dist/styles.css",
     "./table": {
       "types": "./dist/table.d.ts",
@@ -209,6 +231,14 @@
       "types": "./dist/tooltip.d.ts",
       "import": "./dist/tooltip.js"
     },
+    "./separator": {
+      "types": "./dist/separator.d.ts",
+      "import": "./dist/separator.js"
+    },
+    "./collapsible-section": {
+      "types": "./dist/collapsible-section.d.ts",
+      "import": "./dist/collapsible-section.js"
+    },
     "./lib/utils": {
       "types": "./dist/lib/utils.d.ts",
       "import": "./dist/lib/utils.js"