@jmruthers/pace-core 0.6.6 → 0.6.7

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

package/src/components/FileUpload/FileUpload.tsx

@@ -9,11 +9,15 @@
 
 import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
 import { SupabaseClient } from '@supabase/supabase-js';
+import { Check, X, File } from 'lucide-react';
 import { FileCategory, FileUploadResult, UploadProgress } from '../../types/file-reference';
 import { useFileReference } from '../../hooks/useFileReference';
 import { getCurrentAppName } from '../../utils/app/appNameResolver';
 import { getAppId } from '../../utils/app/appIdResolver';
 import { assertAppId } from '../../types/core';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../Card';
+import { Progress } from '../Progress';
+import { LoadingSpinner } from '../LoadingSpinner';
 
 /**
  * Props for the FileUpload component.
@@ -138,7 +142,7 @@ export function FileUpload({
 
   // Calculate isUploading and isDisabled early so they can be used in callbacks
   const isUploading = useMemo(() => {
-    return uploadStates.size > 0 && Array.from(uploadStates.values()).some(state => 
+    return uploadStates.size > 0 && Array.from(uploadStates.values()).some(state =>
       state.progress.status === 'uploading' || state.progress.status === 'processing'
     );
   }, [uploadStates]);
@@ -154,7 +158,7 @@ export function FileUpload({
         resolve(null);
         return;
       }
-      
+
       const reader = new FileReader();
       reader.onload = (e) => {
         resolve(e.target?.result as string || null);
@@ -203,7 +207,7 @@ export function FileUpload({
     if (!files || files.length === 0) return;
 
     const fileArray = Array.from(files);
-    
+
     // Validate all files first
     const validationErrors: string[] = [];
     const validFiles: File[] = [];
@@ -224,11 +228,11 @@ export function FileUpload({
 
     // Initialize upload states
     const newUploadStates = new Map<string, FileUploadState>();
-    
+
     for (const file of validFiles) {
       const fileId = `${file.name}-${file.size}-${Date.now()}`;
       const preview = showPreview ? (await generatePreview(file)) || undefined : undefined;
-      
+
       const progress: UploadProgress = {
         loaded: 0,
         total: file.size,
@@ -383,7 +387,7 @@ export function FileUpload({
         }
       } catch (err) {
         const errorMessage = err instanceof Error ? err.message : 'Upload failed';
-        
+
         setUploadStates(prev => {
           const updated = new Map(prev);
           const state = updated.get(fileId);
@@ -432,9 +436,9 @@ export function FileUpload({
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
-    
+
     if (isDisabled) return;
-    
+
     const files = e.dataTransfer.files;
     handleFileSelect(files);
   }, [isDisabled, handleFileSelect]);
@@ -465,8 +469,8 @@ export function FileUpload({
   const disabledClasses = isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-sec-50';
 
   return (
-    <div className={`space-y-4 ${className}`}>
-      <div
+    <Card className={className}>
+      <CardHeader
         role="button"
         tabIndex={isDisabled ? -1 : 0}
         aria-label="File upload area"
@@ -484,7 +488,7 @@ export function FileUpload({
         } : undefined}
       >
         {children || (
-          <div className="space-y-2">
+          <>
             <input
               ref={fileInputRef}
               type="file"
@@ -496,146 +500,124 @@ export function FileUpload({
               data-testid="file-input"
               aria-label={accept ? `Upload file${multiple ? 's' : ''} (${accept})` : `Upload file${multiple ? 's' : ''}`}
             />
-            <div className="text-sec-600">
+            <p className="text-sec-600">
               {isResolvingAppId ? (
                 'Resolving app configuration...'
               ) : isDragging ? (
                 'Drop files here...'
               ) : (
                 <>
-                  <span className="font-medium">Click to upload</span>
+                  Click to upload
                   {' '}or drag and drop
                 </>
               )}
-            </div>
-            <div className="text-sm text-sec-500">
+            </p>
+            <p className="text-sm text-sec-500">
               {!isResolvingAppId && accept !== '*/*' && `Accepted formats: ${accept}`}
               {!isResolvingAppId && maxSize && ` • Max size: ${Math.round(maxSize / 1024 / 1024)}MB`}
               {!isResolvingAppId && multiple && ' • Multiple files allowed'}
-            </div>
-          </div>
+            </p>
+          </>
         )}
-        
+
         {isUploading && !showProgress && (
-          <div 
-            className="absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center"
-            role="status"
-            aria-live="polite"
-            aria-label="Uploading file"
-          >
-            <div className="animate-spin rounded-full size-8 border-b-2 border-main-500" aria-hidden="true"></div>
-          </div>
+            <LoadingSpinner size="lg" className="text-main-500" />
         )}
-      </div>
+      </CardHeader>
 
       {/* Upload Progress List */}
       {showProgress && uploadStates.size > 0 && (
-        <div className="space-y-2">
-          {Array.from(uploadStates.entries()).map(([fileId, uploadState]) => {
-            const { file, progress, preview, result } = uploadState;
-            const isError = progress.status === 'error';
-            const isCompleted = progress.status === 'completed';
-            const isUploading = progress.status === 'uploading' || progress.status === 'processing';
-
-            return (
-              <div
-                key={fileId}
-                className={`flex items-center space-x-3 p-3 rounded-lg border ${
-                  isError 
-                    ? 'bg-acc-50 border-acc-200' 
-                    : isCompleted 
-                    ? 'bg-success-50 border-success-200'
-                    : 'bg-sec-50 border-sec-200'
-                }`}
-              >
-                {/* Preview/Icon */}
-                <div className="flex-shrink-0">
-                  {preview ? (
-                    <img
-                      src={preview}
-                      alt={file.name}
-                      className="w-12 h-12 object-cover rounded"
-                    />
-                  ) : (
-                    <div className="w-12 h-12 flex items-center justify-center bg-sec-200 rounded">
-                      <span className="text-2xl">📄</span>
-                    </div>
-                  )}
-                </div>
-
-                {/* File Info */}
-                <div className="flex-1 min-w-0">
-                  <div className="font-medium text-sec-900 truncate">
-                    {file.name}
-                  </div>
-                  <div className="text-sm text-sec-500">
-                    {formatFileSize(file.size)}
-                    {isCompleted && result && ' • Uploaded'}
-                    {isError && progress.error && ` • ${progress.error}`}
-                  </div>
-                  
-                  {/* Progress Bar */}
-                  {showProgress && (isUploading || isError) && (
-                    <div className="mt-2">
-                      <div className="w-full bg-sec-200 rounded-full h-2">
-                        <div
-                          className={`h-2 rounded-full transition-all duration-300 ${
-                            isError ? 'bg-acc-500' : 'bg-main-500'
-                          }`}
-                          style={{ width: `${progress.percentage}%` }}
+        <CardContent>
+            {Array.from(uploadStates.entries()).map(([fileId, uploadState]) => {
+              const { file, progress, preview, result } = uploadState;
+              const isError = progress.status === 'error';
+              const isCompleted = progress.status === 'completed';
+              const isUploading = progress.status === 'uploading' || progress.status === 'processing';
+
+              return (
+                <Card
+                  key={fileId}
+                  className={`grid grid-cols-[auto_1fr_auto] items-center gap-3 ${isError
+                      ? 'bg-acc-50 border-acc-200'
+                      : isCompleted
+                        ? 'bg-success-50 border-success-200'
+                        : 'bg-sec-50 border-sec-200'
+                    }`}
+                >
+                  <CardHeader className="p-0">
+                    {preview ? (
+                      <img
+                        src={preview}
+                        alt={file.name}
+                        className="size-12 object-cover rounded"
+                      />
+                    ) : (
+                      <File className="size-12 text-sec-600" />
+                    )}
+                  </CardHeader>
+
+                  <CardContent className="p-0 min-w-0">
+                    <CardTitle className="text-base truncate">
+                      {file.name}
+                    </CardTitle>
+                    <CardDescription>
+                      {formatFileSize(file.size)}
+                      {isCompleted && result && ' • Uploaded'}
+                      {isError && progress.error && ` • ${progress.error}`}
+                    </CardDescription>
+
+                    {/* Progress Bar */}
+                    {showProgress && (isUploading || isError) && (
+                      <>
+                        <Progress
+                          value={progress.percentage}
+                          max={100}
+                          style={{
+                            accentColor: isError ? 'var(--color-acc-500)' : 'var(--color-main-500)'
+                          }}
                         />
-                      </div>
-                      {isUploading && (
-                        <div className="text-xs text-sec-500 mt-1">
-                          {progress.percentage}% • {formatFileSize(progress.loaded)} / {formatFileSize(progress.total)}
-                        </div>
-                      )}
-                    </div>
-                  )}
-                </div>
-
-                {/* Status Icon */}
-                <div className="flex-shrink-0">
-                  {isCompleted && (
-                    <span className="text-success-500 text-xl">✓</span>
-                  )}
-                  {isError && (
-                    <span className="text-acc-500 text-xl">✕</span>
-                  )}
-                  {isUploading && (
-                    <div 
-                      className="animate-spin rounded-full size-5 border-b-2 border-main-500"
-                      role="status"
-                      aria-label="Uploading"
-                      aria-hidden="true"
-                    ></div>
-                  )}
-                </div>
-              </div>
-            );
-          })}
-        </div>
-      )}
-      
-      {appIdError && (
-        <div 
-          className="p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600"
-          role="alert"
-          aria-live="assertive"
-        >
-          {appIdError}
-        </div>
+                        {isUploading && (
+                          <p>
+                            {progress.percentage}% • {formatFileSize(progress.loaded)} / {formatFileSize(progress.total)}
+                          </p>
+                        )}
+                      </>
+                    )}
+                  </CardContent>
+
+                  <CardFooter className="p-0">
+                    {isCompleted && (
+                      <Check className="text-success-500 size-5" />
+                    )}
+                    {isError && (
+                      <X className="text-acc-500 size-5" />
+                    )}
+                    {isUploading && (
+                      <LoadingSpinner size="sm" className="text-main-500" />
+                    )}
+                  </CardFooter>
+                </Card>
+              );
+            })}
+
+        </CardContent>
       )}
-      {error && (
-        <div 
-          className="p-3 bg-acc-50 border border-acc-200 rounded-lg text-sm text-acc-600"
-          role="alert"
-          aria-live="assertive"
-        >
-          {error}
-        </div>
+
+      {(appIdError || error) && (
+        <CardFooter>
+          {appIdError && (
+            <p className="grid place-items-center text-center size-full" role="alert" aria-live="assertive">
+              {appIdError}
+            </p>
+          )}
+          {error && (
+            <p className="grid place-items-center text-center size-full" role="alert" aria-live="assertive">
+              {error}
+            </p>
+          )}
+        </CardFooter>
       )}
-    </div>
+    </Card>
   );
 }
 

package/src/components/Progress/Progress.tsx

@@ -97,10 +97,8 @@ const Progress = React.forwardRef<
     <progress
       ref={ref}
       className={cn(
-        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-primary',
-        isIndeterminate
-          ? 'bg-gradient-to-r from-primary/10 via-primary/90 to-primary/10'
-          : 'bg-primary/20',
+        'appearance-none border-0 h-2 w-full rounded-full overflow-hidden transition-all accent-main-800',
+        !isIndeterminate && 'bg-sec-600/50',
         className
       )}
       {...(isIndeterminate ? {} : { value })}

package/src/components/ProtectedRoute/ProtectedRoute.tsx

@@ -260,9 +260,9 @@ export function ProtectedRoute({
   // Use isLoading (combined loading state) for consistency with simpler implementations
   if (isLoading && !sessionRestoration.hasTimedOut) {
     return loadingFallback || (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+      <main className="grid place-items-center size-full">
         <LoadingSpinner />
-      </div>
+      </main>
     );
   }
 
@@ -294,9 +294,9 @@ export function ProtectedRoute({
     const isTabVisible = typeof document !== 'undefined' && !document.hidden;
     if (tabJustBecameVisibleRef.current || (isTabVisible && wasAuthenticatedRef.current && isLoading)) {
       return loadingFallback || (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -309,9 +309,9 @@ export function ProtectedRoute({
     // Show loading state while we wait for session refresh (unless we're not loading)
     if (isLoading) {
       return loadingFallback || (
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>
+        <main className="grid place-items-center size-full">
           <LoadingSpinner />
-        </div>
+        </main>
       );
     }
 
@@ -333,14 +333,14 @@ export function ProtectedRoute({
   // If no events are available, show error message
   if (!events || events.length === 0) {
     return noEventsFallback || (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '100vh', padding: '2rem' }}>
+      <main className="grid place-items-center text-center min-h-screen p-8">
         <Alert variant="destructive" className="max-w-md">
           <AlertTitle>No Events Available</AlertTitle>
           <AlertDescription>
             You don't have access to any events. Please contact your administrator if you believe this is an error.
           </AlertDescription>
         </Alert>
-      </div>
+      </main>
     );
   }