@jmruthers/pace-core 0.2.4

package/src/components/DataTable/components/GroupingDropdown.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { Button } from '../../Button/Button';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '../../Select/Select';
+import { Group } from 'lucide-react';
+import type { DataTableColumn, DataRecord, SimpleColumn } from '../types';
+
+interface GroupingDropdownProps<TData extends DataRecord = DataRecord> {
+  columns: (DataTableColumn<TData> | SimpleColumn<TData>)[];
+  currentGroupBy: string | null;
+  onGroupByChange: (columnId: string | null) => void;
+  className?: string;
+}
+
+export function GroupingDropdown<TData extends DataRecord>({ 
+  columns, 
+  currentGroupBy, 
+  onGroupByChange,
+  className
+}: GroupingDropdownProps<TData>) {
+  // Convert columns to a consistent format for grouping
+  const convertedColumns = columns.map(col => {
+    if ('accessorKey' in col && 'header' in col) {
+      // DataTableColumn format
+      return {
+        accessorKey: col.accessorKey,
+        header: typeof col.header === 'string' ? col.header : String(col.accessorKey),
+        enableGrouping: col.enableGrouping || false,
+      };
+    } else if ('key' in col && 'label' in col) {
+      // SimpleColumn format
+      return {
+        accessorKey: col.key,
+        header: col.label,
+        enableGrouping: false, // SimpleColumn doesn't support grouping by default
+      };
+    } else {
+      // Fallback for unknown format
+      return {
+        accessorKey: 'unknown',
+        header: 'Unknown',
+        enableGrouping: false,
+      };
+    }
+  });
+
+  const groupableColumns = convertedColumns.filter(col => col.enableGrouping && col.accessorKey);
+  
+  if (groupableColumns.length === 0) {
+    return null;
+  }
+
+  return (
+    <Select>
+      <SelectTrigger asChild>
+        <Button 
+          variant="outline" 
+          className={className || ''}
+        >
+          <Group className="h-4 w-4 mr-2 flex-shrink-0" />
+          <span className="truncate">Grouping</span>
+        </Button>
+      </SelectTrigger>
+      <SelectContent className="w-48 !bg-main-50 border border-sec-200 shadow-lg z-[9999]" style={{ backgroundColor: 'white' }}>
+        <SelectItem
+          value="no-grouping"
+          onClick={() => onGroupByChange(null)}
+          className={`px-3 py-2 text-sm ${!currentGroupBy ? "bg-main-50 text-main-700" : "hover:bg-sec-50"}`}
+        >
+          No grouping
+        </SelectItem>
+        {groupableColumns.map((column) => {
+          const columnId = String(column.accessorKey);
+          const isSelected = currentGroupBy === columnId;
+          const displayName = column.header || String(column.accessorKey);
+          
+          return (
+            <SelectItem
+              key={columnId}
+              value={columnId}
+              onClick={() => onGroupByChange(columnId)}
+              className={`px-3 py-2 text-sm ${isSelected ? "bg-main-50 text-main-700" : "hover:bg-sec-50"}`}
+            >
+              {displayName}
+            </SelectItem>
+          );
+        })}
+      </SelectContent>
+    </Select>
+  );
+}

package/src/components/DataTable/components/ImportModal.tsx

@@ -0,0 +1,345 @@
+/**
+ * @file Import Modal Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.2.0
+ * 
+ * A modal dialog for importing CSV data into the DataTable component.
+ * Provides file selection, data preview, and validation functionality.
+ * 
+ * @example
+ * ```tsx
+ * <ImportModal
+ *   isOpen={showModal}
+ *   onClose={() => setShowModal(false)}
+ *   onImport={(data) => handleImportedData(data)}
+ *   title="Import Users"
+ *   description="Upload a CSV file containing user data to import multiple users at once."
+ *   uploadText="Choose a user CSV file to upload"
+ *   selectFileButtonText="Select User File"
+ * />
+ * ```
+ * 
+ * @accessibility
+ * - Uses pace-core Dialog component with full accessibility support
+ * - Proper ARIA labels and descriptions
+ * - Keyboard navigation support
+ * - Screen reader compatible file input
+ * - Error messages are announced to screen readers
+ * 
+ * @features
+ * - CSV file validation and parsing
+ * - Data preview (first 5 rows)
+ * - Total row count display
+ * - Error handling and user feedback
+ * - Processing state management
+ * - Customizable text content
+ */
+import React, { useState, useRef, useEffect } from 'react';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '../../Dialog';
+import { Button } from '../../Button/Button';
+import { Input } from '../../Input/Input';
+import { Upload, FileText, AlertCircle } from 'lucide-react';
+
+/**
+ * Configuration interface for customizing ImportModal text content
+ * @public
+ */
+export interface ImportModalConfig {
+  /** Custom title for the import modal */
+  title?: string;
+  /** Custom description text shown below the title */
+  description?: string;
+  /** Custom text shown in the file upload area when no file is selected */
+  uploadText?: string;
+  /** Custom text for the file selection button */
+  selectFileButtonText?: string;
+  /** Custom text for the import button */
+  importButtonText?: string;
+  /** Custom text for the import button when processing */
+  importButtonProcessingText?: string;
+  /** Custom text for the cancel button */
+  cancelButtonText?: string;
+  /** Custom text for the preview section header */
+  previewHeaderText?: string;
+  /** Custom text pattern for total rows display. Use {count} as placeholder for the actual count */
+  totalRowsText?: string;
+}
+
+/**
+ * Props interface for the ImportModal component
+ * @public
+ */
+interface ImportModalProps {
+  /** Whether the modal is open */
+  isOpen: boolean;
+  /** Callback function when the modal is closed */
+  onClose: () => void;
+  /** Callback function when data is imported successfully */
+  onImport: (data: any[]) => void | Promise<void>;
+  /** Configuration object for customizing modal text content */
+  config?: ImportModalConfig;
+}
+
+/**
+ * ImportModal component for handling CSV data import
+ * 
+ * @param props - The component props
+ * @returns JSX.Element - The import modal dialog
+ * 
+ * @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",
+ *   importButtonText: "Import Customers",
+ *   totalRowsText: "Found {count} customer records to import"
+ * };
+ * 
+ * <ImportModal
+ *   isOpen={isImportModalOpen}
+ *   onClose={() => setIsImportModalOpen(false)}
+ *   onImport={handleDataImport}
+ *   config={importConfig}
+ * />
+ * ```
+ */
+export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportModalProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [previewData, setPreviewData] = useState<any[] | null>(null);
+  const [totalCount, setTotalCount] = useState<number>(0);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const isMountedRef = useRef(true);
+
+  // Cleanup effect to prevent state updates after unmount
+  useEffect(() => {
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  // Extract config with defaults
+  const {
+    title = 'Import Data',
+    description = 'Upload a CSV file to import multiple records at once.',
+    uploadText = 'Choose a CSV file to upload',
+    selectFileButtonText = 'Select File',
+    importButtonText = 'Import',
+    importButtonProcessingText = 'Processing...',
+    cancelButtonText = 'Cancel',
+    previewHeaderText = 'Preview (first 5 rows)',
+    totalRowsText = 'Total rows to import: {count}'
+  } = config;
+
+  const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = event.target.files?.[0];
+    console.log('📁 File selected:', selectedFile?.name);
+    if (selectedFile) {
+      setFile(selectedFile);
+      setError(null);
+      
+      // Generate preview
+      try {
+        const text = await selectedFile.text();
+        console.log('📄 File content length:', text.length);
+        const data = processCSV(text);
+        console.log('📊 Parsed CSV data:', data.length, 'rows');
+        console.log('👀 Setting preview data:', data.slice(0, 5));
+        setPreviewData(data.slice(0, 5)); // Show first 5 rows as preview
+        setTotalCount(data.length); // Store total count
+        console.log('👀 Preview data state should be updated');
+      } catch (err) {
+        console.error('❌ CSV parsing error:', err);
+        setError(err instanceof Error ? err.message : 'Failed to preview file');
+        setPreviewData(null);
+        setTotalCount(0);
+      }
+    }
+  };
+
+  const processCSV = (csvText: string): any[] => {
+    console.log('📄 Raw CSV text:', csvText.substring(0, 200) + '...');
+    
+    const lines = csvText.split('\n').filter(line => line.trim());
+    console.log('📄 CSV lines count:', lines.length);
+    console.log('📄 First few lines:', lines.slice(0, 3));
+    
+    if (lines.length < 2) {
+      throw new Error('CSV must have at least a header row and one data row');
+    }
+
+    // Better CSV parsing that handles quotes and commas within values
+    const parseCSVLine = (line: string): string[] => {
+      const result: string[] = [];
+      let current = '';
+      let inQuotes = false;
+      
+      for (let i = 0; i < line.length; i++) {
+        const char = line[i];
+        
+        if (char === '"') {
+          inQuotes = !inQuotes;
+        } else if (char === ',' && !inQuotes) {
+          result.push(current.trim());
+          current = '';
+        } else {
+          current += char;
+        }
+      }
+      result.push(current.trim());
+      return result;
+    };
+
+    const headers = parseCSVLine(lines[0]).map(h => h.replace(/"/g, '').trim());
+    console.log('📄 Parsed headers:', headers);
+    
+    const data = lines.slice(1).map((line, index) => {
+      const values = parseCSVLine(line).map(v => v.replace(/"/g, '').trim());
+      const row: any = {};
+      headers.forEach((header, colIndex) => {
+        row[header] = values[colIndex] || '';
+      });
+      console.log(`📄 Row ${index + 1}:`, row);
+      return row;
+    });
+
+    console.log('📄 Final parsed data:', data);
+    return data;
+  };
+
+  const handleImport = async () => {
+    if (!file) return;
+
+    setIsProcessing(true);
+    setError(null);
+
+    try {
+      const text = await file.text();
+      const data = processCSV(text);
+      
+      // Await the onImport callback in case it returns a promise
+      const result = onImport(data);
+      if (result && typeof result.then === 'function') {
+        await result;
+      }
+      
+      onClose();
+      setFile(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to process file');
+    } finally {
+      if (isMountedRef.current) {
+        setIsProcessing(false);
+      }
+    }
+  };
+
+  const handleClose = () => {
+    setFile(null);
+    setError(null);
+    setPreviewData(null);
+    setTotalCount(0);
+    onClose();
+  };
+
+  return (
+    <Dialog open={isOpen} onOpenChange={handleClose}>
+      <DialogContent className="sm:max-w-2xl bg-main-50">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          <DialogDescription>
+            {description}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="border-2 border-dashed border-sec-200 rounded-lg p-6 text-center">
+            <FileText className="h-8 w-8 mx-auto text-sec-400 mb-2" />
+            <p className="text-sec-600 mb-2">
+              {file ? `Selected: ${file.name}` : uploadText}
+            </p>
+            {file && (
+              <p className="text-xs text-sec-500">
+                File selected, processing preview...
+              </p>
+            )}
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => fileInputRef.current?.click()}
+            >
+              <Upload className="h-4 w-4 mr-2" />
+              {selectFileButtonText}
+            </Button>
+            <Input
+              ref={fileInputRef}
+              type="file"
+              accept=".csv"
+              onChange={handleFileSelect}
+              className="hidden"
+            />
+          </div>
+
+          {error && (
+            <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
+              <AlertCircle className="h-4 w-4" />
+              <span className="text-sm">{error}</span>
+            </div>
+          )}
+
+
+          {previewData && previewData.length > 0 && (
+            <div className="space-y-3">
+              <h4 className="text-sec-900">{previewHeaderText}</h4>
+              <div className="border rounded-lg overflow-hidden">
+                <div className="overflow-x-auto max-h-48">
+                  <table className="min-w-full text-xs">
+                    <thead className="bg-sec-50">
+                      <tr>
+                        {Object.keys(previewData[0]).map((header) => (
+                          <th key={header} className="px-2 py-1 text-left font-medium text-sec-900 border-b">
+                            {header}
+                          </th>
+                        ))}
+                      </tr>
+                    </thead>
+                    <tbody>
+                      {previewData.map((row, index) => (
+                        <tr key={index} className={index % 2 === 0 ? 'bg-app-main-50' : 'bg-sec-50'}>
+                          {Object.values(row).map((value: any, cellIndex) => (
+                            <td key={cellIndex} className="px-2 py-1 text-sec-700 border-b">
+                              {String(value)}
+                            </td>
+                          ))}
+                        </tr>
+                      ))}
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+              <p className="text-sec-500">
+                {totalRowsText.replace('{count}', totalCount.toString())}
+              </p>
+            </div>
+          )}
+
+          <div className="flex justify-end gap-2">
+            <Button variant="outline" onClick={handleClose}>
+              {cancelButtonText}
+            </Button>
+            <Button 
+              onClick={handleImport} 
+              disabled={!file || isProcessing}
+            >
+              {isProcessing ? importButtonProcessingText : importButtonText}
+            </Button>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/DataTable/components/LoadingState.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+export function LoadingState() {
+  return (
+    <div className="p-8 text-center">
+      <div className="flex items-center justify-center space-x-2">
+        <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-primary"></div>
+        <span aria-live="polite" className="text-muted-foreground">Loading...</span>
+      </div>
+    </div>
+  );
+}