@pagamio/frontend-commons-lib 0.8.268 → 0.8.269

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { MultiSizeImageResult } from '../../shared/utils/functionHelper';
+export interface ResponsiveImageProps extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, 'src' | 'srcSet'> {
+    /**
+     * Image source - can be:
+     * - MultiSizeImageResult object (thumb, medium, large, srcset, sizes)
+     * - string URL (backward compatible - will use as single source)
+     */
+    src: MultiSizeImageResult | string;
+    /** Alt text for accessibility */
+    alt: string;
+    /** Optional custom sizes attribute (overrides default from MultiSizeImageResult) */
+    customSizes?: string;
+    /** Fallback image URL if src fails to load */
+    fallback?: string;
+    /** Eager loading for above-the-fold images */
+    priority?: boolean;
+}
+/**
+ * ResponsiveImage component that handles both multi-size responsive images and legacy single URLs
+ *
+ * Usage with multi-size:
+ * ```tsx
+ * const imageData = await uploadFileMultiSize(file);
+ * <ResponsiveImage src={imageData} alt="Product" />
+ * ```
+ *
+ * Usage with legacy single URL (backward compatible):
+ * ```tsx
+ * <ResponsiveImage src={product.imageUrl} alt="Product" />
+ * ```
+ */
+declare const ResponsiveImage: React.ForwardRefExoticComponent<ResponsiveImageProps & React.RefAttributes<HTMLImageElement>>;
+export default ResponsiveImage;

package/lib/components/ui/ResponsiveImage.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from 'react';
+import { cn } from '../../helpers';
+/**
+ * ResponsiveImage component that handles both multi-size responsive images and legacy single URLs
+ *
+ * Usage with multi-size:
+ * ```tsx
+ * const imageData = await uploadFileMultiSize(file);
+ * <ResponsiveImage src={imageData} alt="Product" />
+ * ```
+ *
+ * Usage with legacy single URL (backward compatible):
+ * ```tsx
+ * <ResponsiveImage src={product.imageUrl} alt="Product" />
+ * ```
+ */
+const ResponsiveImage = React.forwardRef(({ src, alt, customSizes, fallback = '/images/product-placeholder.png', priority = false, className, ...props }, ref) => {
+    const [imgSrc, setImgSrc] = React.useState(() => {
+        if (typeof src === 'string')
+            return src;
+        return src.medium; // Default to medium for multi-size
+    });
+    const [hasError, setHasError] = React.useState(false);
+    const handleError = () => {
+        if (!hasError && fallback) {
+            setHasError(true);
+            setImgSrc(fallback);
+        }
+    };
+    // Multi-size responsive image
+    if (typeof src === 'object' && 'srcset' in src) {
+        return (_jsx("img", { ref: ref, src: imgSrc, srcSet: src.srcset, sizes: customSizes || src.sizes, alt: alt, loading: priority ? 'eager' : 'lazy', onError: handleError, className: cn(className), ...props }));
+    }
+    // Legacy single URL (backward compatible)
+    return (_jsx("img", { ref: ref, src: imgSrc, alt: alt, loading: priority ? 'eager' : 'lazy', onError: handleError, className: cn(className), ...props }));
+});
+ResponsiveImage.displayName = 'ResponsiveImage';
+export default ResponsiveImage;

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

@@ -41,6 +41,8 @@ export { default as MultiSelect, type MultiSelectProps } from './MultiSelect';
 export { default as PhoneInput, type PhoneInputProps } from './PhoneInput';
 export { default as FilterList, type FilterListProps } from './FilterList';
 export { default as FilterSection, type FilterSectionProps } from './FilterSection';
+export { default as ResponsiveImage } from './ResponsiveImage';
+export type { ResponsiveImageProps } from './ResponsiveImage';
 export { default as Separator } from './Separator';
 export { default as Switch } from './Switch';
 export { default as StatusCell } from './StatusCell';

package/lib/components/ui/index.js

@@ -43,6 +43,7 @@ export { default as MultiSelect } from './MultiSelect';
 export { default as PhoneInput } from './PhoneInput';
 export { default as FilterList } from './FilterList';
 export { default as FilterSection } from './FilterSection';
+export { default as ResponsiveImage } from './ResponsiveImage';
 export { default as Separator } from './Separator';
 export { default as Switch } from './Switch';
 export { default as StatusCell } from './StatusCell';

package/lib/shared/hooks/useImageUpload.d.ts

@@ -1,3 +1,4 @@
+import type { MultiSizeImageResult } from '../utils/functionHelper';
 export interface UploadResponse {
     uploadURL: string;
     publicURL: string;
@@ -12,6 +13,7 @@ export interface UseImageUploadProps {
 export declare const useImageUpload: ({ project, env, endpoint, processImage }: UseImageUploadProps) => {
     getPresignedUrl: (fileName: string, contentType: string) => Promise<UploadResponse>;
     uploadFile: (rawFile: File) => Promise<string>;
+    uploadFileMultiSize: (rawFile: File, minDimension?: number) => Promise<MultiSizeImageResult>;
     isLoading: boolean;
     error: Error | null;
 };

package/lib/shared/hooks/useImageUpload.js

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { generateSecureRandomString, processImageForUpload, uploadFileWithXHR } from '../utils/functionHelper';
+import { generateSecureRandomString, processImageForUpload, processImageForUploadMultiSize, uploadFileWithXHR, } from '../utils/functionHelper';
 export const useImageUpload = ({ project, env, endpoint, processImage = true }) => {
     const resolvedEndpoint = endpoint;
     if (!resolvedEndpoint) {
@@ -61,9 +61,56 @@ export const useImageUpload = ({ project, env, endpoint, processImage = true })
             throw error;
         }
     }, [getPresignedUrl, processImage]);
+    /**
+     * Uploads image in 3 sizes (thumb, medium, large) and returns structured result with srcset
+     * Medium URL is backward-compatible with existing code that expects a single string
+     */
+    const uploadFileMultiSize = useCallback(async (rawFile, minDimension = 200) => {
+        try {
+            // Process image into 3 sizes
+            const { thumb, medium, large } = await processImageForUploadMultiSize(rawFile, minDimension);
+            const timestamp = Date.now();
+            const randomString = generateSecureRandomString();
+            const baseName = `${timestamp}_${randomString}`;
+            // Upload all 3 versions in parallel
+            const [thumbResult, mediumResult, largeResult] = await Promise.all([
+                (async () => {
+                    const { uploadURL, publicURL } = await getPresignedUrl(`${baseName}-thumb.webp`, 'image/webp');
+                    await uploadFileWithXHR(uploadURL, thumb);
+                    return publicURL;
+                })(),
+                (async () => {
+                    const { uploadURL, publicURL } = await getPresignedUrl(`${baseName}-medium.webp`, 'image/webp');
+                    await uploadFileWithXHR(uploadURL, medium);
+                    return publicURL;
+                })(),
+                (async () => {
+                    const { uploadURL, publicURL } = await getPresignedUrl(`${baseName}-large.webp`, 'image/webp');
+                    await uploadFileWithXHR(uploadURL, large);
+                    return publicURL;
+                })(),
+            ]);
+            // Build srcset and sizes attributes
+            const srcset = `${thumbResult} 400w, ${mediumResult} 1200w, ${largeResult} 1920w`;
+            const sizes = '(max-width: 640px) 400px, (max-width: 1024px) 1200px, 1920px';
+            return {
+                thumb: thumbResult,
+                medium: mediumResult,
+                large: largeResult,
+                srcset,
+                sizes,
+            };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Multi-size upload failed');
+            setError(error);
+            throw error;
+        }
+    }, [getPresignedUrl]);
     return {
         getPresignedUrl,
         uploadFile,
+        uploadFileMultiSize,
         isLoading,
         error,
     };

package/lib/shared/utils/functionHelper.d.ts

@@ -31,5 +31,30 @@ export declare function uploadFileWithXHR(url: string, file: File, onProgress?:
  * - Resizes to fit within maxDimension×maxDimension (never upscales)
  * - Strips EXIF metadata (canvas read-back discards it)
  * - Converts to WebP at the given quality (0–1)
+ * - Validates minimum dimensions
  */
-export declare function processImageForUpload(file: File, maxDimension?: number, quality?: number): Promise<File>;
+export declare function processImageForUpload(file: File, maxDimension?: number, quality?: number, minDimension?: number): Promise<File>;
+/**
+ * Multi-size image response containing all variants and metadata
+ */
+export interface MultiSizeImageResult {
+    /** Thumbnail URL (400px, ~10-20KB) - for cards, lists */
+    thumb: string;
+    /** Medium URL (1200px, ~80-120KB) - for detail pages, default */
+    medium: string;
+    /** Large URL (1920px, ~200-300KB) - for zoom, print */
+    large: string;
+    /** Responsive srcset string ready to use in img tags */
+    srcset: string;
+    /** Default sizes attribute for responsive images */
+    sizes: string;
+}
+/**
+ * Processes an image into 3 responsive sizes (thumb, medium, large)
+ * Returns File objects ready for upload with -thumb, -medium, -large suffixes
+ */
+export declare function processImageForUploadMultiSize(file: File, minDimension?: number): Promise<{
+    thumb: File;
+    medium: File;
+    large: File;
+}>;

package/lib/shared/utils/functionHelper.js

@@ -134,14 +134,19 @@ export function uploadFileWithXHR(url, file, onProgress) {
  * - Resizes to fit within maxDimension×maxDimension (never upscales)
  * - Strips EXIF metadata (canvas read-back discards it)
  * - Converts to WebP at the given quality (0–1)
+ * - Validates minimum dimensions
  */
-export function processImageForUpload(file, maxDimension = 1920, quality = 0.92) {
+export function processImageForUpload(file, maxDimension = 1920, quality = 0.92, minDimension = 200) {
     return new Promise((resolve, reject) => {
         const img = new window.Image();
         const objectUrl = URL.createObjectURL(file);
         img.onload = () => {
             URL.revokeObjectURL(objectUrl);
             const { width, height } = img;
+            // Validate minimum dimensions
+            if (width < minDimension || height < minDimension) {
+                return reject(new Error(`Image too small. Minimum: ${minDimension}×${minDimension}px. Got: ${width}×${height}px`));
+            }
             const scale = Math.min(1, maxDimension / Math.max(width, height));
             const canvas = document.createElement('canvas');
             canvas.width = Math.round(width * scale);
@@ -164,3 +169,16 @@ export function processImageForUpload(file, maxDimension = 1920, quality = 0.92)
         img.src = objectUrl;
     });
 }
+/**
+ * Processes an image into 3 responsive sizes (thumb, medium, large)
+ * Returns File objects ready for upload with -thumb, -medium, -large suffixes
+ */
+export async function processImageForUploadMultiSize(file, minDimension = 200) {
+    // Generate all 3 versions in parallel
+    const [thumb, medium, large] = await Promise.all([
+        processImageForUpload(file, 400, 0.65, minDimension), // ~10-20KB
+        processImageForUpload(file, 1200, 0.8, minDimension), // ~80-120KB
+        processImageForUpload(file, 1920, 0.85, minDimension), // ~200-300KB
+    ]);
+    return { thumb, medium, large };
+}

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.268",
+  "version": "0.8.269",
   "publishConfig": {
     "access": "public",
     "provenance": false