@jmruthers/pace-core 0.2.5 → 0.2.7

package/src/components/DataTable/examples/AutoSizingExample.tsx

@@ -1,180 +0,0 @@
-import React from 'react';
-import { DataTable } from '../DataTable';
-import type { DataTableFeatureConfig } from '../types';
-
-// Sample data with varying content lengths
-const sampleData = [
-  {
-    id: '1',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pulled pork on jacket potatoes & slaw'
-  },
-  {
-    id: '2',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pork ragu pasta with salad & garlic bread'
-  },
-  {
-    id: '3',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pulled pork soft tacos with salad'
-  },
-  {
-    id: '4',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Beef burritos with salad'
-  },
-  {
-    id: '5',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pasta Bolognese, garlic bread & garden salad'
-  },
-  {
-    id: '6',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Jacket potatoes with Bolognese & slaw'
-  },
-  {
-    id: '7',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Butter chicken with rice & veggies'
-  },
-  {
-    id: '8',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Honey soy chicken with fried rice'
-  },
-  {
-    id: '9',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Sweet & sour chicken with veggies & noodles'
-  },
-  {
-    id: '10',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Loaded wedges with corned beef & slaw'
-  }
-];
-
-const columns = [
-  {
-    id: 'eventName',
-    accessorKey: 'eventName',
-    header: 'Event Name',
-    enableSorting: true,
-  },
-  {
-    id: 'eventDate',
-    accessorKey: 'eventDate',
-    header: 'Event Date',
-    enableSorting: true,
-  },
-  {
-    id: 'dishType',
-    accessorKey: 'dishType',
-    header: 'Dish Type',
-    enableSorting: true,
-  },
-  {
-    id: 'dishName',
-    accessorKey: 'dishName',
-    header: 'Dish Name',
-    enableSorting: true,
-  },
-];
-
-// Feature configuration with auto-sizing enabled
-const featuresWithAutoSizing: DataTableFeatureConfig = {
-  search: true,
-  pagination: true,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  hierarchical: false,
-  autoColumnSizing: true, // Enable automatic column sizing
-};
-
-// Feature configuration without auto-sizing (fixed equal widths)
-const featuresWithoutAutoSizing: DataTableFeatureConfig = {
-  search: true,
-  pagination: true,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  hierarchical: false,
-  autoColumnSizing: false, // Disable automatic column sizing
-};
-
-export function AutoSizingExample() {
-  return (
-    <div className="space-y-8">
-      <div>
-        <h2 className="text-2xl font-bold mb-4">DataTable with Auto-Sizing Columns</h2>
-        <p className="text-gray-600 mb-4">
-          Notice how the "Dish Name" column is wider to accommodate the longer text content,
-          while shorter columns like "Event Name" and "Dish Type" take up less space.
-        </p>
-        <DataTable
-          data={sampleData}
-          columns={columns}
-          features={featuresWithAutoSizing}
-          title="Auto-Sizing Table"
-        />
-      </div>
-
-      <div>
-        <h2 className="text-2xl font-bold mb-4">DataTable with Fixed Equal Widths</h2>
-        <p className="text-gray-600 mb-4">
-          This table uses fixed equal widths, causing text wrapping in the "Dish Name" column
-          while other columns have empty space.
-        </p>
-        <DataTable
-          data={sampleData}
-          columns={columns}
-          features={featuresWithoutAutoSizing}
-          title="Fixed Width Table"
-        />
-      </div>
-    </div>
-  );
-}
-
-export default AutoSizingExample;

package/src/components/DataTable/examples/ColumnSizingComparison.tsx

@@ -1,235 +0,0 @@
-import React from 'react';
-import { DataTable } from '../DataTable';
-import type { DataTableFeatureConfig } from '../types';
-
-// Sample data with varying content lengths to demonstrate auto-sizing
-const sampleData = [
-  {
-    id: '1',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pulled pork on jacket potatoes & slaw'
-  },
-  {
-    id: '2',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pork ragu pasta with salad & garlic bread'
-  },
-  {
-    id: '3',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pulled pork soft tacos with salad'
-  },
-  {
-    id: '4',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Beef burritos with salad'
-  },
-  {
-    id: '5',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Pasta Bolognese, garlic bread & garden salad'
-  },
-  {
-    id: '6',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Jacket potatoes with Bolognese & slaw'
-  },
-  {
-    id: '7',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Butter chicken with rice & veggies'
-  },
-  {
-    id: '8',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Honey soy chicken with fried rice'
-  },
-  {
-    id: '9',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Sweet & sour chicken with veggies & noodles'
-  },
-  {
-    id: '10',
-    eventName: 'AJ2025',
-    eventDate: '06/01/2025',
-    dishType: 'Dinner',
-    dishName: 'Loaded wedges with corned beef & slaw'
-  }
-];
-
-const columns = [
-  {
-    id: 'eventName',
-    accessorKey: 'eventName',
-    header: 'Event Name',
-    enableSorting: true,
-  },
-  {
-    id: 'eventDate',
-    accessorKey: 'eventDate',
-    header: 'Event Date',
-    enableSorting: true,
-  },
-  {
-    id: 'dishType',
-    accessorKey: 'dishType',
-    header: 'Dish Type',
-    enableSorting: true,
-  },
-  {
-    id: 'dishName',
-    accessorKey: 'dishName',
-    header: 'Dish Name',
-    enableSorting: true,
-  },
-];
-
-// Feature configuration with auto-sizing enabled
-const featuresWithAutoSizing: DataTableFeatureConfig = {
-  search: true,
-  pagination: true,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  hierarchical: false,
-  autoColumnSizing: true, // Enable automatic column sizing
-};
-
-// Feature configuration without auto-sizing (fixed equal widths)
-const featuresWithoutAutoSizing: DataTableFeatureConfig = {
-  search: true,
-  pagination: true,
-  sorting: true,
-  filtering: false,
-  import: false,
-  export: false,
-  selection: false,
-  creation: false,
-  editing: false,
-  deletion: false,
-  deleteSelected: false,
-  grouping: false,
-  columnVisibility: false,
-  columnReordering: false,
-  hierarchical: false,
-  autoColumnSizing: false, // Disable automatic column sizing
-};
-
-export function ColumnSizingComparison() {
-  return (
-    <div className="space-y-12">
-      <div className="text-center">
-        <h1 className="text-3xl font-bold mb-4">DataTable Column Sizing Comparison</h1>
-        <p className="text-lg text-gray-600 max-w-4xl mx-auto">
-          Compare how DataTable handles column widths with and without automatic sizing.
-          Notice how the "Dish Name" column adjusts to content length in the auto-sizing version.
-        </p>
-      </div>
-
-      <div className="space-y-8">
-        <div>
-          <div className="flex items-center gap-3 mb-4">
-            <h2 className="text-2xl font-bold">✅ With Auto-Sizing (Recommended)</h2>
-            <span className="px-3 py-1 bg-green-100 text-green-800 text-sm font-medium rounded-full">
-              autoColumnSizing: true
-            </span>
-          </div>
-          <p className="text-gray-600 mb-4">
-            Columns automatically adjust their width based on content. The "Dish Name" column 
-            gets more space for longer text, while shorter columns like "Event Name" and "Dish Type" 
-            take up less space. This prevents text wrapping and improves readability.
-          </p>
-          <DataTable
-            data={sampleData}
-            columns={columns}
-            features={featuresWithAutoSizing}
-            title="Auto-Sizing Table"
-            description="Columns automatically adjust to content width"
-          />
-        </div>
-
-        <div>
-          <div className="flex items-center gap-3 mb-4">
-            <h2 className="text-2xl font-bold">❌ Without Auto-Sizing (Fixed Widths)</h2>
-            <span className="px-3 py-1 bg-red-100 text-red-800 text-sm font-medium rounded-full">
-              autoColumnSizing: false
-            </span>
-          </div>
-          <p className="text-gray-600 mb-4">
-            All columns have equal width regardless of content length. This causes the "Dish Name" 
-            column to wrap text unnecessarily while other columns have wasted space. This is the 
-            default behavior you were experiencing.
-          </p>
-          <DataTable
-            data={sampleData}
-            columns={columns}
-            features={featuresWithoutAutoSizing}
-            title="Fixed Width Table"
-            description="All columns have equal width"
-          />
-        </div>
-      </div>
-
-      <div className="bg-blue-50 border border-blue-200 rounded-lg p-6">
-        <h3 className="text-lg font-semibold text-blue-900 mb-3">💡 How to Enable Auto-Sizing</h3>
-        <p className="text-blue-800 mb-4">
-          To enable automatic column sizing in your DataTable, simply add <code className="bg-blue-100 px-2 py-1 rounded text-sm">autoColumnSizing: true</code> to your features configuration:
-        </p>
-        <pre className="bg-blue-100 p-4 rounded-lg text-sm overflow-x-auto">
-{`<DataTable
-  data={yourData}
-  columns={yourColumns}
-  features={{
-    search: true,
-    pagination: true,
-    sorting: true,
-    autoColumnSizing: true,  // 👈 Add this line
-    // ... other features
-  }}
-/>`}
-        </pre>
-      </div>
-
-      <div className="bg-gray-50 border border-gray-200 rounded-lg p-6">
-        <h3 className="text-lg font-semibold text-gray-900 mb-3">🔧 How Auto-Sizing Works</h3>
-        <ul className="text-gray-700 space-y-2">
-          <li>• <strong>Content Analysis:</strong> Analyzes both header text and data content to determine optimal widths</li>
-          <li>• <strong>Smart Calculation:</strong> Uses character count estimation (8px per character + padding)</li>
-          <li>• <strong>Constraints:</strong> Respects min-width (80px) and max-width (400px) limits</li>
-          <li>• <strong>Performance:</strong> Only samples first 100 rows for large datasets</li>
-          <li>• <strong>Table Layout:</strong> Switches from <code>tableLayout: 'fixed'</code> to <code>tableLayout: 'auto'</code></li>
-        </ul>
-      </div>
-    </div>
-  );
-}
-
-export default ColumnSizingComparison;

package/src/components/DataTable/utils/__tests__/columnSizing.test.ts

@@ -1,237 +0,0 @@
-/**
- * @file Column Sizing Utilities Tests
- * @package @jmruthers/pace-core
- * @module Components/DataTable/utils/__tests__
- * @since 0.4.33
- * 
- * Tests for column sizing utility functions.
- */
-
-import { describe, it, expect } from 'vitest';
-import { 
-  calculateContentWidth, 
-  calculateColumnWidths, 
-  getColumnSizingConfig 
-} from '../columnSizing';
-
-describe('Column Sizing Utilities', () => {
-  describe('calculateContentWidth', () => {
-    it('calculates width for normal content', () => {
-      const width = calculateContentWidth('Hello World', 80, 400, 32);
-      expect(width).toBeGreaterThan(80);
-      expect(width).toBeLessThan(400);
-    });
-
-    it('returns minWidth for empty content', () => {
-      const width = calculateContentWidth('', 80, 400, 32);
-      expect(width).toBe(80);
-    });
-
-    it('returns minWidth for null content', () => {
-      const width = calculateContentWidth(null as any, 80, 400, 32);
-      expect(width).toBe(80);
-    });
-
-    it('returns minWidth for undefined content', () => {
-      const width = calculateContentWidth(undefined as any, 80, 400, 32);
-      expect(width).toBe(80);
-    });
-
-    it('respects maxWidth constraint', () => {
-      const longText = 'A'.repeat(1000);
-      const width = calculateContentWidth(longText, 80, 400, 32);
-      expect(width).toBe(400);
-    });
-
-    it('respects minWidth constraint', () => {
-      const width = calculateContentWidth('A', 200, 400, 32);
-      expect(width).toBe(200);
-    });
-
-    it('uses default parameters correctly', () => {
-      const width = calculateContentWidth('Test');
-      expect(width).toBeGreaterThanOrEqual(80);
-      expect(width).toBeLessThan(400);
-    });
-
-    it('includes padding in calculation', () => {
-      const width1 = calculateContentWidth('Test', 80, 400, 0);
-      const width2 = calculateContentWidth('Test', 80, 400, 50);
-      expect(width2).toBeGreaterThan(width1);
-    });
-  });
-
-  describe('calculateColumnWidths', () => {
-    const testData = [
-      { id: '1', name: 'John', email: 'john@example.com', description: 'A short description' },
-      { id: '2', name: 'Jane', email: 'jane@example.com', description: 'A very long description that should make this column wider' },
-      { id: '3', name: 'Bob', email: 'bob@example.com', description: 'Medium length description' }
-    ];
-
-    const testColumns = [
-      { id: 'name', accessorKey: 'name', header: 'Name' },
-      { id: 'email', accessorKey: 'email', header: 'Email' },
-      { id: 'description', accessorKey: 'description', header: 'Description' }
-    ];
-
-    it('calculates widths for all columns', () => {
-      const widths = calculateColumnWidths(testData, testColumns);
-      
-      expect(widths).toHaveProperty('name');
-      expect(widths).toHaveProperty('email');
-      expect(widths).toHaveProperty('description');
-      
-      expect(widths.name).toBeGreaterThan(0);
-      expect(widths.email).toBeGreaterThan(0);
-      expect(widths.description).toBeGreaterThan(0);
-    });
-
-    it('makes wider columns for longer content', () => {
-      const widths = calculateColumnWidths(testData, testColumns);
-      
-      // Description column should be wider than name column
-      expect(widths.description).toBeGreaterThan(widths.name);
-    });
-
-    it('respects min and max width constraints', () => {
-      const widths = calculateColumnWidths(testData, testColumns, {
-        minWidth: 100,
-        maxWidth: 200
-      });
-      
-      Object.values(widths).forEach(width => {
-        expect(width).toBeGreaterThanOrEqual(100);
-        expect(width).toBeLessThanOrEqual(200);
-      });
-    });
-
-    it('handles empty data array', () => {
-      const widths = calculateColumnWidths([], testColumns);
-      
-      expect(widths).toHaveProperty('name');
-      expect(widths).toHaveProperty('email');
-      expect(widths).toHaveProperty('description');
-      
-      // Should still calculate widths based on headers
-      Object.values(widths).forEach(width => {
-        expect(width).toBeGreaterThan(0);
-      });
-    });
-
-    it('handles columns without id or accessorKey', () => {
-      const invalidColumns = [
-        { header: 'Valid Column', accessorKey: 'valid' },
-        { header: 'Invalid Column' }, // No id or accessorKey
-        { id: 'another', header: 'Another Valid' }
-      ];
-      
-      const widths = calculateColumnWidths(testData, invalidColumns);
-      
-      expect(widths).toHaveProperty('valid');
-      expect(widths).toHaveProperty('another');
-      expect(widths).not.toHaveProperty('undefined');
-    });
-
-    it('handles data with null/undefined values', () => {
-      const dataWithNulls = [
-        { id: '1', name: 'John', email: null, description: undefined },
-        { id: '2', name: null, email: 'jane@example.com', description: 'Valid description' }
-      ];
-      
-      const widths = calculateColumnWidths(dataWithNulls, testColumns);
-      
-      expect(widths).toHaveProperty('name');
-      expect(widths).toHaveProperty('email');
-      expect(widths).toHaveProperty('description');
-      
-      Object.values(widths).forEach(width => {
-        expect(width).toBeGreaterThan(0);
-      });
-    });
-
-    it('uses sample size limit for large datasets', () => {
-      const largeData = Array.from({ length: 10000 }, (_, i) => ({
-        id: i.toString(),
-        name: `User ${i}`,
-        email: `user${i}@example.com`,
-        description: `Description for user ${i}`
-      }));
-      
-      const widths = calculateColumnWidths(largeData, testColumns, {
-        sampleSize: 100
-      });
-      
-      expect(widths).toHaveProperty('name');
-      expect(widths).toHaveProperty('email');
-      expect(widths).toHaveProperty('description');
-    });
-
-    it('handles columns with accessorFn', () => {
-      const columnsWithFn = [
-        { id: 'name', accessorKey: 'name', header: 'Name' },
-        { 
-          id: 'fullName', 
-          accessorFn: (row: any) => `${row.firstName} ${row.lastName}`,
-          header: 'Full Name' 
-        }
-      ];
-      
-      const dataWithFn = [
-        { id: '1', name: 'John', firstName: 'John', lastName: 'Doe' },
-        { id: '2', name: 'Jane', firstName: 'Jane', lastName: 'Smith' }
-      ];
-      
-      const widths = calculateColumnWidths(dataWithFn, columnsWithFn);
-      
-      expect(widths).toHaveProperty('name');
-      expect(widths).toHaveProperty('fullName');
-    });
-  });
-
-  describe('getColumnSizingConfig', () => {
-    it('returns basic config when auto-sizing disabled', () => {
-      const config = getColumnSizingConfig(false);
-      
-      expect(config).toEqual({
-        columnResizeMode: 'onChange'
-      });
-    });
-
-    it('returns enhanced config when auto-sizing enabled', () => {
-      const config = getColumnSizingConfig(true);
-      
-      expect(config).toEqual({
-        columnResizeMode: 'onChange',
-        enableColumnResizing: true,
-        columnResizeDirection: 'ltr'
-      });
-    });
-
-    it('includes initial column sizes when provided', () => {
-      const columnWidths = { name: 150, email: 200, description: 300 };
-      const config = getColumnSizingConfig(true, columnWidths);
-      
-      expect(config).toEqual({
-        columnResizeMode: 'onChange',
-        enableColumnResizing: true,
-        columnResizeDirection: 'ltr',
-        initialState: {
-          columnSizing: columnWidths
-        }
-      });
-    });
-
-    it('handles empty column widths object', () => {
-      const config = getColumnSizingConfig(true, {});
-      
-      expect(config).toEqual({
-        columnResizeMode: 'onChange',
-        enableColumnResizing: true,
-        columnResizeDirection: 'ltr',
-        initialState: {
-          columnSizing: {}
-        }
-      });
-    });
-  });
-});