@thangnqdev/ui 0.2.0 → 0.2.2

package/src/forms/FileUpload.tsx

@@ -1,266 +1,266 @@
-import React, { forwardRef, useState, useRef, useEffect } from 'react';
-import { UploadCloud, File, FileText, Image as ImageIcon, X, CheckCircle2, AlertCircle } from 'lucide-react';
-import { cn } from '../utils/cn';
-import { ProgressBar } from '../feedback/ProgressBar';
-import { Button } from '../buttons/Button';
-
-export interface UploadedFile {
-  id: string;
-  file: File;
-  name: string;
-  size: number;
-  type: string;
-  progress?: number;
-  status?: 'pending' | 'uploading' | 'completed' | 'error';
-  previewUrl?: string;
-  errorMessage?: string;
-}
-
-export interface FileUploadProps {
-  accept?: string;
-  maxSizeMB?: number;
-  multiple?: boolean;
-  maxFiles?: number;
-  disabled?: boolean;
-  onFilesSelected?: (files: File[]) => void;
-  onFileRemove?: (fileId: string) => void;
-  className?: string;
-  label?: string;
-  description?: string;
-}
-
-export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
-  const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
-}
-
-export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
-  (
-    {
-      accept,
-      maxSizeMB = 10,
-      multiple = true,
-      maxFiles = 5,
-      disabled = false,
-      onFilesSelected,
-      onFileRemove,
-      className,
-      label = 'Drag & drop files here, or browse',
-      description = 'Supports images, documents, and media up to 10MB',
-    },
-    ref
-  ) => {
-    const [isDragOver, setIsDragOver] = useState(false);
-    const [fileList, setFileList] = useState<UploadedFile[]>([]);
-    const inputRef = useRef<HTMLInputElement | null>(null);
-    const fileListRef = useRef<UploadedFile[]>(fileList);
-    fileListRef.current = fileList;
-
-    // Cleanup object URLs on unmount
-    useEffect(() => {
-      return () => {
-        fileListRef.current.forEach((item) => {
-          if (item.previewUrl) {
-            URL.revokeObjectURL(item.previewUrl);
-          }
-        });
-      };
-    }, []);
-
-    const matchesAccept = (file: File, acceptStr?: string): boolean => {
-      if (!acceptStr) return true;
-      const patterns = acceptStr.split(',').map((p) => p.trim().toLowerCase());
-      const fileName = file.name.toLowerCase();
-      const fileType = file.type.toLowerCase();
-
-      return patterns.some((p) => {
-        if (p.startsWith('.')) {
-          return fileName.endsWith(p);
-        }
-        if (p.endsWith('/*')) {
-          const baseType = p.replace('/*', '');
-          return fileType.startsWith(baseType);
-        }
-        return fileType === p;
-      });
-    };
-
-    const processFiles = (incoming: FileList | null) => {
-      if (!incoming) return;
-
-      const validFiles: File[] = [];
-      const newUploaded: UploadedFile[] = [];
-
-      Array.from(incoming).forEach((file) => {
-        if (fileList.length + newUploaded.length >= maxFiles) return;
-
-        const isAccepted = matchesAccept(file, accept);
-        const isOversized = file.size > maxSizeMB * 1024 * 1024;
-        const hasError = !isAccepted || isOversized;
-
-        let errorMsg: string | undefined;
-        if (!isAccepted) errorMsg = `File type not supported (${accept})`;
-        else if (isOversized) errorMsg = `File exceeds ${maxSizeMB}MB limit`;
-
-        const fileObj: UploadedFile = {
-          id: `${file.name}-${Date.now()}-${Math.random()}`,
-          file,
-          name: file.name,
-          size: file.size,
-          type: file.type,
-          progress: hasError ? 0 : 100,
-          status: hasError ? 'error' : 'completed',
-          errorMessage: errorMsg,
-          previewUrl: file.type.startsWith('image/') && !hasError ? URL.createObjectURL(file) : undefined,
-        };
-
-        newUploaded.push(fileObj);
-        if (!hasError) validFiles.push(file);
-      });
-
-      setFileList((prev) => [...prev, ...newUploaded]);
-      if (validFiles.length > 0) {
-        onFilesSelected?.(validFiles);
-      }
-    };
-
-    const handleDragOver = (e: React.DragEvent) => {
-      e.preventDefault();
-      if (!disabled) setIsDragOver(true);
-    };
-
-    const handleDragLeave = (e: React.DragEvent) => {
-      e.preventDefault();
-      setIsDragOver(false);
-    };
-
-    const handleDrop = (e: React.DragEvent) => {
-      e.preventDefault();
-      setIsDragOver(false);
-      if (disabled) return;
-      processFiles(e.dataTransfer.files);
-    };
-
-    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-      processFiles(e.target.files);
-      if (inputRef.current) inputRef.current.value = '';
-    };
-
-    const removeFile = (id: string) => {
-      setFileList((prev) => {
-        const item = prev.find((f) => f.id === id);
-        if (item?.previewUrl) {
-          URL.revokeObjectURL(item.previewUrl);
-        }
-        return prev.filter((f) => f.id !== id);
-      });
-      onFileRemove?.(id);
-    };
-
-    return (
-      <div ref={ref} className={cn('w-full space-y-4', className)}>
-        {/* Dropzone Box */}
-        <div
-          onDragOver={handleDragOver}
-          onDragLeave={handleDragLeave}
-          onDrop={handleDrop}
-          onClick={() => !disabled && inputRef.current?.click()}
-          className={cn(
-            'relative rounded-2xl p-6 sm:p-8 text-center border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center gap-3 select-none',
-            disabled
-              ? 'opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)]/30'
-              : isDragOver
-              ? 'border-[var(--ui-primary)] bg-[var(--ui-primary)]/10 shadow-lg shadow-blue-500/20 scale-[0.99]'
-              : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)]/60 hover:bg-[var(--ui-bg-secondary)]'
-          )}
-        >
-          <input
-            ref={inputRef}
-            type="file"
-            accept={accept}
-            multiple={multiple}
-            disabled={disabled}
-            onChange={handleFileChange}
-            className="hidden"
-          />
-
-          <div className="w-12 h-12 rounded-2xl bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] flex items-center justify-center shadow-inner">
-            <UploadCloud className="w-6 h-6" />
-          </div>
-
-          <div className="space-y-1">
-            <h4 className="text-sm font-bold text-[var(--ui-text-primary)]">{label}</h4>
-            <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>
-          </div>
-
-          <Button size="xs" variant="outline" className="rounded-full px-4 mt-1 pointer-events-none">
-            Browse Files
-          </Button>
-        </div>
-
-        {/* Uploaded Files List */}
-        {fileList.length > 0 && (
-          <div className="space-y-2">
-            <span className="text-xs font-mono font-bold text-[var(--ui-text-muted)] uppercase tracking-wider">
-              Files ({fileList.length}/{maxFiles})
-            </span>
-
-            <div className="space-y-2">
-              {fileList.map((item) => (
-                <div
-                  key={item.id}
-                  className="p-3 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] flex items-center justify-between gap-3 shadow-xs animate-in fade-in duration-200"
-                >
-                  <div className="flex items-center gap-3 truncate">
-                    {item.previewUrl ? (
-                      <img
-                        src={item.previewUrl}
-                        alt={item.name}
-                        className="w-10 h-10 rounded-xl object-cover border border-[var(--ui-border-subtle)] shrink-0"
-                      />
-                    ) : (
-                      <div className="w-10 h-10 rounded-xl bg-[var(--ui-bg-tertiary)] flex items-center justify-center text-[var(--ui-text-muted)] shrink-0">
-                        {item.type.includes('pdf') ? <FileText className="w-5 h-5" /> : <File className="w-5 h-5" />}
-                      </div>
-                    )}
-
-                    <div className="truncate space-y-0.5">
-                      <span className="text-xs font-semibold text-[var(--ui-text-primary)] block truncate">
-                        {item.name}
-                      </span>
-                      <div className="flex items-center gap-2 text-[11px] text-[var(--ui-text-muted)] font-mono">
-                        <span>{formatFileSize(item.size)}</span>
-                        {item.status === 'completed' && (
-                          <span className="text-emerald-500 font-semibold flex items-center gap-0.5">
-                            <CheckCircle2 className="w-3 h-3" /> Ready
-                          </span>
-                        )}
-                        {item.status === 'error' && (
-                          <span className="text-rose-500 font-semibold flex items-center gap-0.5">
-                            <AlertCircle className="w-3 h-3" /> {item.errorMessage}
-                          </span>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-
-                  <button
-                    type="button"
-                    onClick={() => removeFile(item.id)}
-                    className="p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-rose-500 transition-colors"
-                  >
-                    <X className="w-4 h-4" />
-                  </button>
-                </div>
-              ))}
-            </div>
-          </div>
-        )}
-      </div>
-    );
-  }
-);
-FileUpload.displayName = 'FileUpload';
+import React, { forwardRef, useState, useRef, useEffect } from 'react';
+import { UploadCloud, File, FileText, Image as ImageIcon, X, CheckCircle2, AlertCircle } from 'lucide-react';
+import { cn } from '../utils/cn';
+import { ProgressBar } from '../feedback/ProgressBar';
+import { Button } from '../buttons/Button';
+
+export interface UploadedFile {
+  id: string;
+  file: File;
+  name: string;
+  size: number;
+  type: string;
+  progress?: number;
+  status?: 'pending' | 'uploading' | 'completed' | 'error';
+  previewUrl?: string;
+  errorMessage?: string;
+}
+
+export interface FileUploadProps {
+  accept?: string;
+  maxSizeMB?: number;
+  multiple?: boolean;
+  maxFiles?: number;
+  disabled?: boolean;
+  onFilesSelected?: (files: File[]) => void;
+  onFileRemove?: (fileId: string) => void;
+  className?: string;
+  label?: string;
+  description?: string;
+}
+
+export function formatFileSize(bytes: number): string {
+  if (bytes === 0) return '0 B';
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+}
+
+export const FileUpload = forwardRef<HTMLDivElement, FileUploadProps>(
+  (
+    {
+      accept,
+      maxSizeMB = 10,
+      multiple = true,
+      maxFiles = 5,
+      disabled = false,
+      onFilesSelected,
+      onFileRemove,
+      className,
+      label = 'Drag & drop files here, or browse',
+      description = 'Supports images, documents, and media up to 10MB',
+    },
+    ref
+  ) => {
+    const [isDragOver, setIsDragOver] = useState(false);
+    const [fileList, setFileList] = useState<UploadedFile[]>([]);
+    const inputRef = useRef<HTMLInputElement | null>(null);
+    const fileListRef = useRef<UploadedFile[]>(fileList);
+    fileListRef.current = fileList;
+
+    // Cleanup object URLs on unmount
+    useEffect(() => {
+      return () => {
+        fileListRef.current.forEach((item) => {
+          if (item.previewUrl) {
+            URL.revokeObjectURL(item.previewUrl);
+          }
+        });
+      };
+    }, []);
+
+    const matchesAccept = (file: File, acceptStr?: string): boolean => {
+      if (!acceptStr) return true;
+      const patterns = acceptStr.split(',').map((p) => p.trim().toLowerCase());
+      const fileName = file.name.toLowerCase();
+      const fileType = file.type.toLowerCase();
+
+      return patterns.some((p) => {
+        if (p.startsWith('.')) {
+          return fileName.endsWith(p);
+        }
+        if (p.endsWith('/*')) {
+          const baseType = p.replace('/*', '');
+          return fileType.startsWith(baseType);
+        }
+        return fileType === p;
+      });
+    };
+
+    const processFiles = (incoming: FileList | null) => {
+      if (!incoming) return;
+
+      const validFiles: File[] = [];
+      const newUploaded: UploadedFile[] = [];
+
+      Array.from(incoming).forEach((file) => {
+        if (fileList.length + newUploaded.length >= maxFiles) return;
+
+        const isAccepted = matchesAccept(file, accept);
+        const isOversized = file.size > maxSizeMB * 1024 * 1024;
+        const hasError = !isAccepted || isOversized;
+
+        let errorMsg: string | undefined;
+        if (!isAccepted) errorMsg = `File type not supported (${accept})`;
+        else if (isOversized) errorMsg = `File exceeds ${maxSizeMB}MB limit`;
+
+        const fileObj: UploadedFile = {
+          id: `${file.name}-${Date.now()}-${Math.random()}`,
+          file,
+          name: file.name,
+          size: file.size,
+          type: file.type,
+          progress: hasError ? 0 : 100,
+          status: hasError ? 'error' : 'completed',
+          errorMessage: errorMsg,
+          previewUrl: file.type.startsWith('image/') && !hasError ? URL.createObjectURL(file) : undefined,
+        };
+
+        newUploaded.push(fileObj);
+        if (!hasError) validFiles.push(file);
+      });
+
+      setFileList((prev) => [...prev, ...newUploaded]);
+      if (validFiles.length > 0) {
+        onFilesSelected?.(validFiles);
+      }
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      if (!disabled) setIsDragOver(true);
+    };
+
+    const handleDragLeave = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+    };
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragOver(false);
+      if (disabled) return;
+      processFiles(e.dataTransfer.files);
+    };
+
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      processFiles(e.target.files);
+      if (inputRef.current) inputRef.current.value = '';
+    };
+
+    const removeFile = (id: string) => {
+      setFileList((prev) => {
+        const item = prev.find((f) => f.id === id);
+        if (item?.previewUrl) {
+          URL.revokeObjectURL(item.previewUrl);
+        }
+        return prev.filter((f) => f.id !== id);
+      });
+      onFileRemove?.(id);
+    };
+
+    return (
+      <div ref={ref} className={cn('w-full space-y-4', className)}>
+        {/* Dropzone Box */}
+        <div
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+          onClick={() => !disabled && inputRef.current?.click()}
+          className={cn(
+            'relative rounded-2xl p-6 sm:p-8 text-center border-2 border-dashed transition-all cursor-pointer flex flex-col items-center justify-center gap-3 select-none',
+            disabled
+              ? 'opacity-50 cursor-not-allowed border-[var(--ui-border-subtle)] bg-[var(--ui-bg-secondary)]/30'
+              : isDragOver
+              ? 'border-[var(--ui-primary)] bg-[var(--ui-primary)]/10 shadow-lg shadow-blue-500/20 scale-[0.99]'
+              : 'border-[var(--ui-border-default)] hover:border-[var(--ui-border-strong)] bg-[var(--ui-bg-surface)]/60 hover:bg-[var(--ui-bg-secondary)]'
+          )}
+        >
+          <input
+            ref={inputRef}
+            type="file"
+            accept={accept}
+            multiple={multiple}
+            disabled={disabled}
+            onChange={handleFileChange}
+            className="hidden"
+          />
+
+          <div className="w-12 h-12 rounded-2xl bg-[var(--ui-primary)]/15 text-[var(--ui-primary)] flex items-center justify-center shadow-inner">
+            <UploadCloud className="w-6 h-6" />
+          </div>
+
+          <div className="space-y-1">
+            <h4 className="text-sm font-bold text-[var(--ui-text-primary)]">{label}</h4>
+            <p className="text-xs text-[var(--ui-text-muted)]">{description}</p>
+          </div>
+
+          <Button size="xs" variant="outline" className="rounded-full px-4 mt-1 pointer-events-none">
+            Browse Files
+          </Button>
+        </div>
+
+        {/* Uploaded Files List */}
+        {fileList.length > 0 && (
+          <div className="space-y-2">
+            <span className="text-xs font-mono font-bold text-[var(--ui-text-muted)] uppercase tracking-wider">
+              Files ({fileList.length}/{maxFiles})
+            </span>
+
+            <div className="space-y-2">
+              {fileList.map((item) => (
+                <div
+                  key={item.id}
+                  className="p-3 rounded-2xl bg-[var(--ui-bg-surface)] border border-[var(--ui-border-default)] flex items-center justify-between gap-3 shadow-xs animate-in fade-in duration-200"
+                >
+                  <div className="flex items-center gap-3 truncate">
+                    {item.previewUrl ? (
+                      <img
+                        src={item.previewUrl}
+                        alt={item.name}
+                        className="w-10 h-10 rounded-xl object-cover border border-[var(--ui-border-subtle)] shrink-0"
+                      />
+                    ) : (
+                      <div className="w-10 h-10 rounded-xl bg-[var(--ui-bg-tertiary)] flex items-center justify-center text-[var(--ui-text-muted)] shrink-0">
+                        {item.type.includes('pdf') ? <FileText className="w-5 h-5" /> : <File className="w-5 h-5" />}
+                      </div>
+                    )}
+
+                    <div className="truncate space-y-0.5">
+                      <span className="text-xs font-semibold text-[var(--ui-text-primary)] block truncate">
+                        {item.name}
+                      </span>
+                      <div className="flex items-center gap-2 text-[11px] text-[var(--ui-text-muted)] font-mono">
+                        <span>{formatFileSize(item.size)}</span>
+                        {item.status === 'completed' && (
+                          <span className="text-emerald-500 font-semibold flex items-center gap-0.5">
+                            <CheckCircle2 className="w-3 h-3" /> Ready
+                          </span>
+                        )}
+                        {item.status === 'error' && (
+                          <span className="text-rose-500 font-semibold flex items-center gap-0.5">
+                            <AlertCircle className="w-3 h-3" /> {item.errorMessage}
+                          </span>
+                        )}
+                      </div>
+                    </div>
+                  </div>
+
+                  <button
+                    type="button"
+                    onClick={() => removeFile(item.id)}
+                    className="p-1.5 rounded-full hover:bg-[var(--ui-bg-tertiary)] text-[var(--ui-text-muted)] hover:text-rose-500 transition-colors"
+                  >
+                    <X className="w-4 h-4" />
+                  </button>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    );
+  }
+);
+FileUpload.displayName = 'FileUpload';