@jmruthers/pace-core 0.4.1 → 0.5.3

package/src/components/DataTable/components/DataTableErrorBoundary.tsx

@@ -0,0 +1,214 @@
+/**
+ * @file DataTable Error Boundary
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Error boundary component for DataTable with fallback UI and error recovery.
+ */
+
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Alert, AlertDescription, AlertTitle } from '../../Alert/Alert';
+import { Button } from '../../Button/Button';
+// Icons removed to avoid test mocking issues
+
+// ============================================================================
+// ERROR BOUNDARY STATE
+// ============================================================================
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+  retryCount: number;
+}
+
+// ============================================================================
+// ERROR BOUNDARY PROPS
+// ============================================================================
+
+interface DataTableErrorBoundaryProps {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: ErrorInfo) => void;
+  onRetry?: () => void;
+  maxRetries?: number;
+  showRetryButton?: boolean;
+  showErrorDetails?: boolean;
+}
+
+// ============================================================================
+// ERROR BOUNDARY COMPONENT
+// ============================================================================
+
+export class DataTableErrorBoundary extends Component<
+  DataTableErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  private retryTimeoutId: NodeJS.Timeout | null = null;
+
+  constructor(props: DataTableErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      retryCount: 0
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({
+      error,
+      errorInfo
+    });
+
+    // Call error handler if provided
+    this.props.onError?.(error, errorInfo);
+
+    // Log error for debugging
+    console.error('DataTable Error Boundary caught an error:', error, errorInfo);
+  }
+
+  componentWillUnmount() {
+    if (this.retryTimeoutId) {
+      clearTimeout(this.retryTimeoutId);
+    }
+  }
+
+  handleRetry = () => {
+    const { onRetry, maxRetries = 3 } = this.props;
+    const { retryCount } = this.state;
+
+    if (retryCount >= maxRetries) {
+      console.warn('DataTable Error Boundary: Maximum retry attempts reached');
+      return;
+    }
+
+    // Call custom retry handler if provided
+    if (onRetry) {
+      onRetry();
+    }
+
+    // Reset error state after a short delay
+    this.retryTimeoutId = setTimeout(() => {
+      this.setState({
+        hasError: false,
+        error: null,
+        errorInfo: null,
+        retryCount: retryCount + 1
+      });
+    }, 100);
+  };
+
+  handleReset = () => {
+    this.setState({
+      hasError: false,
+      error: null,
+      errorInfo: null,
+      retryCount: 0
+    });
+  };
+
+  render() {
+    const { 
+      children, 
+      fallback, 
+      showRetryButton = true, 
+      showErrorDetails = false,
+      maxRetries = 3
+    } = this.props;
+    const { hasError, error, retryCount } = this.state;
+
+    if (hasError) {
+      // Use custom fallback if provided
+      if (fallback) {
+        return fallback;
+      }
+
+      // Default error UI
+      return (
+        <div className="flex items-center justify-center p-8">
+          <Alert variant="destructive" className="max-w-md">
+            <AlertTitle>DataTable Error</AlertTitle>
+            <AlertDescription className="mt-2">
+              <span>Something went wrong</span>
+            </AlertDescription>
+            {error && error.message ? (
+              <details className="mt-2">
+                <summary className="cursor-pointer text-sm font-medium">
+                  Error Details
+                </summary>
+                <pre className="mt-2 text-xs overflow-auto max-h-32">
+                  {error.message}
+                  {showErrorDetails && error.stack && (
+                    <>
+                      {'\n\nStack Trace:\n'}
+                      {error.stack}
+                    </>
+                  )}
+                </pre>
+              </details>
+            ) : (
+              <div className="mt-2">
+                <span>An unexpected error occurred</span>
+              </div>
+            )}
+            <div className="mt-4 flex gap-2">
+              {showRetryButton && retryCount < maxRetries && (
+                 <Button
+                   variant="outline"
+                   size="sm"
+                   onClick={this.handleRetry}
+                   className="flex items-center gap-2"
+                 >
+                   Retry ({retryCount + 1}/{maxRetries})
+                 </Button>
+              )}
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={this.handleReset}
+              >
+                Reset
+              </Button>
+            </div>
+          </Alert>
+        </div>
+      );
+    }
+
+    return children;
+  }
+}
+
+// ============================================================================
+// HOOK FOR ERROR BOUNDARY
+// ============================================================================
+
+export function useDataTableErrorBoundary() {
+  const [error, setError] = React.useState<Error | null>(null);
+
+  const resetError = React.useCallback(() => {
+    setError(null);
+  }, []);
+
+  const captureError = React.useCallback((error: Error) => {
+    setError(error);
+  }, []);
+
+  React.useEffect(() => {
+    if (error) {
+      throw error;
+    }
+  }, [error]);
+
+  return { captureError, resetError };
+}

package/src/components/DataTable/components/DataTableModals.tsx

@@ -0,0 +1,87 @@
+/**
+ * @file DataTable Modals Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.2.0
+ * 
+ * Container component for all modal dialogs used by the DataTable component.
+ * This includes import modals and other data table related dialogs.
+ * 
+ * @example
+ * ```tsx
+ * <DataTableModals
+ *   showImportModal={isImportOpen}
+ *   onCloseImportModal={() => setIsImportOpen(false)}
+ *   onImport={handleImportData}
+ *   importModalConfig={{
+ *     title: "Import Users",
+ *     description: "Upload a CSV file with user data."
+ *   }}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { ImportModal, type ImportModalConfig } from './ImportModal';
+
+/**
+ * Props interface for the DataTableModals component
+ * @public
+ */
+export interface DataTableModalsProps {
+  // Import modal
+  /** Whether the import modal is visible */
+  showImportModal: boolean;
+  /** Callback function when the import modal is closed */
+  onCloseImportModal: () => void;
+  /** Callback function when data is imported successfully */
+  onImport: (data: any[]) => void | Promise<void>;
+  /** Configuration object for customizing import modal text content */
+  importModalConfig?: ImportModalConfig;
+  
+}
+
+/**
+ * DataTableModals component that renders all modal dialogs for the DataTable
+ * 
+ * @param props - The component props
+ * @returns JSX.Element - Container with all data table modal dialogs
+ * 
+ * @example
+ * ```tsx
+ * const importConfig = {
+ *   title: "Import Customer Data",
+ *   description: "Upload a CSV file with customer information to import multiple records.",
+ *   uploadText: "Choose a customer CSV file",
+ *   selectFileButtonText: "Browse Files"
+ * };
+ * 
+ * <DataTableModals
+ *   showImportModal={showImport}
+ *   onCloseImportModal={() => setShowImport(false)}
+ *   onImport={handleImportedData}
+ *   importModalConfig={importConfig}
+ *   isViewModalOpen={showView}
+ *   onCloseViewModal={() => setShowView(false)}
+ *   viewModalData={selectedRow}
+ * />
+ * ```
+ */
+export function DataTableModals({
+  showImportModal,
+  onCloseImportModal,
+  onImport,
+  importModalConfig,
+}: DataTableModalsProps) {
+  return (
+    <>
+      <ImportModal
+        isOpen={showImportModal}
+        onClose={onCloseImportModal}
+        onImport={onImport}
+        config={importModalConfig}
+      />
+
+    </>
+  );
+}

package/src/components/DataTable/components/DataTableToolbar.tsx

@@ -0,0 +1,262 @@
+/**
+ * @file DataTable Toolbar Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.3.0
+ * 
+ * The DataTable toolbar provides a comprehensive interface for table operations including
+ * search, grouping, column visibility, and action buttons. It's positioned above the table
+ * and contains all primary user interactions.
+ * 
+ * Features:
+ * - Global search with debounced input
+ * - Column-based grouping controls
+ * - Column visibility toggles
+ * - Custom toolbar buttons
+ * - Import/Export actions
+ * - Row creation button
+ * - Responsive layout that adapts to screen size
+ * 
+ * @example
+ * ```tsx
+ * <DataTableToolbar
+ *   searchable={true}
+ *   globalFilter=""
+ *   onGlobalFilterChange={(value) => setFilter(value)}
+ *   enableGrouping={true}
+ *   columns={columns}
+ *   grouping={[]}
+ *   onGroupByChange={(columnId) => setGroupBy(columnId)}
+ *   enableColumnVisibility={true}
+ *   tableColumns={table.getAllColumns()}
+ *   onColumnVisibilityChange={(id, visible) => toggleColumn(id, visible)}
+ *   toolbarButtons={customButtons}
+ *   enableCreation={true}
+ *   onCreateRow={() => openCreateModal()}
+ *   enableImport={true}
+ *   onImportClick={() => openImportModal()}
+ *   exportable={true}
+ *   onExport={() => exportData()}
+ * />
+ * ```
+ * 
+ * @accessibility
+ * - Search input has proper aria-label
+ * - All buttons have descriptive labels
+ * - Keyboard navigation support
+ * - Focus management
+ * 
+ * @performance
+ * - Search input uses debounced onChange to prevent excessive filtering
+ * - Button renders are memoized
+ * - Dropdown menus use virtual scrolling for large column lists
+ */
+
+import React from 'react';
+import { Input } from '../../Input/Input';
+import { Button } from '../../Button/Button';
+import { Search, Plus, Upload, Download, Settings2, Filter, Trash2 } from 'lucide-react';
+import { GroupingDropdown } from './GroupingDropdown';
+import { ColumnVisibilityDropdown } from './ColumnVisibilityDropdown';
+import type { DataTableColumn, DataRecord, SimpleColumn, DataTableFeatureConfig, DataTableRBACConfig } from '../types';
+import type { Column } from '@tanstack/react-table';
+
+/**
+ * Props for the DataTable toolbar component
+ * @template TData - The type of data records in the table
+ */
+interface DataTableToolbarProps<TData extends DataRecord = DataRecord> {
+  // Feature configuration
+  /** Feature configuration for the toolbar */
+  features: DataTableFeatureConfig;
+  
+  // MANDATORY RBAC
+  /** RBAC configuration - REQUIRED for all DataTables */
+  rbac: DataTableRBACConfig;
+  /** Permission states for RBAC enforcement */
+  permissions: {
+    canCreate: { can: boolean; isLoading: boolean };
+    canImport: { can: boolean; isLoading: boolean };
+    canExport: { can: boolean; isLoading: boolean };
+    canDelete: { can: boolean; isLoading: boolean };
+  };
+  
+  // Data and state
+  /** Current global filter value */
+  globalFilter: string;
+  /** Callback when global filter changes */
+  onGlobalFilterChange: (value: string) => void;
+  /** Column definitions for grouping dropdown */
+  columns: (DataTableColumn<TData> | SimpleColumn<TData>)[];
+  /** Currently applied grouping columns */
+  grouping: string[];
+  /** Callback when grouping changes */
+  onGroupByChange: (columnId: string | null) => void;
+  /** Table columns from TanStack Table instance */
+  tableColumns: Column<TData, unknown>[];
+  /** Callback when column visibility changes */
+  onColumnVisibilityChange: (columnId: string, visible: boolean) => void;
+  /** Current row selection state */
+  rowSelection: Record<string, boolean>;
+  
+  // Callbacks
+  /** Callback when create row button is clicked */
+  onCreateRow?: () => void;
+  /** Callback when import button is clicked */
+  onImportClick: () => void;
+  /** Callback when export button is clicked */
+  onExport: () => void;
+  /** Callback when delete selected button is clicked */
+  onDeleteSelected?: (selectedRows: Record<string, boolean>) => void;
+  /** Callback when filter toggle button is clicked */
+  onToggleFilterRow?: () => void;
+  
+  // Filter state
+  /** Whether the filter row is currently visible */
+  showFilterRow?: boolean;
+}
+
+/**
+ * DataTable toolbar component that provides search, filtering, and action controls
+ * 
+ * This component renders the top toolbar of the DataTable with various controls including:
+ * - Global search input (left side)
+ * - Grouping dropdown (left side)
+ * - Action buttons and controls (right side)
+ * 
+ * The toolbar uses a responsive flexbox layout that adapts to different screen sizes.
+ * 
+ * @template TData - The type of data records in the table
+ * @param props - The toolbar props
+ * @returns JSX.Element - The rendered toolbar component
+ * 
+ * @example
+ * ```tsx
+ * <DataTableToolbar
+ *   searchable={true}
+ *   globalFilter="john"
+ *   onGlobalFilterChange={(value) => setFilter(value)}
+ *   enableGrouping={true}
+ *   // ... other props
+ * />
+ * ```
+ */
+export function DataTableToolbar<TData extends DataRecord>({
+  features,
+  rbac,
+  permissions,
+  globalFilter,
+  onGlobalFilterChange,
+  columns,
+  grouping,
+  onGroupByChange,
+  tableColumns,
+  onColumnVisibilityChange,
+  rowSelection,
+  onCreateRow,
+  onImportClick,
+  onExport,
+  onDeleteSelected,
+  onToggleFilterRow,
+  showFilterRow = false,
+}: DataTableToolbarProps<TData>) {
+  const currentGroupBy = grouping.length > 0 ? grouping[0] : null;
+
+  return (
+
+<nav className="flex justify-end flex-wrap gap-2">
+      {features.search && (
+
+          <Input
+            id="table-search"
+            placeholder="Search..."
+            value={globalFilter}
+            onChange={(e) => onGlobalFilterChange(e.target.value)}
+            aria-label="Search table"
+            tabIndex={0}
+            className="justify-self-start w-50 flex-1"
+          />
+
+      )}
+
+
+      
+        {/* Grouping */}
+        {features.grouping && (
+          <GroupingDropdown
+            columns={columns}
+            currentGroupBy={currentGroupBy}
+            onGroupByChange={onGroupByChange}
+          />
+        )}
+        
+        {/* Column Visibility */}
+        {features.columnVisibility && (
+          <ColumnVisibilityDropdown
+            columns={tableColumns}
+            onColumnVisibilityChange={onColumnVisibilityChange}
+          />
+        )}
+
+        {/* Filter Toggle */}
+        {features.filtering && onToggleFilterRow && (
+          <Button 
+            variant="outline" 
+            onClick={onToggleFilterRow}
+          >
+            <Filter className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">
+              {showFilterRow ? 'Hide Filters' : 'Show Filters'}
+            </span>
+          </Button>
+        )}
+
+        {/* Row Creation - ONLY if user has create permission */}
+        {features.creation && permissions.canCreate.can && onCreateRow && (
+          <Button 
+            variant="outline" 
+            onClick={onCreateRow}
+          >
+            <Plus className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Add Row</span>
+          </Button>
+        )}
+
+        {/* Import - ONLY if user has import permission */}
+        {features.import && permissions.canImport.can && (
+          <Button 
+            variant="outline" 
+            onClick={onImportClick}
+          >
+            <Upload className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Import</span>
+          </Button>
+        )}
+
+        {/* Export - ONLY if user has export permission */}
+        {features.export && permissions.canExport.can && (
+          <Button 
+            variant="outline" 
+            onClick={onExport}
+          >
+            <Download className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Export</span>
+          </Button>
+        )}
+
+        {/* Delete Selected - ONLY if user has delete permission */}
+        {features.deleteSelected && features.deletion && features.selection && permissions.canDelete.can && (
+          <Button
+            variant="destructive"
+            onClick={() => onDeleteSelected?.(rowSelection)}
+            disabled={Object.values(rowSelection).filter(Boolean).length === 0}
+          >
+            <Trash2 className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Delete</span>
+          </Button>
+        )}
+
+      </nav>
+
+  );
+}

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

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import { Button } from '../../Button/Button';
+import { ChevronUp, ChevronDown,ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../../utils/cn';
+import type { Header } from '@tanstack/react-table';
+
+interface DraggableColumnHeaderProps<TData> {
+  header: Header<TData, unknown>;
+  onMoveLeft?: () => void;
+  onMoveRight?: () => void;
+  canMoveLeft?: boolean;
+  canMoveRight?: boolean;
+  enableReordering?: boolean;
+  onColumnDrop?: (draggedColumnId: string, targetColumnId: string) => void;
+}
+
+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="h-4 w-4" />
+                  ) : header.column.getIsSorted() === 'desc' ? (
+                    <ChevronDown className="h-4 w-4" />
+                  ) : (
+                    <ChevronsUpDown className="h-4 w-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>
+  );
+}