@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/DataTable/core/DataTableContext.tsx

@@ -1,216 +0,0 @@
-/**
- * @file DataTable Context
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Architecture
- * @since 0.3.0
- */
-
-import React, { createContext, useContext, useMemo, useCallback, useRef, useEffect } from 'react';
-import { useReactTable, getCoreRowModel, getFilteredRowModel, getSortedRowModel, getPaginationRowModel } from '@tanstack/react-table';
-import { ChevronDown, ChevronUp, ChevronsUpDown, Filter, MoreHorizontal, Plus, Search, Settings, Trash2, Upload, Download, Eye, Edit, Copy } from 'lucide-react';
-import { Button } from '../../Button/Button';
-import { Input } from '../../Input/Input';
-import { Checkbox } from '../../Checkbox/Checkbox';
-// DropdownMenu components have been merged into Select components
-import { Dialog, DialogContent, DialogHeader, DialogTrigger } from '../../Dialog/Dialog';
-import type { DataTableContext as IDataTableContext, DataTableConfig, DataTableUtils } from './interfaces';
-import type { DataRecord, DataTableAction } from '../types';
-import type { ColumnDef } from '@tanstack/react-table';
-import { DataManager } from './DataManager';
-import { ColumnManagerImpl } from './ColumnManager';
-import { ActionManagerImpl } from './ActionManager';
-import { StateManagerImpl } from './StateManager';
-import { PluginRegistryImpl } from './PluginRegistry';
-import { LocalDataAdapter } from './LocalDataAdapter';
-
-// Create the context
-const DataTableContext = createContext<IDataTableContext<DataRecord> | null>(null);
-
-/**
- * Props for the DataTableProvider component.
- * @template TData - The type of data records in the table
- */
-export interface DataTableProviderProps<TData extends DataRecord> {
-  children: React.ReactNode;
-  config: DataTableConfig<TData>;
-  data?: TData[];
-  columns?: ColumnDef<TData>[];
-  actions?: DataTableAction<TData>[];
-  pageSize?: number;
-}
-
-export function DataTableProvider<TData extends DataRecord>({
-  children,
-  config,
-  data = [],
-  columns = [],
-  actions = [],
-  pageSize = 10,
-}: DataTableProviderProps<TData>) {
-  // Create managers
-  const adapter = useMemo(() => new LocalDataAdapter<TData>(data), [data]);
-  const dataManager = useMemo(() => new DataManager<TData>(adapter), [adapter]);
-  const columnManager = useMemo(() => new ColumnManagerImpl<TData>(columns), [columns]);
-  const actionManager = useMemo(() => new ActionManagerImpl<TData>(actions), [actions]);
-  const stateManager = useMemo(() => new StateManagerImpl<TData>({
-    ui: {
-      globalFilter: '',
-      columnFilters: [],
-      sorting: [],
-      grouping: [],
-      expanded: {},
-      pagination: {
-        pageIndex: 0,
-        pageSize: pageSize,
-      },
-      rowSelection: {},
-      editing: {
-        rowId: null,
-        data: {},
-        isCreating: false,
-        creationData: {},
-      },
-      modals: {
-        import: false,
-        export: false,
-        view: false,
-        viewData: null,
-      },
-    }
-  }), [pageSize]);
-  const pluginRegistry = useMemo(() => new PluginRegistryImpl<TData>(), []);
-
-  // Create utilities
-  const utils: DataTableUtils<TData> = useMemo(() => ({
-    getRowId: (row: TData, index: number) => {
-      const record = row as Record<string, unknown>;
-      return (record.id ? String(record.id) : String(index));
-    },
-    formatValue: (value: unknown, column: ColumnDef<TData>) => String(value),
-    validateData: (data: Partial<TData>) => null,
-    debounce: <T extends (...args: unknown[]) => unknown>(func: T, delay: number) => {
-      let timeoutId: NodeJS.Timeout;
-      return ((...args: unknown[]) => {
-        clearTimeout(timeoutId);
-        timeoutId = setTimeout(() => func(...args), delay);
-      }) as T;
-    },
-  }), []);
-
-  // Create context value
-  const contextValue: IDataTableContext<TData> = useMemo(() => ({
-    dataManager,
-    columnManager,
-    actionManager,
-    stateManager,
-    pluginRegistry,
-    adapter,
-    observable: stateManager,
-    config,
-    utils,
-  }), [dataManager, columnManager, actionManager, stateManager, pluginRegistry, adapter, config, utils]);
-
-  // Initialize data
-  useEffect(() => {
-    // Update the adapter with new data
-    adapter.setData(data);
-    
-    if (data.length > 0) {
-      stateManager.updateData(data);
-    } else {
-      // Handle empty data case
-      stateManager.updateData([]);
-    }
-  }, [data, dataManager, stateManager, adapter]);
-
-  // Initialize columns
-  useEffect(() => {
-    if (columns.length > 0) {
-      columnManager.setColumns(columns);
-      stateManager.updateColumns(columns);
-    }
-  }, [columns, columnManager, stateManager]);
-
-  // Initialize actions
-  useEffect(() => {
-    if (actions.length > 0) {
-      actionManager.setActions(actions);
-      stateManager.updateActions(actions);
-    }
-  }, [actions, actionManager, stateManager]);
-
-  return (
-    <DataTableContext.Provider value={contextValue as unknown as IDataTableContext<DataRecord>}>
-      {children}
-    </DataTableContext.Provider>
-  );
-}
-
-/**
- * Hook to use DataTable context
- */
-export function useDataTableContext<TData extends DataRecord = DataRecord>(): IDataTableContext<TData> {
-  const context = useContext(DataTableContext);
-  if (!context) {
-    throw new Error('useDataTableContext must be used within a DataTableProvider');
-  }
-  return context as unknown as IDataTableContext<TData>;
-}
-
-/**
- * Hook to use specific managers
- */
-/**
- * Hook to access DataTable data manager.
- * 
- * @template TData - The type of data records in the table
- * @returns Data manager instance
- */
-export function useDataManager<TData extends DataRecord = DataRecord>() {
-  const context = useDataTableContext<TData>();
-  return context.dataManager;
-}
-
-/**
- * Hook to access DataTable column manager.
- * 
- * @template TData - The type of data records in the table
- * @returns Column manager instance
- */
-export function useColumnManager<TData extends DataRecord = DataRecord>() {
-  const context = useDataTableContext<TData>();
-  return context.columnManager;
-}
-
-/**
- * Hook to access DataTable action manager.
- * 
- * @template TData - The type of data records in the table
- * @returns Action manager instance
- */
-export function useActionManager<TData extends DataRecord = DataRecord>() {
-  const context = useDataTableContext<TData>();
-  return context.actionManager;
-}
-
-/**
- * Hook to access DataTable state manager.
- * 
- * @template TData - The type of data records in the table
- * @returns State manager instance
- */
-export function useStateManager<TData extends DataRecord = DataRecord>() {
-  const context = useDataTableContext<TData>();
-  return context.stateManager;
-}
-
-/**
- * Hook to access DataTable plugin registry.
- * 
- * @template TData - The type of data records in the table
- * @returns Plugin registry instance
- */
-export function usePluginRegistry<TData extends DataRecord = DataRecord>() {
-  const context = useDataTableContext<TData>();
-  return context.pluginRegistry;
-} 

package/src/components/DataTable/core/__tests__/DataTableContext.test.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { render, renderHook, waitFor, act } from '@testing-library/react';
-import { describe, it, expect, vi } from 'vitest';
-import { DataTableProvider, useActionManager, useColumnManager, useDataManager, useDataTableContext, usePluginRegistry, useStateManager } from '../DataTableContext';
-import type { DataTableConfig, DataTableContext as IDataTableContext } from '../interfaces';
-import type { DataRecord, DataTableAction } from '../../types';
-import type { ColumnDef } from '@tanstack/react-table';
-
-interface TestRecord extends DataRecord {
-  id: string;
-  name: string;
-}
-
-const baseConfig: DataTableConfig<TestRecord> = {
-  features: {},
-  enableVirtualization: false,
-  enableCaching: false,
-  cacheTimeout: 0,
-  enableKeyboardNavigation: true,
-  enableScreenReaderSupport: true,
-};
-
-const columns: ColumnDef<TestRecord>[] = [
-  { id: 'name', header: 'Name', accessorKey: 'name' },
-];
-
-const actions: DataTableAction<TestRecord>[] = [
-  { label: 'View', testId: 'view', onClick: vi.fn() },
-];
-
-describe('DataTableContext', () => {
-  it('throws when hooks are used outside of the provider', () => {
-    expect(() => renderHook(() => useDataTableContext<TestRecord>())).toThrow(
-      'useDataTableContext must be used within a DataTableProvider'
-    );
-  });
-
-  it('exposes initialized managers populated from props', async () => {
-    const onContext = vi.fn();
-    const data: TestRecord[] = [{ id: '1', name: 'Alpha' }];
-
-    render(
-      <DataTableProvider config={baseConfig} data={data} columns={columns} actions={actions}>
-        <TestConsumer onContext={onContext} />
-      </DataTableProvider>
-    );
-
-    await waitFor(() => expect(onContext).toHaveBeenCalled());
-    const ctx = onContext.mock.calls.at(-1)?.[0];
-
-    expect(ctx.dataManager.getAdapter().name).toBe('local');
-    expect(ctx.stateManager.getState().data).toEqual(data);
-    expect(ctx.columnManager.getColumns()).toHaveLength(1);
-    expect(ctx.actionManager.getActions()).toHaveLength(1);
-  });
-
-  it('reacts to prop changes and updates managed state', async () => {
-    const onContext = vi.fn();
-    const initialData: TestRecord[] = [{ id: '1', name: 'Alpha' }];
-    const updatedData: TestRecord[] = [{ id: '2', name: 'Beta' }];
-    const updatedColumns: ColumnDef<TestRecord>[] = [
-      { id: 'name', header: 'Name', accessorKey: 'name' },
-      { id: 'id', header: 'Identifier', accessorKey: 'id' },
-    ];
-
-    const { rerender } = render(
-      <DataTableProvider config={baseConfig} data={initialData} columns={columns} actions={actions}>
-        <TestConsumer onContext={onContext} />
-      </DataTableProvider>
-    );
-
-    await waitFor(() => expect(onContext).toHaveBeenCalled());
-    onContext.mockClear();
-
-    rerender(
-      <DataTableProvider config={baseConfig} data={updatedData} columns={updatedColumns} actions={[...actions]}> 
-        <TestConsumer onContext={onContext} />
-      </DataTableProvider>
-    );
-
-    await waitFor(() => expect(onContext).toHaveBeenCalled());
-    const ctx = onContext.mock.calls.at(-1)?.[0];
-
-    expect(ctx.stateManager.getState().data).toEqual(updatedData);
-    expect(ctx.columnManager.getColumns()).toHaveLength(2);
-    expect(ctx.actionManager.getActions()).toHaveLength(actions.length);
-  });
-
-  it('exposes hook shorthands and utility helpers', async () => {
-    vi.useFakeTimers();
-    const wrapper = ({ children }: { children: React.ReactNode }) => (
-      <DataTableProvider config={baseConfig} data={[{ id: '1', name: 'Alpha' }]} columns={columns} actions={actions}>
-        {children}
-      </DataTableProvider>
-    );
-
-    const { result: managerResult } = renderHook(
-      () => ({
-        data: useDataManager<TestRecord>(),
-        columns: useColumnManager<TestRecord>(),
-        actions: useActionManager<TestRecord>(),
-        state: useStateManager<TestRecord>(),
-        plugins: usePluginRegistry<TestRecord>(),
-        context: useDataTableContext<TestRecord>(),
-      }),
-      { wrapper }
-    );
-
-    expect(managerResult.current.data.getAdapter().name).toBe('local');
-    expect(managerResult.current.columns.getColumns()).toHaveLength(1);
-    expect(managerResult.current.actions.getActionCount()).toBe(1);
-    expect(managerResult.current.state.getObserverCount()).toBe(0);
-    expect(managerResult.current.plugins.getPluginCount()).toBe(0);
-
-    const debounced = managerResult.current.context.utils.debounce(vi.fn(), 50);
-    debounced();
-    debounced();
-    expect(managerResult.current.context.utils.getRowId?.({} as any, 3)).toBe('3');
-
-    await act(async () => {
-      vi.advanceTimersByTime(60);
-    });
-
-    expect(managerResult.current.context.utils.debounce).toBeDefined();
-    expect((managerResult.current.context.utils.debounce as any).mock).toBeUndefined();
-    vi.useRealTimers();
-  });
-});
-
-function TestConsumer({ onContext }: { onContext: (ctx: IDataTableContext<TestRecord>) => void }) {
-  const ctx = useDataTableContext<TestRecord>();
-  React.useEffect(() => {
-    onContext(ctx);
-  }, [ctx, onContext]);
-  return null;
-}