@jmruthers/pace-core 0.2.4

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/DataTableHeader.tsx

@@ -0,0 +1,31 @@
+/**
+ * @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/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,251 @@
+/**
+ * @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 } 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;
+  
+  // 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,
+  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 flex-col sm:flex-row items-stretch sm:items-center gap-4 p-4 border-b bg-sec-50">
+      {/* Left side - Search only */}
+      {features.search && (
+        <div className="flex items-center gap-2 w-full sm:min-w-[200px] sm:max-w-[300px]">
+          <Search className="h-4 w-4 text-sec-500 flex-shrink-0" />
+          <Input
+            id="table-search"
+            placeholder="Search..."
+            value={globalFilter}
+            onChange={(e) => onGlobalFilterChange(e.target.value)}
+            aria-label="Search table"
+            tabIndex={0}
+            className="flex-1"
+          />
+        </div>
+      )}
+
+      {/* Right side - All Buttons in specified order */}
+      <div className="flex items-center gap-2 flex-wrap justify-end sm:justify-end min-w-0">
+        {/* 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 */}
+        {features.creation && 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 */}
+        {features.import && (
+          <Button 
+            variant="outline" 
+            onClick={onImportClick}
+          >
+            <Upload className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Import</span>
+          </Button>
+        )}
+
+        {/* Export */}
+        {features.export && (
+          <Button 
+            variant="outline" 
+            onClick={onExport}
+          >
+            <Download className="h-4 w-4 mr-2 flex-shrink-0" />
+            <span className="truncate">Export</span>
+          </Button>
+        )}
+
+
+        {/* Delete - Only when both deletion and selection are enabled */}
+        {features.deleteSelected && features.deletion && features.selection && (
+          <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>
+        )}
+
+      </div>
+    </nav>
+  );
+}