@jmruthers/pace-core 0.4.1 → 0.5.1

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>
+  );
+}

package/src/components/DataTable/components/PaginationControls.tsx

@@ -0,0 +1,332 @@
+import React from 'react';
+import { Table } from '@tanstack/react-table';
+import { Button } from '../../Button/Button';
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+  Loader2,
+  Server,
+  Database,
+  Zap
+} from 'lucide-react';
+import { cn } from '../../../utils/cn';
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '../../Select/Select';
+import type { PaginationMode, ServerSideResponse, DataRecord } from '../types';
+
+interface PaginationControlsProps<TData extends DataRecord> {
+  table: Table<TData>;
+  pageSizeOptions?: number[];
+  paginationMode?: PaginationMode;
+  serverData?: ServerSideResponse<TData> | null;
+  isLoading?: boolean;
+  onPageChange?: (pageIndex: number) => void;
+  onPageSizeChange?: (pageSize: number) => void;
+  showPerformanceInfo?: boolean;
+  totalCount?: number;
+}
+
+export function PaginationControls<TData extends DataRecord>({
+  table,
+  pageSizeOptions = [10, 20, 30, 40, 50],
+  paginationMode = 'client',
+  serverData,
+  isLoading = false,
+  onPageChange,
+  onPageSizeChange,
+  showPerformanceInfo = false,
+  totalCount
+}: PaginationControlsProps<TData>) {
+
+  // Get pagination state based on mode
+  const getPaginationState = () => {
+    if (paginationMode === 'server' && serverData) {
+      return {
+        currentPageSize: serverData.pageSize,
+        currentPageIndex: serverData.pageIndex,
+        pageCount: serverData.pageCount,
+        totalRows: serverData.totalCount,
+        canPreviousPage: serverData.hasPreviousPage,
+        canNextPage: serverData.hasNextPage,
+      };
+    }
+
+    // Client or hybrid mode
+    const state = table.getState().pagination;
+    return {
+      currentPageSize: state.pageSize,
+      currentPageIndex: state.pageIndex,
+      pageCount: table.getPageCount(),
+      totalRows: totalCount ?? table.getRowCount(),
+      canPreviousPage: table.getCanPreviousPage(),
+      canNextPage: table.getCanNextPage(),
+    };
+  };
+
+  const {
+    currentPageSize,
+    currentPageIndex,
+    pageCount,
+    totalRows,
+    canPreviousPage,
+    canNextPage,
+  } = getPaginationState();
+
+  // Handle page size changes
+  const handlePageSizeChange = (newPageSize: number) => {
+    if (paginationMode === 'server') {
+      onPageSizeChange?.(newPageSize);
+    } else {
+      table.setPageSize(newPageSize);
+    }
+  };
+
+  // Handle page navigation
+  const handleFirstPage = () => {
+    if (paginationMode === 'server') {
+      onPageChange?.(0);
+    } else {
+      table.setPageIndex(0);
+    }
+  };
+
+  const handlePreviousPage = () => {
+    if (paginationMode === 'server') {
+      onPageChange?.(Math.max(0, currentPageIndex - 1));
+    } else {
+      table.previousPage();
+    }
+  };
+
+  const handleNextPage = () => {
+    if (paginationMode === 'server') {
+      onPageChange?.(Math.min(pageCount - 1, currentPageIndex + 1));
+    } else {
+      table.nextPage();
+    }
+  };
+
+  const handleLastPage = () => {
+    if (paginationMode === 'server') {
+      onPageChange?.(pageCount - 1);
+    } else {
+      table.setPageIndex(pageCount - 1);
+    }
+  };
+
+  // Calculate display range
+  const startRow = currentPageIndex * currentPageSize + 1;
+  const endRow = Math.min((currentPageIndex + 1) * currentPageSize, totalRows);
+
+  // Get mode-specific page size options
+  const getPageSizeOptions = () => {
+    switch (paginationMode) {
+      case 'server':
+        return pageSizeOptions.filter(size => size <= 250); // Limit server-side page sizes
+      case 'hybrid':
+        return pageSizeOptions.filter(size => size >= 50); // Hybrid mode prefers larger pages
+      default:
+        return pageSizeOptions;
+    }
+  };
+
+  const availablePageSizes = getPageSizeOptions();
+
+  // Performance mode indicator
+  const getModeIcon = () => {
+    switch (paginationMode) {
+      case 'server':
+        return <Server className="h-3 w-3" />;
+      case 'hybrid':
+        return <Database className="h-3 w-3" />;
+      default:
+        return <Zap className="h-3 w-3" />;
+    }
+  };
+
+  const getModeLabel = () => {
+    switch (paginationMode) {
+      case 'server':
+        return 'Server-side';
+      case 'hybrid':
+        return 'Hybrid';
+      default:
+        return 'Client-side';
+    }
+  };
+
+
+  return (
+    <footer
+      aria-label="pagination"
+      className="mx-auto grid grid-cols-[auto_auto_1fr_auto_auto_auto_auto] gap-4"
+    >
+      {/* Left side - Page Size Selector */}
+   
+        <p className="text-sm text-sec-600">Rows per page</p>
+        <Select
+          value={currentPageSize?.toString() || '10'}
+          selectedText={currentPageSize?.toString() || '10'}
+          onValueChange={(value) => handlePageSizeChange(Number(value))}
+          disabled={isLoading}
+          className="w-36 h-8"
+        >
+          <SelectTrigger
+            className={cn(
+            
+              isLoading && "opacity-50 cursor-not-allowed"
+            )}
+            aria-label="Rows per page"
+          >
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            {pageSizeOptions.map((pageSize) => (
+              <SelectItem key={pageSize} value={pageSize?.toString() || '10'}>
+                {pageSize}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+
+      {/* Performance Mode Indicator */}
+      {showPerformanceInfo && (
+        <>
+          {getModeIcon()}
+          <span>{getModeLabel()}</span>
+        </>
+      )}
+
+
+      {/* Row Count Display - Removed as per user request, keeping only "Page X of Y" */}
+
+
+      {/* Center - Page Navigation */}
+
+        <p className="justify-self-center text-sm text-sec-600">
+          Page {currentPageIndex + 1} of {pageCount || 1}
+        </p>
+
+
+      {/* Right side - Navigation Buttons */}
+
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={handleFirstPage}
+          disabled={!canPreviousPage || isLoading}
+          aria-label="Go to first page"
+          tabIndex={0}
+        >
+          <ChevronsLeft className="h-4 w-4" />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={handlePreviousPage}
+          disabled={!canPreviousPage || isLoading}
+          aria-label="Go to previous page"
+          tabIndex={0}
+        >
+          <ChevronLeft className="h-4 w-4" />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={handleNextPage}
+          disabled={!canNextPage || isLoading}
+          aria-label="Go to next page"
+          tabIndex={0}
+        >
+          <ChevronRight className="h-4 w-4" />
+        </Button>
+
+        <Button
+          variant="outline"
+          size="sm"
+          className="h-8 w-8 p-0"
+          onClick={handleLastPage}
+          disabled={!canNextPage || isLoading}
+          aria-label="Go to last page"
+          tabIndex={0}
+        >
+          <ChevronsRight className="h-4 w-4" />
+        </Button>
+    </footer>
+  );
+}
+
+/**
+ * Enhanced pagination controls with additional features
+ * Provides jump-to-page functionality for improved navigation
+ */
+interface EnhancedPaginationControlsProps<TData extends DataRecord>
+  extends PaginationControlsProps<TData> {
+  showJumpToPage?: boolean;
+}
+
+export function EnhancedPaginationControls<TData extends DataRecord>({
+  showJumpToPage = false,
+  ...props
+}: EnhancedPaginationControlsProps<TData>) {
+  const [jumpToPage, setJumpToPage] = React.useState('');
+
+  const { table, paginationMode = 'client', serverData, onPageChange } = props;
+
+  const { pageCount } = (() => {
+    if (paginationMode === 'server' && serverData) {
+      return { pageCount: serverData.pageCount };
+    }
+    return { pageCount: table.getPageCount() };
+  })();
+
+  const handleJumpToPage = (e: React.FormEvent) => {
+    e.preventDefault();
+    const pageNumber = parseInt(jumpToPage, 10);
+    if (pageNumber >= 1 && pageNumber <= pageCount) {
+      const pageIndex = pageNumber - 1;
+      if (paginationMode === 'server') {
+        onPageChange?.(pageIndex);
+      } else {
+        table.setPageIndex(pageIndex);
+      }
+      setJumpToPage('');
+    }
+  };
+
+  return (
+    <>
+      <PaginationControls {...props} />
+
+      {/* Additional Controls */}
+      {showJumpToPage && (
+        <>
+          {/* Jump to Page */}
+          <form onSubmit={handleJumpToPage} className="flex items-center space-x-2">
+            <span>Jump to page:</span>
+            <input
+              type="number"
+              min="1"
+              max={pageCount}
+              value={jumpToPage}
+              onChange={(e) => setJumpToPage(e.target.value)}
+              className="w-16 h-6 px-2 border rounded text-xs"
+              placeholder="1"
+            />
+            <Button type="submit" size="sm" variant="outline" className="h-6 px-2 text-xs">
+              Go
+            </Button>
+          </form>
+        </>
+      )}
+    </>
+  );
+}