@jmruthers/pace-core 0.6.9 → 0.6.11

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

@@ -1,245 +0,0 @@
-/**
- * @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, { useEffect } from 'react';
-import { ImportModal, type ImportModalConfig } from './ImportModal';
-import { createLogger } from '../../../utils/core/logger';
-
-/**
- * Maps CSV column data to table column structure
- * Handles reference fields (columns with editAccessorKey) and direct accessorKey columns
- */
-function mapCSVToTableColumns<TData extends Record<string, unknown> = Record<string, unknown>>(
-  csvData: Array<Record<string, unknown>>,
-  columns: Array<{
-    id?: string;
-    accessorKey?: string;
-    header?: string;
-    editAccessorKey?: string;
-  }>
-): TData[] {
-  const logger = createLogger('mapCSVToTableColumns');
-  // Create a mapping from CSV headers to table field names
-  // Priority: editAccessorKey > accessorKey > id
-  const columnMap = new Map<string, string>();
-  
-  columns.forEach(col => {
-    const fieldName = col.editAccessorKey || col.accessorKey || col.id;
-    const header = typeof col.header === 'string' ? col.header : '';
-    
-    if (fieldName && header) {
-      const headerLower = header.toLowerCase();
-      // Map header to field name (case-insensitive)
-      columnMap.set(headerLower, fieldName);
-      
-      // Also map id/accessorKey if different from header
-      const colId = col.id || col.accessorKey;
-      if (colId && colId !== header && colId !== fieldName) {
-        columnMap.set(colId.toLowerCase(), fieldName);
-      }
-      
-      // For reference fields with editAccessorKey, also map the ID column header
-      // This handles exports that include both "Type" and "Type (ID)" columns
-      if (col.editAccessorKey && header) {
-        const editAccessorKey = col.editAccessorKey; // Store in const for proper type narrowing
-        const idColumnHeader = `${header} (ID)`;
-        columnMap.set(idColumnHeader.toLowerCase(), editAccessorKey);
-        // Also map the editAccessorKey directly (in case CSV uses the field name)
-        columnMap.set(editAccessorKey.toLowerCase(), editAccessorKey);
-      }
-    } else {
-      logger.warn('Skipping column with missing fieldName or header:', col);
-    }
-  });
-  
-  if (csvData.length === 0) {
-    logger.warn('No CSV data to map');
-    return [];
-  }
-  
-  // Transform CSV data using the mapping
-  const mappedData = csvData.map((row, index) => {
-    const mappedRow: Record<string, unknown> = {};
-    
-    // For each CSV column, find the corresponding table field
-    Object.keys(row).forEach(csvHeader => {
-      const csvHeaderLower = csvHeader.toLowerCase();
-      
-      // Try exact match first
-      let fieldName = columnMap.get(csvHeaderLower);
-      
-      // If no exact match, try flexible suffix matching:
-      // If CSV header ends with " [space] ColumnHeader", match it
-      // This handles cases like "Meal Type" → "Type", "User Name" → "Name", etc.
-      // Also handles "Meal Type (ID)" → matches the column with header "Type (ID)"
-      if (!fieldName) {
-        for (const [mapKey, mapValue] of columnMap.entries()) {
-          // Check if CSV header ends with the mapped key (with a space before it, or exact match)
-          const keyWithSpace = ` ${mapKey}`;
-          if (csvHeaderLower === mapKey || csvHeaderLower.endsWith(keyWithSpace)) {
-            fieldName = mapValue;
-            break; // Found a match, stop searching
-          }
-        }
-      }
-      
-      if (fieldName) {
-        mappedRow[fieldName] = row[csvHeader];
-      } else {
-        // If no mapping found, use the CSV header as-is (lowercase)
-        mappedRow[csvHeaderLower] = row[csvHeader];
-        if (index === 0) {
-          logger.warn(`No mapping found for "${csvHeader}", using as-is`);
-        }
-      }
-    });
-    
-    return mappedRow as TData;
-  });
-  
-  return mappedData;
-}
-
-/**
- * Props interface for the DataTableModals component
- * @public
- */
-export interface DataTableModalsProps<TData extends Record<string, unknown> = Record<string, unknown>> {
-  // 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: TData[]) => void | Promise<void>;
-  /** Configuration object for customizing import modal text content */
-  importModalConfig?: ImportModalConfig;
-  /** Column definitions for automatic column mapping during import */
-  columns?: Array<{
-    id?: string;
-    accessorKey?: string;
-    header?: string;
-    editAccessorKey?: string;
-  }>;
-  
-  // Focus management
-  /** Function to store focus before opening modal */
-  onStoreFocus?: () => void;
-  /** Function to restore focus after closing modal */
-  onRestoreFocus?: () => void;
-}
-
-/**
- * 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}
- * />
- * ```
- */
-/**
- * Container component for all DataTable modal dialogs.
- * Manages import modals and other data table related dialogs.
- * 
- * @template TData - The type of data records in the table
- * @param props - Modal configuration and handlers
- * @returns The rendered modals
- */
-export function DataTableModals<TData extends Record<string, unknown> = Record<string, unknown>>({
-  showImportModal,
-  onCloseImportModal,
-  onImport,
-  importModalConfig,
-  columns,
-  onStoreFocus,
-  onRestoreFocus,
-}: DataTableModalsProps<TData>) {
-  const logger = createLogger('DataTableModals');
-  // Handle focus management for import modal
-  useEffect(() => {
-    if (showImportModal) {
-      onStoreFocus?.();
-    } else {
-      // Restore focus when modal closes
-      const timeoutId = setTimeout(() => {
-        onRestoreFocus?.();
-      }, 100); // Small delay to ensure modal is fully closed
-      
-      return () => clearTimeout(timeoutId);
-    }
-  }, [showImportModal, onStoreFocus, onRestoreFocus]);
-
-  return (
-    <>
-      <ImportModal
-        isOpen={showImportModal}
-        onClose={onCloseImportModal}
-        onImport={async (rawData: Array<Record<string, unknown>>) => {
-          try {
-            // Automatically map CSV columns to table columns based on column definitions
-            let mappedData: TData[];
-            if (columns && columns.length > 0) {
-              mappedData = mapCSVToTableColumns<TData>(rawData, columns);
-            } else {
-              logger.warn('No columns provided for mapping, using raw data');
-              mappedData = rawData as TData[];
-            }
-            
-            if (!onImport) {
-              logger.error('onImport callback is not provided');
-              throw new Error('Import handler is not configured. Please provide an onImport callback.');
-            }
-            
-            const result = onImport(mappedData);
-            if (result && typeof result.then === 'function') {
-              await result;
-            }
-          } catch (error) {
-            logger.error('Import error:', error);
-            throw error; // Re-throw to let ImportModal handle it
-          }
-        }}
-        config={importModalConfig}
-      />
-
-    </>
-  );
-}

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

@@ -1,271 +0,0 @@
-/**
- * @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
- * />
- * ```
- */
-/**
- * Toolbar component for DataTable.
- * Provides search, filters, export/import, and other table actions.
- * 
- * @template TData - The type of data records in the table
- * @param props - Toolbar configuration and handlers
- * @returns The rendered toolbar
- */
-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="size-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="size-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}
-            data-restore-target="datatable-import-button"
-          >
-            <Upload className="size-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="size-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="size-4 mr-2 flex-shrink-0" />
-            <span className="truncate">Delete</span>
-          </Button>
-        )}
-
-      </nav>
-
-  );
-}