@jmruthers/pace-core 0.5.76 → 0.5.78

package/src/components/DataTable/__tests__/ssr.strict-mode.test.tsx.skip

@@ -0,0 +1,330 @@
+/**
+ * @file SSR and Strict Mode Compatibility Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/__tests__
+ * @since 2.0.0
+ *
+ * Tests for SSR safety and React 18 strict mode compatibility.
+ */
+
+import React from 'react';
+import { render, act } from '@testing-library/react';
+import { vi, beforeEach, afterEach } from 'vitest';
+import { DataTable } from '../DataTable';
+import type { DataTableColumn } from '../types';
+
+// Mock data for testing
+interface TestData {
+  id: string;
+  name: string;
+  email: string;
+}
+
+const testData: TestData[] = [
+  { id: '1', name: 'John Doe', email: 'john@example.com' },
+  { id: '2', name: 'Jane Smith', email: 'jane@example.com' },
+];
+
+const testColumns: DataTableColumn<TestData>[] = [
+  {
+    accessorKey: 'name',
+    header: 'Name',
+    sortable: true,
+  },
+  {
+    accessorKey: 'email',
+    header: 'Email',
+    sortable: true,
+  },
+];
+
+const defaultProps = {
+  data: testData,
+  columns: testColumns,
+  rbac: { pageId: 'test' },
+  features: {
+    search: true,
+    pagination: true,
+    sorting: true,
+    filtering: true,
+    export: true,
+    import: true,
+    selection: true,
+    creation: true,
+    editing: true,
+    deletion: true,
+    deleteSelected: true,
+    grouping: true,
+    columnVisibility: true,
+    columnReordering: true,
+  },
+};
+
+describe('DataTable SSR and Strict Mode Compatibility', () => {
+  beforeEach(() => {
+    // Mock window object for SSR testing - only if window exists
+    if (typeof window !== 'undefined') {
+      Object.defineProperty(window, 'matchMedia', {
+        writable: true,
+        value: vi.fn().mockImplementation(query => ({
+          matches: false,
+          media: query,
+          onchange: null,
+          addListener: vi.fn(),
+          removeListener: vi.fn(),
+          addEventListener: vi.fn(),
+          removeEventListener: vi.fn(),
+          dispatchEvent: vi.fn(),
+        })),
+      });
+    }
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+  });
+
+  describe('SSR Safety', () => {
+    it('should render without browser APIs in SSR environment', () => {
+      // Mock SSR environment by setting window to undefined
+      const originalWindow = global.window;
+      (global as any).window = undefined;
+
+      expect(() => {
+        render(<DataTable {...defaultProps} />);
+      }).not.toThrow();
+
+      // Restore window
+      global.window = originalWindow;
+    });
+
+    it('should handle missing localStorage gracefully', () => {
+      const originalLocalStorage = global.localStorage;
+      delete (global as any).localStorage;
+
+      expect(() => {
+        render(<DataTable {...defaultProps} />);
+      }).not.toThrow();
+
+      // Restore localStorage
+      global.localStorage = originalLocalStorage;
+    });
+
+    it('should handle missing document gracefully', () => {
+      const originalDocument = global.document;
+      delete (global as any).document;
+
+      expect(() => {
+        render(<DataTable {...defaultProps} />);
+      }).not.toThrow();
+
+      // Restore document
+      global.document = originalDocument;
+    });
+  });
+
+  describe('React 18 Strict Mode Compatibility', () => {
+    it('should handle strict mode double-invoke without errors', () => {
+      let renderCount = 0;
+      
+      const TestComponent = () => {
+        renderCount++;
+        return <DataTable {...defaultProps} />;
+      };
+
+      expect(() => {
+        render(
+          <React.StrictMode>
+            <TestComponent />
+          </React.StrictMode>
+        );
+      }).not.toThrow();
+
+      // In strict mode, components are rendered twice
+      expect(renderCount).toBe(2);
+    });
+
+    it('should handle strict mode with useEffect cleanup', () => {
+      const TestComponent = () => {
+        React.useEffect(() => {
+          // This effect should be called twice in strict mode
+          return () => {
+            // Cleanup should be called twice in strict mode
+          };
+        }, []);
+
+        return <DataTable {...defaultProps} />;
+      };
+
+      expect(() => {
+        render(
+          <React.StrictMode>
+            <TestComponent />
+          </React.StrictMode>
+        );
+      }).not.toThrow();
+    });
+
+    it('should handle strict mode with state updates', () => {
+      const TestComponent = () => {
+        const [count, setCount] = React.useState(0);
+
+        React.useEffect(() => {
+          setCount(prev => prev + 1);
+        }, []);
+
+        return (
+          <div>
+            <span data-testid="count">{count}</span>
+            <DataTable {...defaultProps} />
+          </div>
+        );
+      };
+
+      expect(() => {
+        render(
+          <React.StrictMode>
+            <TestComponent />
+          </React.StrictMode>
+        );
+      }).not.toThrow();
+    });
+  });
+
+  describe('Browser API Guards', () => {
+    it('should guard window.location.reload calls', () => {
+      const originalReload = window.location.reload;
+      const mockReload = vi.fn();
+      window.location.reload = mockReload;
+
+      // Test AccessDeniedPage component
+      const { AccessDeniedPage } = require('../components/AccessDeniedPage');
+      
+      render(
+        <AccessDeniedPage 
+          resource="test" 
+          operation="read"
+        />
+      );
+
+      // Should not call reload during SSR
+      expect(mockReload).not.toHaveBeenCalled();
+
+      window.location.reload = originalReload;
+    });
+
+    it('should guard window.history.back calls', () => {
+      const originalBack = window.history.back;
+      const mockBack = vi.fn();
+      window.history.back = mockBack;
+
+      // Test AccessDeniedPage component
+      const { AccessDeniedPage } = require('../components/AccessDeniedPage');
+      
+      render(
+        <AccessDeniedPage 
+          resource="test" 
+          operation="read"
+        />
+      );
+
+      // Should not call back during SSR
+      expect(mockBack).not.toHaveBeenCalled();
+
+      window.history.back = originalBack;
+    });
+
+    it('should guard localStorage access', () => {
+      const originalLocalStorage = global.localStorage;
+      const mockLocalStorage = {
+        getItem: vi.fn(),
+        setItem: vi.fn(),
+        removeItem: vi.fn(),
+        clear: vi.fn(),
+      };
+      global.localStorage = mockLocalStorage as any;
+
+      // Test column order persistence hook
+      const { useColumnOrderPersistence } = require('../hooks/useColumnOrderPersistence');
+      
+      const TestComponent = () => {
+        const { columnOrder } = useColumnOrderPersistence({
+          tableId: 'test',
+          enablePersistence: true,
+        });
+        return <div data-testid="order">{JSON.stringify(columnOrder)}</div>;
+      };
+
+      render(<TestComponent />);
+
+      // Should not access localStorage during SSR
+      expect(mockLocalStorage.getItem).not.toHaveBeenCalled();
+
+      global.localStorage = originalLocalStorage;
+    });
+  });
+
+  describe('Hydration Safety', () => {
+    it('should not cause hydration mismatches', () => {
+      const TestComponent = () => {
+        const [mounted, setMounted] = React.useState(false);
+
+        React.useEffect(() => {
+          setMounted(true);
+        }, []);
+
+        return (
+          <div>
+            <DataTable {...defaultProps} />
+            {mounted && <div data-testid="client-only">Client Only</div>}
+          </div>
+        );
+      };
+
+      expect(() => {
+        render(<TestComponent />);
+      }).not.toThrow();
+    });
+
+    it('should handle server/client differences gracefully', () => {
+      const TestComponent = () => {
+        const [isClient, setIsClient] = React.useState(false);
+
+        React.useEffect(() => {
+          setIsClient(true);
+        }, []);
+
+        return (
+          <div>
+            <DataTable {...defaultProps} />
+            <div data-testid="client-state">
+              {isClient ? 'Client' : 'Server'}
+            </div>
+          </div>
+        );
+      };
+
+      expect(() => {
+        render(<TestComponent />);
+      }).not.toThrow();
+    });
+  });
+
+  describe('Performance in Strict Mode', () => {
+    it('should not cause performance issues with double rendering', () => {
+      const startTime = performance.now();
+      
+      render(
+        <React.StrictMode>
+          <DataTable {...defaultProps} />
+        </React.StrictMode>
+      );
+      
+      const endTime = performance.now();
+      const renderTime = endTime - startTime;
+      
+      // Should render quickly even with double rendering
+      expect(renderTime).toBeLessThan(1000); // 1 second threshold
+    });
+  });
+});

package/src/components/DataTable/components/AccessDeniedPage.tsx

@@ -92,7 +92,7 @@ export function AccessDeniedPage({
   const handleRetry = () => {
     if (onRetry) {
       onRetry();
-    } else {
+    } else if (typeof window !== 'undefined') {
       window.location.reload();
     }
   };
@@ -100,7 +100,7 @@ export function AccessDeniedPage({
   const handleBack = () => {
     if (onBack) {
       onBack();
-    } else {
+    } else if (typeof window !== 'undefined') {
       window.history.back();
     }
   };

package/src/components/DataTable/components/ActionButtons.tsx

@@ -1,38 +1,22 @@
-import React from 'react';
-import { Button } from '../../Button/Button';
+import React, { useMemo } from 'react';
 import { MoreHorizontal } from 'lucide-react';
+import type { Row } from '@tanstack/react-table';
+
+import { Button } from '../../Button/Button';
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
 } from '../../Select/Select';
+import { createLogger } from '../../../utils/logger';
+import type { ActionCondition, DataRecord, DataTableAction } from '../types';
 
-interface ActionButtonsProps {
-  row: any;
+interface ActionButtonsProps<TData extends DataRecord = DataRecord> {
+  row: Row<TData>;
   rowId?: string;
   index?: number;
-  actions?: Array<{
-    label: string;
-    onClick: (row: any) => void;
-    icon?: any;
-    variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost';
-    disabled?: boolean | ((row?: any) => boolean);
-    visible?: boolean | ((row?: any) => boolean);
-    testId?: string;
-    showInEditMode?: boolean;
-    hideInViewMode?: boolean;
-    showInViewMode?: boolean;
-    hidden?: boolean;
-    // Hierarchical action properties
-    showForParent?: boolean;
-    showForChild?: boolean;
-    parentIcon?: any;
-    childIcon?: any;
-    parentLabel?: string;
-    childLabel?: string;
-  }>;
+  actions?: DataTableAction<TData>[];
   isEditing?: boolean;
   className?: string;
   // Hierarchical context
@@ -53,98 +37,109 @@ interface ActionButtonsProps {
   };
 }
 
-export function ActionButtons({ 
-  row, 
+const evaluateCondition = <TData extends DataRecord>(
+  condition: ActionCondition<TData> | undefined,
+  row: TData,
+  defaultValue: boolean
+): boolean => {
+  if (typeof condition === 'boolean') {
+    return condition;
+  }
+
+  if (typeof condition === 'function') {
+    return condition(row);
+  }
+
+  return defaultValue;
+};
+
+function ActionButtonsComponent<TData extends DataRecord = DataRecord>({
+  row,
   actions = [],
   isEditing = false,
   isParent = false,
   hierarchical = false,
-  rbac,
   permissions,
-}: ActionButtonsProps) {
-  // Return null if no actions are provided
+}: ActionButtonsProps<TData>) {
+  const logger = createLogger('ActionButtons');
+  const rowData = row.original;
+
   if (actions.length === 0) {
     return null;
   }
 
-  // Use provided actions
-  const allActions = actions;
-
-  // Filter actions based on current mode, visibility, hierarchical context, and RBAC
-  const visibleActions = allActions.filter(action => {
+  const visibleActions = useMemo(() => actions.filter(action => {
     if (action.hidden) return false;
-    
-    // MANDATORY: Check RBAC permissions for standard actions
+
     if (permissions) {
       if (action.label === 'Edit' && !permissions.canUpdate.can) return false;
       if (action.label === 'Delete' && !permissions.canDelete.can) return false;
     }
-    
-    // Check hierarchical visibility
+
     if (hierarchical) {
       if (action.showForParent && !isParent) return false;
       if (action.showForChild && isParent) return false;
     }
-    
-    // Check visible function/boolean if provided
-    if (typeof action.visible === 'function') {
-      return action.visible(row);
-    } else if (typeof action.visible === 'boolean') {
-      return action.visible;
+
+    if (!evaluateCondition(action.visible, rowData, true)) {
+      return false;
     }
-    
+
     if (isEditing) {
       return action.showInEditMode !== false;
-    } else {
-      return action.hideInViewMode !== true && action.showInViewMode !== false;
     }
-  });
 
-  // Return null if no visible actions
+    return action.hideInViewMode !== true && action.showInViewMode !== false;
+  }), [actions, permissions, hierarchical, isParent, rowData, isEditing]);
+
   if (visibleActions.length === 0) {
     return null;
   }
 
-  // If only a few actions, render them as individual icon-only buttons
+  const renderAction = (action: DataTableAction<TData>, actionIndex: number) => {
+    let Icon = action.icon;
+    let label = action.label;
+
+    if (hierarchical) {
+      if (isParent && action.parentIcon) {
+        Icon = action.parentIcon;
+      } else if (!isParent && action.childIcon) {
+        Icon = action.childIcon;
+      }
+
+      if (isParent && action.parentLabel) {
+        label = action.parentLabel;
+      } else if (!isParent && action.childLabel) {
+        label = action.childLabel;
+      }
+    }
+
+    return { Icon, label } as const;
+  };
+
   if (visibleActions.length <= 6) {
     return (
       <>
         {visibleActions.map((action, actionIndex) => {
-          // Determine the appropriate icon and label based on hierarchical context
-          let Icon = action.icon;
-          let label = action.label;
-          
-          if (hierarchical) {
-            if (isParent && action.parentIcon) {
-              Icon = action.parentIcon;
-            } else if (!isParent && action.childIcon) {
-              Icon = action.childIcon;
-            }
-            
-            if (isParent && action.parentLabel) {
-              label = action.parentLabel;
-            } else if (!isParent && action.childLabel) {
-              label = action.childLabel;
-            }
-          }
-          
-          const isDisabled = typeof action.disabled === 'function' ? action.disabled(row) : action.disabled;
-          
+          const { Icon, label } = renderAction(action, actionIndex);
+          const isDisabled = evaluateCondition(action.disabled, rowData, false);
+
           return (
             <Button
               key={actionIndex}
               variant={action.variant === 'destructive' ? 'destructive' : 'ghost'}
               size="sm"
               onClick={() => {
-                // DEBUG: Log action click
-                if (import.meta.env.MODE === 'development') {
-                  console.log('[ActionButtons] Action clicked:', {
+                if (import.meta.env.MODE === 'development' && !isDisabled) {
+                  logger.debug('Action clicked:', {
                     actionLabel: action.label,
-                    rowOriginal: row.original,
+                    rowOriginal: rowData,
                     actionOnClick: typeof action.onClick
                   });
                 }
-                action.onClick(row.original);
+                if (!isDisabled) {
+                  action.onClick(rowData);
+                }
               }}
               disabled={isDisabled}
               aria-disabled={isDisabled}
@@ -160,7 +155,6 @@ export function ActionButtons({
     );
   }
 
-  // For many actions, use dropdown menu
   return (
     <Select>
       <SelectTrigger asChild>
@@ -171,43 +165,30 @@ export function ActionButtons({
       </SelectTrigger>
       <SelectContent className="!bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
         {visibleActions.map((action, actionIndex) => {
-          // Determine the appropriate icon and label based on hierarchical context
-          let Icon = action.icon;
-          let label = action.label;
-          
-          if (hierarchical) {
-            if (isParent && action.parentIcon) {
-              Icon = action.parentIcon;
-            } else if (!isParent && action.childIcon) {
-              Icon = action.childIcon;
-            }
-            
-            if (isParent && action.parentLabel) {
-              label = action.parentLabel;
-            } else if (!isParent && action.childLabel) {
-              label = action.childLabel;
-            }
-          }
-          
+          const { Icon, label } = renderAction(action, actionIndex);
+          const isDisabled = evaluateCondition(action.disabled, rowData, false);
+
           return (
             <SelectItem
               key={actionIndex}
               value={`action-${actionIndex}`}
               onClick={() => {
-                // DEBUG: Log action click
-                if (import.meta.env.MODE === 'development') {
-                  console.log('[ActionButtons] Dropdown action clicked:', {
+                if (import.meta.env.MODE === 'development' && !isDisabled) {
+                  logger.debug('Action clicked from dropdown:', {
                     actionLabel: action.label,
-                    rowOriginal: row.original,
-                    actionOnClick: typeof action.onClick
+                    rowOriginal: rowData
                   });
                 }
-                action.onClick(row.original);
+                if (!isDisabled) {
+                  action.onClick(rowData);
+                }
               }}
-              className={action.variant === 'destructive' ? 'text-acc-600' : ''}
+              data-testid={action.testId}
+              className="flex items-center gap-2"
+              aria-disabled={isDisabled}
             >
-              {Icon && <Icon className="mr-2 h-4 w-4" />}
-              {label}
+              {Icon && <Icon className="h-4 w-4" />}
+              <span>{label}</span>
             </SelectItem>
           );
         })}
@@ -216,3 +197,6 @@ export function ActionButtons({
   );
 }
 
+const ActionButtons = React.memo(ActionButtonsComponent) as typeof ActionButtonsComponent;
+
+export { ActionButtons };