@pagamio/frontend-commons-lib 0.8.349 → 0.8.350

package/lib/components/ui/ImageUploader.d.ts

@@ -13,6 +13,12 @@ export interface ImageUploaderProps {
     showPreview?: boolean;
     value?: string;
     onChange?: (url: string | null) => void;
+    /**
+     * When true (default) the image is resized to 1920×1920 and converted
+     * to WebP before upload — correct for photos. Set false for assets that
+     * must keep their exact bytes/dimensions
+     */
+    processImage?: boolean;
 }
 declare const ImageUploader: React.FC<ImageUploaderProps>;
 export default ImageUploader;

package/lib/components/ui/ImageUploader.js

@@ -1,18 +1,21 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Image as ImageIcon, Loader2, Upload, X } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
-import { useCallback, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { Button, cn, useToast } from '../..';
 import { useImageUpload } from '../../shared/hooks/useImageUpload';
 import { Progress } from './Progress';
+const PHOTO_FILE_TYPES = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'];
+const RAW_FILE_TYPES = ['image/png', 'image/svg+xml', 'image/webp', 'image/x-icon', 'image/vnd.microsoft.icon'];
 const ImageUploader = ({ project, env, endpoint, onUploadSuccess, onError, className, disabled = false, maxFileSize = 5 * 1024 * 1024, // 5MB default
-acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, }) => {
+acceptedFileTypes, placeholder = 'Click to upload or drag and drop an image', showPreview = true, value, onChange, processImage = true, }) => {
+    const resolvedFileTypes = useMemo(() => acceptedFileTypes ?? (processImage ? PHOTO_FILE_TYPES : RAW_FILE_TYPES), [acceptedFileTypes, processImage]);
     const [previewUrl, setPreviewUrl] = useState(value || null);
     const [isUploading, setIsUploading] = useState(false);
     const [uploadProgress, setUploadProgress] = useState(0);
     const [error, setError] = useState(null);
     const { addToast } = useToast();
-    const { uploadFile } = useImageUpload({ project, env, endpoint });
+    const { uploadFile } = useImageUpload({ project, env, endpoint, processImage });
     const handleFileUpload = async (file) => {
         if (disabled)
             return;
@@ -21,8 +24,8 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         setUploadProgress(0);
         try {
             // Validate file type
-            if (!acceptedFileTypes.includes(file.type)) {
-                throw new Error(`File type not supported. Accepted types: ${acceptedFileTypes.join(', ')}`);
+            if (!resolvedFileTypes.includes(file.type)) {
+                throw new Error(`File type not supported. Accepted types: ${resolvedFileTypes.join(', ')}`);
             }
             // Validate file size
             if (file.size > maxFileSize) {
@@ -76,10 +79,10 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         if (file) {
             handleFileUpload(file);
         }
-    }, [disabled, acceptedFileTypes, maxFileSize]);
+    }, [disabled, resolvedFileTypes, maxFileSize]);
     const { getRootProps, getInputProps, isDragActive } = useDropzone({
         onDrop,
-        accept: acceptedFileTypes.reduce((acc, type) => {
+        accept: resolvedFileTypes.reduce((acc, type) => {
             acc[type] = [];
             return acc;
         }, {}),
@@ -91,6 +94,6 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
         setError(null);
         onChange?.(null);
     };
-    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-border" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-input rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-muted-foreground', isDragActive && 'border-primary bg-primary/10', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-primary" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Supported formats: ", acceptedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
+    return (_jsxs("div", { className: cn('w-full', className), children: [previewUrl && showPreview ? (_jsxs("div", { className: "relative mb-4", children: [_jsx("img", { src: previewUrl, alt: "Preview", className: "max-h-64 w-full rounded-lg object-contain border border-border" }), !isUploading && (_jsx(Button, { type: "button", variant: "destructive", size: "sm", className: "absolute top-2 right-2", onClick: handleRemove, children: _jsx(X, { className: "h-4 w-4" }) }))] })) : (_jsxs("div", { ...getRootProps(), className: cn('border-2 border-dashed border-input rounded-lg p-8 text-center cursor-pointer transition-colors hover:border-muted-foreground', isDragActive && 'border-primary bg-primary/10', disabled && 'cursor-not-allowed opacity-50', error && 'border-red-500 bg-red-50'), children: [_jsx("input", { ...getInputProps() }), isUploading ? (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [_jsx(Loader2, { className: "h-8 w-8 animate-spin text-primary" }), _jsx("p", { className: "text-sm text-muted-foreground", children: "Uploading image..." }), _jsx(Progress, { value: uploadProgress, className: "w-full max-w-xs" })] })) : (_jsxs("div", { className: "flex flex-col items-center space-y-2", children: [isDragActive ? (_jsx(Upload, { className: "h-8 w-8 text-primary" })) : (_jsx(ImageIcon, { className: "h-8 w-8 text-muted-foreground" })), _jsx("p", { className: "text-sm text-muted-foreground", children: isDragActive ? 'Drop the image here' : placeholder }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Supported formats: ", resolvedFileTypes.map((type) => type.split('/')[1]).join(', ')] }), _jsxs("p", { className: "text-xs text-muted-foreground", children: ["Max size: ", Math.round(maxFileSize / 1024 / 1024), "MB"] })] }))] })), error && _jsx("p", { className: "mt-2 text-sm text-red-600", children: error })] }));
 };
 export default ImageUploader;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.349",
+  "version": "0.8.350",
   "publishConfig": {
     "access": "public",
     "provenance": false