@jmruthers/pace-core 0.6.5 → 0.6.7

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -118,6 +118,7 @@
 import React, { Component, ReactNode } from 'react';
 import { performanceBudgetMonitor } from '../../utils/performance/performanceBudgets';
 import { logger } from '../../utils/core/logger';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../Card/Card';
 
 /**
  * State interface for the ErrorBoundary component
@@ -181,18 +182,18 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   constructor(props: ErrorBoundaryProps) {
     super(props);
-    this.state = { 
-      hasError: false, 
-      retryCount: 0 
+    this.state = {
+      hasError: false,
+      retryCount: 0
     };
   }
 
   static getDerivedStateFromError(error: Error): Partial<ErrorBoundaryState> {
     const errorId = `error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
-    return { 
-      hasError: true, 
+    return {
+      hasError: true,
       error,
-      errorId 
+      errorId
     };
   }
 
@@ -200,12 +201,12 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     const { componentName = 'Unknown Component', onError, enableReporting = true } = this.props;
     const errorId = this.state.errorId!;
     const componentNameForHandler = componentName || 'Unknown Component';
-    
+
     this.setState({ errorInfo });
-    
+
     // Enhanced logging with component name and error ID
     logger.error('ErrorBoundary', `[${componentNameForHandler}] Caught error ${errorId}:`, error, errorInfo);
-    
+
     // Performance monitoring - track error occurrence
     performanceBudgetMonitor.measure('ERROR_BOUNDARY_TRIGGER', 1, {
       componentName: componentNameForHandler,
@@ -218,7 +219,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     if (enableReporting) {
       this.reportError(errorId, componentNameForHandler);
     }
-    
+
     // Call error handler: prefer prop onError, fall back to global handler from props
     if (onError) {
       onError(error, errorInfo, errorId);
@@ -242,7 +243,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
     if (retryCount < maxRetries) {
       logger.debug('ErrorBoundary', `Retrying component render (attempt ${retryCount + 1}/${maxRetries})`);
-      
+
       this.setState(prevState => ({
         hasError: false,
         error: undefined,
@@ -261,11 +262,11 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
   render() {
     if (this.state.hasError) {
-      const { 
-        componentName = 'Component', 
-        fallback, 
-        enableRetry = true, 
-        maxRetries = 3 
+      const {
+        componentName = 'Component',
+        fallback,
+        enableRetry = true,
+        maxRetries = 3
       } = this.props;
       const { retryCount, errorId } = this.state;
 
@@ -276,73 +277,70 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
       // Enhanced error UI with retry functionality
       return (
-        <div 
-          role="alert" 
-          className="p-6 bg-destructive/10 border border-destructive/20 rounded-lg"
+        <Card
+          role="alert"
+          className="bg-destructive/10 border-destructive/20"
           data-error-boundary={errorId}
         >
-          <div className="flex items-start gap-3">
-            <div className="flex-shrink-0">
-              <svg className="w-5 h-5 text-destructive" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
-              </svg>
-            </div>
-            <div className="flex-1 min-w-0">
-              <h3 className="text-destructive">
-                Error in {componentName}
-              </h3>
-              <p className="text-destructive/80">
-                {this.state.error?.message || 'An unexpected error occurred.'}
-              </p>
-              
-              {enableRetry && retryCount < maxRetries && (
-                <div className="flex gap-3 mb-4">
-                  <button
-                    onClick={this.handleRetry}
-                    className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors text-sm font-medium"
-                  >
-                    Retry ({retryCount + 1}/{maxRetries})
-                  </button>
-                  <button
-                    onClick={() => window.location.reload()}
-                    className="px-4 py-2 bg-sec-600 text-main-50 rounded-md hover:bg-sec-700 transition-colors text-sm font-medium"
-                  >
-                    Reload Page
-                  </button>
-                </div>
-              )}
+          <CardHeader className="flex items-start gap-3">
+            <svg className="w-5 h-5 text-destructive flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
+              <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
+            </svg>
+            <CardTitle className="text-destructive">
+              Error in {componentName}
+            </CardTitle>
+            <CardDescription className="text-destructive/80">
+              {this.state.error?.message || 'An unexpected error occurred.'}
+            </CardDescription>
+          </CardHeader>
+
+          {import.meta.env.MODE === 'development' && this.state.error && (
+            <CardContent>
+              <details className="text-sm text-destructive/70">
+                <summary className="cursor-pointer font-medium mb-2">
+                  Error Details (Development)
+                </summary>
+                <pre>Error ID: {errorId}
+                  <code className="overflow-auto max-h-32">
+                    {this.state.error.toString()}
+                    {this.state.errorInfo?.componentStack}
+                  </code>
+                </pre>
+              </details>
+            </CardContent>
+          )}
 
-              {retryCount >= maxRetries && (
-                <div className="mb-4 p-3 bg-acc-50 border border-acc-200 rounded-md">
-                  <p className="text-acc-800">
-                    Maximum retry attempts reached. Please reload the page or contact support.
-                  </p>
-                  <button
-                    onClick={() => window.location.reload()}
-                    className="mt-2 px-3 py-1 bg-acc-600 text-main-50 rounded text-sm hover:bg-acc-700"
-                  >
-                    Reload Page
-                  </button>
-                </div>
-              )}
+          {enableRetry && retryCount < maxRetries && (
+            <CardFooter className="flex gap-3">
+              <button
+                onClick={this.handleRetry}
+                className="px-4 py-2 bg-destructive text-destructive-foreground rounded-md hover:bg-destructive/90 transition-colors text-sm font-medium"
+              >
+                Retry ({retryCount + 1}/{maxRetries})
+              </button>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-4 py-2 bg-sec-600 text-main-50 rounded-md hover:bg-sec-700 transition-colors text-sm font-medium"
+              >
+                Reload Page
+              </button>
+            </CardFooter>
+          )}
 
-              {import.meta.env.MODE === 'development' && this.state.error && (
-                <details className="text-sm text-destructive/70">
-                  <summary className="cursor-pointer font-medium mb-2">
-                    Error Details (Development)
-                  </summary>
-                  <div className="bg-destructive/5 p-3 rounded border">
-                    <p className="font-mono">Error ID: {errorId}</p>
-                    <pre className="whitespace-pre-wrap text-xs overflow-auto max-h-32">
-                      {this.state.error.toString()}
-                      {this.state.errorInfo?.componentStack}
-                    </pre>
-                  </div>
-                </details>
-              )}
-            </div>
-          </div>
-        </div>
+          {retryCount >= maxRetries && (
+            <CardFooter className="flex flex-col gap-3">
+                <p className="text-acc-800">
+                  Maximum retry attempts reached. Please reload the page or contact support.
+                </p>
+              <button
+                onClick={() => window.location.reload()}
+                className="px-3 py-1 bg-acc-600 text-main-50 rounded text-sm hover:bg-acc-700"
+              >
+                Reload Page
+              </button>
+            </CardFooter>
+          )}
+        </Card>
       );
     }
 

package/src/components/FileDisplay/FileDisplay.test.tsx

@@ -223,7 +223,8 @@ describe('[component] FileDisplay', () => {
     
     // Dialog should open
     expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
-    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    // Button has aria-label="Delete file", so accessible name is "Delete file"
+    const confirmDeleteBtn = await screen.findByRole('button', { name: 'Delete file' }, { timeout: 2000 });
     await userEvent.click(confirmDeleteBtn);
 
     confirmSpy.mockRestore();
@@ -419,7 +420,8 @@ describe('[component] FileDisplay', () => {
     
     // Dialog should open
     expect(await screen.findByText('Confirm Delete')).toBeInTheDocument();
-    const confirmDeleteBtn = screen.getByRole('button', { name: /^Delete$/i });
+    // Button has aria-label="Delete file", so accessible name is "Delete file"
+    const confirmDeleteBtn = await screen.findByRole('button', { name: 'Delete file' }, { timeout: 2000 });
     await userEvent.click(confirmDeleteBtn);
   });
 

package/src/components/FileDisplay/FileDisplay.tsx

@@ -654,9 +654,32 @@ function FileDisplayPublic({
   enableChildren,
   showMetadata
 }: FileDisplayProps) {
+  // Call all hooks unconditionally at the top level
+  // Hooks must be called in the same order on every render
   const publicPageContext = useContext(PublicPageContext);
   const supabase = publicPageContext?.supabase ?? null;
 
+  // Call hook unconditionally - if supabase is null, the hook will handle it
+  // Use a dummy supabase client if null to satisfy type requirements
+  // The hook should handle null gracefully, but TypeScript requires a valid type
+  const {
+    fileUrl,
+    fileReference,
+    fileReferences,
+    fileUrls,
+    fileCount,
+    isLoading,
+    error,
+    refetch
+  } = usePublicFileDisplay(
+    table_name,
+    record_id,
+    organisation_id,
+    category,
+    { supabase: supabase as any } // Type assertion needed due to type mismatch between contexts
+  );
+
+  // Early return after all hooks have been called
   if (!supabase) {
     // If fallback is enabled, show fallback UI instead of error
     if (showFallback) {
@@ -700,23 +723,6 @@ function FileDisplayPublic({
     );
   }
 
-  const {
-    fileUrl,
-    fileReference,
-    fileReferences,
-    fileUrls,
-    fileCount,
-    isLoading,
-    error,
-    refetch
-  } = usePublicFileDisplay(
-    table_name,
-    record_id,
-    organisation_id,
-    category,
-    { supabase }
-  );
-
   // Log errors for debugging public file display issues
   if (error) {
     logger.error('FileDisplayPublic', 'Error fetching file', {

package/src/components/FileUpload/FileUpload.test.tsx

@@ -116,17 +116,19 @@ describe('[component] FileUpload', () => {
   describe('Drag and Drop', () => {
     it('shows drag state message on dragover', () => {
       renderWithProviders(<FileUpload {...baseProps} />);
-      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
 
       fireEvent.dragOver(dropArea);
+      // Component shows "Drop files here..." (with ellipsis)
       expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
     });
 
     it('resets drag state on dragleave', () => {
       renderWithProviders(<FileUpload {...baseProps} />);
-      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
 
       fireEvent.dragOver(dropArea);
+      // Component shows "Drop files here..." (with ellipsis)
       expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
 
       fireEvent.dragLeave(dropArea);
@@ -135,24 +137,41 @@ describe('[component] FileUpload', () => {
 
     it('handles file drop', async () => {
       const onUploadSuccess = vi.fn();
+      // Ensure uploadFile mock resolves immediately
+      const mockUpload = vi.fn(async () => createMockUploadResult());
+      mockUseFileReference.mockReturnValue({
+        uploadFile: mockUpload,
+        isLoading: false,
+        error: null,
+      });
+
       renderWithProviders(
         <FileUpload {...baseProps} onUploadSuccess={onUploadSuccess} showProgress />
       );
 
-      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
       const file = createTestFile('test.png', 'image/png');
 
+      // Use fireEvent.drop with proper dataTransfer mock
       await act(async () => {
         fireEvent.drop(dropArea, {
           dataTransfer: {
             files: [file],
-          },
+            items: [{
+              kind: 'file',
+              type: file.type,
+              getAsFile: () => file
+            }],
+            types: ['Files']
+          }
         });
       });
 
+      // Wait for upload to complete - the uploadFile is called asynchronously
       await waitFor(() => {
+        expect(mockUpload).toHaveBeenCalled();
         expect(onUploadSuccess).toHaveBeenCalled();
-      });
+      }, { timeout: 3000 });
     });
 
     it('does not handle drop when disabled', () => {
@@ -204,7 +223,7 @@ describe('[component] FileUpload', () => {
 
     it('triggers file input click when drop area is clicked', () => {
       renderWithProviders(<FileUpload {...baseProps} />);
-      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
       const input = screen.getByTestId('file-input') as HTMLInputElement;
       const clickSpy = vi.spyOn(input, 'click');
 
@@ -398,12 +417,18 @@ describe('[component] FileUpload', () => {
         fireEvent.change(input, { target: { files: [file] } });
       });
 
+      // Wait for upload to complete and file card to be rendered with File icon
+      // The File icon is rendered as an SVG inside CardHeader (header) inside Card (article)
+      // Since showPreview is false and it's a PDF, the File icon should be rendered
+      // In tests, lucide-react icons are mocked with data-testid="lucide-{name}"
       await waitFor(() => {
+        // First verify the file name is present
         expect(screen.getByText('test.pdf')).toBeInTheDocument();
-        // File icon should be shown (emoji or icon)
-        const fileIcon = document.querySelector('.w-12.h-12');
+        
+        // The File icon is mocked with data-testid="lucide-file" in tests
+        const fileIcon = screen.getByTestId('lucide-file');
         expect(fileIcon).toBeInTheDocument();
-      });
+      }, { timeout: 3000 });
     });
 
     it('shows loading spinner when showProgress is false', async () => {
@@ -429,14 +454,27 @@ describe('[component] FileUpload', () => {
       });
 
       // Wait for spinner to appear
+      // The LoadingSpinner has role="status" but no accessible name
+      // When showProgress is false and isUploading is true, spinner appears in CardHeader
+      // The upload starts immediately when file is selected, and status changes to 'uploading'
+      // Wait for the upload state to be set to 'uploading' which triggers isUploading
+      // The spinner appears in the CardHeader (the drop area) when isUploading && !showProgress
       await waitFor(() => {
-        const spinnerContainer = screen.getByRole('status', { name: 'Uploading file' });
-        const spinner = spinnerContainer.querySelector('.animate-spin');
+        // The spinner should appear when isUploading is true and showProgress is false
+        // isUploading is true when uploadStates has entries with status 'uploading' or 'processing'
+        // The spinner is in the CardHeader (the drop area)
+        const dropArea = screen.getByRole('button', { name: /File upload area/i });
+        const spinner = dropArea.querySelector('[role="status"]');
         expect(spinner).toBeInTheDocument();
+        // LoadingSpinner renders a canvas element with animate-spin class directly on it
+        // So we check if the spinner element itself has the class
+        expect(spinner).toHaveClass('animate-spin');
+      }, { timeout: 2000 });
+      
+      // Now resolve the upload to complete it
+      await act(async () => {
+        resolveUpload!(createMockUploadResult());
       });
-
-      // Resolve upload to clean up
-      resolveUpload!(createMockUploadResult());
     });
   });