@jmruthers/pace-core 0.6.5 → 0.6.7

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/Form/Form.test.tsx

@@ -170,7 +170,7 @@ describe('Form Component', () => {
       await user.type(screen.getByLabelText('Name'), 'John Doe');
       await user.click(screen.getByRole('button', { name: 'Submit' }));
       
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' }, expect.any(Object));
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' });
     });
 
     it('calls onError when form has validation errors', async () => {
@@ -194,8 +194,7 @@ describe('Form Component', () => {
           name: expect.objectContaining({
             message: 'Required'
           })
-        }),
-        expect.any(Object)
+        })
       );
       expect(onSubmit).not.toHaveBeenCalled();
     });
@@ -213,7 +212,7 @@ describe('Form Component', () => {
       await user.type(screen.getByLabelText('Name'), 'John Doe');
       await user.click(screen.getByRole('button', { name: 'Submit' }));
       
-      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' }, expect.any(Object));
+      expect(onSubmit).toHaveBeenCalledWith({ name: 'John Doe' });
     });
   });
 
@@ -387,10 +386,9 @@ describe('Form Component', () => {
           email: 'john@example.com'
         },
         preferences: {
-          theme: 'dark',
-          notifications: undefined
+          theme: 'dark'
         }
-      }, expect.any(Object));
+      });
     });
   });
 });
@@ -710,7 +708,7 @@ describe('Integration', () => {
         name: 'John Doe',
         email: 'john@example.com',
         age: 25
-      }, expect.any(Object));
+      });
     });
     expect(onError).not.toHaveBeenCalled();
   });