@jmruthers/pace-core 0.6.6 → 0.6.8

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

@@ -116,18 +116,22 @@ 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;
+      // The drop area is the CardHeader with role="button", not a div
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
 
       fireEvent.dragOver(dropArea);
-      expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
+      // 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;
+      // The drop area is the CardHeader with role="button", not a div
+      const dropArea = screen.getByRole('button', { name: /File upload area/i });
 
       fireEvent.dragOver(dropArea);
-      expect(screen.getByText(/Drop files here/i)).toBeInTheDocument();
+      // Component shows "Drop files here..." with ellipsis
+      expect(screen.getByText(/Drop files here\.\.\./i)).toBeInTheDocument();
 
       fireEvent.dragLeave(dropArea);
       expect(screen.getByText(/Click to upload/i)).toBeInTheDocument();
@@ -135,24 +139,45 @@ describe('[component] FileUpload', () => {
 
     it('handles file drop', async () => {
       const onUploadSuccess = vi.fn();
+      const mockUploadFile = vi.fn(async () => createMockUploadResult());
+      mockUseFileReference.mockReturnValue({
+        uploadFile: mockUploadFile,
+        isLoading: false,
+        error: null,
+      });
+
       renderWithProviders(
         <FileUpload {...baseProps} onUploadSuccess={onUploadSuccess} showProgress />
       );
 
-      const dropArea = screen.getByText(/Click to upload/i).closest('div') as HTMLElement;
+      // Wait for app ID resolution to complete
+      await waitFor(() => {
+        expect(screen.queryByText(/Resolving app configuration/i)).not.toBeInTheDocument();
+      });
+
+      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(mockUploadFile).toHaveBeenCalled();
         expect(onUploadSuccess).toHaveBeenCalled();
-      });
+      }, { timeout: 5000 });
     });
 
     it('does not handle drop when disabled', () => {
@@ -204,7 +229,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 +423,17 @@ 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');
+        // File icon should be shown (lucide-react File icon)
+        const fileIcon = screen.getByTestId('lucide-file');
         expect(fileIcon).toBeInTheDocument();
-      });
+      }, { timeout: 3000 });
     });
 
     it('shows loading spinner when showProgress is false', async () => {
@@ -429,10 +459,11 @@ describe('[component] FileUpload', () => {
       });
 
       // Wait for spinner to appear
+      // LoadingSpinner uses role="status" with "Loading..." text, not "Uploading file"
       await waitFor(() => {
-        const spinnerContainer = screen.getByRole('status', { name: 'Uploading file' });
-        const spinner = spinnerContainer.querySelector('.animate-spin');
+        const spinner = screen.getByRole('status');
         expect(spinner).toBeInTheDocument();
+        expect(spinner).toHaveClass('animate-spin');
       });
 
       // Resolve upload to clean up
@@ -592,6 +623,4 @@ describe('[component] FileUpload', () => {
       });
     });
   });
-});
-
-
+});

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.
@@ -90,8 +94,19 @@ export function FileUpload({
   const [isResolvingAppId, setIsResolvingAppId] = useState(!app_id);
   const [appIdError, setAppIdError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
+  const progressIntervalsRef = useRef<Map<string, NodeJS.Timeout>>(new Map());
   const { uploadFile, isLoading, error } = useFileReference(supabase);
 
+  // Cleanup all progress intervals on unmount
+  useEffect(() => {
+    return () => {
+      progressIntervalsRef.current.forEach((interval) => {
+        clearInterval(interval);
+      });
+      progressIntervalsRef.current.clear();
+    };
+  }, []);
+
   // Resolve app_id from app name if not provided
   useEffect(() => {
     if (app_id) {
@@ -138,7 +153,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 +169,7 @@ export function FileUpload({
         resolve(null);
         return;
       }
-      
+
       const reader = new FileReader();
       reader.onload = (e) => {
         resolve(e.target?.result as string || null);
@@ -203,7 +218,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 +239,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,
@@ -291,16 +306,25 @@ export function FileUpload({
             return updated;
           });
         }, 200);
+        
+        // Store interval in ref for cleanup
+        progressIntervalsRef.current.set(fileId, progressInterval);
 
 
         // Use resolved app_id
         if (!resolvedAppId) {
+          // Clear interval before throwing error
+          clearInterval(progressInterval);
+          progressIntervalsRef.current.delete(fileId);
           const errorMsg = appIdError || 'App ID not available. Please provide app_id prop or set app name.';
           throw new Error(errorMsg);
         }
 
         // Validate pageContext before upload
         if (!pageContext) {
+          // Clear interval before throwing error
+          clearInterval(progressInterval);
+          progressIntervalsRef.current.delete(fileId);
           const errorMsg = 'pageContext is required for file upload. This is used for permission checks.';
           throw new Error(errorMsg);
         }
@@ -318,7 +342,9 @@ export function FileUpload({
           is_public: isPublic
         }, file);
 
+        // Clear interval and remove from ref
         clearInterval(progressInterval);
+        progressIntervalsRef.current.delete(fileId);
 
         if (result) {
           // Update status to completed
@@ -382,8 +408,15 @@ export function FileUpload({
           onUploadError?.('Upload failed', file);
         }
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+        // Clear interval on error
+        const interval = progressIntervalsRef.current.get(fileId);
+        if (interval) {
+          clearInterval(interval);
+          progressIntervalsRef.current.delete(fileId);
+        }
         
+        const errorMessage = err instanceof Error ? err.message : 'Upload failed';
+
         setUploadStates(prev => {
           const updated = new Map(prev);
           const state = updated.get(fileId);
@@ -432,9 +465,9 @@ export function FileUpload({
     e.preventDefault();
     e.stopPropagation();
     setIsDragging(false);
-    
+
     if (isDisabled) return;
-    
+
     const files = e.dataTransfer.files;
     handleFileSelect(files);
   }, [isDisabled, handleFileSelect]);
@@ -465,8 +498,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 +517,7 @@ export function FileUpload({
         } : undefined}
       >
         {children || (
-          <div className="space-y-2">
+          <>
             <input
               ref={fileInputRef}
               type="file"
@@ -496,146 +529,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>
   );
 }