@jmruthers/pace-core 0.6.6 → 0.6.8

package/src/components/DataTable/components/DataTableBody.tsx

@@ -1,478 +0,0 @@
-/**
- * @file DataTable Body Component
- * @package @jmruthers/pace-core
- * @module Components/DataTable/Components
- * @since 0.3.0
- * 
- * The DataTable body component handles the main table content rendering including:
- * - Table headers with sorting indicators
- * - Data rows with cell rendering
- * - Inline editing capabilities
- * - Row creation interface
- * - Grouped rows with expansion/collapse
- * - Aggregate value display
- * - Empty state handling
- * 
- * Features:
- * - Virtual scrolling support for large datasets
- * - Inline editing with input validation
- * - Row grouping with collapsible sections
- * - Custom cell renderers
- * - Aggregate calculations and display
- * - Loading and empty states
- * - Keyboard navigation
- * - Accessibility support
- * 
- * @example
- * ```tsx
- * <DataTableBody
- *   table={tableInstance}
- *   isCreating={false}
- *   creationData={{}}
- *   onCreationDataChange={(data) => setCreationData(data)}
- *   onSaveCreation={() => handleSave()}
- *   onCancelCreation={() => handleCancel()}
- *   editingRowId={null}
- *   editingData={{}}
- *   onEditingDataChange={(data) => setEditingData(data)}
- *   grouping={['category']}
- *   aggregates={[{ field: 'price', function: 'avg', label: 'Avg Price' }]}
- *   getRowId={(row) => row.id}
- *   emptyState={{ title: 'No data found' }}
- * />
- * ```
- * 
- * @accessibility
- * - Proper table semantics with thead/tbody
- * - ARIA labels for interactive elements
- * - Keyboard navigation support
- * - Screen reader friendly
- * - Focus management during editing
- * 
- * @performance
- * - Efficient re-rendering with React.memo
- * - Virtual scrolling for large datasets
- * - Optimized cell rendering
- * - Debounced input handling
- */
-
-import React from 'react';
-import { type Table, flexRender, type Column } from '@tanstack/react-table';
-import { Button } from '../../Button/Button';
-import { ChevronUp, ChevronDown, ChevronRight, ChevronsUpDown } from 'lucide-react';
-import { EmptyState } from './EmptyState';
-import { Input } from '../../Input/Input';
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
-import type { AggregateConfig, DataRecord } from '../types';
-
-/**
- * Props for the DataTable body component
- * @template TData - The type of data records in the table
- */
-interface DataTableBodyProps<TData extends DataRecord> {
-  /** TanStack table instance */
-  table: Table<TData>;
-  /** Whether a new row is being created */
-  isCreating: boolean;
-  /** Data for the row being created */
-  creationData: Record<string, unknown>;
-  /** Callback when creation data changes */
-  onCreationDataChange: (data: Record<string, unknown>) => void;
-  /** Callback to save the new row */
-  onSaveCreation: () => void;
-  /** Callback to cancel row creation */
-  onCancelCreation: () => void;
-  /** ID of the row currently being edited */
-  editingRowId: string | null;
-  /** Data for the row being edited */
-  editingData: Record<string, unknown>;
-  /** Callback when editing data changes */
-  onEditingDataChange: (data: Record<string, unknown>) => void;
-  /** Current grouping configuration */
-  grouping: string[];
-  /** Aggregate configurations for grouped data */
-  aggregates: AggregateConfig[];
-  /** Function to get unique row ID */
-  getRowId?: (row: TData, index: number) => string;
-  /** Custom empty state configuration */
-  emptyState?: {
-    /** Empty state title */
-    title?: string;
-    /** Empty state description */
-    description?: string;
-    /** Empty state icon component */
-    icon?: React.ComponentType<{ className?: string }>;
-    /** Optional action button */
-    action?: {
-      /** Button label */
-      label: string;
-      /** Button click handler */
-      onClick: () => void;
-    };
-  };
-  /** Whether the table is currently filtered */
-  isFiltered?: boolean;
-  /** Callback to clear all filters */
-  onClearFilters?: () => void;
-  /** Hierarchical configuration */
-  hierarchical?: {
-    enabled: boolean;
-    expandAll: () => void;
-    collapseAll: () => void;
-    isAllExpanded: boolean;
-    hasAnyChildren: boolean;
-  };
-}
-
-// Helper function to render the appropriate input type based on column configuration
-const renderEditField = (
-  column: any,
-  value: any,
-  onChange: (value: any) => void,
-  editingData: Record<string, any> = {},
-  placeholder?: string
-) => {
-  const columnDef = column.columnDef;
-  
-  // Check for custom field type
-  if (columnDef.fieldType === 'select' && columnDef.fieldOptions) {
-    // Use editAccessorKey if specified, otherwise use the column id
-    const editKey = columnDef.editAccessorKey || column.id;
-    const editValue = editingData[editKey] || value;
-    
-    return (
-      <Select
-        value={String(editValue || '')}
-        onValueChange={(newValue) => {
-          // If editAccessorKey is specified, update that field instead
-          if (columnDef.editAccessorKey) {
-            onChange({ [columnDef.editAccessorKey]: Number(newValue) });
-          } else {
-            onChange(newValue);
-          }
-        }}
-      >
-        <SelectTrigger className="w-full h-8">
-          <SelectValue placeholder={placeholder || `Select ${column.id}`} />
-        </SelectTrigger>
-        <SelectContent>
-          {columnDef.fieldOptions.map((option: { value: unknown; label: string }) => (
-            <SelectItem key={String(option.value) || option.label} value={String(option.value)}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectContent>
-      </Select>
-    );
-  }
-  
-  if (columnDef.fieldType === 'date') {
-    return (
-      <Input
-        type="date"
-        value={value || ''}
-        onChange={(e) => onChange(e.target.value)}
-        className="w-full h-8"
-      />
-    );
-  }
-  
-  // Default to text input
-  return (
-    <Input
-      type="text"
-      value={value || ''}
-      onChange={(e) => onChange(e.target.value)}
-      className="w-full h-8"
-      placeholder={placeholder || `Enter ${column.id}`}
-    />
-  );
-};
-
-/**
- * DataTable body component that renders the main table content.
- * Handles table rows, headers, inline editing, row creation, grouping, and aggregates.
- * 
- * @template TData - The type of data records in the table
- * @param props - DataTable body configuration
- * @returns The rendered table body with rows and headers
- */
-export function DataTableBody<TData extends DataRecord>({
-  table,
-  isCreating,
-  creationData,
-  onCreationDataChange,
-  onSaveCreation,
-  onCancelCreation,
-  editingRowId,
-  editingData,
-  onEditingDataChange,
-  grouping,
-  aggregates,
-  getRowId,
-  emptyState,
-  isFiltered,
-  onClearFilters,
-  hierarchical,
-}: DataTableBodyProps<TData>) {
-  
-
-  return (
-    <>
-      {/* Table Header */}
-      <thead>
-        {table.getHeaderGroups().map((headerGroup) => (
-          <tr key={headerGroup.id}>
-            {/* Expand/Collapse All Button - Only show for hierarchical tables */}
-            {hierarchical?.enabled && hierarchical?.hasAnyChildren && (
-              <th className="w-12">
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={hierarchical.isAllExpanded ? hierarchical.collapseAll : hierarchical.expandAll}
-                  className="size-8 p-0"
-                  aria-label={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
-                  title={hierarchical.isAllExpanded ? 'Collapse all' : 'Expand all'}
-                >
-                  {hierarchical.isAllExpanded ? (
-                    <ChevronDown className="size-4" />
-                  ) : (
-                    <ChevronRight className="size-4" />
-                  )}
-                </Button>
-              </th>
-            )}
-            
-            {headerGroup.headers.map((header) => {
-              const isSortable = header.column.getCanSort();
-              const ariaSort = isSortable
-                ? (header.column.getIsSorted() === 'asc'
-                    ? 'ascending'
-                    : header.column.getIsSorted() === 'desc'
-                    ? 'descending'
-                    : 'none')
-                : undefined;
-              return (
-                <th
-                  key={header.id}
-                  {...(isSortable ? { 'aria-sort': ariaSort } : {})}
-                >
-                  {header.isPlaceholder ? null : (
-                    isSortable ? (
-                      <Button
-                        variant="ghost"
-                        className="h-auto p-0 font-medium hover:bg-transparent"
-                        onClick={header.column.getToggleSortingHandler()}
-                        aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
-                        tabIndex={0}
-                      >
-                        <div className="flex items-center gap-1">
-                          {typeof header.column.columnDef.header === 'function'
-                            ? header.column.columnDef.header(header.getContext())
-                            : header.column.columnDef.header}
-                          {header.column.getIsSorted() === 'asc' ? (
-                            <ChevronUp className="size-4" />
-                          ) : header.column.getIsSorted() === 'desc' ? (
-                            <ChevronDown className="size-4" />
-                          ) : (
-                            <ChevronsUpDown className="size-4" />
-                          )}
-                        </div>
-                      </Button>
-                    ) : (
-                      <div>
-                        {typeof header.column.columnDef.header === 'function'
-                          ? header.column.columnDef.header(header.getContext())
-                          : header.column.columnDef.header}
-                      </div>
-                    )
-                  )}
-                </th>
-              );
-            })}
-          </tr>
-        ))}
-      </thead>
-
-      {/* Table Body */}
-      <tbody>
-        {/* Creation Row */}
-        {isCreating && (
-          <tr>
-            {table.getVisibleFlatColumns().map((column) => (
-              <td key={column.id}>
-                {(() => {
-                  // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
-                  // This ensures that when editAccessorKey is different from column.id, we use the correct key
-                  const columnDef = column.columnDef;
-                  const accessorKey = columnDef.editAccessorKey || column.id;
-                  const currentValue = creationData[accessorKey] ?? creationData[column.id] ?? '';
-                  
-                  return renderEditField(column, currentValue, (value) => {
-                    if (typeof value === 'object' && value !== null) {
-                      // Handle editAccessorKey case
-                      onCreationDataChange({ ...creationData, ...value });
-                    } else {
-                      // Handle simple value case
-                      onCreationDataChange({ ...creationData, [column.id]: value });
-                    }
-                  }, creationData);
-                })()}
-              </td>
-            ))}
-            <td className="flex gap-1">
-              <>
-                <button
-                  onClick={onSaveCreation}
-                  className="size-8 p-0 bg-app-main-500 text-app-main-50 rounded hover:bg-app-main-600 flex items-center justify-center"
-                  title="Save new row"
-                >
-                  <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                  </svg>
-                </button>
-                <button
-                  onClick={onCancelCreation}
-                  className="size-8 p-0 bg-app-sec-500 text-app-main-50 rounded hover:bg-app-sec-600 flex items-center justify-center"
-                  title="Cancel new row"
-                >
-                  <svg className="size-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-                  </svg>
-                </button>
-              </>
-            </td>
-          </tr>
-        )}
-        
-        {/* Table Rows */}
-        {table.getRowModel().rows.length === 0 && (
-          <tr>
-            <td colSpan={table.getVisibleFlatColumns().length} role="status">
-              <EmptyState
-                title={emptyState?.title}
-                description={emptyState?.description}
-                icon={emptyState?.icon}
-                action={emptyState?.action}
-                isFiltered={isFiltered}
-                onClearFilters={onClearFilters}
-              />
-            </td>
-          </tr>
-        )}
-        
-        {table.getRowModel().rows.map((row) => {
-          const rowId = getRowId ? getRowId(row.original, row.index) : String(row.index);
-          const isEditing = editingRowId === rowId;
-          
-          // Handle grouped rows
-          if (row.getIsGrouped()) {
-            const groupValue = row.getValue(grouping[0]);
-            const subRowsCount = row.subRows?.length || 0;
-            const isExpanded = row.getIsExpanded();
-            
-            return (
-              <React.Fragment key={row.id}>
-                {/* Group Header Row */}
-                <tr className="bg-app-sec-50 hover:bg-app-sec-100">
-                  <td className="flex items-center py-2 font-medium" colSpan={table.getAllColumns().length}>
-                    <>
-                      <Button
-                        variant="ghost"
-                        size="sm"
-                        onClick={() => row.toggleExpanded()}
-                        className="p-0 h-auto mr-2"
-                      >
-                        {isExpanded ? (
-                          <ChevronDown className="size-4" />
-                        ) : (
-                          <ChevronRight className="size-4" />
-                        )}
-                      </Button>
-                      <span className="text-sm">
-                        {String(groupValue)} ({subRowsCount} items)
-                      </span>
-                    </>
-                  </td>
-                </tr>
-                
-                {/* Render sub-rows if expanded */}
-                {isExpanded && row.subRows?.map((subRow) => {
-                  const subRowId = getRowId ? getRowId(subRow.original, subRow.index) : String(subRow.index);
-                  const isSubRowEditing = editingRowId === subRowId;
-                  
-                  return (
-                    <tr key={subRow.id} className="border-l-2 border-l-blue-200">
-                      {subRow.getVisibleCells().map((cell) => (
-                        <td key={cell.id} className="pl-8">
-                          {isSubRowEditing && cell.column.id !== 'actions' ? (
-                            (() => {
-                              // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
-                              // This ensures that when editAccessorKey is different from column.id, we use the correct key
-                              const columnDef = cell.column.columnDef;
-                              const accessorKey = columnDef.editAccessorKey || cell.column.id;
-                              const currentValue = editingData[accessorKey] ?? editingData[cell.column.id] ?? cell.getValue();
-                              
-                              return renderEditField(cell.column, currentValue, (value) => {
-                                if (typeof value === 'object' && value !== null) {
-                                  // Handle editAccessorKey case
-                                  onEditingDataChange({ ...editingData, ...value });
-                                } else {
-                                  // Handle simple value case
-                                  onEditingDataChange({ ...editingData, [cell.column.id]: value });
-                                }
-                              }, editingData);
-                            })()
-                          ) : (
-                            flexRender(cell.column.columnDef.cell, cell.getContext())
-                          )}
-                        </td>
-                      ))}
-                    </tr>
-                  );
-                })}
-              </React.Fragment>
-            );
-          }
-          
-          // Skip leaf rows when grouping is enabled - they're already rendered as sub-rows
-          // A row is a leaf if it has a parent (part of a group) and is not itself a group header
-          if (grouping.length > 0 && typeof row.getParentRow === 'function' && row.getParentRow() && !row.getIsGrouped()) {
-            return null;
-          }
-          
-          // Regular row (non-grouped or when grouping is disabled)
-          return (
-            <tr key={row.id}>
-              {row.getVisibleCells().map((cell) => (
-                <td key={cell.id}>
-                  {isEditing && cell.column.id !== 'actions' ? (
-                    (() => {
-                      // CRITICAL FIX: Use the correct accessor key (editAccessorKey or column.id) to get the value
-                      // This ensures that when editAccessorKey is different from column.id, we use the correct key
-                      const columnDef = cell.column.columnDef;
-                      const accessorKey = columnDef.editAccessorKey || cell.column.id;
-                      const currentValue = editingData[accessorKey] ?? editingData[cell.column.id] ?? cell.getValue();
-                      
-                      return renderEditField(cell.column, currentValue, (value) => {
-                        if (typeof value === 'object' && value !== null) {
-                          // Handle editAccessorKey case
-                          onEditingDataChange({ ...editingData, ...value });
-                        } else {
-                          // Handle simple value case
-                          onEditingDataChange({ ...editingData, [cell.column.id]: value });
-                        }
-                      }, editingData);
-                    })()
-                  ) : (
-                    flexRender(cell.column.columnDef.cell, cell.getContext())
-                  )}
-                </td>
-              ))}
-            </tr>
-          );
-        })}
-      </tbody>
-    </>
-  );
-}

package/src/components/DataTable/components/DraggableColumnHeader.tsx

@@ -1,156 +0,0 @@
-import React, { useState } from 'react';
-import { Button } from '../../Button/Button';
-import { ChevronUp, ChevronDown,ChevronsUpDown } from 'lucide-react';
-import { cn } from '../../../utils/core/cn';
-import type { Header } from '@tanstack/react-table';
-
-/**
- * Props for the DraggableColumnHeader component.
- * @template TData - The type of data records in the table
- */
-interface DraggableColumnHeaderProps<TData> {
-  header: Header<TData, unknown>;
-  onMoveLeft?: () => void;
-  onMoveRight?: () => void;
-  canMoveLeft?: boolean;
-  canMoveRight?: boolean;
-  enableReordering?: boolean;
-  onColumnDrop?: (draggedColumnId: string, targetColumnId: string) => void;
-}
-
-/**
- * Draggable column header component for DataTable.
- * Provides drag-and-drop column reordering functionality.
- * 
- * @template TData - The type of data records in the table
- * @param props - Draggable column header configuration
- * @returns The rendered draggable column header
- */
-export function DraggableColumnHeader<TData>({
-  header,
-  onMoveLeft,
-  onMoveRight,
-  canMoveLeft = false,
-  canMoveRight = false,
-  enableReordering = false,
-  onColumnDrop,
-}: DraggableColumnHeaderProps<TData>) {
-  const [isDragging, setIsDragging] = useState(false);
-  const [dragOver, setDragOver] = useState(false);
-
-  const isSortable = header.column.getCanSort ? header.column.getCanSort() : false;
-  const ariaSort = isSortable
-    ? (header.column.getIsSorted ? (header.column.getIsSorted() === 'asc'
-        ? 'ascending'
-        : header.column.getIsSorted() === 'desc'
-        ? 'descending'
-        : 'none') : 'none')
-    : undefined;
-
-  const handleDragStart = (e: React.DragEvent) => {
-    if (!enableReordering) return;
-    
-    setIsDragging(true);
-    e.dataTransfer.setData('text/plain', header.id);
-    e.dataTransfer.effectAllowed = 'move';
-    
-    // Add visual feedback
-    if (e.currentTarget instanceof HTMLElement) {
-      e.currentTarget.style.opacity = '0.5';
-    }
-  };
-
-  const handleDragEnd = (e: React.DragEvent) => {
-    setIsDragging(false);
-    setDragOver(false);
-    
-    // Reset visual feedback
-    if (e.currentTarget instanceof HTMLElement) {
-      e.currentTarget.style.opacity = '1';
-    }
-  };
-
-  const handleDragOver = (e: React.DragEvent) => {
-    if (!enableReordering) return;
-    
-    e.preventDefault();
-    e.dataTransfer.dropEffect = 'move';
-    setDragOver(true);
-  };
-
-  const handleDragLeave = (e: React.DragEvent) => {
-    if (!enableReordering) return;
-    
-    // Only set dragOver to false if we're leaving the element entirely
-    if (!e.currentTarget.contains(e.relatedTarget as Node)) {
-      setDragOver(false);
-    }
-  };
-
-  const handleDrop = (e: React.DragEvent) => {
-    if (!enableReordering) return;
-    
-    e.preventDefault();
-    setDragOver(false);
-    
-    const draggedHeaderId = e.dataTransfer.getData('text/plain');
-    if (draggedHeaderId && draggedHeaderId !== header.id && onColumnDrop) {
-      onColumnDrop(draggedHeaderId, header.id);
-    }
-  };
-
-  return (
-    <th
-      className={cn(
-        'px-3 py-2 text-sm font-medium text-left relative group',
-        isSortable && 'cursor-pointer hover:bg-sec-50',
-        isDragging && 'opacity-50',
-        dragOver && 'bg-main-50 border-main-200',
-        enableReordering && 'cursor-move'
-      )}
-      style={{}}
-      draggable={enableReordering}
-      onDragStart={handleDragStart}
-      onDragEnd={handleDragEnd}
-      onDragOver={handleDragOver}
-      onDragLeave={handleDragLeave}
-      onDrop={handleDrop}
-      {...(isSortable ? { 'aria-sort': ariaSort } : {})}
-    >
-      <div className="flex items-center justify-between">
-        <div className="flex items-center gap-1 flex-1">
-          {header.isPlaceholder ? null : (
-            isSortable ? (
-              <Button
-                variant="ghost"
-                className="h-auto p-0 font-medium hover:bg-transparent flex-1 justify-start"
-                onClick={header.column.getToggleSortingHandler()}
-                aria-label={`Sort by ${typeof header.column.columnDef.header === 'string' ? header.column.columnDef.header : 'column'}`}
-                tabIndex={0}
-              >
-                <div className="flex items-center gap-1">
-                  {typeof header.column.columnDef.header === 'function'
-                    ? header.column.columnDef.header(header.getContext())
-                    : header.column.columnDef.header}
-                  {header.column.getIsSorted() === 'asc' ? (
-                    <ChevronUp className="size-4" />
-                  ) : header.column.getIsSorted() === 'desc' ? (
-                    <ChevronDown className="size-4" />
-                  ) : (
-                    <ChevronsUpDown className="size-4" />
-                  )}
-                </div>
-              </Button>
-            ) : (
-              <div className="flex-1">
-                {typeof header.column.columnDef.header === 'function'
-                  ? header.column.columnDef.header(header.getContext())
-                  : header.column.columnDef.header}
-              </div>
-            )
-          )}
-        </div>
-      </div>
-    </th>
-  );
-}