@jmruthers/pace-core 0.6.6 → 0.6.7

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

@@ -1,570 +0,0 @@
-/**
- * @file Unit Tests for useColumnReordering Hook
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Hooks/__tests__
- */
-
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useColumnReordering } from '../useColumnReordering';
-import type { Column } from '@tanstack/react-table';
-
-// Mock column factory
-function createMockColumn(id: string): Column<any, unknown> {
-  return {
-    id,
-    accessorKey: id,
-    size: 100,
-    enableSorting: true,
-    enableColumnFilter: true,
-  } as Column<any, unknown>;
-}
-
-describe('[unit] useColumnReordering', () => {
-  const mockColumns = [
-    createMockColumn('col1'),
-    createMockColumn('col2'),
-    createMockColumn('col3'),
-    createMockColumn('col4'),
-  ];
-
-  const defaultColumnOrder = mockColumns.map(col => col.id);
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Initialization', () => {
-    it('initializes with column IDs from columns array', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      expect(result.current.columnOrder).toEqual(defaultColumnOrder);
-    });
-
-    it('initializes with saved column order when persistence and saved order are provided', () => {
-      const savedOrder = ['col3', 'col1', 'col2', 'col4'];
-      
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false, // Disable to prevent auto-update
-        enablePersistence: true,
-        tableId: 'test',
-        savedColumnOrder: savedOrder
-      }));
-
-      expect(result.current.columnOrder).toEqual(savedOrder);
-    });
-
-    it('uses default column order when persistence enabled but no saved order', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false,
-        enablePersistence: true,
-        tableId: 'test',
-        savedColumnOrder: undefined
-      }));
-
-      expect(result.current.columnOrder).toEqual(defaultColumnOrder);
-    });
-
-    it('ignores empty saved order', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true,
-        savedColumnOrder: []
-      }));
-
-      expect(result.current.columnOrder).toEqual(defaultColumnOrder);
-    });
-  });
-
-  describe('Move Column', () => {
-    it('moves column from one index to another', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.moveColumn(0, 2); // Move col1 to position 2
-      });
-
-      expect(result.current.columnOrder).toEqual(['col2', 'col3', 'col1', 'col4']);
-    });
-
-    it('does nothing when enableReordering is false', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-
-      act(() => {
-        result.current.moveColumn(0, 2);
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-
-    it('handles moving column to same position', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-
-      act(() => {
-        result.current.moveColumn(1, 1);
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-  });
-
-  describe('Move Left/Right', () => {
-    it('moves column left when not at the beginning', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.moveColumnLeft('col3');
-      });
-
-      expect(result.current.columnOrder).toEqual(['col1', 'col3', 'col2', 'col4']);
-    });
-
-    it('moves column right when not at the end', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.moveColumnRight('col2');
-      });
-
-      expect(result.current.columnOrder).toEqual(['col1', 'col3', 'col2', 'col4']);
-    });
-
-    it('does not move column left when at the beginning', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-
-      act(() => {
-        result.current.moveColumnLeft('col1');
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-
-    it('does not move column right when at the end', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-
-      act(() => {
-        result.current.moveColumnRight('col4');
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-
-    it('handles non-existent column ID gracefully', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-
-      act(() => {
-        result.current.moveColumnLeft('non-existent-col');
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-  });
-
-  describe('Can Move Checks', () => {
-    it('returns true when column can move left', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      expect(result.current.canMoveLeft('col2')).toBe(true);
-      expect(result.current.canMoveLeft('col3')).toBe(true);
-      expect(result.current.canMoveLeft('col4')).toBe(true);
-    });
-
-    it('returns false when column cannot move left', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      expect(result.current.canMoveLeft('col1')).toBe(false);
-    });
-
-    it('returns true when column can move right', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      expect(result.current.canMoveRight('col1')).toBe(true);
-      expect(result.current.canMoveRight('col2')).toBe(true);
-      expect(result.current.canMoveRight('col3')).toBe(true);
-    });
-
-    it('returns false when column cannot move right', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      expect(result.current.canMoveRight('col4')).toBe(false);
-    });
-
-    it('returns false for all checks when enableReordering is false', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false
-      }));
-
-      expect(result.current.canMoveLeft('col2')).toBe(false);
-      expect(result.current.canMoveRight('col1')).toBe(false);
-    });
-  });
-
-  describe('Reorder Columns', () => {
-    it('reorders columns with custom order array', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      const newOrder = ['col4', 'col2', 'col1', 'col3'];
-
-      act(() => {
-        result.current.reorderColumns(newOrder);
-      });
-
-      expect(result.current.columnOrder).toEqual(newOrder);
-    });
-
-    it('does nothing when enableReordering is false', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false
-      }));
-
-      const initialOrder = [...result.current.columnOrder];
-      const newOrder = ['col4', 'col2', 'col1', 'col3'];
-
-      act(() => {
-        result.current.reorderColumns(newOrder);
-      });
-
-      expect(result.current.columnOrder).toEqual(initialOrder);
-    });
-
-    it('handles empty order array', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.reorderColumns([]);
-      });
-
-      expect(result.current.columnOrder).toEqual([]);
-    });
-
-    it('handles order with missing column IDs', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.reorderColumns(['col1', 'col3']); // Missing col2 and col4
-      });
-
-      expect(result.current.columnOrder).toEqual(['col1', 'col3']);
-    });
-  });
-
-  describe('Ordered Columns', () => {
-    it('returns columns in correct order', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.reorderColumns(['col3', 'col1', 'col2', 'col4']);
-      });
-
-      expect(result.current.orderedColumns.map(col => col.id)).toEqual(['col3', 'col1', 'col2', 'col4']);
-    });
-
-    it('returns columns in default order when enableReordering is false', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false
-      }));
-
-      expect(result.current.orderedColumns).toEqual(mockColumns);
-    });
-
-    it('filters out missing columns from order', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true
-      }));
-
-      act(() => {
-        result.current.reorderColumns(['col2', 'col4', 'non-existent']);
-      });
-
-      const orderedIds = result.current.orderedColumns.map(col => col.id);
-      expect(orderedIds).toEqual(['col2', 'col4']);
-      expect(orderedIds).not.toContain('non-existent');
-    });
-
-    it('handles empty columns array', () => {
-      const { result } = renderHook(() => useColumnReordering({
-        columns: [],
-        enableReordering: false // Disable reordering to avoid infinite loop
-      }));
-
-      expect(result.current.orderedColumns).toEqual([]);
-    });
-  });
-
-  describe('Callbacks', () => {
-    it('calls onColumnOrderChange when order is updated', () => {
-      const onColumnOrderChange = vi.fn();
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true,
-        onColumnOrderChange
-      }));
-
-      const newOrder = ['col3', 'col1', 'col2', 'col4'];
-
-      act(() => {
-        result.current.reorderColumns(newOrder);
-      });
-
-      expect(onColumnOrderChange).toHaveBeenCalledWith(newOrder);
-    });
-
-    it('calls onColumnOrderUpdate when order is updated', () => {
-      const onColumnOrderUpdate = vi.fn();
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true,
-        onColumnOrderUpdate
-      }));
-
-      const newOrder = ['col3', 'col1', 'col2', 'col4'];
-
-      act(() => {
-        result.current.reorderColumns(newOrder);
-      });
-
-      expect(onColumnOrderUpdate).toHaveBeenCalledWith(newOrder);
-    });
-
-    it('calls both callbacks when provided', () => {
-      const onColumnOrderChange = vi.fn();
-      const onColumnOrderUpdate = vi.fn();
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true,
-        onColumnOrderChange,
-        onColumnOrderUpdate
-      }));
-
-      const newOrder = ['col3', 'col1', 'col2', 'col4'];
-
-      act(() => {
-        result.current.reorderColumns(newOrder);
-      });
-
-      expect(onColumnOrderChange).toHaveBeenCalledWith(newOrder);
-      expect(onColumnOrderUpdate).toHaveBeenCalledWith(newOrder);
-    });
-
-    it('calls callbacks when moving columns', () => {
-      const onColumnOrderChange = vi.fn();
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: true,
-        onColumnOrderChange
-      }));
-
-      act(() => {
-        result.current.moveColumn(0, 2);
-      });
-
-      expect(onColumnOrderChange).toHaveBeenCalledTimes(1);
-      expect(onColumnOrderChange).toHaveBeenCalledWith(['col2', 'col3', 'col1', 'col4']);
-    });
-
-    it('does not call callbacks when enableReordering is false', () => {
-      const onColumnOrderChange = vi.fn();
-      const onColumnOrderUpdate = vi.fn();
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: mockColumns,
-        enableReordering: false,
-        onColumnOrderChange,
-        onColumnOrderUpdate
-      }));
-
-      act(() => {
-        result.current.reorderColumns(['col3', 'col1', 'col2', 'col4']);
-      });
-
-      expect(onColumnOrderChange).not.toHaveBeenCalled();
-      expect(onColumnOrderUpdate).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Column Updates', () => {
-    it('updates order when columns change', () => {
-      const { result, rerender } = renderHook(
-        ({ columns }) => useColumnReordering({
-          columns,
-          enableReordering: true
-        }),
-        {
-          initialProps: { columns: mockColumns }
-        }
-      );
-
-      const newColumns = [
-        createMockColumn('col5'),
-        createMockColumn('col6'),
-      ];
-
-      rerender({ columns: newColumns });
-
-      expect(result.current.columnOrder).toEqual(['col5', 'col6']);
-    });
-
-    it('preserves existing order when columns do not change', () => {
-      const { result, rerender } = renderHook(
-        ({ columns }) => useColumnReordering({
-          columns,
-          enableReordering: true
-        }),
-        {
-          initialProps: { columns: mockColumns }
-        }
-      );
-
-      act(() => {
-        result.current.reorderColumns(['col3', 'col1', 'col2', 'col4']);
-      });
-
-      rerender({ columns: mockColumns });
-
-      expect(result.current.columnOrder).toEqual(['col3', 'col1', 'col2', 'col4']);
-    });
-
-    it('handles column ID changes gracefully', () => {
-      const { result, rerender } = renderHook(
-        ({ columns }) => useColumnReordering({
-          columns,
-          enableReordering: true
-        }),
-        {
-          initialProps: { columns: mockColumns }
-        }
-      );
-
-      act(() => {
-        result.current.reorderColumns(['col3', 'col1']);
-      });
-
-      const modifiedColumns = [
-        createMockColumn('col3'),
-        createMockColumn('col5'), // Changed from col2
-      ];
-
-      rerender({ columns: modifiedColumns });
-
-      // After columns change, hook updates to new column order
-      // col3 and col5 both exist now, but only col3 is in the modified list
-      const orderedIds = result.current.orderedColumns.map(col => col.id);
-      expect(orderedIds).toContain('col3');
-    });
-  });
-
-  describe('Edge Cases', () => {
-    it('handles single column', () => {
-      const singleColumn = [createMockColumn('col1')];
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: singleColumn,
-        enableReordering: true
-      }));
-
-      expect(result.current.columnOrder).toEqual(['col1']);
-      expect(result.current.canMoveLeft('col1')).toBe(false);
-      expect(result.current.canMoveRight('col1')).toBe(false);
-    });
-
-    it('handles columns without IDs', () => {
-      const columnsWithoutIds = mockColumns.map(col => ({
-        ...col,
-        id: undefined
-      }));
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: columnsWithoutIds,
-        enableReordering: true
-      }));
-
-      expect(result.current.columnOrder).toEqual([undefined, undefined, undefined, undefined]);
-    });
-
-    it('handles null/undefined columns gracefully', () => {
-      const columnsWithNulls = [
-        createMockColumn('col1'),
-        createMockColumn('col2'),
-      ];
-
-      const { result } = renderHook(() => useColumnReordering({
-        columns: columnsWithNulls,
-        enableReordering: true
-      }));
-
-      expect(result.current.columnOrder.length).toBeGreaterThan(0);
-    });
-  });
-});
-

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

@@ -1,123 +0,0 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
-import type { Column } from '@tanstack/react-table';
-
-/**
- * Props for the useColumnReordering hook.
- * @template TData - The type of data records in the table
- */
-interface UseColumnReorderingProps<TData> {
-  columns: Column<TData, unknown>[];
-  onColumnOrderChange?: (columnOrder: string[]) => void;
-  enableReordering?: boolean;
-  enablePersistence?: boolean;
-  tableId?: string;
-  savedColumnOrder?: string[];
-  onColumnOrderUpdate?: (columnOrder: string[]) => void;
-}
-
-/**
- * Hook for managing column reordering in DataTable.
- * Provides functions to move columns and persist order changes.
- * 
- * @template TData - The type of data records in the table
- * @param props - Column reordering configuration
- * @returns Column order state and reordering functions
- */
-export function useColumnReordering<TData>({
-  columns,
-  onColumnOrderChange,
-  enableReordering = false,
-  enablePersistence = false,
-  tableId,
-  savedColumnOrder,
-  onColumnOrderUpdate,
-}: UseColumnReorderingProps<TData>) {
-  const [columnOrder, setColumnOrder] = useState<string[]>(() => {
-    // Use saved order if available, otherwise use default column order
-    if (enablePersistence && savedColumnOrder && savedColumnOrder.length > 0) {
-      return savedColumnOrder;
-    }
-    return columns.map(col => col.id);
-  });
-
-  // Update column order when columns change
-  // Using useEffect for side effects (state updates)
-  useEffect(() => {
-    if (enableReordering) {
-      const newOrder = columns.map(col => col.id);
-      setColumnOrder(prevOrder => {
-        // Only update if the order has actually changed
-        if (JSON.stringify(prevOrder) !== JSON.stringify(newOrder)) {
-          return newOrder;
-        }
-        return prevOrder;
-      });
-    }
-  }, [columns, enableReordering]);
-
-  const moveColumn = useCallback((fromIndex: number, toIndex: number) => {
-    if (!enableReordering) return;
-    
-    const newOrder = [...columnOrder];
-    const [movedColumn] = newOrder.splice(fromIndex, 1);
-    newOrder.splice(toIndex, 0, movedColumn);
-    
-    setColumnOrder(newOrder);
-    onColumnOrderChange?.(newOrder);
-    onColumnOrderUpdate?.(newOrder);
-  }, [columnOrder, onColumnOrderChange, onColumnOrderUpdate, enableReordering]);
-
-  const moveColumnLeft = useCallback((columnId: string) => {
-    if (!enableReordering) return;
-    
-    const currentIndex = columnOrder.indexOf(columnId);
-    if (currentIndex > 0) {
-      moveColumn(currentIndex, currentIndex - 1);
-    }
-  }, [columnOrder, moveColumn, enableReordering]);
-
-  const moveColumnRight = useCallback((columnId: string) => {
-    if (!enableReordering) return;
-    
-    const currentIndex = columnOrder.indexOf(columnId);
-    if (currentIndex < columnOrder.length - 1) {
-      moveColumn(currentIndex, currentIndex + 1);
-    }
-  }, [columnOrder, moveColumn, enableReordering]);
-
-  const canMoveLeft = useCallback((columnId: string) => {
-    return enableReordering && columnOrder.indexOf(columnId) > 0;
-  }, [columnOrder, enableReordering]);
-
-  const canMoveRight = useCallback((columnId: string) => {
-    return enableReordering && columnOrder.indexOf(columnId) < columnOrder.length - 1;
-  }, [columnOrder, enableReordering]);
-
-  const reorderColumns = useCallback((newOrder: string[]) => {
-    if (!enableReordering) return;
-    
-    setColumnOrder(newOrder);
-    onColumnOrderChange?.(newOrder);
-    onColumnOrderUpdate?.(newOrder);
-  }, [onColumnOrderChange, onColumnOrderUpdate, enableReordering]);
-
-  // Get columns in the current order
-  const orderedColumns = useMemo(() => {
-    if (!enableReordering) return columns;
-    
-    return columnOrder
-      .map(id => columns.find(col => col.id === id))
-      .filter(Boolean) as Column<TData, unknown>[];
-  }, [columns, columnOrder, enableReordering]);
-
-  return {
-    columnOrder,
-    orderedColumns,
-    moveColumn,
-    moveColumnLeft,
-    moveColumnRight,
-    canMoveLeft,
-    canMoveRight,
-    reorderColumns,
-  };
-}