@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/FileUpload/FileUpload.tsx

@@ -7,54 +7,70 @@
  * Supports drag-and-drop, file validation, progress tracking, and accessibility.
  */
 
-import React, { useState, useCallback, useRef, useEffect, useMemo } from 'react';
+import React, { useState, useCallback } 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.
- * Configures file upload behavior including storage location, validation, and callbacks.
- */
-export interface FileUploadProps {
+import { useResolvedAppId } from './useResolvedAppId';
+import { useFileUploadManager } from './useFileUploadManager';
+import { FileUploadDropZone } from './FileUploadDropZone';
+import { FileUploadProgressList } from './FileUploadProgressList';
+import { createLogger } from '../../utils/core/logger';
+import { Card, CardFooter } from '../Card';
+
+/** Storage/config props for FileUpload (ISP). */
+export interface FileUploadPropsStorage {
   supabase: SupabaseClient;
   table_name: string;
   record_id: string;
-  organisation_id?: string | null; // Optional for user-scoped files (e.g., profile photos)
-  userId?: string; // Optional userId for user-scoped files (required if organisation_id is not provided)
-  app_id?: string; // Optional - will be resolved from app name if not provided
+  organisation_id?: string | null;
+  userId?: string;
+  app_id?: string;
   category: FileCategory;
-  folder: string; // Folder name in storage bucket (e.g., 'profile_photos', 'documents')
-  pageContext: string; // The page context where the file upload occurs (e.g., 'configuration', 'forms', 'applications')
-  event_id?: string; // Optional event ID for event-scoped permission checks (required for event-based apps)
+  folder: string;
+  pageContext: string;
+  event_id?: string;
+}
+
+/** Validation props for FileUpload (ISP). */
+export interface FileUploadPropsValidation {
   accept?: string;
   maxSize?: number;
   multiple?: boolean;
   disabled?: boolean;
-  isPublic?: boolean; // Whether files should be uploaded to public-files bucket
+  isPublic?: boolean;
+}
+
+/** UI props for FileUpload (ISP). */
+export interface FileUploadPropsUI {
   className?: string;
-  showPreview?: boolean; // Show image preview for accepted files
-  showProgress?: boolean; // Show upload progress bar
+  showPreview?: boolean;
+  showProgress?: boolean;
+}
+
+/** Callback props for FileUpload (ISP). */
+export interface FileUploadPropsCallbacks {
   onUploadSuccess?: (result: FileUploadResult) => void;
   onUploadError?: (error: string, file?: File) => void;
   onProgress?: (progress: UploadProgress) => void;
-  children?: React.ReactNode;
 }
 
-interface FileUploadState {
-  file: File;
-  progress: UploadProgress;
-  preview?: string;
-  result?: FileUploadResult;
+/** Children prop for FileUpload (ISP). */
+export interface FileUploadPropsChildren {
+  children?: React.ReactNode;
 }
 
+/**
+ * Props for the FileUpload component (ISP: composed from focused interfaces).
+ * Callers should pass the secure Supabase client (e.g. from useSecureSupabase()) when
+ * used in apps with RBAC. className is for instance-specific layout only (e.g. max-w-*).
+ */
+export type FileUploadProps = FileUploadPropsStorage
+  & FileUploadPropsValidation
+  & FileUploadPropsUI
+  & FileUploadPropsCallbacks
+  & FileUploadPropsChildren;
+
 export function FileUpload({
   supabase,
   table_name,
@@ -79,373 +95,45 @@ export function FileUpload({
   onProgress,
   children
 }: FileUploadProps) {
+  const logger = createLogger('FileUpload');
+
   // Validate pageContext early - required prop
   if (!pageContext) {
     const errorMsg = 'pageContext is required for FileUpload component. This is used for permission checks.';
-    if (import.meta.env.MODE === 'development') {
-      console.error('[FileUpload]', errorMsg);
-    }
+    logger.error(errorMsg);
     throw new Error(errorMsg);
   }
 
   const [isDragging, setIsDragging] = useState(false);
-  const [uploadStates, setUploadStates] = useState<Map<string, FileUploadState>>(new Map());
-  const [resolvedAppId, setResolvedAppId] = useState<string | null>(app_id || null);
-  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) {
-      // If app_id is provided, use it directly
-      setResolvedAppId(app_id);
-      setIsResolvingAppId(false);
-      setAppIdError(null);
-      return;
-    }
-
-    // Otherwise, resolve from app name
-    const resolveAppId = async () => {
-      setIsResolvingAppId(true);
-      setAppIdError(null);
-
-      try {
-        const appName = getCurrentAppName();
-        if (!appName) {
-          const errorMsg = 'App ID is required. Either provide app_id prop or set app name via setRBACAppName()';
-          setAppIdError(errorMsg);
-          setIsResolvingAppId(false);
-          return;
-        }
-
-        const resolvedId = await getAppId(supabase, appName);
-        if (!resolvedId) {
-          const errorMsg = `Failed to resolve app ID for app name "${appName}". Make sure the app is registered in rbac_apps table.`;
-          setAppIdError(errorMsg);
-          setIsResolvingAppId(false);
-          return;
-        }
-
-        setResolvedAppId(resolvedId);
-        setIsResolvingAppId(false);
-      } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to resolve app ID';
-        setAppIdError(errorMessage);
-        setIsResolvingAppId(false);
-      }
-    };
-
-    resolveAppId();
-  }, [app_id, supabase]);
-
-  // 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 =>
-      state.progress.status === 'uploading' || state.progress.status === 'processing'
-    );
-  }, [uploadStates]);
-
-  const isDisabled = useMemo(() => {
-    return disabled || isUploading || isResolvingAppId || !resolvedAppId;
-  }, [disabled, isUploading, isResolvingAppId, resolvedAppId]);
-
-  // Generate preview URL for images
-  const generatePreview = useCallback((file: File): Promise<string | null> => {
-    return new Promise((resolve) => {
-      if (!file.type.startsWith('image/')) {
-        resolve(null);
-        return;
-      }
-
-      const reader = new FileReader();
-      reader.onload = (e) => {
-        resolve(e.target?.result as string || null);
-      };
-      reader.onerror = () => resolve(null);
-      reader.readAsDataURL(file);
-    });
-  }, []);
-
-  // Validate file
-  const validateFile = useCallback((file: File): string | null => {
-    // Check file size
-    if (file.size > maxSize) {
-      return `File "${file.name}" exceeds maximum size of ${Math.round(maxSize / 1024 / 1024)}MB`;
-    }
-
-    // Check file type if accept is specified
-    if (accept !== '*/*') {
-      const acceptedTypes = accept.split(',').map(type => type.trim());
-      const fileExtension = '.' + file.name.split('.').pop()?.toLowerCase();
-      const fileMimeType = file.type;
-
-      const isAccepted = acceptedTypes.some(accepted => {
-        if (accepted.startsWith('.')) {
-          // Extension match
-          return accepted === fileExtension;
-        } else if (accepted.includes('/*')) {
-          // MIME type wildcard (e.g., "image/*")
-          const baseType = accepted.split('/')[0];
-          return fileMimeType.startsWith(baseType + '/');
-        } else {
-          // Exact MIME type match
-          return accepted === fileMimeType;
-        }
-      });
-
-      if (!isAccepted) {
-        return `File "${file.name}" is not an accepted format. Accepted: ${accept}`;
-      }
-    }
-
-    return null;
-  }, [accept, maxSize]);
-
-  const handleFileSelect = useCallback(async (files: FileList | null) => {
-    if (!files || files.length === 0) return;
-
-    const fileArray = Array.from(files);
-
-    // Validate all files first
-    const validationErrors: string[] = [];
-    const validFiles: File[] = [];
-
-    for (const file of fileArray) {
-      const error = validateFile(file);
-      if (error) {
-        validationErrors.push(error);
-        onUploadError?.(error, file);
-      } else {
-        validFiles.push(file);
-      }
-    }
-
-    if (validFiles.length === 0) {
-      return;
-    }
-
-    // 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,
-        percentage: 0,
-        fileName: file.name,
-        status: 'idle'
-      };
-
-      newUploadStates.set(fileId, {
-        file,
-        progress,
-        preview
-      });
-    }
-
-    setUploadStates(newUploadStates);
-
-    // Upload files sequentially
-    for (const [fileId, uploadState] of newUploadStates.entries()) {
-      const { file } = uploadState;
-
-      // Update status to uploading
-      setUploadStates(prev => {
-        const updated = new Map(prev);
-        const state = updated.get(fileId);
-        if (state) {
-          updated.set(fileId, {
-            ...state,
-            progress: {
-              ...state.progress,
-              status: 'uploading'
-            }
-          });
-        }
-        return updated;
-      });
-
-      try {
-        // Simulate progress updates (Supabase doesn't provide real progress, so we estimate)
-        const progressInterval = setInterval(() => {
-          setUploadStates(prev => {
-            const updated = new Map(prev);
-            const state = updated.get(fileId);
-            if (state && state.progress.status === 'uploading') {
-              const estimatedProgress = Math.min(
-                state.progress.percentage + 10,
-                90
-              );
-              const newProgress: UploadProgress = {
-                ...state.progress,
-                percentage: estimatedProgress,
-                loaded: Math.floor((estimatedProgress / 100) * file.size)
-              };
-              onProgress?.(newProgress);
-              updated.set(fileId, {
-                ...state,
-                progress: newProgress
-              });
-            }
-            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);
-        }
-
-        const result = await uploadFile({
-          table_name,
-          record_id,
-          organisation_id: organisation_id || null,
-          userId: userId, // Pass userId prop directly - it's required for user-scoped files when organisation_id is null
-          app_id: resolvedAppId ? assertAppId(resolvedAppId) : assertAppId(''),
-          category,
-          folder,
-          pageContext: pageContext,
-          event_id,
-          is_public: isPublic
-        }, file);
-
-        // Clear interval and remove from ref
-        clearInterval(progressInterval);
-        progressIntervalsRef.current.delete(fileId);
-
-        if (result) {
-          // Update status to completed
-          setUploadStates(prev => {
-            const updated = new Map(prev);
-            const state = updated.get(fileId);
-            if (state) {
-              updated.set(fileId, {
-                ...state,
-                progress: {
-                  ...state.progress,
-                  status: 'completed',
-                  percentage: 100,
-                  loaded: file.size
-                },
-                result
-              });
-            }
-            return updated;
-          });
-
-          const finalProgress: UploadProgress = {
-            loaded: file.size,
-            total: file.size,
-            percentage: 100,
-            fileName: file.name,
-            status: 'completed'
-          };
-          onProgress?.(finalProgress);
-          onUploadSuccess?.(result);
-
-          // Upload preview and file information will persist until component unmounts
-          // or new files are uploaded (replacing the uploadStates Map)
-        } else {
-          // Update status to error
-          setUploadStates(prev => {
-            const updated = new Map(prev);
-            const state = updated.get(fileId);
-            if (state) {
-              updated.set(fileId, {
-                ...state,
-                progress: {
-                  ...state.progress,
-                  status: 'error',
-                  error: 'Upload failed'
-                }
-              });
-            }
-            return updated;
-          });
-
-          const errorProgress: UploadProgress = {
-            loaded: 0,
-            total: file.size,
-            percentage: 0,
-            fileName: file.name,
-            status: 'error',
-            error: 'Upload failed'
-          };
-          onProgress?.(errorProgress);
-          onUploadError?.('Upload failed', file);
-        }
-      } catch (err) {
-        // 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);
-          if (state) {
-            updated.set(fileId, {
-              ...state,
-              progress: {
-                ...state.progress,
-                status: 'error',
-                error: errorMessage
-              }
-            });
-          }
-          return updated;
-        });
-
-        const errorProgress: UploadProgress = {
-          loaded: 0,
-          total: file.size,
-          percentage: 0,
-          fileName: file.name,
-          status: 'error',
-          error: errorMessage
-        };
-        onProgress?.(errorProgress);
-        onUploadError?.(errorMessage, file);
-      }
-    }
-  }, [uploadFile, table_name, record_id, organisation_id, resolvedAppId, category, folder, isPublic, maxSize, onUploadSuccess, onUploadError, onProgress, validateFile, generatePreview, showPreview, appIdError, pageContext]);
+  const { resolvedAppId, isResolvingAppId, appIdError } = useResolvedAppId(supabase, app_id);
+  const { error } = useFileReference(supabase);
+  const {
+    uploadStates,
+    isUploading,
+    handleFileSelect,
+    fileInputRef
+  } = useFileUploadManager({
+    supabase,
+    table_name,
+    record_id,
+    organisation_id,
+    userId,
+    resolvedAppId,
+    appIdError,
+    category,
+    folder,
+    pageContext,
+    event_id,
+    isPublic,
+    accept,
+    maxSize,
+    showPreview,
+    onUploadSuccess,
+    onUploadError,
+    onProgress
+  });
+
+  const isDisabled = disabled || isUploading || isResolvingAppId || !resolvedAppId;
 
   const handleDragOver = useCallback((e: React.DragEvent) => {
     e.preventDefault();
@@ -484,163 +172,60 @@ export function FileUpload({
     if (!isDisabled && fileInputRef.current) {
       fileInputRef.current.click();
     }
-  }, [isDisabled]);
-
-  const formatFileSize = (bytes: number): string => {
-    if (bytes === 0) return '0 Bytes';
-    const k = 1024;
-    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
-    const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
-  };
+  }, [isDisabled, fileInputRef]);
 
   const dragClasses = isDragging ? 'border-main-500 bg-main-50' : 'border-sec-300 hover:border-sec-400';
   const disabledClasses = isDisabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer hover:bg-sec-50';
 
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLElement>) => {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        handleClick();
+      }
+    },
+    [handleClick]
+  );
+
   return (
     <Card className={className}>
-      <CardHeader
-        role="button"
-        tabIndex={isDisabled ? -1 : 0}
-        aria-label="File upload area"
-        aria-disabled={isDisabled}
-        className={`relative border-2 border-dashed rounded-lg p-6 text-center transition-colors ${dragClasses} ${disabledClasses}`}
+      <FileUploadDropZone
+        isDisabled={isDisabled}
+        isDragging={isDragging}
+        isResolvingAppId={isResolvingAppId}
+        isUploading={isUploading}
+        showProgress={showProgress}
+        accept={accept}
+        multiple={multiple}
+        maxSize={maxSize}
+        dragClasses={dragClasses}
+        disabledClasses={disabledClasses}
+        fileInputRef={fileInputRef}
         onDragOver={handleDragOver}
         onDragLeave={handleDragLeave}
         onDrop={handleDrop}
-        onClick={!isDisabled ? handleClick : undefined}
-        onKeyDown={!isDisabled ? (e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
-            e.preventDefault();
-            handleClick();
-          }
-        } : undefined}
-      >
-        {children || (
-          <>
-            <input
-              ref={fileInputRef}
-              type="file"
-              accept={accept}
-              multiple={multiple}
-              onChange={handleFileInputChange}
-              className="hidden"
-              disabled={isDisabled}
-              data-testid="file-input"
-              aria-label={accept ? `Upload file${multiple ? 's' : ''} (${accept})` : `Upload file${multiple ? 's' : ''}`}
-            />
-            <p className="text-sec-600">
-              {isResolvingAppId ? (
-                'Resolving app configuration...'
-              ) : isDragging ? (
-                'Drop files here...'
-              ) : (
-                <>
-                  Click to upload
-                  {' '}or drag and drop
-                </>
-              )}
-            </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'}
-            </p>
-          </>
-        )}
-
-        {isUploading && !showProgress && (
-            <LoadingSpinner size="lg" className="text-main-500" />
-        )}
-      </CardHeader>
+        onClick={handleClick}
+        onKeyDown={handleKeyDown}
+        onFileInputChange={handleFileInputChange}
+        children={children}
+      />
 
-      {/* Upload Progress List */}
       {showProgress && uploadStates.size > 0 && (
-        <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)'
-                          }}
-                        />
-                        {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>
+        <FileUploadProgressList
+          uploadStates={uploadStates}
+          showProgress={showProgress}
+        />
       )}
 
       {(appIdError || error) && (
-        <CardFooter>
+        <CardFooter className="grid place-items-center">
           {appIdError && (
-            <p className="grid place-items-center text-center size-full" role="alert" aria-live="assertive">
+            <p role="alert" aria-live="assertive">
               {appIdError}
             </p>
           )}
           {error && (
-            <p className="grid place-items-center text-center size-full" role="alert" aria-live="assertive">
+            <p role="alert" aria-live="assertive">
               {error}
             </p>
           )}