@jmruthers/pace-core 0.2.5 → 0.2.7

package/src/components/DataTable/__tests__/DataTable.autoSizing.test.tsx

@@ -1,526 +0,0 @@
-/**
- * @file DataTable Auto-Sizing Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/__tests__
- * @since 0.4.33
- * 
- * Tests for automatic column width adjustment based on content.
- */
-import { userEvent } from '@testing-library/user-event';
-
-import React from 'react';
-import { screen, waitFor } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import '@testing-library/jest-dom';
-
-import { DataTable } from '../DataTable';
-import type { DataTableFeatureConfig } from '../types';
-import { errorTestingUtils, TestErrorBoundary } from '../../__tests__/ErrorTesting.enhanced.test';
-import { renderWithProviders, testDataGenerators } from '../../../__tests__/shared';
-
-// Mock lucide-react icons
-vi.mock('lucide-react', () => {
-  const React = require('react');
-  const createIcon = (name: string) => 
-    React.forwardRef((props: any, ref: any) => 
-      React.createElement('svg', { 
-        ref, 
-        ...props,
-        'data-testid': `lucide-${name.toLowerCase()}`,
-        width: '24',
-        height: '24',
-        viewBox: '0 0 24 24',
-        fill: 'none',
-        stroke: 'currentColor',
-        strokeWidth: '2',
-        strokeLinecap: 'round',
-        strokeLinejoin: 'round',
-      })
-    );
-
-  return {
-    ChevronDown: createIcon('ChevronDown'),
-    ChevronUp: createIcon('ChevronUp'),
-    ChevronLeft: createIcon('ChevronLeft'),
-    ChevronRight: createIcon('ChevronRight'),
-    ChevronsLeft: createIcon('ChevronsLeft'),
-    ChevronsRight: createIcon('ChevronsRight'),
-    ChevronsUp: createIcon('ChevronsUp'),
-    ChevronsDown: createIcon('ChevronsDown'),
-    ChevronsUpDown: createIcon('ChevronsUpDown'),
-    Search: createIcon('Search'),
-    X: createIcon('X'),
-    Check: createIcon('Check'),
-    Plus: createIcon('Plus'),
-    Minus: createIcon('Minus'),
-    Edit: createIcon('Edit'),
-    Pencil: createIcon('Pencil'),
-    Trash: createIcon('Trash'),
-    Trash2: createIcon('Trash2'),
-    Eye: createIcon('Eye'),
-    EyeOff: createIcon('EyeOff'),
-    Lock: createIcon('Lock'),
-    Unlock: createIcon('Unlock'),
-    User: createIcon('User'),
-    Users: createIcon('Users'),
-    Settings: createIcon('Settings'),
-    Settings2: createIcon('Settings2'),
-    Home: createIcon('Home'),
-    Menu: createIcon('Menu'),
-    MoreHorizontal: createIcon('MoreHorizontal'),
-    MoreVertical: createIcon('MoreVertical'),
-    Filter: createIcon('Filter'),
-    Download: createIcon('Download'),
-    Upload: createIcon('Upload'),
-    RefreshCw: createIcon('RefreshCw'),
-    AlertCircle: createIcon('AlertCircle'),
-    CheckCircle: createIcon('CheckCircle'),
-    Info: createIcon('Info'),
-    Warning: createIcon('Warning'),
-    FileText: createIcon('FileText'),
-    KeyRound: createIcon('KeyRound'),
-    LogOut: createIcon('LogOut'),
-    ArrowUpDown: createIcon('ArrowUpDown'),
-    ArrowUp: createIcon('ArrowUp'),
-    ArrowDown: createIcon('ArrowDown'),
-    RotateCcw: createIcon('RotateCcw'),
-    RotateCw: createIcon('RotateCw'),
-    Copy: createIcon('Copy'),
-    ExternalLink: createIcon('ExternalLink'),
-    Calendar: createIcon('Calendar'),
-    Clock: createIcon('Clock'),
-    Database: createIcon('Database'),
-    File: createIcon('File'),
-    Folder: createIcon('Folder'),
-    Globe: createIcon('Globe'),
-    HardDrive: createIcon('HardDrive'),
-    HelpCircle: createIcon('HelpCircle'),
-    Image: createIcon('Image'),
-    Link: createIcon('Link'),
-    Mail: createIcon('Mail'),
-    MapPin: createIcon('MapPin'),
-    Phone: createIcon('Phone'),
-    PieChart: createIcon('PieChart'),
-    Play: createIcon('Play'),
-    Save: createIcon('Save'),
-    Share: createIcon('Share'),
-    Star: createIcon('Star'),
-    Tag: createIcon('Tag'),
-    Target: createIcon('Target'),
-    TrendingUp: createIcon('TrendingUp'),
-    Volume2: createIcon('Volume2'),
-    Wifi: createIcon('Wifi'),
-    Zap: createIcon('Zap'),
-  };
-});
-
-// Mock performance APIs
-vi.mock('../../hooks/useDataTablePerformance', () => ({
-  useDataTablePerformance: () => ({
-    startRender: vi.fn(),
-    endRender: vi.fn(),
-    getMetrics: () => ({
-      renderTime: 16.5,
-      memoryUsage: 45.2,
-      visibleRows: 10,
-      totalRows: 100,
-      paginationMode: 'client',
-    }),
-  }),
-}));
-
-interface TestData {
-  id: string;
-  shortText: string;
-  longText: string;
-  mediumText: string;
-}
-
-const testData: TestData[] = [
-  {
-    id: '1',
-    shortText: 'A',
-    longText: 'This is a very long text that should make the column wider',
-    mediumText: 'Medium length text'
-  },
-  {
-    id: '2', 
-    shortText: 'B',
-    longText: 'Another very long text that should also make the column wider',
-    mediumText: 'Another medium text'
-  },
-  {
-    id: '3',
-    shortText: 'C', 
-    longText: 'Yet another extremely long text that should definitely make this column the widest',
-    mediumText: 'Yet another medium'
-  }
-];
-
-const testColumns = [
-  {
-    id: 'shortText',
-    accessorKey: 'shortText',
-    header: 'Short',
-    enableSorting: true,
-  },
-  {
-    id: 'mediumText',
-    accessorKey: 'mediumText',
-    header: 'Medium',
-    enableSorting: true,
-  },
-  {
-    id: 'longText',
-    accessorKey: 'longText',
-    header: 'Long Text Column',
-    enableSorting: true,
-  },
-];
-
-const featuresWithAutoSizing: DataTableFeatureConfig = {
-  search: false,
-  pagination: false,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  autoColumnSizing: true,
-};
-
-const featuresWithoutAutoSizing: DataTableFeatureConfig = {
-  search: false,
-  pagination: false,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  autoColumnSizing: false,
-};
-
-describe('DataTable Auto-Sizing', () => {
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  it('renders table with auto-sizing enabled', () => {
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    
-    // Check that table has auto layout
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('renders table with fixed layout when auto-sizing disabled', () => {
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithoutAutoSizing}
-        title="Fixed Layout Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    
-    // Check that table has fixed layout
-    expect(table).toHaveStyle({ tableLayout: 'fixed' });
-  });
-
-  it('applies column sizing configuration when auto-sizing enabled', () => {
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Auto-Sizing Table"
-      />
-    );
-
-    // The table should render without errors
-    expect(screen.getByRole('table')).toBeInTheDocument();
-    
-    // Check that all columns are rendered
-    expect(screen.getByText('Short')).toBeInTheDocument();
-    expect(screen.getByText('Medium')).toBeInTheDocument();
-    expect(screen.getByText('Long Text Column')).toBeInTheDocument();
-  });
-
-  it('handles empty data with auto-sizing', () => {
-    renderWithProviders(
-      <DataTable
-        data={[]}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Empty Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('handles single row data with auto-sizing', () => {
-    renderWithProviders(
-      <DataTable
-        data={[testData[0]]}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Single Row Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('handles columns with undefined/null values in auto-sizing', () => {
-    const dataWithNulls: TestData[] = [
-      {
-        id: '1',
-        shortText: 'A',
-        longText: 'This is a very long text',
-        mediumText: 'Medium text'
-      },
-      {
-        id: '2',
-        shortText: '',
-        longText: null as any,
-        mediumText: undefined as any
-      }
-    ];
-
-    renderWithProviders(
-      <DataTable
-        data={dataWithNulls}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Null Values Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('maintains functionality with auto-sizing enabled', () => {
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Functional Auto-Sizing Table"
-      />
-    );
-
-    // Check that sorting still works
-    const shortHeader = screen.getByText('Short');
-    expect(shortHeader).toBeInTheDocument();
-    
-    // Check that data is displayed
-    expect(screen.getByText('A')).toBeInTheDocument();
-    expect(screen.getByText('This is a very long text that should make the column wider')).toBeInTheDocument();
-  });
-
-  it('handles large datasets with auto-sizing (performance test)', () => {
-    const largeData = Array.from({ length: 1000 }, (_, i) => ({
-      id: i.toString(),
-      shortText: `A${i}`,
-      longText: `This is a very long text for row ${i} that should make the column wider`,
-      mediumText: `Medium text ${i}`
-    }));
-
-    renderWithProviders(
-      <DataTable
-        data={largeData}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Large Dataset Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('applies min-width constraints in auto-sizing', () => {
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithAutoSizing}
-        title="Min-Width Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    
-    // The auto-sizing should still work with min-width constraints
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('handles column reordering with auto-sizing', () => {
-    const featuresWithReordering: DataTableFeatureConfig = {
-      ...featuresWithAutoSizing,
-      columnReordering: true,
-    };
-
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithReordering}
-        title="Reordering Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-
-  it('handles column visibility with auto-sizing', () => {
-    const featuresWithVisibility: DataTableFeatureConfig = {
-      ...featuresWithAutoSizing,
-      columnVisibility: true,
-    };
-
-    renderWithProviders(
-      <DataTable
-        data={testData}
-        columns={testColumns}
-        features={featuresWithVisibility}
-        title="Visibility Auto-Sizing Table"
-      />
-    );
-
-    const table = screen.getByRole('table');
-    expect(table).toBeInTheDocument();
-    expect(table).toHaveStyle({ tableLayout: 'auto' });
-  });
-describe('DataTable Error Handling', () => {
-  const user = userEvent.setup();
-  let restoreConsole: (() => void) | null = null;
-
-  beforeEach(() => {
-    restoreConsole = errorTestingUtils.suppressConsoleErrors();
-  });
-
-  afterEach(() => {
-    if (restoreConsole) {
-      restoreConsole();
-    }
-  });
-
-  it('should handle component errors gracefully', () => {
-    const ErrorComponent = () => {
-      throw new Error('DataTable component error');
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    expect(screen.getByText('Error: DataTable component error')).toBeInTheDocument();
-  });
-
-  it('should handle async errors', async () => {
-    const AsyncErrorComponent = ({ shouldFail }: { shouldFail: boolean }) => {
-      const [error, setError] = React.useState<Error | null>(null);
-
-      React.useEffect(() => {
-        if (shouldFail) {
-          setError(new Error('Async error'));
-        }
-      }, [shouldFail]);
-
-      if (error) {
-        throw error;
-      }
-
-      return <div>Async component</div>;
-    };
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <AsyncErrorComponent shouldFail={true} />
-      </TestErrorBoundary>
-    );
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-boundary')).toBeInTheDocument();
-    });
-  });
-
-  it('should handle user interaction errors', async () => {
-    const user = userEvent.setup();
-    const ErrorComponent = errorTestingUtils.createErrorThrowingComponent(
-      'DataTable interaction error',
-      'click'
-    );
-
-    renderWithProviders(
-      <TestErrorBoundary>
-        <ErrorComponent />
-      </TestErrorBoundary>
-    );
-
-    await user.click(screen.getByTestId('error-button'));
-
-    await waitFor(() => {
-      expect(screen.getByTestId('error-display')).toBeInTheDocument();
-    });
-  });
-
-  it('should recover from errors when props change', async () => {
-    const TestComponent = ({ shouldError }: { shouldError: boolean }) => {
-      if (shouldError) {
-        throw new Error('DataTable prop error');
-      }
-      return <div>Normal content</div>;
-    };
-
-    await errorTestingUtils.testErrorRecovery(
-      TestComponent,
-      { shouldError: true },
-      { shouldError: false }
-    );
-
-    expect(screen.getByText('Normal content')).toBeInTheDocument();
-  });
-});
-});

package/src/components/DataTable/components/DataTableHeader.tsx

@@ -1,31 +0,0 @@
-/**
- * @file DataTable Header Component
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components
- * @since 0.2.0
- */
-
-import React from 'react';
-import { cn } from '../../../utils/cn';
-
-export interface DataTableHeaderProps {
-  title?: string;
-  description?: string;
-}
-
-export function DataTableHeader({ title, description }: DataTableHeaderProps) {
-  const hasTitle = !!title && title.trim().length > 0;
-  const hasDescription = !!description && description.trim().length > 0;
-  if (!hasTitle && !hasDescription) return null;
-
-  return (
-    <div className="pb-4">
-      {hasTitle && (
-        <h2 className="text-2xl font-bold tracking-tight break-words">{title}</h2>
-      )}
-      {hasDescription && (
-        <p className="text-muted-foreground mt-2 break-words">{description}</p>
-      )}
-    </div>
-  );
-}

package/src/components/DataTable/components/__tests__/DataTableHeader.unit.test.tsx

@@ -1,143 +0,0 @@
-import React from 'react';
-import { screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
-import '@testing-library/jest-dom';
-import { renderWithProviders } from '../../../../__tests__/shared';
-import { DataTableHeader } from '../DataTableHeader';
-
-describe('DataTableHeader Component', () => {
-  it('renders nothing when no title or description provided', () => {
-    renderWithProviders(<DataTableHeader />);
-    // Should render nothing when no title or description provided
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('renders only title when provided', () => {
-    renderWithProviders(<DataTableHeader title="My Data Table" />);
-    
-    expect(screen.getByText('My Data Table')).toBeInTheDocument();
-    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
-    expect(screen.queryByText('description')).not.toBeInTheDocument();
-  });
-
-  it('renders only description when provided', () => {
-    renderWithProviders(<DataTableHeader description="This is a description" />);
-    
-    expect(screen.getByText('This is a description')).toBeInTheDocument();
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('renders both title and description when provided', () => {
-    renderWithProviders(
-      <DataTableHeader 
-        title="My Data Table" 
-        description="This is a description"
-      />
-    );
-    
-    expect(screen.getByText('My Data Table')).toBeInTheDocument();
-    expect(screen.getByText('This is a description')).toBeInTheDocument();
-    expect(screen.getByRole('heading', { level: 2 })).toBeInTheDocument();
-  });
-
-  it('has correct styling classes for title', () => {
-    renderWithProviders(<DataTableHeader title="My Data Table" />);
-    
-    const title = screen.getByRole('heading', { level: 2 });
-    expect(title).toHaveClass('text-2xl', 'font-bold', 'tracking-tight');
-  });
-
-  it('has correct styling classes for description', () => {
-    renderWithProviders(<DataTableHeader description="This is a description" />);
-    
-    const description = screen.getByText('This is a description');
-    expect(description).toHaveClass('text-muted-foreground', 'mt-2');
-  });
-
-  it('has correct container styling', () => {
-    renderWithProviders(<DataTableHeader title="My Data Table" />);
-    
-    const container = screen.getByText('My Data Table').closest('div');
-    expect(container).toHaveClass('pb-4');
-  });
-
-  it('handles empty string title', () => {
-    renderWithProviders(<DataTableHeader title="" />);
-    // Should render nothing when title is empty
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('handles empty string description', () => {
-    renderWithProviders(<DataTableHeader description="" />);
-    // Should render nothing when description is empty
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('handles both empty strings', () => {
-    renderWithProviders(<DataTableHeader title="" description="" />);
-    // Should render nothing when both title and description are empty
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('handles whitespace-only title', () => {
-    renderWithProviders(<DataTableHeader title="   " />);
-    // Should render nothing when title is only whitespace
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('handles whitespace-only description', () => {
-    renderWithProviders(<DataTableHeader description="   " />);
-    // Should render nothing when description is only whitespace
-    expect(screen.queryByRole('heading')).not.toBeInTheDocument();
-  });
-
-  it('renders with long title text', () => {
-    const longTitle = 'This is a very long title that might wrap to multiple lines in the UI';
-    renderWithProviders(<DataTableHeader title={longTitle} />);
-    
-    expect(screen.getByText(longTitle)).toBeInTheDocument();
-  });
-
-  it('renders with long description text', () => {
-    const longDescription = 'This is a very long description that might wrap to multiple lines in the UI and should be handled gracefully';
-    renderWithProviders(<DataTableHeader description={longDescription} />);
-    
-    expect(screen.getByText(longDescription)).toBeInTheDocument();
-  });
-
-  it('maintains consistent structure across re-renders', () => {
-    const { rerender } = renderWithProviders(
-      <DataTableHeader 
-        title="Initial Title" 
-        description="Initial Description"
-      />
-    );
-    
-    expect(screen.getByText('Initial Title')).toBeInTheDocument();
-    expect(screen.getByText('Initial Description')).toBeInTheDocument();
-    
-    rerender(
-      <DataTableHeader 
-        title="Updated Title" 
-        description="Updated Description"
-      />
-    );
-    
-    expect(screen.getByText('Updated Title')).toBeInTheDocument();
-    expect(screen.getByText('Updated Description')).toBeInTheDocument();
-  });
-
-  it('handles special characters in title', () => {
-    const specialTitle = 'Title with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
-    renderWithProviders(<DataTableHeader title={specialTitle} />);
-    
-    expect(screen.getByText(specialTitle)).toBeInTheDocument();
-  });
-
-  it('handles special characters in description', () => {
-    const specialDescription = 'Description with special chars: !@#$%^&*()_+-=[]{}|;:,.<>?';
-    renderWithProviders(<DataTableHeader description={specialDescription} />);
-    
-    expect(screen.getByText(specialDescription)).toBeInTheDocument();
-  });
-});