@jmruthers/pace-core 0.6.10 → 0.6.11

package/src/components/DataTable/DataTable.tsx

@@ -46,7 +46,7 @@
  * @example
  * ```tsx
  * // Basic usage - simple data table (automatically optimized)
- * import { DataTable, type DataTableColumn } from '@jmruthers/pace-core';
+ * import { DataTable, Badge, type DataTableColumn } from '@jmruthers/pace-core';
  * 
  * interface User {
  *   id: string;
@@ -80,13 +80,9 @@
  *     header: 'Status',
  *     sortable: true,
  *     cell: ({ row }) => (
- *       <span className={`px-2 py-1 rounded text-xs ${
- *         row.original.status === 'active' 
- *           ? 'bg-main-100 text-main-800'
- *           : 'bg-acc-100 text-acc-800'
- *       }`}>
+ *       <Badge variant={row.original.status === 'active' ? 'soft-main-normal' : 'soft-acc-normal'}>
  *         {row.original.status}
- *       </span>
+ *       </Badge>
  *     ),
  *   },
  * ];
@@ -126,7 +122,8 @@
  *   onDeleteRow={(row) => console.log('Delete:', row)}
  * />
  * ```
- * 
+ * For status or tag cells, use pace-core Badge or theme tokens (main-*, acc-*) without typography utilities.
+ *
  * @example
  * ```tsx
  * // DataTable with custom column ordering and selection
@@ -281,10 +278,11 @@
  */
 
 import React from 'react';
-import { DataTableCore } from './components/DataTableCore';
+import { DataTableCore } from './ui/layout/DataTableCore';
 import { createLogger } from '../../utils/core/logger';
 import { normalizeDataTableFeatures, type DataRecord, type GetRowId, type PerformanceConfig, type ServerSideConfig, type ChunkingConfig, type SearchIndexConfig, type PaginationMode, type EmptyStateConfig, type DataTableFeatureConfig, type DataTableColumn, type AggregateConfig, type DataTableAction, type HierarchicalConfig, type DataTableRBACConfig } from './types';
-import type { ImportModalConfig } from './components/ImportModal';
+import type { ImportModalConfig } from './ui/modals/ImportModal';
+import type { ImportHandlerResult } from './ui/modals/importModalPersistence';
 
 // ============================================================================
 // ENHANCED DATATABLE PROPS
@@ -387,7 +385,7 @@ export interface DataTableProps<TData extends DataRecord> {
   /** Callback when a new row is created */
   onCreateRow?: (data: Partial<TData>) => void;
   /** Callback when data is imported */
-  onImport?: (data: TData[]) => void | Promise<void>;
+  onImport?: (data: TData[]) => ImportHandlerResult;
   /** Callback for custom export functionality */
   onExport?: (options: import('./types').ExportOptions<TData>) => void | Promise<void>;
   /** Callback when row selection changes */
@@ -412,7 +410,9 @@ export interface DataTableProps<TData extends DataRecord> {
   
   /** Import modal configuration */
   importModalConfig?: ImportModalConfig;
-  
+  /** Called when the import modal is closed (e.g. to refetch table data). */
+  onImportModalClose?: () => void;
+
   /** Custom row actions - use this for custom action buttons */
   actions?: DataTableAction<TData>[];
   

package/src/components/DataTable/DataTableCore.integration.test.tsx

@@ -0,0 +1,458 @@
+/**
+ * @file DataTableCore Integration-Light Tests
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable
+ *
+ * Renders DataTableCore with REAL pipeline/state hooks. Only auth, RBAC,
+ * useDataTablePerformance (client-side), and useIsPrint are mocked.
+ * Exercises the full hook chain and main components to improve coverage.
+ * See TESTING.md for strategy.
+ */
+
+import React from 'react';
+import { screen, waitFor, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { DataTableCore } from './ui/layout/DataTableCore';
+import { createTestData, createTestColumns } from './test-utils/dataFactories';
+import { createDefaultFeatures, createFullFeatures, createFeaturesWithEnabled } from './test-utils.ts';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
+
+// ---------------------------------------------------------------------------
+// Mocks: external I/O and environment only (no pipeline/state mocks)
+// ---------------------------------------------------------------------------
+
+const mockUseCanFn = vi.hoisted(() =>
+  vi.fn(() => ({
+    can: true,
+    isLoading: false,
+    error: null,
+    refetch: vi.fn().mockResolvedValue(undefined),
+  }))
+);
+
+const mockUseResolvedScopeFn = vi.hoisted(() =>
+  vi.fn(() => ({
+    resolvedScope: {
+      organisationId: 'test-org-id',
+      eventId: 'test-event-id',
+      appId: 'test-app-id',
+    },
+    isLoading: false,
+    error: null,
+  }))
+);
+
+vi.mock('../../rbac/hooks/usePermissions', () => ({
+  useCan: (...args: unknown[]) => mockUseCanFn(...args),
+}));
+
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
+  useResolvedScope: (...args: unknown[]) => mockUseResolvedScopeFn(...args),
+}));
+
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
+  useUnifiedAuth: () => ({
+    user: { id: 'test-user', email: 'test@example.com' },
+    isAuthenticated: true,
+    isLoading: false,
+    error: null,
+    selectedOrganisation: { id: 'test-org-id' },
+    selectedEvent: { event_id: 'test-event-id' },
+    supabase: {},
+  }),
+  UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}));
+
+vi.mock('../../hooks/useDataTablePerformance', () => ({
+  useDataTablePerformance: vi.fn((opts: { data: unknown[] }) => ({
+    paginationMode: 'client' as const,
+    isVirtualized: false,
+    pageSizeOptions: [10, 25, 50],
+    processedData: opts?.data ?? [],
+    totalCount: Array.isArray(opts?.data) ? opts.data.length : 0,
+    isLoading: false,
+    searchQuery: '',
+    setSearchQuery: vi.fn(),
+    searchResults: [],
+    fetchServerData: vi.fn(),
+    serverData: null,
+    memoryUsage: 0,
+    errorState: {
+      hasErrors: false,
+      errorCount: 0,
+      lastError: null,
+      fallbacksActive: [],
+    },
+    retryLastOperation: vi.fn(),
+    clearErrors: vi.fn(),
+    cleanup: vi.fn(),
+    shouldUseVirtualization: false,
+    performanceMetrics: {},
+  })),
+}));
+
+vi.mock('../../hooks/useIsPrint', () => ({
+  useIsPrint: () => false,
+}));
+
+describe('DataTableCore (integration-light)', () => {
+  const mockData = createTestData(5);
+  const mockColumns = createTestColumns();
+  const mockRBAC = { pageId: 'test-page' };
+  const mockPerformance = { serverSideThreshold: 10000 };
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockUseCanFn.mockReturnValue({
+      can: true,
+      isLoading: false,
+      error: null,
+      refetch: vi.fn().mockResolvedValue(undefined),
+    });
+  });
+
+  it('renders table with real hooks: headers and rows appear', async () => {
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={createDefaultFeatures()}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+    expect(screen.getByText('User 2')).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Age' })).toBeInTheDocument();
+  });
+
+  it('renders with title and description when provided', async () => {
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        title="Integration Table"
+        description="Real pipeline test"
+        features={createDefaultFeatures()}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('Integration Table')).toBeInTheDocument();
+    expect(screen.getByText('Real pipeline test')).toBeInTheDocument();
+  });
+
+  it('shows search input when search is enabled', async () => {
+    const features = createDefaultFeatures();
+    features.search = true;
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByPlaceholderText('Search...')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('table')).toBeInTheDocument();
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+  });
+
+  it('shows sortable column headers when sorting is enabled', async () => {
+    const features = createDefaultFeatures();
+    features.sorting = true;
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+  });
+
+  it('can trigger sort on column header when sorting enabled', async () => {
+    const user = userEvent.setup();
+    const features = createDefaultFeatures();
+    features.sorting = true;
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    const nameHeader = screen.getByRole('columnheader', { name: /Name/i });
+    await user.click(nameHeader);
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+  });
+
+  it('renders pagination when pagination is enabled', async () => {
+    const features = createDefaultFeatures();
+    features.pagination = true;
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+  });
+
+  it('displays empty state when data is empty', async () => {
+    renderWithProviders(
+      <DataTableCore
+        data={[]}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={createDefaultFeatures()}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('No data available')).toBeInTheDocument();
+  });
+
+  it('renders with full features without crashing', async () => {
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={createFullFeatures()}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+  });
+
+  it('filtering: show filter row and select filter value reduces visible rows', async () => {
+    const user = userEvent.setup();
+    const features = createFeaturesWithEnabled({ filtering: true });
+    const data = createTestData(5);
+
+    renderWithProviders(
+      <DataTableCore
+        data={data}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    const showFiltersBtn = screen.getByRole('button', { name: /Show Filters/i });
+    await user.click(showFiltersBtn);
+
+    await waitFor(() => {
+      const table = screen.getByRole('table');
+      const rows = within(table).getAllByRole('row');
+      expect(rows.length).toBeGreaterThan(1);
+    });
+
+    const table = screen.getByRole('table');
+    const rows = within(table).getAllByRole('row');
+    const filterRow = rows[1];
+    const nameFilterCombobox = within(filterRow).getAllByRole('combobox')[0];
+    await user.click(nameFilterCombobox);
+    const user1Option = screen.getAllByRole('option', { name: 'User 1' })[0];
+    await user.click(user1Option);
+
+    await waitFor(() => {
+      const table = screen.getByRole('table');
+      const tbody = within(table).getAllByRole('rowgroup')[1];
+      const dataRows = within(tbody).getAllByRole('row').slice(1);
+      expect(dataRows.every((r) => !r.textContent?.includes('User 2'))).toBe(true);
+      expect(dataRows.some((r) => r.textContent?.includes('User 1'))).toBe(true);
+    });
+  }, 15000);
+
+  it('column visibility: open Columns dropdown and see visibility actions', async () => {
+    const user = userEvent.setup();
+    const features = createFeaturesWithEnabled({ columnVisibility: true });
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByRole('columnheader', { name: 'Name' })).toBeInTheDocument();
+
+    const columnsBtn = screen.getByText('Columns').closest('button');
+    expect(columnsBtn).toBeInTheDocument();
+    await user.click(columnsBtn!);
+
+    await waitFor(() => {
+      expect(screen.getByRole('button', { name: /Hide All/i })).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: /Show All/i })).toBeInTheDocument();
+    });
+  }, 15000);
+
+  it('import: open import modal when import enabled', async () => {
+    const user = userEvent.setup();
+    const features = createFeaturesWithEnabled({ import: true });
+
+    renderWithProviders(
+      <DataTableCore
+        data={mockData}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    const importBtn = screen.getByRole('button', { name: /Import/i });
+    await user.click(importBtn);
+
+    await waitFor(() => {
+      expect(screen.getByRole('dialog')).toBeInTheDocument();
+    });
+  }, 15000);
+
+  it('pagination: go to next page shows different rows', async () => {
+    const user = userEvent.setup();
+    const data = createTestData(15);
+    const features = createFeaturesWithEnabled({ pagination: true });
+
+    renderWithProviders(
+      <DataTableCore
+        data={data}
+        columns={mockColumns}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+        initialPageSize={10}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+
+    const nextBtn = screen.getByRole('button', { name: 'Go to next page' });
+    await user.click(nextBtn);
+
+    await waitFor(() => {
+      expect(screen.getByText('User 11')).toBeInTheDocument();
+    });
+    expect(screen.queryByText('User 1')).not.toBeInTheDocument();
+  }, 15000);
+
+  it('grouping: enable grouping and group by department', async () => {
+    const user = userEvent.setup();
+    const columnsWithGrouping = mockColumns.map((col) =>
+      col.id === 'department' ? { ...col, enableGrouping: true } : col
+    );
+    const features = createFeaturesWithEnabled({ grouping: true });
+    const data = createTestData(8);
+
+    renderWithProviders(
+      <DataTableCore
+        data={data}
+        columns={columnsWithGrouping}
+        rbac={mockRBAC}
+        features={features}
+        performance={mockPerformance}
+        defaultGrouping={['department']}
+      />,
+      { withRouter: true }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByRole('table')).toBeInTheDocument();
+    });
+
+    expect(screen.getByText('User 1')).toBeInTheDocument();
+    expect(screen.getByRole('columnheader', { name: 'Department' })).toBeInTheDocument();
+    expect(screen.getAllByText('Engineering').length).toBeGreaterThan(0);
+  }, 15000);
+});

package/src/components/DataTable/{__tests__/DataTableCore.test-setup.ts → DataTableCore.test-setup.ts}

@@ -2,16 +2,17 @@
 /**
  * @file DataTableCore Test Setup
  * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
+ * @module Components/DataTable
  * @since 0.4.0
  * 
  * Shared test setup and mocks for DataTableCore component tests.
  * This file is imported by all DataTableCore test files to ensure consistent mocking.
  */
 import React from 'react';
+import { createTestData, createTestColumns } from './test-utils/dataFactories';
 
 // Mock the RBAC hooks
-vi.mock('../../../rbac/hooks', () => ({
+vi.mock('../../rbac/hooks', () => ({
   useCan: vi.fn(() => ({ can: true, isLoading: false, error: null })),
   useResolvedScope: vi.fn(() => ({
     resolvedScope: {
@@ -34,13 +35,13 @@ const mockUseUnifiedAuthFn = vi.fn(() => ({
   supabase: {},
 }));
 
-vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
   useUnifiedAuth: () => mockUseUnifiedAuthFn(),
   UnifiedAuthProvider: (props: { children: React.ReactNode }) => props.children,
 }));
 
 // Mock the performance hook
-vi.mock('../../../hooks/useDataTablePerformance', () => ({
+vi.mock('../../hooks/useDataTablePerformance', () => ({
   useDataTablePerformance: vi.fn(() => ({
     paginationMode: 'client',
     isVirtualized: false,
@@ -178,7 +179,7 @@ const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
   effectivePageId: 'test-page',
 })));
 
-vi.mock('../hooks/useDataTablePermissions', () => ({
+vi.mock('./hooks/useDataTablePermissions', () => ({
   useDataTablePermissions: mockUseDataTablePermissions
 }));
 
@@ -192,8 +193,8 @@ vi.mock('../hooks/useTableColumns', () => ({
  * Shared test data and utilities
  */
 export const createTestSetup = () => {
-  const mockData = require('./test-utils/dataFactories').createTestData(5);
-  const mockColumns = require('./test-utils/dataFactories').createTestColumns();
+  const mockData = createTestData(5);
+  const mockColumns = createTestColumns();
   const mockRBAC = { pageId: 'test-page' };
   const mockPerformance = { serverSideThreshold: 10000 };
 
@@ -210,8 +211,8 @@ export const createTestSetup = () => {
  */
 export const setupTestMocks = async () => {
   vi.clearAllMocks();
-  const { useCan } = await import('../../../rbac/hooks/usePermissions');
-  (useCan as any).mockReturnValue({
+  const { useCan } = await import('../../rbac/hooks/usePermissions');
+  vi.mocked(useCan).mockReturnValue({
     can: true,
     isLoading: false,
     error: null,

package/src/components/DataTable/{__tests__/DataTableCore.test.tsx → DataTableCore.test.tsx}

@@ -1,7 +1,7 @@
 /**
  * @file DataTableCore Component Tests
  * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
+ * @module Components/DataTable
  * @since 0.4.0
  * 
  * Comprehensive test suite for DataTableCore component covering all critical functionality.
@@ -12,10 +12,10 @@ import React from 'react';
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { DataTableCore } from '../components/DataTableCore';
+import { DataTableCore } from './ui/layout/DataTableCore';
 import { createTestData, createTestColumns, testDataScenarios } from './test-utils/dataFactories';
 import { createDefaultFeatures, createFullFeatures } from './test-utils.ts';
-import { renderWithProviders } from '../../../__tests__/helpers/test-utils';
+import { renderWithProviders } from '../../__tests__/helpers/test-utils';
 
 // Mock the RBAC hooks - use hoisted mocks for control
 const mockUseCanFn = vi.hoisted(() => vi.fn(() => ({ 
@@ -36,11 +36,11 @@ const mockUseResolvedScopeFn = vi.hoisted(() => vi.fn(() => ({
 })));
 
 // Mock individual files since barrel was removed
-vi.mock('../../../rbac/hooks/usePermissions', () => ({
+vi.mock('../../rbac/hooks/usePermissions', () => ({
   useCan: mockUseCanFn
 }));
 
-vi.mock('../../../rbac/hooks/useResolvedScope', () => ({
+vi.mock('../../rbac/hooks/useResolvedScope', () => ({
   useResolvedScope: mockUseResolvedScopeFn
 }));
 
@@ -55,13 +55,13 @@ const mockUseUnifiedAuthFn = vi.fn(() => ({
   supabase: {},
 }));
 
-vi.mock('../../../providers/services/UnifiedAuthProvider', () => ({
+vi.mock('../../providers/services/UnifiedAuthProvider', () => ({
   useUnifiedAuth: () => mockUseUnifiedAuthFn(),
   UnifiedAuthProvider: ({ children }: { children: React.ReactNode }) => <>{children}</>,
 }));
 
 // Mock the performance hook
-vi.mock('../../../hooks/useDataTablePerformance', () => ({
+vi.mock('../../hooks/useDataTablePerformance', () => ({
   useDataTablePerformance: vi.fn(() => ({
     paginationMode: 'client',
     isVirtualized: false,
@@ -202,7 +202,7 @@ const mockUseDataTablePermissions = vi.hoisted(() => vi.fn(() => ({
   effectivePageId: 'test-page',
 })));
 
-vi.mock('../hooks/useDataTablePermissions', () => ({
+vi.mock('./hooks/useDataTablePermissions', () => ({
   useDataTablePermissions: mockUseDataTablePermissions
 }));