@dbcdk/react-components 0.0.10 → 0.0.12

package/dist/hooks/useTableSettings.d.ts

@@ -1,7 +1,26 @@
-export type ViewMode = 'compact' | 'comfortable';
-interface TableSettings {
+import { ColumnDef } from '@tanstack/react-table';
+export type ViewMode = 'compact' | 'wrapped';
+export type TableSettingsState = {
     viewMode: ViewMode;
-    toggleViewMode: () => void;
+    visibleColumnIds: string[];
+};
+export type TableSettingsStorage = {
+    get: (key: string) => TableSettingsState | undefined;
+    set: (key: string, next: TableSettingsState) => void;
+};
+export declare const localStorageTableSettingsStorage: TableSettingsStorage;
+interface UseTableSettingsOptions {
+    storageKey: string;
+    tableColumns?: ColumnDef<any>[];
+    defaultViewMode?: ViewMode;
+    defaultVisibleColumnIds?: string[];
+    storage?: TableSettingsStorage;
 }
-export declare function useTableSettings(storageKey?: string): TableSettings;
+export declare function useTableSettings({ storageKey, tableColumns, defaultViewMode, defaultVisibleColumnIds, storage, }: UseTableSettingsOptions): {
+    viewMode: ViewMode;
+    toggleViewMode: () => void;
+    setViewMode: (mode: ViewMode) => void;
+    visibleColumnIds: string[];
+    setVisibleColumnIds: (ids: string[]) => void;
+};
 export {};

package/dist/hooks/useTableSettings.js

@@ -1,24 +1,71 @@
 'use client';
-import { useCallback, useEffect, useState } from 'react';
-export function useTableSettings(storageKey) {
-    const [viewMode, setViewMode] = useState('compact');
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { readLocalStorage, writeLocalStorage } from '../utils/localStorage.utils';
+function getDefaultVisibleIds(tableColumns) {
+    var _a;
+    return ((_a = tableColumns === null || tableColumns === void 0 ? void 0 : tableColumns.filter(c => { var _a; return !((_a = c.meta) === null || _a === void 0 ? void 0 : _a.hidden); }).map(c => c.id).filter(Boolean)) !== null && _a !== void 0 ? _a : []);
+}
+function mergeDefaults(stored, defaults) {
+    const viewMode = (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'compact' || (stored === null || stored === void 0 ? void 0 : stored.viewMode) === 'wrapped'
+        ? stored.viewMode
+        : defaults.viewMode;
+    const visibleColumnIds = Array.isArray(stored === null || stored === void 0 ? void 0 : stored.visibleColumnIds) && stored.visibleColumnIds.length > 0
+        ? stored.visibleColumnIds
+        : defaults.visibleColumnIds;
+    return { viewMode, visibleColumnIds };
+}
+export const localStorageTableSettingsStorage = {
+    get: key => {
+        const v = readLocalStorage(key);
+        return v && typeof v === 'object' ? v : undefined;
+    },
+    set: (key, next) => {
+        writeLocalStorage(key, next);
+    },
+};
+export function useTableSettings({ storageKey, tableColumns, defaultViewMode = 'compact', defaultVisibleColumnIds, storage = localStorageTableSettingsStorage, }) {
+    const defaults = useMemo(() => {
+        return {
+            viewMode: defaultViewMode,
+            visibleColumnIds: defaultVisibleColumnIds !== null && defaultVisibleColumnIds !== void 0 ? defaultVisibleColumnIds : getDefaultVisibleIds(tableColumns),
+        };
+    }, [defaultViewMode, defaultVisibleColumnIds, tableColumns]);
+    const [state, setState] = useState(defaults);
     useEffect(() => {
-        if (typeof window !== 'undefined' && storageKey) {
-            const storedMode = window.localStorage.getItem(`dbc-table-settings:${storageKey}`);
-            if (storedMode === 'compact' || storedMode === 'comfortable') {
-                setViewMode(storedMode);
-            }
-        }
-    }, [storageKey]);
+        const stored = storage.get(storageKey);
+        const next = mergeDefaults(stored, defaults);
+        setState(next);
+    }, [storageKey, storage, defaults]);
+    const persist = useCallback((next) => storage.set(storageKey, next), [storage, storageKey]);
+    const setViewMode = useCallback((mode) => {
+        setState(prev => {
+            if (prev.viewMode === mode)
+                return prev;
+            const next = { ...prev, viewMode: mode };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
     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]);
+        setState(prev => {
+            const nextMode = prev.viewMode === 'wrapped' ? 'compact' : 'wrapped';
+            const next = { ...prev, viewMode: nextMode };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
+    const setVisibleColumnIds = useCallback((ids) => {
+        setState(prev => {
+            const next = { ...prev, visibleColumnIds: ids };
+            persist(next);
+            return next;
+        });
+    }, [persist]);
     return {
-        viewMode,
+        viewMode: state.viewMode,
         toggleViewMode,
+        setViewMode,
+        visibleColumnIds: state.visibleColumnIds,
+        setVisibleColumnIds,
     };
 }

package/dist/src/styles/styles.css

@@ -61,34 +61,50 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  tr + tr th,
-  tr + tr td {
-    padding-block: var(--spacing-xxs);
-  }
+}
 
-  th {
-    white-space: nowrap;
-    color: var(--color-fg-subtle);
-    font-weight: var(--font-weight-default);
-    padding-right: var(--spacing-lg);
-    vertical-align: top;
-    text-align: left;
-  }
+.dbc-table tr + tr th,
+.dbc-table tr + tr td {
+  padding-block: var(--spacing-xxs);
+}
 
-  td {
-    color: var(--color-fg-default);
-    vertical-align: top;
-    min-width: 0;
-  }
+/* LABELS (th) → match .metaLabel */
+.dbc-table th {
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: top;
+  max-width: var(--card-label-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  font-weight: var(--font-weight-default);
+  padding-right: var(--spacing-lg);
+}
 
-  th {
-    max-width: var(--card-label-width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+/* VALUES (td) → match .metaValue */
+.dbc-table td {
+  vertical-align: top;
+  min-width: 0;
+
+  margin: 0; /* harmless on td, keeps parity with metaValue */
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+
+  word-break: break-word;
+}
+
+/* Optional: baseline alignment closer to metaRow */
+.dbc-table th,
+.dbc-table td {
+  vertical-align: baseline;
 }
 
 .dbc-full-width {

package/dist/styles/animation.d.ts

@@ -0,0 +1,5 @@
+export declare const MOTION_MS: {
+    readonly panelSlide: 300;
+    readonly modal: 200;
+    readonly tooltipOpen: 300;
+};

package/dist/styles/animation.js

@@ -0,0 +1,5 @@
+export const MOTION_MS = {
+    panelSlide: 300,
+    modal: 200,
+    tooltipOpen: 300,
+};

package/dist/styles/styles.css

@@ -61,34 +61,50 @@ body.dbc-app {
 
 .dbc-table {
   --card-label-width: 260px;
+
   border-collapse: collapse;
   font-size: var(--font-size-sm);
   line-height: var(--line-height-normal);
-  tr + tr th,
-  tr + tr td {
-    padding-block: var(--spacing-xxs);
-  }
+}
 
-  th {
-    white-space: nowrap;
-    color: var(--color-fg-subtle);
-    font-weight: var(--font-weight-default);
-    padding-right: var(--spacing-lg);
-    vertical-align: top;
-    text-align: left;
-  }
+.dbc-table tr + tr th,
+.dbc-table tr + tr td {
+  padding-block: var(--spacing-xxs);
+}
 
-  td {
-    color: var(--color-fg-default);
-    vertical-align: top;
-    min-width: 0;
-  }
+/* LABELS (th) → match .metaLabel */
+.dbc-table th {
+  white-space: nowrap;
+  text-align: left;
+  vertical-align: top;
+  max-width: var(--card-label-width);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: var(--font-size-xs);
+  color: var(--color-fg-subtle);
+  letter-spacing: var(--letter-spacing-wide);
+  text-transform: uppercase;
+  font-weight: var(--font-weight-default);
+  padding-right: var(--spacing-lg);
+}
 
-  th {
-    max-width: var(--card-label-width);
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
+/* VALUES (td) → match .metaValue */
+.dbc-table td {
+  vertical-align: top;
+  min-width: 0;
+
+  margin: 0; /* harmless on td, keeps parity with metaValue */
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-default);
+  font-weight: var(--font-weight-medium);
+
+  word-break: break-word;
+}
+
+/* Optional: baseline alignment closer to metaRow */
+.dbc-table th,
+.dbc-table td {
+  vertical-align: baseline;
 }
 
 .dbc-full-width {

package/dist/utils/localStorage.utils.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Safely read from localStorage.
+ * - Returns undefined if not in browser
+ * - Returns parsed JSON if value is JSON
+ * - Returns plain string if not JSON
+ * - Never throws
+ */
+export declare function readLocalStorage<T = unknown>(key: string): T | string | undefined;
+/**
+ * Safely write to localStorage.
+ * - Automatically JSON.stringifies objects/arrays
+ * - Stores plain strings as-is
+ * - Never throws
+ */
+export declare function writeLocalStorage(key: string, value: unknown): void;
+/**
+ * Remove key safely
+ */
+export declare function removeLocalStorage(key: string): void;

package/dist/utils/localStorage.utils.js

@@ -0,0 +1,78 @@
+function isBrowser() {
+    return typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+}
+/**
+ * Safely read from localStorage.
+ * - Returns undefined if not in browser
+ * - Returns parsed JSON if value is JSON
+ * - Returns plain string if not JSON
+ * - Never throws
+ */
+export function readLocalStorage(key) {
+    if (!isBrowser())
+        return undefined;
+    try {
+        const raw = window.localStorage.getItem(key);
+        if (raw == null)
+            return undefined;
+        // Try parse once
+        try {
+            const parsed = JSON.parse(raw);
+            // Handle double-stringified JSON
+            if (typeof parsed === 'string') {
+                try {
+                    return JSON.parse(parsed);
+                }
+                catch {
+                    return parsed;
+                }
+            }
+            return parsed;
+        }
+        catch {
+            // Not JSON — return as plain string
+            return raw;
+        }
+    }
+    catch {
+        return undefined;
+    }
+}
+/**
+ * Safely write to localStorage.
+ * - Automatically JSON.stringifies objects/arrays
+ * - Stores plain strings as-is
+ * - Never throws
+ */
+export function writeLocalStorage(key, value) {
+    if (!isBrowser())
+        return;
+    try {
+        if (value === undefined) {
+            window.localStorage.removeItem(key);
+            return;
+        }
+        if (typeof value === 'string') {
+            window.localStorage.setItem(key, value);
+        }
+        else {
+            window.localStorage.setItem(key, JSON.stringify(value));
+        }
+    }
+    catch {
+        // ignore quota errors etc.
+    }
+}
+/**
+ * Remove key safely
+ */
+export function removeLocalStorage(key) {
+    if (!isBrowser())
+        return;
+    try {
+        window.localStorage.removeItem(key);
+    }
+    catch {
+        // ignore
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",