@jmruthers/pace-core 0.6.9 → 0.6.11

package/src/components/FileUpload/FileUploadDropZone.tsx

@@ -0,0 +1,112 @@
+/**
+ * @file FileUploadDropZone Component
+ * @package @jmruthers/pace-core
+ * @module Components/FileUpload
+ *
+ * Drop zone area: drag/drop handlers, file input, and prompt text.
+ * Uses a semantic button inside CardHeader so the interactive control has correct roles.
+ */
+
+import React from 'react';
+import { CardHeader } from '../Card';
+import { LoadingSpinner } from '../LoadingSpinner';
+
+export interface FileUploadDropZoneProps {
+  isDisabled: boolean;
+  isDragging: boolean;
+  isResolvingAppId: boolean;
+  isUploading: boolean;
+  showProgress: boolean;
+  accept: string;
+  multiple: boolean;
+  maxSize: number;
+  dragClasses: string;
+  disabledClasses: string;
+  fileInputRef: React.RefObject<HTMLInputElement | null>;
+  onDragOver: (e: React.DragEvent) => void;
+  onDragLeave: (e: React.DragEvent) => void;
+  onDrop: (e: React.DragEvent) => void;
+  onClick: () => void;
+  onKeyDown: (e: React.KeyboardEvent<HTMLElement>) => void;
+  onFileInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  children?: React.ReactNode;
+}
+
+export function FileUploadDropZone({
+  isDisabled,
+  isDragging,
+  isResolvingAppId,
+  isUploading,
+  showProgress,
+  accept,
+  multiple,
+  maxSize,
+  dragClasses,
+  disabledClasses,
+  fileInputRef,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  onClick,
+  onKeyDown,
+  onFileInputChange,
+  children
+}: FileUploadDropZoneProps) {
+  const dropZoneButton = (
+    <button
+      type="button"
+      disabled={isDisabled}
+      aria-label="File upload area"
+      className={`relative w-full min-w-0 grid place-items-center gap-2 border-2 border-dashed rounded-lg p-6 transition-colors ${dragClasses} ${disabledClasses}`}
+      onDragOver={onDragOver}
+      onDragLeave={onDragLeave}
+      onDrop={onDrop}
+      onClick={!isDisabled ? onClick : undefined}
+      onKeyDown={!isDisabled ? onKeyDown : undefined}
+    >
+      {/* Always render the file input so programmatic .click() opens the file picker (required even when custom children are passed) */}
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept={accept}
+        multiple={multiple}
+        onChange={onFileInputChange}
+        className="hidden"
+        disabled={isDisabled}
+        data-testid="file-input"
+        aria-label={
+          accept
+            ? `Upload file${multiple ? 's' : ''} (${accept})`
+            : `Upload file${multiple ? 's' : ''}`
+        }
+      />
+      {children ?? (
+        <>
+          <p>
+            {isResolvingAppId
+              ? 'Resolving app configuration...'
+              : isDragging
+                ? 'Drop files here...'
+                : (
+                  <>
+                    Click to upload
+                    {' '}or drag and drop
+                  </>
+                )}
+          </p>
+          <p>
+            {!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" />
+      )}
+    </button>
+  );
+
+  return <CardHeader>{dropZoneButton}</CardHeader>;
+}

package/src/components/FileUpload/FileUploadProgressItem.tsx

@@ -0,0 +1,86 @@
+/**
+ * @file FileUploadProgressItem Component
+ * @package @jmruthers/pace-core
+ * @module Components/FileUpload
+ *
+ * Single row in the upload progress list: preview/icon, name, size, progress bar, status icon.
+ */
+
+import React from 'react';
+import { Check, X, File } from 'lucide-react';
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '../Card';
+import { Progress } from '../Progress';
+import { LoadingSpinner } from '../LoadingSpinner';
+import { formatFileSize } from '../../utils/formatting/formatting';
+import type { FileUploadState } from './useFileUploadManager';
+
+export interface FileUploadProgressItemProps {
+  fileId: string;
+  uploadState: FileUploadState;
+  showProgress: boolean;
+}
+
+export function FileUploadProgressItem({
+  fileId: _fileId,
+  uploadState,
+  showProgress
+}: FileUploadProgressItemProps) {
+  const { file, progress, preview, result } = uploadState;
+  const isError = progress.status === 'error';
+  const isCompleted = progress.status === 'completed';
+  const isUploading = progress.status === 'uploading' || progress.status === 'processing';
+
+  const cardClassName =
+    isError
+      ? 'grid grid-cols-[auto_1fr_auto] items-center gap-3 bg-acc-50 border-acc-200'
+      : isCompleted
+        ? 'grid grid-cols-[auto_1fr_auto] items-center gap-3 bg-success-50 border-success-200'
+        : 'grid grid-cols-[auto_1fr_auto] items-center gap-3 bg-sec-50 border-sec-200';
+
+  return (
+    <Card className={cardClassName}>
+      <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="truncate">{file.name}</CardTitle>
+        <CardDescription>
+          {formatFileSize(file.size)}
+          {isCompleted && result && ' • Uploaded'}
+          {isError && progress.error && ` • ${progress.error}`}
+        </CardDescription>
+
+        {showProgress && (isUploading || isError) && (
+          <>
+            <Progress
+              value={progress.percentage}
+              max={100}
+              className={isError ? 'progress-error' : undefined}
+            />
+            {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>
+  );
+}

package/src/components/FileUpload/FileUploadProgressList.tsx

@@ -0,0 +1,40 @@
+/**
+ * @file FileUploadProgressList Component
+ * @package @jmruthers/pace-core
+ * @module Components/FileUpload
+ *
+ * Renders the list of upload progress items inside CardContent.
+ */
+
+import React from 'react';
+import { CardContent } from '../Card';
+import { FileUploadProgressItem } from './FileUploadProgressItem';
+import type { FileUploadState } from './useFileUploadManager';
+
+export interface FileUploadProgressListProps {
+  uploadStates: Map<string, FileUploadState>;
+  showProgress: boolean;
+}
+
+export function FileUploadProgressList({
+  uploadStates,
+  showProgress
+}: FileUploadProgressListProps) {
+  if (uploadStates.size === 0) return null;
+
+  return (
+    <CardContent>
+      <ul className="grid gap-3 list-none p-0 m-0">
+        {Array.from(uploadStates.entries()).map(([fileId, uploadState]) => (
+          <li key={fileId}>
+            <FileUploadProgressItem
+              fileId={fileId}
+              uploadState={uploadState}
+              showProgress={showProgress}
+            />
+          </li>
+        ))}
+      </ul>
+    </CardContent>
+  );
+}

package/src/components/FileUpload/index.tsx

@@ -1,4 +1,4 @@
-export * from './FileUpload';
+export { FileUpload, type FileUploadProps } from './FileUpload';
 export { FileUpload as default } from './FileUpload';
 
 

package/src/components/FileUpload/useFileUploadManager.test.ts

@@ -0,0 +1,308 @@
+/**
+ * @file useFileUploadManager Hook Tests
+ * @package @jmruthers/pace-core
+ * @module Components/FileUpload
+ *
+ * Unit tests for useFileUploadManager: initial state, validation, upload success/error, sequential uploads.
+ */
+
+import { renderHook, waitFor, act } from '@testing-library/react';
+import { vi, describe, it, expect, beforeEach, afterEach } from 'vitest';
+import { useFileUploadManager } from './useFileUploadManager';
+import type { SupabaseClient } from '@supabase/supabase-js';
+import { FileCategory } from '../../types/file-reference';
+import type { FileUploadResult } from '../../types/file-reference';
+
+import * as useFileReferenceModule from '../../hooks/useFileReference';
+
+vi.mock('../../hooks/useFileReference', () => ({
+  useFileReference: vi.fn(),
+}));
+
+function createFileList(files: File[]): FileList {
+  const list = files.map((f, i) => [i, f] as const);
+  return {
+    length: files.length,
+    item: (i: number) => files[i] ?? null,
+    ...Object.fromEntries(list),
+  } as FileList;
+}
+
+function createTestFile(
+  name = 'test.png',
+  type = 'image/png',
+  size = 1024
+): File {
+  return new File([new Uint8Array(size)], name, { type, size });
+}
+
+function createMockUploadResult(): FileUploadResult {
+  return {
+    file_reference: {
+      id: 'file-ref-1',
+      table_name: 'person',
+      record_id: 'rec-1',
+      organisation_id: 'org-1',
+      file_path: 'bucket/path/file.png',
+      is_public: false,
+      file_metadata: {
+        fileName: 'test.png',
+        fileSize: 1024,
+        fileType: 'image/png',
+        category: FileCategory.PROFILE_PHOTOS,
+      },
+      created_at: new Date().toISOString(),
+      updated_at: new Date().toISOString(),
+      app_id: 'app-1',
+    },
+    file_url: 'https://example.com/file.png',
+  };
+}
+
+const baseParams = {
+  supabase: {} as SupabaseClient,
+  table_name: 'person',
+  record_id: 'rec-1',
+  organisation_id: 'org-1' as string | null,
+  resolvedAppId: 'app-123',
+  appIdError: null as string | null,
+  category: FileCategory.PROFILE_PHOTOS,
+  folder: 'profile_photos',
+  pageContext: 'test',
+  accept: 'image/*',
+  maxSize: 10 * 1024 * 1024,
+  showPreview: false,
+};
+
+describe('useFileUploadManager', () => {
+  const mockUploadFile = vi.fn();
+
+  beforeEach(() => {
+    vi.clearAllMocks();
+    vi.mocked(useFileReferenceModule.useFileReference).mockReturnValue({
+      uploadFile: mockUploadFile,
+      isLoading: false,
+      error: null,
+    } as ReturnType<typeof useFileReferenceModule.useFileReference>);
+  });
+
+  afterEach(() => {
+    vi.restoreAllMocks();
+  });
+
+  describe('initial state', () => {
+    it('returns empty uploadStates and isUploading false', () => {
+      const { result } = renderHook(() => useFileUploadManager(baseParams));
+
+      expect(result.current.uploadStates.size).toBe(0);
+      expect(result.current.isUploading).toBe(false);
+      expect(result.current.fileInputRef).toBeDefined();
+      expect(result.current.fileInputRef.current).toBe(null);
+    });
+  });
+
+  describe('handleFileSelect', () => {
+    it('does nothing when files is null', async () => {
+      const { result } = renderHook(() => useFileUploadManager(baseParams));
+
+      await act(async () => {
+        await result.current.handleFileSelect(null);
+      });
+
+      expect(result.current.uploadStates.size).toBe(0);
+      expect(mockUploadFile).not.toHaveBeenCalled();
+    });
+
+    it('does nothing when files is empty', async () => {
+      const { result } = renderHook(() => useFileUploadManager(baseParams));
+      const emptyList = createFileList([]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(emptyList);
+      });
+
+      expect(result.current.uploadStates.size).toBe(0);
+      expect(mockUploadFile).not.toHaveBeenCalled();
+    });
+
+    it('calls onUploadError and does not upload when file exceeds maxSize', async () => {
+      const onUploadError = vi.fn();
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          maxSize: 100,
+          onUploadError,
+        })
+      );
+      const bigFile = createTestFile('big.png', 'image/png', 5 * 1024);
+      const fileList = createFileList([bigFile]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      expect(onUploadError).toHaveBeenCalledTimes(1);
+      expect(onUploadError.mock.calls[0][0]).toMatch(/exceeds maximum size/i);
+      expect(mockUploadFile).not.toHaveBeenCalled();
+    });
+
+    it('calls onUploadError and does not upload when file type not accepted', async () => {
+      const onUploadError = vi.fn();
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          accept: '.pdf',
+          onUploadError,
+        })
+      );
+      const pngFile = createTestFile('doc.png', 'image/png');
+      const fileList = createFileList([pngFile]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      expect(onUploadError).toHaveBeenCalledTimes(1);
+      expect(onUploadError.mock.calls[0][0]).toMatch(/not an accepted format/i);
+      expect(mockUploadFile).not.toHaveBeenCalled();
+    });
+
+    it('uploads valid file and calls onUploadSuccess when upload succeeds', async () => {
+      const onUploadSuccess = vi.fn();
+      const onProgress = vi.fn();
+      mockUploadFile.mockResolvedValue(createMockUploadResult());
+
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          onUploadSuccess,
+          onProgress,
+        })
+      );
+      const file = createTestFile('test.png', 'image/png');
+      const fileList = createFileList([file]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      await waitFor(() => {
+        expect(mockUploadFile).toHaveBeenCalledTimes(1);
+      });
+
+      expect(mockUploadFile).toHaveBeenCalledWith(
+        expect.objectContaining({
+          table_name: 'person',
+          record_id: 'rec-1',
+          organisation_id: 'org-1',
+          category: FileCategory.PROFILE_PHOTOS,
+          folder: 'profile_photos',
+          pageContext: 'test',
+          app_id: 'app-123',
+        }),
+        file
+      );
+      expect(onUploadSuccess).toHaveBeenCalledTimes(1);
+      expect(onUploadSuccess.mock.calls[0][0]).toMatchObject({
+        file_reference: expect.any(Object),
+        file_url: 'https://example.com/file.png',
+      });
+      expect(onProgress).toHaveBeenCalled();
+    });
+
+    it('calls onUploadError when upload returns null', async () => {
+      const onUploadError = vi.fn();
+      mockUploadFile.mockResolvedValue(null);
+
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          onUploadError,
+        })
+      );
+      const file = createTestFile('test.png', 'image/png');
+      const fileList = createFileList([file]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      await waitFor(() => {
+        expect(mockUploadFile).toHaveBeenCalled();
+      });
+
+      expect(onUploadError).toHaveBeenCalledWith('Upload failed', file);
+    });
+
+    it('calls onUploadError when upload throws', async () => {
+      const onUploadError = vi.fn();
+      mockUploadFile.mockRejectedValue(new Error('Network error'));
+
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          onUploadError,
+        })
+      );
+      const file = createTestFile('test.png', 'image/png');
+      const fileList = createFileList([file]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      await waitFor(() => {
+        expect(mockUploadFile).toHaveBeenCalled();
+      });
+
+      expect(onUploadError).toHaveBeenCalledWith('Network error', file);
+    });
+
+    it('uploads multiple files sequentially and calls onUploadSuccess for each', async () => {
+      const onUploadSuccess = vi.fn();
+      mockUploadFile
+        .mockResolvedValueOnce(createMockUploadResult())
+        .mockResolvedValueOnce({
+          ...createMockUploadResult(),
+          file_reference: {
+            ...createMockUploadResult().file_reference,
+            id: 'file-ref-2',
+            file_metadata: {
+              ...createMockUploadResult().file_reference.file_metadata,
+              fileName: 'test2.png',
+            },
+          },
+        });
+
+      const { result } = renderHook(() =>
+        useFileUploadManager({
+          ...baseParams,
+          onUploadSuccess,
+        })
+      );
+      const file1 = createTestFile('test1.png', 'image/png');
+      const file2 = createTestFile('test2.png', 'image/png');
+      const fileList = createFileList([file1, file2]);
+
+      await act(async () => {
+        await result.current.handleFileSelect(fileList);
+      });
+
+      await waitFor(() => {
+        expect(mockUploadFile).toHaveBeenCalledTimes(2);
+      });
+
+      expect(onUploadSuccess).toHaveBeenCalledTimes(2);
+      expect(mockUploadFile).toHaveBeenNthCalledWith(
+        1,
+        expect.any(Object),
+        file1
+      );
+      expect(mockUploadFile).toHaveBeenNthCalledWith(
+        2,
+        expect.any(Object),
+        file2
+      );
+    });
+  });
+});