@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/hooks/useSorting.js

@@ -0,0 +1,118 @@
+'use client';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+function defaultCompare(a, b, dir, nulls) {
+    const aNull = a == null;
+    const bNull = b == null;
+    if (aNull || bNull) {
+        if (aNull && bNull)
+            return 0;
+        const order = nulls === 'first' ? -1 : 1;
+        return aNull ? order : -order;
+    }
+    // Dates
+    if (a instanceof Date && b instanceof Date) {
+        const diff = a.getTime() - b.getTime();
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Numbers
+    if (typeof a === 'number' && typeof b === 'number') {
+        const diff = a - b;
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Booleans
+    if (typeof a === 'boolean' && typeof b === 'boolean') {
+        const diff = Number(a) - Number(b);
+        return dir === 'asc' ? diff : -diff;
+    }
+    // Strings (locale-aware-ish)
+    const aStr = String(a);
+    const bStr = String(b);
+    const diff = aStr.localeCompare(bStr, undefined, { numeric: true, sensitivity: 'base' });
+    return dir === 'asc' ? diff : -diff;
+}
+// Stable sort (decorate-sort-undecorate)
+function stableSort(arr, cmp) {
+    return arr
+        .map((item, idx) => ({ item, idx }))
+        .sort((x, y) => {
+        const c = cmp(x.item, y.item);
+        return c !== 0 ? c : x.idx - y.idx;
+    })
+        .map(x => x.item);
+}
+export function useSorting({ data = [], sortBy = null, sortDirection = 'asc', state, onStateChange, columnComparators = {}, nulls = 'last', allowUnsort = true, resetOnDataChange = false, }) {
+    const isControlled = state != null;
+    const [uncontrolled, setUncontrolled] = useState(() => ({
+        sortBy,
+        sortDirection,
+    }));
+    const sortState = (isControlled ? state : uncontrolled);
+    const setSort = useCallback((next) => {
+        var _a, _b;
+        const normalized = {
+            sortBy: (_a = next.sortBy) !== null && _a !== void 0 ? _a : null,
+            sortDirection: (_b = next.sortDirection) !== null && _b !== void 0 ? _b : null,
+        };
+        if (isControlled)
+            onStateChange === null || onStateChange === void 0 ? void 0 : onStateChange(normalized);
+        else
+            setUncontrolled(normalized);
+    }, [isControlled, onStateChange]);
+    const clearSort = useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
+    const onSortChange = useCallback((e) => {
+        var _a, _b;
+        const nextSortBy = ((_a = e.sortBy) !== null && _a !== void 0 ? _a : null);
+        setSort(sortState);
+        const current = sortState;
+        if (nextSortBy == null) {
+            return clearSort();
+        }
+        // Same column toggling
+        if (current.sortBy === nextSortBy) {
+            const nextDir = current.sortDirection === 'asc' ? 'desc' : allowUnsort ? null : 'asc';
+            return setSort({ sortBy: nextSortBy, sortDirection: nextDir });
+        }
+        // New column: default to provided direction or asc
+        return setSort({
+            sortBy: nextSortBy,
+            sortDirection: (_b = e.sortDirection) !== null && _b !== void 0 ? _b : 'asc',
+        });
+    }, [allowUnsort, clearSort, setSort, sortState]);
+    // Optional reset on data ref change
+    const didInitRef = useRef(false);
+    useEffect(() => {
+        if (!resetOnDataChange)
+            return;
+        if (!didInitRef.current) {
+            didInitRef.current = true;
+            return;
+        }
+        clearSort();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetOnDataChange, data]);
+    const sortedData = useMemo(() => {
+        const { sortBy: sb, sortDirection: dir } = sortState;
+        if (!sb || !dir)
+            return data;
+        const custom = columnComparators[sb];
+        const cmp = (a, b) => {
+            if (custom)
+                return custom(a, b, dir);
+            const av = a[sb];
+            const bv = b[sb];
+            return defaultCompare(av, bv, dir, nulls);
+        };
+        // Don’t mutate input
+        return stableSort(data, cmp);
+    }, [data, sortState, columnComparators, nulls]);
+    // Helper: support functional updates in uncontrolled mode (optional nicety)
+    const setSortRef = useRef(setSort);
+    setSortRef.current = setSort;
+    return {
+        sortedData,
+        sortState,
+        onSortChange,
+        setSort,
+        clearSort,
+    };
+}

package/dist/hooks/useTableData.d.ts

@@ -0,0 +1,40 @@
+import type { PageChangeEvent } from '../components/pagination/Pagination';
+import { type PaginationState } from './usePagination';
+import { type SortDirection, type SortState, type ColumnComparators } from './useSorting';
+export interface UseTableDataProps<T> {
+    data?: readonly T[];
+    pagination?: {
+        skip?: number;
+        take?: number;
+        state?: PaginationState;
+        onStateChange?: (next: PaginationState) => void;
+    };
+    sorting?: {
+        sortBy?: keyof T | null;
+        direction?: SortDirection;
+        state?: SortState<T>;
+        onStateChange?: (next: SortState<T>) => void;
+        columnComparators?: ColumnComparators<T>;
+        nulls?: 'first' | 'last';
+        allowUnsort?: boolean;
+    };
+    /**
+     * Resets to page 1 whenever sorting changes (typical UX).
+     */
+    resetPageOnSortChange?: boolean;
+}
+export interface UseTableDataResult<T> {
+    rows: T[];
+    totalCount: number;
+    pagination: {
+        state: PaginationState;
+        onPageChange: (e: PageChangeEvent) => void;
+        resetPage: () => void;
+    };
+    sorting: {
+        state: SortState<T>;
+        onSortChange: (next: Partial<SortState<T>>) => void;
+        clearSort: () => void;
+    };
+}
+export declare function useTableData<T extends Record<string, any>>({ data, pagination, sorting, resetPageOnSortChange, }: UseTableDataProps<T>): UseTableDataResult<T>;

package/dist/hooks/useTableData.js

@@ -0,0 +1,45 @@
+'use client';
+import { useEffect, useMemo } from 'react';
+import { usePagination } from './usePagination';
+import { useSorting, } from './useSorting';
+export function useTableData({ data = [], pagination, sorting, resetPageOnSortChange = true, }) {
+    var _a, _b, _c, _d, _e, _f;
+    const s = useSorting({
+        data,
+        sortBy: (_a = sorting === null || sorting === void 0 ? void 0 : sorting.sortBy) !== null && _a !== void 0 ? _a : null,
+        sortDirection: (_b = sorting === null || sorting === void 0 ? void 0 : sorting.direction) !== null && _b !== void 0 ? _b : null,
+        state: sorting === null || sorting === void 0 ? void 0 : sorting.state,
+        onStateChange: sorting === null || sorting === void 0 ? void 0 : sorting.onStateChange,
+        columnComparators: sorting === null || sorting === void 0 ? void 0 : sorting.columnComparators,
+        nulls: (_c = sorting === null || sorting === void 0 ? void 0 : sorting.nulls) !== null && _c !== void 0 ? _c : 'last',
+        allowUnsort: (_d = sorting === null || sorting === void 0 ? void 0 : sorting.allowUnsort) !== null && _d !== void 0 ? _d : true,
+    });
+    const p = usePagination({
+        data: s.sortedData,
+        skip: (_e = pagination === null || pagination === void 0 ? void 0 : pagination.skip) !== null && _e !== void 0 ? _e : 0,
+        take: (_f = pagination === null || pagination === void 0 ? void 0 : pagination.take) !== null && _f !== void 0 ? _f : 10,
+        state: pagination === null || pagination === void 0 ? void 0 : pagination.state,
+        onStateChange: pagination === null || pagination === void 0 ? void 0 : pagination.onStateChange,
+    });
+    useEffect(() => {
+        if (!resetPageOnSortChange)
+            return;
+        p.resetPage();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
+    const rows = useMemo(() => p.paginatedData, [p.paginatedData]);
+    return {
+        rows,
+        totalCount: s.sortedData.length,
+        pagination: {
+            state: p.paginationState,
+            onPageChange: p.onPageChange,
+            resetPage: p.resetPage,
+        },
+        sorting: {
+            state: s.sortState,
+            onSortChange: s.onSortChange,
+            clearSort: s.clearSort,
+        },
+    };
+}

package/dist/hooks/useTableSelection.d.ts

@@ -0,0 +1,25 @@
+type Id = string | number;
+interface Props<T> {
+    storageKey: string;
+    items: T[];
+    getId: (item: T) => Id;
+    initialSelectedIds?: Set<Id>;
+    onSelectionChange?: (args: {
+        selectedIds: Set<Id>;
+        selectedItems: T[];
+    }) => void;
+    totalItems?: number;
+    selectionMode?: 'single' | 'multiple';
+}
+export declare function useTableSelection<T>({ storageKey, items, getId, initialSelectedIds, totalItems, onSelectionChange, selectionMode, }: Props<T>): {
+    selectedIds: Set<Id>;
+    selectedItems: T[];
+    selectedItemMap: Map<Id, T>;
+    toggleItem: (item: T) => void;
+    toggleId: (id: Id) => void;
+    clearSelection: () => void;
+    allSelected: boolean;
+    anySelected: boolean;
+    toggleAll: (selected: boolean) => void;
+};
+export {};

package/dist/hooks/useTableSelection.js

@@ -0,0 +1,128 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+export function useTableSelection({ storageKey, items, getId, initialSelectedIds = new Set(), totalItems, onSelectionChange, selectionMode = 'single', }) {
+    // Selected IDs are persisted and are your primary lookup structure
+    const [selectedIds, setSelectedIds] = useState(initialSelectedIds);
+    // Keep the actual selected items keyed by id for O(1) access
+    const [selectedItemMap, setSelectedItemMap] = useState(() => new Map());
+    // Build a fast lookup of current items by id (for hydration + reconciliation)
+    const itemsById = useMemo(() => {
+        const m = new Map();
+        for (const item of items)
+            m.set(getId(item), item);
+        return m;
+    }, [items, getId]);
+    // Hydrate selectedIds from localStorage on mount / storageKey change
+    useEffect(() => {
+        const stored = window.localStorage.getItem(storageKey);
+        if (!stored) {
+            setSelectedIds(initialSelectedIds);
+            return;
+        }
+        try {
+            const parsed = JSON.parse(stored);
+            setSelectedIds(new Set(parsed));
+        }
+        catch {
+            setSelectedIds(initialSelectedIds);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [storageKey]);
+    // Reconcile selectedItemMap whenever selectedIds or items change.
+    // This makes sure selectedItems stay up to date without scanning the full items list on every render.
+    useEffect(() => {
+        setSelectedItemMap(prev => {
+            const next = new Map();
+            // Keep only ids that still exist in itemsById (if list changed)
+            for (const id of selectedIds) {
+                const item = itemsById.get(id);
+                if (item !== undefined)
+                    next.set(id, item);
+            }
+            // If nothing changed, return prev to avoid re-renders
+            if (next.size === prev.size) {
+                let same = true;
+                for (const [id, item] of next) {
+                    if (prev.get(id) !== item) {
+                        same = false;
+                        break;
+                    }
+                }
+                if (same)
+                    return prev;
+            }
+            return next;
+        });
+    }, [selectedIds, itemsById]);
+    const selectedItems = useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
+    const allSelected = useMemo(() => {
+        if (typeof totalItems !== 'number')
+            return false;
+        return totalItems > 0 && selectedIds.size === totalItems;
+    }, [selectedIds, totalItems]);
+    const anySelected = useMemo(() => selectedIds.size > 0, [selectedIds]);
+    useEffect(() => {
+        window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
+        onSelectionChange === null || onSelectionChange === void 0 ? void 0 : onSelectionChange({ selectedIds, selectedItems });
+    }, [selectedIds, selectedItems, storageKey, onSelectionChange]);
+    const toggleId = useCallback((id) => {
+        setSelectedIds(prevIds => {
+            const nextIds = new Set(prevIds);
+            const isSelected = nextIds.has(id);
+            if (isSelected) {
+                nextIds.delete(id);
+            }
+            else {
+                if (selectionMode === 'single')
+                    nextIds.clear();
+                nextIds.add(id);
+            }
+            return nextIds;
+        });
+        // Update selectedItemMap in the same interaction for snappy UI
+        setSelectedItemMap(prevMap => {
+            const nextMap = new Map(prevMap);
+            const isSelected = nextMap.has(id);
+            if (isSelected) {
+                nextMap.delete(id);
+            }
+            else {
+                if (selectionMode === 'single')
+                    nextMap.clear();
+                const item = itemsById.get(id);
+                if (item !== undefined)
+                    nextMap.set(id, item);
+            }
+            return nextMap;
+        });
+    }, [itemsById, selectionMode]);
+    const toggleItem = useCallback((item) => {
+        toggleId(getId(item));
+    }, [toggleId, getId]);
+    const clearSelection = useCallback(() => {
+        setSelectedIds(new Set());
+        setSelectedItemMap(new Map());
+    }, []);
+    const toggleAll = useCallback((selected) => {
+        if (!selected) {
+            clearSelection();
+            return;
+        }
+        const nextIds = new Set();
+        for (const item of items) {
+            nextIds.add(getId(item));
+        }
+        setSelectedIds(nextIds);
+    }, [clearSelection, getId, items]);
+    return {
+        selectedIds,
+        selectedItems,
+        selectedItemMap,
+        toggleItem,
+        toggleId,
+        clearSelection,
+        allSelected,
+        anySelected,
+        toggleAll,
+    };
+}

package/dist/hooks/useTableSettings.d.ts

@@ -0,0 +1,7 @@
+export type ViewMode = 'compact' | 'comfortable';
+interface TableSettings {
+    viewMode: ViewMode;
+    toggleViewMode: () => void;
+}
+export declare function useTableSettings(storageKey?: string): TableSettings;
+export {};

package/dist/hooks/useTableSettings.js

@@ -0,0 +1,24 @@
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+export function useTableSettings(storageKey) {
+    const [viewMode, setViewMode] = useState('compact');
+    useEffect(() => {
+        if (typeof window !== 'undefined' && storageKey) {
+            const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
+            if (storedMode === 'compact' || storedMode === 'comfortable') {
+                setViewMode(storedMode);
+            }
+        }
+    }, [storageKey]);
+    const toggleViewMode = useCallback(() => {
+        if (typeof window !== 'undefined' && storageKey) {
+            const newMode = viewMode === 'comfortable' ? 'compact' : 'comfortable';
+            window.localStorage.setItem(`dbc-table-settings:${storageKey}`, newMode);
+        }
+        setViewMode(prevMode => (prevMode === 'comfortable' ? 'compact' : 'comfortable'));
+    }, [storageKey, viewMode]);
+    return {
+        viewMode,
+        toggleViewMode,
+    };
+}

package/dist/hooks/useTheme.d.ts

@@ -1,9 +1,5 @@
-export type ThemeId = string;
-export type ThemeUrls = Record<ThemeId, string>;
-export declare const LINK_ID = "dbc-theme-link";
-export type ThemeVariant = "light" | "dark";
+export type ThemeVariant = 'light' | 'dark';
 export declare function useTheme(initialTheme?: ThemeVariant): {
-    theme: ThemeId | null;
-    switchTheme: (id: ThemeId) => string;
-    linkId: string;
+    theme: ThemeVariant | null;
+    switchTheme: (id: ThemeVariant) => ThemeVariant;
 };

package/dist/hooks/useTheme.js

@@ -1,55 +1,60 @@
-import { useState, useEffect, useCallback } from 'react';
-
-const LINK_ID = "dbc-theme-link";
-const STORAGE_KEY = "dbc_theme";
-function createLinkElement() {
-  if (typeof document === "undefined") return null;
-  let el = document.getElementById(LINK_ID);
-  if (!el) {
-    el = document.createElement("link");
-    el.id = LINK_ID;
-    el.rel = "stylesheet";
-    document.head.appendChild(el);
-  }
-  return el;
+'use client';
+import { useCallback, useEffect, useState } from 'react';
+const THEME_VARIANTS = ['light', 'dark'];
+const STORAGE_KEY = 'dbc_theme';
+function isThemeVariant(x) {
+    return !!x && THEME_VARIANTS.includes(x);
 }
-function setLinkHref(href) {
-  const el = createLinkElement();
-  if (el && el.getAttribute("href") !== href) el.setAttribute("href", href);
+function getCookie(name) {
+    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
+    return match ? decodeURIComponent(match[1]) : null;
 }
-function useTheme(initialTheme = "light") {
-  const [theme, setTheme] = useState(null);
-  useEffect(() => {
-    let stored = initialTheme;
+function persistTheme(id) {
     try {
-      stored = localStorage.getItem(STORAGE_KEY);
-      console.log("Restored theme from localStorage:", stored);
-    } catch {
+        localStorage.setItem(STORAGE_KEY, id);
     }
-    if (stored) {
-      setLinkHref(`/themes/${stored}.css`);
-      setTheme(stored);
-      try {
-        localStorage.setItem(STORAGE_KEY, stored);
-      } catch {
-      }
+    catch {
+        console.error('Failed to access localStorage');
     }
-  }, []);
-  const switchTheme = useCallback((id) => {
-    const href = `/themes/${id}.css`;
-    if (!href) return "";
-    setLinkHref(href);
-    setTheme(id);
     try {
-      localStorage.setItem(STORAGE_KEY, id);
-      document.cookie = `${STORAGE_KEY}=${encodeURIComponent(
-        id
-      )}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
-    } catch {
+        document.cookie = `${STORAGE_KEY}=${encodeURIComponent(id)}; Path=/; Max-Age=${60 * 60 * 24 * 365}`;
     }
-    return id;
-  }, []);
-  return { theme, switchTheme, linkId: LINK_ID };
+    catch {
+        console.error('Failed to set theme cookie');
+    }
+}
+function applyTheme(id) {
+    document.documentElement.dataset.theme = id;
+}
+export function useTheme(initialTheme = 'light') {
+    const [theme, setTheme] = useState(null);
+    useEffect(() => {
+        let resolved = initialTheme;
+        // Prefer cookie (SSR + client consistency)
+        const fromCookie = getCookie(STORAGE_KEY);
+        if (isThemeVariant(fromCookie)) {
+            resolved = fromCookie;
+        }
+        else {
+            // fallback to localStorage
+            try {
+                const fromStorage = localStorage.getItem(STORAGE_KEY);
+                if (isThemeVariant(fromStorage))
+                    resolved = fromStorage;
+            }
+            catch {
+                console.error('Failed to access localStorage');
+            }
+        }
+        applyTheme(resolved);
+        setTheme(resolved);
+        persistTheme(resolved);
+    }, [initialTheme]);
+    const switchTheme = useCallback((id) => {
+        applyTheme(id);
+        setTheme(id);
+        persistTheme(id);
+        return id;
+    }, []);
+    return { theme, switchTheme };
 }
-
-export { LINK_ID, useTheme };

package/dist/hooks/useTimeDuration.d.ts

@@ -0,0 +1,22 @@
+export type useTimeDurationReturn = {
+    /** Formatted start date (hydration-safe) */
+    started: string;
+    /** Formatted end date (hydration-safe) */
+    ended: string;
+    /** Formatted duration (hydration-safe) */
+    duration: string;
+    /** Whether client hydration has completed */
+    hydrated: boolean;
+};
+type useTimeDurationArgs = {
+    start?: Date;
+    end?: Date;
+    /** Intl options for started/ended formatting */
+    dateFormat?: Intl.DateTimeFormatOptions;
+    /** Placeholder shown before hydration or when date is missing */
+    fallback?: string;
+    /** Custom duration formatter if you don’t want the default "1t 2m 3s" */
+    formatDuration?: (ms: number) => string;
+};
+export declare function useTimeDuration({ start, end, dateFormat, fallback, formatDuration, }: useTimeDurationArgs): useTimeDurationReturn;
+export {};

package/dist/hooks/useTimeDuration.js

@@ -0,0 +1,36 @@
+'use client';
+import { useEffect, useMemo, useState } from 'react';
+function defaultDuration(ms) {
+    if (!Number.isFinite(ms) || ms < 0)
+        return '—';
+    const sec = Math.floor(ms / 1000) % 60;
+    const min = Math.floor(ms / (1000 * 60)) % 60;
+    const hr = Math.floor(ms / (1000 * 60 * 60));
+    return hr > 0 ? `${hr}t ${min}m ${sec}s` : `${min}m ${sec}s`;
+}
+export function useTimeDuration({ start, end, dateFormat = { dateStyle: 'short', timeStyle: 'medium' }, fallback = '—', formatDuration = defaultDuration, }) {
+    const [hydrated, setHydrated] = useState(false);
+    useEffect(() => setHydrated(true), []);
+    const started = useMemo(() => {
+        if (!start)
+            return fallback;
+        if (!hydrated)
+            return fallback;
+        return new Intl.DateTimeFormat(undefined, dateFormat).format(start);
+    }, [start, hydrated, fallback, dateFormat]);
+    const ended = useMemo(() => {
+        if (!end)
+            return fallback;
+        if (!hydrated)
+            return fallback;
+        return new Intl.DateTimeFormat(undefined, dateFormat).format(end);
+    }, [end, hydrated, fallback, dateFormat]);
+    const duration = useMemo(() => {
+        if (!start || !end)
+            return fallback;
+        if (!hydrated)
+            return fallback;
+        return formatDuration(end.getTime() - start.getTime());
+    }, [start, end, hydrated, fallback, formatDuration]);
+    return { started, ended, duration, hydrated };
+}

package/dist/hooks/useViewportFill.d.ts

@@ -1,3 +1,4 @@
+import { CSSProperties, RefObject } from 'react';
 type Options = {
     bottomOffset?: number;
     min?: number;
@@ -7,9 +8,9 @@ type Options = {
  * Computes the remaining viewport space below the element and returns a style
  * with `maxHeight` + `overflow: auto`.
  */
-export declare function useViewportFill<T extends HTMLElement>(ref: React.RefObject<T>, { bottomOffset, min, includeMarginTop }?: Options): {
+export declare function useViewportFill<T extends HTMLElement>(ref: RefObject<T>, { bottomOffset, min, includeMarginTop }?: Options): {
     maxHeight: number;
-    style: React.CSSProperties;
+    style: CSSProperties;
     recompute: () => void;
 };
 export {};