@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/examples/HierarchicalActionsExample.tsx

@@ -12,6 +12,7 @@ import React from 'react';
 import { DataTable } from '../DataTable';
 import type { DataTableColumn, DataTableAction } from '../types';
 import { Button } from '../../Button';
+import { createLogger } from '../../../utils/logger';
 import { 
   PlusIcon, 
   PencilIcon, 
@@ -173,7 +174,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentLabel: 'View Dish',
     childLabel: 'View Ingredient',
     onClick: (row) => {
-      console.log('Viewing:', row.isParent ? 'Dish' : 'Ingredient', row.name || row.item);
+      // View action
     },
     variant: 'default',
     testId: 'view',
@@ -188,7 +189,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentLabel: 'Edit Recipe',
     childLabel: 'Edit Ingredient',
     onClick: (row) => {
-      console.log('Editing:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+      // Edit action
     },
     variant: 'default',
     testId: 'edit',
@@ -201,7 +202,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentIcon: CopyIcon,
     parentLabel: 'Duplicate Recipe',
     onClick: (row) => {
-      console.log('Copying recipe:', row.name);
+      // Copy recipe action
     },
     variant: 'outline',
     testId: 'copy',
@@ -215,7 +216,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentIcon: PlusIcon,
     parentLabel: 'Add Ingredient',
     onClick: (row) => {
-      console.log('Adding ingredient to recipe:', row.name);
+      // Add ingredient action
     },
     variant: 'secondary',
     testId: 'add-ingredient',
@@ -229,7 +230,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     childIcon: DownloadIcon,
     childLabel: 'Export Ingredient',
     onClick: (row) => {
-      console.log('Exporting ingredient:', row.item);
+      // Export ingredient action
     },
     variant: 'ghost',
     testId: 'export',
@@ -245,7 +246,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentLabel: 'Favorite Recipe',
     childLabel: 'Favorite Ingredient',
     onClick: (row) => {
-      console.log('Starring:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+      // Star action
     },
     variant: 'ghost',
     testId: 'star',
@@ -260,7 +261,7 @@ const hierarchicalActions: DataTableAction<Dish>[] = [
     parentLabel: 'Delete Recipe',
     childLabel: 'Remove Ingredient',
     onClick: (row) => {
-      console.log('Deleting:', row.isParent ? 'Recipe' : 'Ingredient', row.name || row.item);
+      // Delete action
     },
     variant: 'destructive',
     testId: 'delete',
@@ -351,6 +352,7 @@ const columns: DataTableColumn<Dish>[] = [
 // ============================================================================
 
 export function HierarchicalActionsExample() {
+  const logger = createLogger('HierarchicalActionsExample');
   return (
     <div className="space-y-6">
       <div>
@@ -400,7 +402,7 @@ export function HierarchicalActionsExample() {
           enabled: true,
           defaultExpanded: false,
           onExpandedChange: (expandedIds) => {
-            console.log('Expanded rows:', expandedIds);
+            // Expanded rows changed
           },
           parentRowClassName: 'bg-main-50 hover:bg-main-100 font-medium',
           childRowClassName: 'bg-sec-25 hover:bg-sec-50',
@@ -408,10 +410,10 @@ export function HierarchicalActionsExample() {
         }}
         actions={hierarchicalActions}
         onEditRow={(row, data) => {
-          console.log('Edit row:', row, data);
+          // Edit row action
         }}
         onDeleteRow={(row) => {
-          console.log('Delete row:', row);
+          // Delete row action
         }}
       />
     </div>

package/src/components/DataTable/examples/HierarchicalExample.tsx

@@ -311,7 +311,7 @@ const hierarchicalConfig: HierarchicalConfig = {
   enabled: true,
   defaultExpanded: false, // Start collapsed
   onExpandedChange: (expandedIds) => {
-    console.log('Expanded rows:', expandedIds);
+    // Expanded rows changed
   },
   expandButton: ExpandButton, // Use default expand button
   indentSize: 24, // 24px indentation for child rows

package/src/components/DataTable/examples/InitialPageSizeExample.tsx

@@ -16,6 +16,7 @@ interface User {
   email: string;
   role: string;
   status: 'active' | 'inactive';
+  [key: string]: unknown;
 }
 
 const columns: DataTableColumn<User>[] = [

package/src/components/DataTable/examples/PerformanceExample.tsx

@@ -26,6 +26,7 @@ interface User {
   status: 'active' | 'inactive';
   lastLogin: string;
   createdAt: string;
+  [key: string]: unknown;
 }
 
 // Generate large dataset for testing

package/src/components/DataTable/hooks/__tests__/useColumnOrderPersistence.test.ts

@@ -153,8 +153,6 @@ describe('[unit] useColumnOrderPersistence', () => {
     it('handles invalid JSON in localStorage gracefully', async () => {
       localStorage.setItem('datatable-column-order-test', 'invalid-json');
 
-      const consoleWarnSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});
-
       const { result } = renderHook(() => useColumnOrderPersistence({
         tableId: 'test',
         defaultOrder: ['col1', 'col2'],
@@ -165,10 +163,8 @@ describe('[unit] useColumnOrderPersistence', () => {
         expect(result.current.isLoaded).toBe(true);
       });
 
+      // Should use default order when invalid JSON is encountered
       expect(result.current.columnOrder).toEqual(['col1', 'col2']);
-      expect(consoleWarnSpy).toHaveBeenCalled();
-
-      consoleWarnSpy.mockRestore();
     });
 
     it('handles localStorage quota exceeded error gracefully', async () => {

package/src/components/DataTable/hooks/__tests__/useColumnVisibilityPersistence.test.ts

@@ -0,0 +1,167 @@
+/**
+ * @file Unit Tests for useColumnVisibilityPersistence Hook
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Hooks/__tests__
+ */
+
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { useColumnVisibilityPersistence } from '../useColumnVisibilityPersistence';
+
+describe('[unit] useColumnVisibilityPersistence', () => {
+  beforeEach(() => {
+    localStorage.clear();
+    vi.clearAllMocks();
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('Initialization', () => {
+    it('initializes with default visibility when no saved visibility exists', async () => {
+      const defaultVisibility = { col1: true, col2: false };
+      const { result } = renderHook(() => useColumnVisibilityPersistence({
+        tableId: 'test',
+        defaultVisibility,
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnVisibility).toEqual(defaultVisibility);
+    });
+
+    it('loads saved visibility from localStorage on mount', async () => {
+      const savedVisibility = { col1: false, col2: true };
+      localStorage.setItem('datatable-column-visibility-test', JSON.stringify(savedVisibility));
+
+      const { result } = renderHook(() => useColumnVisibilityPersistence({
+        tableId: 'test',
+        defaultVisibility: { col1: true, col2: true },
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnVisibility).toEqual(savedVisibility);
+    });
+
+    it('uses storageKey when provided', async () => {
+      const savedVisibility = { col1: true, col2: false };
+      localStorage.setItem('custom-key-column-visibility', JSON.stringify(savedVisibility));
+
+      const { result } = renderHook(() => useColumnVisibilityPersistence({
+        tableId: 'test',
+        defaultVisibility: { col1: false, col2: true },
+        enablePersistence: true,
+        storageKey: 'custom-key'
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      expect(result.current.columnVisibility).toEqual(savedVisibility);
+    });
+  });
+
+  describe('Persistence', () => {
+    it('saves column visibility to localStorage when updated', async () => {
+      const newVisibility = { col1: false, col2: true };
+      const { result } = renderHook(() => useColumnVisibilityPersistence({
+        tableId: 'test',
+        defaultVisibility: { col1: true, col2: true },
+        enablePersistence: true
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnVisibility(newVisibility);
+      });
+
+      expect(result.current.columnVisibility).toEqual(newVisibility);
+
+      const saved = localStorage.getItem('datatable-column-visibility-test');
+      expect(saved).toBe(JSON.stringify(newVisibility));
+    });
+
+    it('does not persist when enablePersistence is false', async () => {
+      const { result } = renderHook(() => useColumnVisibilityPersistence({
+        tableId: 'test',
+        defaultVisibility: { col1: true },
+        enablePersistence: false
+      }));
+
+      await waitFor(() => {
+        expect(result.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result.current.updateColumnVisibility({ col1: false });
+      });
+
+      expect(result.current.columnVisibility).toEqual({ col1: false });
+      expect(localStorage.getItem('datatable-column-visibility-test')).toBeNull();
+    });
+  });
+
+  describe('Multi-table persistence', () => {
+    it('persists different visibility states for different storage keys', async () => {
+      // Table 1
+      const { result: result1 } = renderHook(() => useColumnVisibilityPersistence({
+        enablePersistence: true,
+        storageKey: 'table1',
+        defaultVisibility: { col1: true }
+      }));
+
+      await waitFor(() => {
+        expect(result1.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result1.current.updateColumnVisibility({ col1: false });
+      });
+
+      // Table 2
+      const { result: result2 } = renderHook(() => useColumnVisibilityPersistence({
+        enablePersistence: true,
+        storageKey: 'table2',
+        defaultVisibility: { col1: true }
+      }));
+
+      await waitFor(() => {
+        expect(result2.current.isLoaded).toBe(true);
+      });
+
+      act(() => {
+        result2.current.updateColumnVisibility({ col1: true });
+      });
+
+      // Both should have their own saved state
+      expect(localStorage.getItem('table1-column-visibility')).toBe(JSON.stringify({ col1: false }));
+      expect(localStorage.getItem('table2-column-visibility')).toBe(JSON.stringify({ col1: true }));
+
+      // Reload table1 and it should have false
+      const { result: reload1 } = renderHook(() => useColumnVisibilityPersistence({
+        enablePersistence: true,
+        storageKey: 'table1',
+        defaultVisibility: { col1: true }
+      }));
+
+      await waitFor(() => {
+        expect(reload1.current.isLoaded).toBe(true);
+      });
+
+      expect(reload1.current.columnVisibility).toEqual({ col1: false });
+    });
+  });
+});
+

package/src/components/DataTable/hooks/index.ts

@@ -2,5 +2,12 @@ export * from './useDataTableState';
 export * from './useDataTablePermissions';
 export * from './useTableColumns';
 export * from './useColumnOrderPersistence';
+export * from './useColumnVisibilityPersistence';
 export * from './useHierarchicalState';
+export * from './useKeyboardNavigation';
+export * from './useDataTableDataPipeline';
+export * from './useServerSideDataEffect';
+export * from './useEffectiveColumnOrder';
+export * from './useTableHandlers';
+export * from './useDataTableConfiguration';
 

package/src/components/DataTable/hooks/useColumnOrderPersistence.ts

@@ -1,31 +1,44 @@
 import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '../../../utils/logger';
 
 interface UseColumnOrderPersistenceProps {
   tableId?: string;
   defaultOrder?: string[];
   enablePersistence?: boolean;
+  storageKey?: string;
 }
 
 export function useColumnOrderPersistence({
   tableId,
   defaultOrder = [],
   enablePersistence = false,
+  storageKey,
 }: UseColumnOrderPersistenceProps) {
+  const logger = createLogger('ColumnOrderPersistence');
   const [columnOrder, setColumnOrder] = useState<string[]>(defaultOrder);
   const [isLoaded, setIsLoaded] = useState(false);
 
   // Generate a unique key for this table
-  const storageKey = tableId ? `datatable-column-order-${tableId}` : 'datatable-column-order';
+  const finalStorageKey = storageKey 
+    ? `${storageKey}-column-order` 
+    : (tableId ? `datatable-column-order-${tableId}` : 'datatable-column-order');
 
   // Load column order from localStorage on mount
   useEffect(() => {
-    if (!enablePersistence || !tableId) {
+    if (!enablePersistence || typeof window === 'undefined') {
+      setIsLoaded(true);
+      return;
+    }
+
+    // Only load if we have a storage key (either via storageKey prop or tableId)
+    // This maintains backward compatibility with existing tests
+    if (!storageKey && !tableId) {
       setIsLoaded(true);
       return;
     }
 
     try {
-      const savedOrder = localStorage.getItem(storageKey);
+      const savedOrder = localStorage.getItem(finalStorageKey);
       if (savedOrder) {
         const parsedOrder = JSON.parse(savedOrder);
         if (Array.isArray(parsedOrder)) {
@@ -33,22 +46,26 @@ export function useColumnOrderPersistence({
         }
       }
     } catch (error) {
-      console.warn('Failed to load column order from localStorage:', error);
+        logger.warn('Failed to load column order from localStorage:', error);
     } finally {
       setIsLoaded(true);
     }
-  }, [enablePersistence, tableId, storageKey]);
+  }, [enablePersistence, finalStorageKey, storageKey, tableId]);
 
   // Save column order to localStorage
   const saveColumnOrder = useCallback((newOrder: string[]) => {
-    if (!enablePersistence || !tableId) return;
+    if (!enablePersistence || typeof window === 'undefined') return;
+    
+    // Only save if we have a storage key (either via storageKey prop or tableId)
+    // This maintains backward compatibility with existing tests
+    if (!storageKey && !tableId) return;
 
     try {
-      localStorage.setItem(storageKey, JSON.stringify(newOrder));
+      localStorage.setItem(finalStorageKey, JSON.stringify(newOrder));
     } catch (error) {
-      console.warn('Failed to save column order to localStorage:', error);
+        logger.warn('Failed to save column order to localStorage:', error);
     }
-  }, [enablePersistence, tableId, storageKey]);
+  }, [enablePersistence, finalStorageKey, storageKey, tableId]);
 
   // Update column order and save to localStorage
   const updateColumnOrder = useCallback((newOrder: string[]) => {
@@ -59,18 +76,18 @@ export function useColumnOrderPersistence({
   // Reset to default order
   const resetColumnOrder = useCallback(() => {
     setColumnOrder(defaultOrder);
-    if (enablePersistence && tableId) {
+    if (enablePersistence && (storageKey || tableId) && typeof window !== 'undefined') {
       try {
-        localStorage.removeItem(storageKey);
+        localStorage.removeItem(finalStorageKey);
       } catch (error) {
-        console.warn('Failed to remove column order from localStorage:', error);
+        logger.warn('Failed to remove column order from localStorage:', error);
       }
     }
-  }, [defaultOrder, enablePersistence, tableId, storageKey]);
+  }, [defaultOrder, enablePersistence, finalStorageKey, storageKey, tableId]);
 
   // Clear all saved preferences
   const clearAllPreferences = useCallback(() => {
-    if (!enablePersistence) return;
+    if (!enablePersistence || typeof window === 'undefined') return;
 
     try {
       // Remove all datatable preferences
@@ -81,7 +98,7 @@ export function useColumnOrderPersistence({
         }
       });
     } catch (error) {
-      console.warn('Failed to clear datatable preferences:', error);
+        logger.warn('Failed to clear datatable preferences:', error);
     }
   }, [enablePersistence]);
 

package/src/components/DataTable/hooks/useColumnVisibilityPersistence.ts

@@ -0,0 +1,102 @@
+import { useState, useEffect, useCallback } from 'react';
+import { createLogger } from '../../../utils/logger';
+
+interface UseColumnVisibilityPersistenceProps {
+  tableId?: string;
+  defaultVisibility?: Record<string, boolean>;
+  enablePersistence?: boolean;
+  storageKey?: string;
+}
+
+export function useColumnVisibilityPersistence({
+  tableId,
+  defaultVisibility = {},
+  enablePersistence = false,
+  storageKey,
+}: UseColumnVisibilityPersistenceProps) {
+  const logger = createLogger('ColumnVisibilityPersistence');
+  const [columnVisibility, setColumnVisibility] = useState<Record<string, boolean>>(defaultVisibility);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  // Generate a unique key for this table
+  const finalStorageKey = storageKey 
+    ? `${storageKey}-column-visibility` 
+    : (tableId ? `datatable-column-visibility-${tableId}` : 'datatable-column-visibility');
+
+  // Load column visibility from localStorage on mount
+  useEffect(() => {
+    if (!enablePersistence || typeof window === 'undefined') {
+      setIsLoaded(true);
+      return;
+    }
+
+    try {
+      const savedVisibility = localStorage.getItem(finalStorageKey);
+      if (savedVisibility) {
+        const parsedVisibility = JSON.parse(savedVisibility);
+        if (typeof parsedVisibility === 'object' && parsedVisibility !== null) {
+          setColumnVisibility(parsedVisibility);
+        }
+      }
+    } catch (error) {
+        logger.warn('Failed to load column visibility from localStorage:', error);
+    } finally {
+      setIsLoaded(true);
+    }
+  }, [enablePersistence, finalStorageKey]);
+
+  // Save column visibility to localStorage
+  const saveColumnVisibility = useCallback((newVisibility: Record<string, boolean>) => {
+    if (!enablePersistence || typeof window === 'undefined') return;
+
+    try {
+      localStorage.setItem(finalStorageKey, JSON.stringify(newVisibility));
+    } catch (error) {
+        logger.warn('Failed to save column visibility to localStorage:', error);
+    }
+  }, [enablePersistence, finalStorageKey]);
+
+  // Update column visibility and save to localStorage
+  const updateColumnVisibility = useCallback((newVisibility: Record<string, boolean>) => {
+    setColumnVisibility(newVisibility);
+    saveColumnVisibility(newVisibility);
+  }, [saveColumnVisibility]);
+
+  // Reset to default visibility
+  const resetColumnVisibility = useCallback(() => {
+    setColumnVisibility(defaultVisibility);
+    if (enablePersistence && typeof window !== 'undefined') {
+      try {
+        localStorage.removeItem(finalStorageKey);
+      } catch (error) {
+        logger.warn('Failed to remove column visibility from localStorage:', error);
+      }
+    }
+  }, [defaultVisibility, enablePersistence, finalStorageKey]);
+
+  // Clear all saved preferences
+  const clearAllPreferences = useCallback(() => {
+    if (!enablePersistence || typeof window === 'undefined') return;
+
+    try {
+      // Remove all datatable preferences
+      const keys = Object.keys(localStorage);
+      keys.forEach(key => {
+        if (key.startsWith('datatable-')) {
+          localStorage.removeItem(key);
+        }
+      });
+    } catch (error) {
+        logger.warn('Failed to clear datatable preferences:', error);
+    }
+  }, [enablePersistence]);
+
+  return {
+    columnVisibility,
+    isLoaded,
+    updateColumnVisibility,
+    resetColumnVisibility,
+    clearAllPreferences,
+  };
+}
+

package/src/components/DataTable/hooks/useDataTableConfiguration.ts

@@ -0,0 +1,89 @@
+import { useMemo } from 'react';
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type ColumnDef,
+} from '@tanstack/react-table';
+
+import type {
+  DataRecord,
+  NormalizedDataTableFeatureConfig,
+  PaginationMode,
+  GetRowId,
+} from '../types';
+import type { TableHandlers, TableStateSnapshot } from './useTableHandlers';
+
+interface UseDataTableConfigurationOptions<TData extends DataRecord> {
+  data: TData[];
+  columns: ColumnDef<TData>[];
+  stateSnapshot: TableStateSnapshot<TData>;
+  handlers: TableHandlers;
+  features: NormalizedDataTableFeatureConfig;
+  getRowId: GetRowId<TData>;
+  finalPaginationMode: PaginationMode;
+  finalDataCount: number;
+  pageSize: number;
+}
+
+export function useDataTableConfiguration<TData extends DataRecord>({
+  data,
+  columns,
+  stateSnapshot,
+  handlers,
+  features,
+  getRowId,
+  finalPaginationMode,
+  finalDataCount,
+  pageSize,
+}: UseDataTableConfigurationOptions<TData>) {
+  return useMemo(() => ({
+    data,
+    columns,
+    state: {
+      sorting: stateSnapshot.sorting,
+      columnFilters: stateSnapshot.columnFilters,
+      columnVisibility: stateSnapshot.columnVisibility,
+      rowSelection: stateSnapshot.rowSelection,
+      grouping: stateSnapshot.grouping,
+      expanded: stateSnapshot.expanded,
+      pagination: stateSnapshot.pagination,
+      globalFilter: stateSnapshot.globalFilter,
+      columnOrder: stateSnapshot.columnOrder,
+    },
+    initialState: {
+      expanded: features.grouping ? {} : undefined,
+    },
+    enableRowSelection: features.selection,
+    enableGrouping: features.grouping,
+    getRowId,
+    ...handlers,
+    getCoreRowModel: getCoreRowModel(),
+    getFilteredRowModel: finalPaginationMode === 'client' ? getFilteredRowModel() : undefined,
+    getSortedRowModel: finalPaginationMode === 'client' ? getSortedRowModel() : undefined,
+    getPaginationRowModel: features.pagination ? getPaginationRowModel() : undefined,
+    getGroupedRowModel: features.grouping ? getGroupedRowModel() : undefined,
+    getExpandedRowModel: features.grouping ? getExpandedRowModel() : undefined,
+    manualSorting: finalPaginationMode === 'server',
+    manualFiltering: finalPaginationMode === 'server',
+    manualPagination: finalPaginationMode === 'server',
+    pageCount: finalPaginationMode === 'server'
+      ? Math.ceil(finalDataCount / pageSize)
+      : undefined,
+  }), [
+    data,
+    columns,
+    stateSnapshot,
+    handlers,
+    features.selection,
+    features.grouping,
+    features.pagination,
+    getRowId,
+    finalPaginationMode,
+    finalDataCount,
+    pageSize,
+  ]);
+}