@ttoss/components 2.4.4 → 2.4.5

package/README.md

@@ -51,17 +51,60 @@ import { Drawer } from '@ttoss/components/Drawer';
 
 ### FileUploader
 
-Drag-and-drop file upload with progress tracking. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-fileuploader--docs)
+Controlled file uploader with drag-and-drop support. Displays uploaded files with previews, clickable links, and remove functionality. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-fileuploader--docs)
 
 ```tsx
 import { FileUploader } from '@ttoss/components/FileUploader';
+import { useState } from 'react';
+
+const [files, setFiles] = useState([
+  {
+    id: 'file-1',
+    name: 'document.pdf',
+    url: 'https://example.com/files/document.pdf',
+  },
+  {
+    id: 'file-2',
+    name: 'image.jpg',
+    imageUrl: 'https://example.com/images/thumb.jpg', // Optional preview
+    url: 'https://example.com/files/image.jpg',
+  },
+]);
 
 <FileUploader
-  onUpload={async (file) => ({ url: 'file-url', id: 'file-id' })}
-  onUploadComplete={(file, result) => console.log('Uploaded:', result)}
+  // Required: Upload handler
+  onUpload={async (file, onProgress) => {
+    // Your upload logic here
+    onProgress?.(50); // Report progress
+    const result = await uploadToServer(file);
+    return { url: result.url, id: result.id, name: result.name };
+  }}
+  // Controlled files list
+  files={files}
+  // Callbacks
+  onUploadComplete={(file, result) => {
+    setFiles([...files, { id: result.id, name: file.name, url: result.url }]);
+  }}
+  onRemove={(file, index) => {
+    setFiles(files.filter((_, i) => i !== index));
+  }}
+  // Optional: Validation
+  accept="image/*,.pdf"
+  maxSize={10 * 1024 * 1024} // 10MB
+  maxFiles={5}
 />;
 ```
 
+**Key Features:**
+
+- **Controlled component**: Pass `files` prop to display uploaded files
+- **Clickable file names**: Names are links that open the file URL
+- **Image previews**: Show thumbnails when `imageUrl` is provided
+- **Remove functionality**: Each file has a remove button
+- **Upload callbacks**: `onUploadStart`, `onUploadProgress`, `onUploadComplete`, `onUploadError`
+- **Validation**: File type, size, and quantity limits
+- **Drag-and-drop**: Native drag-and-drop support
+
 ### InstallPwa
 
 PWA installation prompt component. [📖 Docs](https://storybook.ttoss.dev/?path=/docs/components-installpwa--docs)

package/dist/FileUploader/index.d.ts

@@ -3,7 +3,7 @@ import * as React from 'react';
 
 type UploadResult = {
     url: string;
-    id: string;
+    id: string | number;
 };
 type FileUploadState = {
     file: File;
@@ -18,7 +18,13 @@ type OnUploadProgress = (file: File, progress: number) => void;
 type OnUploadComplete = (file: File, result: UploadResult) => void;
 type OnUploadError = (file: File, error: Error) => void;
 type OnFilesChange = (files: FileUploadState[]) => void;
-type OnRemoveFile = (file: FileUploadState, index: number) => void;
+type OnRemove = (file: UploadedFile, index: number) => void;
+type UploadedFile = {
+    id: string | number;
+    name: string;
+    imageUrl?: string;
+    url: string;
+};
 type FileUploaderProps = {
     onUpload: OnUpload;
     onUploadStart?: OnUploadStart;
@@ -26,7 +32,7 @@ type FileUploaderProps = {
     onUploadComplete?: OnUploadComplete;
     onUploadError?: OnUploadError;
     onFilesChange?: OnFilesChange;
-    onRemoveFile?: OnRemoveFile;
+    onRemove?: OnRemove;
     accept?: string;
     multiple?: boolean;
     maxSize?: number;
@@ -39,10 +45,11 @@ type FileUploaderProps = {
     children?: React.ReactNode;
     showFileList?: boolean;
     FileListComponent?: (props: {
-        files: FileUploadState[];
-        onRemoveFile: (index: number) => void;
+        files: UploadedFile[];
+        onRemove: (index: number) => void;
     }) => React.ReactNode;
+    files?: UploadedFile[];
 };
-declare const FileUploader: ({ onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, onFilesChange, onRemoveFile, accept, multiple, maxSize, maxFiles, disabled, autoUpload, retryAttempts, placeholder, error, children, showFileList, FileListComponent, }: FileUploaderProps) => react_jsx_runtime.JSX.Element;
+declare const FileUploader: ({ onUpload, onUploadStart, onUploadProgress, onUploadComplete, onUploadError, onFilesChange, onRemove, accept, multiple, maxSize, maxFiles, disabled, autoUpload, retryAttempts, placeholder, error, children, showFileList, FileListComponent, files: uploadedFiles, }: FileUploaderProps) => react_jsx_runtime.JSX.Element;
 
-export { type FileUploadState, FileUploader, type FileUploaderProps, type OnFilesChange, type OnRemoveFile, type OnUpload, type OnUploadComplete, type OnUploadError, type OnUploadProgress, type OnUploadStart, type UploadResult };
+export { type FileUploadState, FileUploader, type FileUploaderProps, type OnFilesChange, type OnRemove, type OnUpload, type OnUploadComplete, type OnUploadError, type OnUploadProgress, type OnUploadStart, type UploadResult, type UploadedFile };

package/dist/esm/FileUploader/index.js

@@ -12,7 +12,7 @@ var FileUploader = /* @__PURE__ */__name(({
   onUploadComplete,
   onUploadError,
   onFilesChange,
-  onRemoveFile,
+  onRemove,
   accept,
   multiple = true,
   maxSize = 10 * 1024 * 1024,
@@ -24,7 +24,8 @@ var FileUploader = /* @__PURE__ */__name(({
   error,
   children,
   showFileList = true,
-  FileListComponent
+  FileListComponent,
+  files: uploadedFiles = []
 }) => {
   const {
     intl
@@ -43,6 +44,9 @@ var FileUploader = /* @__PURE__ */__name(({
     const fileArray = Array.from(newFiles);
     const validFiles = [];
     const currentFileCount = files.length;
+    if (currentFileCount >= maxFiles) {
+      return [];
+    }
     for (const file of fileArray) {
       if (maxSize && file.size > maxSize) {
         continue;
@@ -127,7 +131,7 @@ var FileUploader = /* @__PURE__ */__name(({
   const handleDrop = /* @__PURE__ */__name(event => {
     event.preventDefault();
     setIsDragOver(false);
-    if (disabled) return;
+    if (disabled || files.length >= maxFiles) return;
     const droppedFiles = event.dataTransfer.files;
     if (droppedFiles) {
       const validFiles = validateFiles(droppedFiles);
@@ -136,7 +140,7 @@ var FileUploader = /* @__PURE__ */__name(({
   }, "handleDrop");
   const handleDragOver = /* @__PURE__ */__name(event => {
     event.preventDefault();
-    if (!disabled) {
+    if (!disabled && files.length < maxFiles) {
       setIsDragOver(true);
     }
   }, "handleDragOver");
@@ -145,48 +149,38 @@ var FileUploader = /* @__PURE__ */__name(({
     setIsDragOver(false);
   }, "handleDragLeave");
   const handleClick = /* @__PURE__ */__name(() => {
-    if (!disabled && fileInputRef.current) {
+    if (!disabled && files.length < maxFiles && fileInputRef.current) {
       fileInputRef.current.click();
     }
   }, "handleClick");
   const handleRemoveFile = React.useCallback(index => {
-    const fileToRemove = files[index];
-    setFiles(prevFiles => {
-      const newFiles = prevFiles.filter((_, i) => {
-        return i !== index;
-      });
-      onFilesChange?.(newFiles);
-      return newFiles;
-    });
-    onRemoveFile?.(fileToRemove, index);
-  }, [files, onFilesChange, onRemoveFile]);
-  const retryUpload = React.useCallback(index => {
-    const fileState = files[index];
-    if (fileState.status === "error") {
-      uploadFile(fileState);
-    }
-  }, [files, uploadFile]);
+    const fileToRemove = uploadedFiles[index];
+    onRemove?.(fileToRemove, index);
+  }, [uploadedFiles, onRemove]);
   const isUploading = files.some(f => {
     return f.status === "uploading";
   });
+  const isMaxFilesReached = files.length >= maxFiles;
   const fileListNode = React.useMemo(() => {
-    if (!showFileList || files.length === 0) {
+    if (!showFileList || files.length === 0 && uploadedFiles.length === 0) {
       return null;
     }
     if (FileListComponent) {
       return /* @__PURE__ */React.createElement(FileListComponent, {
-        files,
-        onRemoveFile: handleRemoveFile
+        files: uploadedFiles,
+        onRemove: handleRemoveFile
       });
     }
     return /* @__PURE__ */React.createElement(Stack, {
       sx: {
-        gap: 1
+        gap: 1,
+        width: "100%"
       }
-    }, files.map((fileState, index) => {
+    }, uploadedFiles.map((file, index) => {
       return /* @__PURE__ */React.createElement(Flex, {
-        key: index,
+        key: file.id,
         sx: {
+          width: "full",
           alignItems: "center",
           justifyContent: "space-between",
           p: 2,
@@ -200,47 +194,42 @@ var FileUploader = /* @__PURE__ */__name(({
           gap: 2,
           flex: 1
         }
-      }, /* @__PURE__ */React.createElement(Text, {
+      }, file.imageUrl && /* @__PURE__ */React.createElement(Box, {
         sx: {
-          fontSize: "lg"
+          width: 32,
+          height: 32
+        }
+      }, /* @__PURE__ */React.createElement("img", {
+        src: file.imageUrl,
+        alt: file.name,
+        style: {
+          width: "100%",
+          height: "100%",
+          objectFit: "cover",
+          borderRadius: 4
         }
-      }, fileState.status === "completed" ? "\u2713" : fileState.status === "error" ? "\u2717" : fileState.status === "uploading" ? "\u21BB" : "\u{1F4C4}"), /* @__PURE__ */React.createElement(Box, {
+      })), /* @__PURE__ */React.createElement(Box, {
         sx: {
           flex: 1
         }
+      }, /* @__PURE__ */React.createElement("a", {
+        href: file.url,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        style: {
+          textDecoration: "none",
+          color: "inherit"
+        }
       }, /* @__PURE__ */React.createElement(Text, {
         variant: "body",
         sx: {
-          fontWeight: "medium"
-        }
-      }, fileState.file.name), fileState.status === "uploading" && fileState.progress && /* @__PURE__ */React.createElement(Text, {
-        variant: "caption",
-        sx: {
-          color: "primary.default"
-        }
-      }, fileState.progress.toFixed(0), "%"), fileState.status === "error" && /* @__PURE__ */React.createElement(Text, {
-        variant: "caption",
-        sx: {
-          color: "error.default"
-        }
-      }, "Failed")), /* @__PURE__ */React.createElement(Text, {
-        variant: "caption",
-        sx: {
-          color: "text.muted"
-        }
-      }, formatFileSize(fileState.file.size))), /* @__PURE__ */React.createElement(Flex, {
-        sx: {
-          gap: 1
-        }
-      }, fileState.status === "error" && /* @__PURE__ */React.createElement(Button, {
-        variant: "destructive",
-        onClick: /* @__PURE__ */__name(() => {
-          return retryUpload(index);
-        }, "onClick"),
-        sx: {
-          fontSize: "xs"
+          fontWeight: "medium",
+          "&:hover": {
+            textDecoration: "underline",
+            color: "primary.default"
+          }
         }
-      }, "Retry"), /* @__PURE__ */React.createElement(Button, {
+      }, file.name)))), /* @__PURE__ */React.createElement(Button, {
         variant: "destructive",
         onClick: /* @__PURE__ */__name(() => {
           return handleRemoveFile(index);
@@ -252,12 +241,88 @@ var FileUploader = /* @__PURE__ */__name(({
             color: "error.default"
           }
         }
-      }, "Remove")));
+      }, intl.formatMessage({
+        id: "G/yZLu",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Remove"
+        }]
+      })));
     }));
-  }, [FileListComponent, files, handleRemoveFile, retryUpload, showFileList]);
+  }, [files.length, uploadedFiles, handleRemoveFile, intl, showFileList, FileListComponent]);
+  const placeholderTexts = React.useMemo(() => {
+    const texts = [];
+    if (isUploading) {
+      texts.push(intl.formatMessage({
+        id: "JEsxDw",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Uploading..."
+        }]
+      }));
+    } else if (isMaxFilesReached) {
+      texts.push(intl.formatMessage({
+        id: "eRShvB",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Maximum files reached"
+        }]
+      }));
+    } else {
+      texts.push(placeholder || intl.formatMessage({
+        id: "gy0Ynb",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Click or drag files here"
+        }]
+      }));
+    }
+    if (!isUploading && !isMaxFilesReached) {
+      if (accept) texts.push(accept);
+      if (maxSize) texts.push(`Max ${formatFileSize(maxSize)}`);
+      if (multiple && maxFiles) texts.push(intl.formatMessage({
+        id: "fOOwej",
+        defaultMessage: [{
+          "type": 6,
+          "value": "max_files",
+          "options": {
+            "one": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " file"
+              }]
+            },
+            "other": {
+              "value": [{
+                "type": 0,
+                "value": "Up to "
+              }, {
+                "type": 7
+              }, {
+                "type": 0,
+                "value": " files"
+              }]
+            }
+          },
+          "offset": 0,
+          "pluralType": "cardinal"
+        }]
+      }, {
+        max_files: maxFiles
+      }));
+    }
+    return texts.filter(Boolean).join(" \u2022 ");
+  }, [isUploading, isMaxFilesReached, intl, placeholder, accept, maxSize, multiple, maxFiles]);
   return /* @__PURE__ */React.createElement(Stack, {
     sx: {
-      gap: 3
+      gap: 3,
+      justifyContent: "stretch",
+      width: "100%"
     }
   }, /* @__PURE__ */React.createElement(Box, {
     onDrop: handleDrop,
@@ -265,18 +330,19 @@ var FileUploader = /* @__PURE__ */__name(({
     onDragLeave: handleDragLeave,
     onClick: handleClick,
     sx: {
+      width: "100%",
       border: "2px dashed",
       borderColor: error ? "error.default" : isDragOver ? "primary.default" : "display.border.muted.default",
       borderRadius: "xl",
       padding: 6,
       textAlign: "center",
-      cursor: disabled || isUploading ? "not-allowed" : "pointer",
+      cursor: disabled || isUploading || isMaxFilesReached ? "not-allowed" : "pointer",
       backgroundColor: isDragOver ? "primary.muted" : "display.background.secondary.default",
       transition: "all 0.2s ease",
-      opacity: disabled ? 0.6 : 1,
+      opacity: disabled || isMaxFilesReached ? 0.6 : 1,
       "&:hover": {
-        borderColor: !disabled && !isUploading && !error ? "primary.default" : void 0,
-        backgroundColor: !disabled && !isUploading ? "primary.muted" : void 0
+        borderColor: !disabled && !isUploading && !error && !isMaxFilesReached ? "primary.default" : void 0,
+        backgroundColor: !disabled && !isUploading && !isMaxFilesReached ? "primary.muted" : void 0
       }
     }
   }, /* @__PURE__ */React.createElement("input", {
@@ -285,7 +351,7 @@ var FileUploader = /* @__PURE__ */__name(({
     accept,
     multiple,
     onChange: handleFileChange,
-    disabled: disabled || isUploading,
+    disabled: disabled || isUploading || isMaxFilesReached,
     style: {
       display: "none"
     }
@@ -298,9 +364,15 @@ var FileUploader = /* @__PURE__ */__name(({
     }
   }, /* @__PURE__ */React.createElement(Text, {
     sx: {
-      fontSize: "3xl"
+      fontSize: "2xl"
     }
-  }, "\u{1F4C1}"), /* @__PURE__ */React.createElement(Box, {
+  }, intl.formatMessage({
+    id: "XKyo5X",
+    defaultMessage: [{
+      "type": 0,
+      "value": "File Upload"
+    }]
+  })), /* @__PURE__ */React.createElement(Box, {
     sx: {
       textAlign: "center"
     }
@@ -310,24 +382,7 @@ var FileUploader = /* @__PURE__ */__name(({
       color: "text.default",
       mb: 1
     }
-  }, isUploading ? intl.formatMessage({
-    id: "JEsxDw",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Uploading..."
-    }]
-  }) : placeholder || intl.formatMessage({
-    id: "gy0Ynb",
-    defaultMessage: [{
-      "type": 0,
-      "value": "Click or drag files here"
-    }]
-  })), /* @__PURE__ */React.createElement(Text, {
-    variant: "caption",
-    sx: {
-      color: "text.muted"
-    }
-  }, [accept && accept, maxSize && `Max ${formatFileSize(maxSize)}`, multiple && maxFiles && `Up to ${maxFiles} files`].filter(Boolean).join(" \u2022 "))), !isUploading && /* @__PURE__ */React.createElement(Button, {
+  }, placeholderTexts)), !isUploading && !isMaxFilesReached && /* @__PURE__ */React.createElement(Button, {
     variant: "secondary",
     disabled
   }, intl.formatMessage({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ttoss/components",
-  "version": "2.4.4",
+  "version": "2.4.5",
   "description": "React components for ttoss ecosystem.",
   "license": "MIT",
   "author": "ttoss",
@@ -101,8 +101,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "@ttoss/react-hooks": "^2.1.4",
     "@ttoss/react-i18n": "^2.0.18",
+    "@ttoss/react-hooks": "^2.1.4",
     "@ttoss/ui": "^5.10.2"
   },
   "devDependencies": {
@@ -112,13 +112,13 @@
     "react": "^19.1.0",
     "tsup": "^8.5.0",
     "tsx": "^4.19.2",
-    "@ttoss/config": "^1.35.8",
     "@ttoss/i18n-cli": "^0.7.34",
-    "@ttoss/react-hooks": "^2.1.4",
+    "@ttoss/config": "^1.35.8",
     "@ttoss/react-i18n": "^2.0.18",
+    "@ttoss/ui": "^5.10.2",
     "@ttoss/react-icons": "^0.4.17",
     "@ttoss/test-utils": "^2.1.28",
-    "@ttoss/ui": "^5.10.2"
+    "@ttoss/react-hooks": "^2.1.4"
   },
   "keywords": [
     "React",