@jmruthers/pace-core 0.6.6 → 0.6.8

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

@@ -36,10 +36,12 @@
  * - Customizable text content
  */
 import React, { useState, useRef, useEffect } from 'react';
-import { Dialog, DialogContent, DialogHeader } from '../../Dialog';
+import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from '../../Dialog';
 import { Button } from '../../Button/Button';
 import { Input } from '../../Input/Input';
 import { Progress } from '../../Progress';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../../Table/Table';
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../../Card/Card';
 import { Upload, FileText, AlertCircle } from 'lucide-react';
 import { createLogger } from '../../../utils/core/logger';
 
@@ -372,150 +374,146 @@ export function ImportModal({ isOpen, onClose, onImport, config = {} }: ImportMo
 
   return (
     <Dialog open={isOpen} onOpenChange={handleClose}>
-      <DialogContent className="sm:max-w-2xl bg-main-50" title={title} description={description}>
+      <DialogContent 
+        maxWidthPercent={95} 
+        className="w-auto" 
+        title={title} 
+        description={description}
+      >
         <DialogHeader>
-          <h2>{title}</h2>
-          <p>{description}</p>
+          <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="size-8 mx-auto text-sec-400 mb-2" />
-            <p className="text-sec-600 mb-2">
+          <Card className="text-center">
+            <CardHeader>
+              <FileText className="size-8 mx-auto text-sec-400 mb-2" />
+            </CardHeader>
+            <CardDescription>
               {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="size-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="size-4" />
-              <span className="text-sm">{error}</span>
-            </div>
-          )}
-          
-          {validationErrors.length > 0 && (
-            <div className="space-y-2">
-              <div className="flex items-center gap-2 p-3 bg-acc-50 border border-acc-200 rounded text-acc-700">
-                <AlertCircle className="size-4" />
-                <span className="text-sm font-medium">
-                  {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+              {file && (
+                <span className="block text-xs text-sec-500 mt-1">
+                  File selected, processing preview...
                 </span>
-              </div>
-              <div className="max-h-32 overflow-y-auto space-y-1">
-                {validationErrors.slice(0, 10).map((err, idx) => (
-                  <div key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
-                    <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
-                  </div>
-                ))}
-                {validationErrors.length > 10 && (
-                  <div className="text-xs text-sec-500 italic">
-                    ... and {validationErrors.length - 10} more errors
-                  </div>
-                )}
-              </div>
-            </div>
-          )}
-
+              )}
+            </CardDescription>
+            <CardContent className="text-center">
+              {error && (
+                <>
+                  <AlertCircle className="inline-block size-4 mr-2" />
+                  <span className="text-sm">{error}</span>
+                </>
+              )}
+              
+              {validationErrors.length > 0 && (
+                <>
+                  <AlertCircle className="size-4" />
+                  <span className="text-sm font-medium">
+                    {validationErrors.length} validation error{validationErrors.length !== 1 ? 's' : ''} found
+                  </span>
+                  {validationErrors.slice(0, 10).map((err, idx) => (
+                    <p key={idx} className="text-xs text-acc-600 p-2 bg-acc-50 border border-acc-200 rounded">
+                      <span className="font-medium">Row {err.row}</span> • {err.field}: {err.message}
+                    </p>
+                  ))}
+                  {validationErrors.length > 10 && (
+                    <p className="text-xs text-sec-500 italic">
+                      ... and {validationErrors.length - 10} more errors
+                    </p>
+                  )}
+                </>
+              )}
 
-          {importProgress && isProcessing && (
-            <div className="space-y-2 p-4 bg-sec-50 rounded-lg border border-sec-200">
-              <div className="flex items-center justify-between">
-                <span className="text-sm font-medium text-sec-900">
-                  {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
-                </span>
-                <span className="text-sm text-sec-600">
-                  {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
-                </span>
-              </div>
-              <Progress 
-                value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
-                className="h-2 bg-sec-200"
+              {importProgress && isProcessing && (
+                <>
+                  <span className="text-sm font-medium text-sec-900">
+                    {importProgress.stage === 'parsing' ? 'Parsing CSV file...' : 'Importing data...'}
+                  </span>
+                  <span className="text-sm text-sec-600">
+                    {importProgress.current.toLocaleString()} / {importProgress.total.toLocaleString()} rows
+                  </span>
+                  <Progress 
+                    value={importProgress.total > 0 ? (importProgress.current / importProgress.total) * 100 : 0} 
+                    className="h-2 bg-sec-200"
+                  />
+                  <p className="text-xs text-sec-500">
+                    {importProgress.total > 0 && importProgress.current < importProgress.total
+                      ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
+                      : importProgress.stage === 'importing' && importProgress.current === 0
+                      ? 'Processing your data...'
+                      : importProgress.current === importProgress.total
+                      ? 'Complete!'
+                      : 'Processing...'}
+                  </p>
+                </>
+              )}
+            </CardContent>
+            <CardFooter>
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={() => fileInputRef.current?.click()}
+              >
+                <Upload className="size-4 mr-2" />
+                {selectFileButtonText}
+              </Button>
+              <Input
+                ref={fileInputRef}
+                type="file"
+                accept=".csv"
+                onChange={handleFileSelect}
+                className="hidden"
               />
-              <p className="text-xs text-sec-500">
-                {importProgress.total > 0 && importProgress.current < importProgress.total
-                  ? `${Math.round((importProgress.current / importProgress.total) * 100)}% complete`
-                  : importProgress.stage === 'importing' && importProgress.current === 0
-                  ? 'Processing your data...'
-                  : importProgress.current === importProgress.total
-                  ? 'Complete!'
-                  : 'Processing...'}
-              </p>
-            </div>
-          )}
+            </CardFooter>
+          </Card>
 
           {file && previewData && previewData.length > 0 && !isProcessing ? (
-            <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>
+            <Card>
+              <CardHeader>
+                <CardTitle>{previewHeaderText}</CardTitle>
+              </CardHeader>
+              <CardContent className="overflow-x-auto">
+                  <Table className="text-xs min-w-full">
+                    <TableHeader>
+                      <TableRow>
                         {Object.keys(previewData[0]).map((header) => (
-                          <th key={header} className="px-2 py-1 text-left font-medium text-sec-900 border-b">
+                          <TableHead key={header} >
                             {header}
-                          </th>
+                          </TableHead>
                         ))}
-                      </tr>
-                    </thead>
-                    <tbody>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
                       {previewData.map((row, index) => (
-                        <tr key={index} className={index % 2 === 0 ? 'bg-app-main-50' : 'bg-sec-50'}>
+                        <TableRow key={index} >
                           {Object.values(row).map((value, cellIndex) => (
-                            <td key={cellIndex} className="px-2 py-1 text-sec-700 border-b">
+                            <TableCell key={cellIndex} >
                               {String(value)}
-                            </td>
+                            </TableCell>
                           ))}
-                        </tr>
+                        </TableRow>
                       ))}
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-              <p className="text-sec-500">
-                {totalRowsText.replace('{count}', totalCount.toString())}
-              </p>
-            </div>
-          ) : !file ? (
-            <div className="border rounded-lg p-6 text-center bg-sec-50">
-              <p className="text-sec-500">
-                Select a CSV file to preview
-              </p>
-            </div>
+                    </TableBody>
+                  </Table>
+              </CardContent>
+              <CardFooter>
+                  {totalRowsText.replace('{count}', totalCount.toString())}     
+              </CardFooter>
+            </Card>
           ) : null}
 
-          <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>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={handleClose}>
+            {cancelButtonText}
+          </Button>
+          <Button 
+            onClick={handleImport} 
+            disabled={!file || isProcessing}
+          >
+            {isProcessing ? importButtonProcessingText : importButtonText}
+          </Button>
+        </DialogFooter>
       </DialogContent>
     </Dialog>
   );

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { LoadingSpinner } from '../../LoadingSpinner/LoadingSpinner';
 
 /**
  * Loading state component for DataTable.
@@ -8,11 +9,9 @@ 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 size-6 border-b-2 border-primary"></div>
-        <span aria-live="polite" className="text-muted-foreground">Loading...</span>
-      </div>
-    </div>
+    <p className="grid place-items-center text-center p-8">
+        <LoadingSpinner />
+        <strong>Loading...</strong>     
+    </p>
   );
 }

package/src/components/DataTable/components/SortIndicator.tsx

@@ -0,0 +1,50 @@
+/**
+ * @file Sort Indicator Component
+ * @package @jmruthers/pace-core
+ * @module Components/DataTable/Components
+ * @since 0.4.0
+ * 
+ * Shared component for displaying column sort indicators.
+ * Provides consistent sorting chevron icons across all DataTable components.
+ */
+
+import React from 'react';
+import { ChevronUp, ChevronDown, ChevronsUpDown } from 'lucide-react';
+import { cn } from '../../../utils/core/cn';
+
+/**
+ * Props for the SortIndicator component
+ */
+export interface SortIndicatorProps {
+  /** Current sort state: 'asc' for ascending, 'desc' for descending, false for unsorted */
+  sortState: 'asc' | 'desc' | false;
+  /** Optional className for styling */
+  className?: string;
+}
+
+/**
+ * Sort indicator component that displays the appropriate chevron icon
+ * based on the current sort state.
+ * 
+ * @param props - Sort indicator configuration
+ * @returns The rendered sort indicator icon
+ * 
+ * @example
+ * ```tsx
+ * <SortIndicator sortState={column.getIsSorted()} />
+ * ```
+ */
+export function SortIndicator({ sortState, className }: SortIndicatorProps) {
+  return (
+    <>
+      {sortState === 'asc' ? (
+        <ChevronUp className={cn('size-4', className)} />
+      ) : sortState === 'desc' ? (
+        <ChevronDown className={cn('size-4', className)} />
+      ) : (
+        <ChevronsUpDown className={cn('size-4', className)} />
+      )}
+    </>
+  );
+}
+

package/src/components/DataTable/components/__tests__/COVERAGE_NOTE.md

@@ -2,7 +2,7 @@
 
 ## Summary
 
-The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, GroupHeader, ViewRowModal, etc.) are **intentionally not tested in isolation** because:
+The DataTable subcomponents (FilterRow, EditableRow, ColumnFilter, etc.) are **intentionally not tested in isolation** because:
 
 1. They are tightly integrated with TanStack React Table
 2. They are extensively tested through DataTable integration tests
@@ -35,9 +35,9 @@ The following DataTable integration tests provide comprehensive coverage:
 | **ColumnFilter** | ✅ | Integration tests validate filter input behavior |
 | **FilterRow** | ✅ | Integration tests validate filtering across columns |
 | **EditableRow** | ✅ | Integration tests validate editing workflows |
-| **GroupHeader** | ✅ | Integration tests validate grouping functionality |
-| **ViewRowModal** | ✅ | Integration tests validate modal display |
-| **DraggableColumnHeader** | ✅ | Integration tests validate column reordering |
+| **Grouped rows** | ✅ | Integration tests validate grouping functionality (handled inline by RowComponent) |
+| **Modal display** | ✅ | Integration tests validate modal functionality |
+| **Column reordering** | ✅ | Integration tests validate column order persistence |
 | **ActionButtons** | ✅ | Integration tests validate action buttons |
 
 ## Why This Approach Works

package/src/components/DataTable/components/__tests__/ColumnFilter.test.tsx

@@ -57,8 +57,8 @@ vi.mock('../../Select/Select', async () => {
         {children}
       </button>
     ),
-    SelectValue: ({ placeholder }: any) => (
-      <span data-testid="select-value">{placeholder}</span>
+    SelectValue: ({ children }: any) => (
+      <span data-testid="select-value">{children}</span>
     ),
     SelectContent: ({ children }: any) => (
       <div data-testid="select-content">{children}</div>
@@ -449,79 +449,6 @@ describe('[component] ColumnFilter', () => {
     });
   });
 
-  describe('Clear Filter Button', () => {
-    it('shows clear button when filter has value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const clearButton = screen.getByRole('button');
-      expect(clearButton).toBeInTheDocument();
-      expect(screen.getByTestId('x-icon')).toBeInTheDocument();
-    });
-
-    it('hides clear button when filter has no value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => undefined),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
-    });
-
-    it('hides clear button when filter value is empty string', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => ''),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      expect(screen.queryByTestId('x-icon')).not.toBeInTheDocument();
-    });
-
-    it('clears filter when clear button is clicked', async () => {
-      const user = userEvent.setup();
-      const setFilterValue = vi.fn();
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-        setFilterValue,
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const clearButton = screen.getByRole('button');
-      await user.click(clearButton);
-
-      expect(setFilterValue).toHaveBeenCalledWith(undefined);
-    });
-  });
-
-  describe('Filter Indicator', () => {
-    it('shows filter indicator dot when filter has value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const indicator = document.querySelector('.bg-main-500.rounded-full');
-      expect(indicator).toBeInTheDocument();
-    });
-
-    it('hides filter indicator dot when filter has no value', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => undefined),
-      });
-
-      render(<ColumnFilter column={column} />);
-
-      const indicator = document.querySelector('.bg-main-500.rounded-full');
-      expect(indicator).not.toBeInTheDocument();
-    });
-  });
 
   describe('Edge Cases', () => {
     it('handles undefined filter value gracefully', () => {
@@ -618,15 +545,29 @@ describe('[component] ColumnFilter', () => {
       expect(input).toBeInTheDocument();
     });
 
-    it('clear button is accessible', () => {
-      const column = createMockColumn({
-        getFilterValue: vi.fn(() => 'test'),
-      });
+    it('renders Filter icon in select filter', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={[{ value: 'option1', label: 'Option 1' }]}
+        />
+      );
 
-      render(<ColumnFilter column={column} />);
+      expect(screen.getByTestId('filter-icon')).toBeInTheDocument();
+    });
+
+    it('renders column name in select filter value', () => {
+      render(
+        <ColumnFilter 
+          column={mockColumn} 
+          filterType="select"
+          options={[{ value: 'option1', label: 'Option 1' }]}
+        />
+      );
 
-      const clearButton = screen.getByRole('button');
-      expect(clearButton).toBeInTheDocument();
+      const selectValue = screen.getByTestId('select-value');
+      expect(selectValue).toHaveTextContent('test-column...');
     });
   });
 

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

@@ -89,8 +89,9 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      // Alert component uses role="alert", not data-testid
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // There may be multiple alerts (outer and inner), use getAllByRole
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
       expect(screen.getByText('DataTable Error')).toBeInTheDocument();
       expect(screen.getByText('Something went wrong')).toBeInTheDocument();
     });
@@ -127,8 +128,16 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
+      // Check for error details summary
       const details = screen.getByText('Error Details');
       expect(details).toBeInTheDocument();
+      // Check that error message is displayed in the details/pre element
+      // The error message is inside a <pre> tag within <details>
+      const preElement = screen.getByText((content, element) => {
+        return element?.tagName.toLowerCase() === 'pre' && content.includes('Test error');
+      }, { selector: 'pre' });
+      expect(preElement).toBeInTheDocument();
+      expect(preElement).toHaveTextContent('Test error');
     });
 
     it('hides error details when showErrorDetails is false', () => {
@@ -140,10 +149,11 @@ describe('[component] DataTableErrorBoundary', () => {
 
       // Error details section is shown when error.message exists
       // showErrorDetails only controls stack trace visibility, not the details section
-      // So we check that the details section exists but stack trace is not shown
       expect(screen.getByText('Error Details')).toBeInTheDocument();
       // Stack trace should not be visible when showErrorDetails is false
       expect(screen.queryByText(/Stack Trace/i)).not.toBeInTheDocument();
+      // Error message should still be visible
+      expect(screen.getByText('Test error')).toBeInTheDocument();
     });
 
     it('displays stack trace when showErrorDetails is true', () => {
@@ -155,6 +165,8 @@ describe('[component] DataTableErrorBoundary', () => {
 
       // Stack trace should be in the details section
       expect(screen.getByText('Error Details')).toBeInTheDocument();
+      // Stack trace text should be present when showErrorDetails is true
+      expect(screen.getByText(/Stack Trace/i)).toBeInTheDocument();
     });
   });
 
@@ -237,7 +249,8 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const retryButton = screen.getByRole('button', { name: /retry/i });
       await user.click(retryButton);
@@ -317,7 +330,8 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const resetButton = screen.getByRole('button', { name: /reset/i });
       
@@ -352,7 +366,9 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // There are multiple alert elements (outer Alert and inner Alert for no message case)
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
       expect(screen.getByText('An unexpected error occurred')).toBeInTheDocument();
     });
 
@@ -365,19 +381,31 @@ describe('[component] DataTableErrorBoundary', () => {
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      const alerts = screen.getAllByRole('alert');
+      expect(alerts.length).toBeGreaterThan(0);
 
       const retryButton = screen.getByRole('button', { name: /retry/i });
       await user.click(retryButton);
 
-      // Trigger another error
+      // Wait for retry to complete and error state to reset
+      await waitFor(() => {
+        // Wait for the timeout to complete
+      }, { timeout: 200 });
+
+      // Trigger another error - rerender with new error
       rerender(
         <DataTableErrorBoundary showRetryButton={true}>
           <ThrowError shouldThrow={true} message="Second error" />
         </DataTableErrorBoundary>
       );
 
-      expect(screen.getByRole('alert')).toBeInTheDocument();
+      // Wait for the new error to be caught and displayed
+      await waitFor(() => {
+        const newAlerts = screen.getAllByRole('alert');
+        expect(newAlerts.length).toBeGreaterThan(0);
+        const preElement = document.querySelector('pre');
+        expect(preElement).toHaveTextContent('Second error');
+      }, { timeout: 300 });
     });
 
     it('handles cleanup on unmount', () => {

package/src/components/DataTable/components/__tests__/EmptyState.test.tsx

@@ -306,7 +306,8 @@ describe('[component] EmptyState', () => {
     it('uses semantic heading for title', () => {
       render(<EmptyState title="Custom Title" />);
 
-      const heading = screen.getByRole('heading', { level: 3 });
+      // AlertTitle renders as <h5> (level 5), not <h3>
+      const heading = screen.getByRole('heading', { level: 5 });
       expect(heading).toHaveTextContent('Custom Title');
     });
 
@@ -410,11 +411,12 @@ describe('[component] EmptyState', () => {
   });
 
   describe('Layout and Styling', () => {
-    it('renders with centered flex layout', () => {
+    it('renders with centered grid layout', () => {
       render(<EmptyState />);
 
       const container = screen.getByRole('status');
-      expect(container).toHaveClass('flex', 'flex-col', 'items-center', 'justify-center');
+      // Component uses grid place-items-center, not flex
+      expect(container).toHaveClass('grid', 'place-items-center');
     });
 
     it('applies text-center class', () => {
@@ -428,7 +430,8 @@ describe('[component] EmptyState', () => {
       render(<EmptyState />);
 
       const container = screen.getByRole('status');
-      expect(container).toHaveClass('p-8');
+      // Alert component uses p-4, not p-8
+      expect(container).toHaveClass('p-4');
     });
   });
 });