@pagamio/frontend-commons-lib 0.8.196 → 0.8.198

package/README.md

@@ -39,6 +39,21 @@ yarn add pagamio-frontend-commons-lib
 
   `import { DateInput, TextInput } from 'pagamio-frontend-commons-lib';`
 
+### :gear: Environment Variables
+
+Some utilities (for example the `useImageUpload` hook and `ImageUploader` component) require an API endpoint that issues presigned upload URLs. Make sure your host application exposes the following public environment variable before using those helpers:
+
+| Variable | Description |
+| --- | --- |
+| `NEXT_PUBLIC_UPLOAD_URL_ENDPOINT` | HTTP endpoint that returns presigned URLs for file uploads. |
+
+```bash
+# .env (per app)
+NEXT_PUBLIC_UPLOAD_URL_ENDPOINT=https://<your-upload-service>/upload-url
+```
+
+This value is resolved at runtime;
+
 ## :shield: **RBAC Module**
 
 The Role-Based Access Control (RBAC) module provides a flexible system for implementing permission-based access control in your applications.

package/lib/components/ui/ImageUploader.js

@@ -4,8 +4,7 @@ import { Image as ImageIcon, Loader2, Upload, X } from 'lucide-react';
 import { useDropzone } from 'react-dropzone';
 import { useCallback, useState } from 'react';
 import { Button, cn, useToast } from '../..';
-import { generateSecureRandomString } from '../../shared';
-import { uploadFileWithXHR } from '../../shared/utils/functionHelper';
+import { useImageUpload } from '../../shared/hooks/useImageUpload';
 import { Progress } from './Progress';
 const ImageUploader = ({ project, env, 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, }) => {
@@ -14,53 +13,7 @@ acceptedFileTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/webp'], plac
     const [uploadProgress, setUploadProgress] = useState(0);
     const [error, setError] = useState(null);
     const { addToast } = useToast();
-    const generateFileName = (originalName) => {
-        const timestamp = Date.now();
-        const randomString = generateSecureRandomString();
-        const extension = originalName.split('.').pop() || 'jpg';
-        return `${timestamp}_${randomString}.${extension}`;
-    };
-    const getPresignedUrl = async (fileName, contentType) => {
-        // This should be configurable or injected, but for now using a default endpoint
-        const endpoint = process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT ||
-            'https://faas-ams3-2a2df116.doserverless.co/api/v1/web/fn-2c9f1cfc-1296-4367-89d8-12409763dae6/default/upload-url';
-        const response = await fetch(endpoint, {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-            },
-            body: JSON.stringify({
-                project,
-                env,
-                fileName,
-                contentType,
-            }),
-        });
-        if (!response.ok) {
-            throw new Error(`Failed to get upload URL: ${response.statusText}`);
-        }
-        // --- FIX: unwrap .data if present ---
-        const json = await response.json();
-        const data = json.data || json;
-        return {
-            uploadURL: data.uploadURL,
-            publicURL: data.publicURL,
-        };
-    };
-    const uploadFile = async (file) => {
-        const fileName = generateFileName(file.name);
-        try {
-            // Get pre-signed URL
-            const { uploadURL, publicURL } = await getPresignedUrl(fileName, file.type);
-            // Upload file using XMLHttpRequest
-            await uploadFileWithXHR(uploadURL, file);
-            return publicURL;
-        }
-        catch (error) {
-            console.error('Upload error:', error);
-            throw error;
-        }
-    };
+    const { uploadFile } = useImageUpload({ project, env });
     const handleFileUpload = async (file) => {
         if (disabled)
             return;

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

@@ -7,7 +7,7 @@ export interface UseImageUploadProps {
     env: 'dev' | 'uat' | 'prod';
     endpoint?: string;
 }
-export declare const useImageUpload: ({ project, env, endpoint, }: UseImageUploadProps) => {
+export declare const useImageUpload: ({ project, env, endpoint }: UseImageUploadProps) => {
     getPresignedUrl: (fileName: string, contentType: string) => Promise<UploadResponse>;
     uploadFile: (file: File) => Promise<string>;
     isLoading: boolean;

package/lib/shared/hooks/useImageUpload.js

@@ -1,14 +1,17 @@
 import { useCallback, useState } from 'react';
 import { generateSecureRandomString, uploadFileWithXHR } from '../utils/functionHelper';
-export const useImageUpload = ({ project, env, endpoint = process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT ||
-    'https://faas-ams3-2a2df116.doserverless.co/api/v1/web/fn-2c9f1cfc-1296-4367-89d8-12409763dae6/default/upload-url', }) => {
+export const useImageUpload = ({ project, env, endpoint }) => {
+    const resolvedEndpoint = endpoint ?? process.env.NEXT_PUBLIC_UPLOAD_URL_ENDPOINT;
+    if (!resolvedEndpoint) {
+        throw new Error('NEXT_PUBLIC_UPLOAD_URL_ENDPOINT is not configured.');
+    }
     const [isLoading, setIsLoading] = useState(false);
     const [error, setError] = useState(null);
     const getPresignedUrl = useCallback(async (fileName, contentType) => {
         setIsLoading(true);
         setError(null);
         try {
-            const response = await fetch(endpoint, {
+            const response = await fetch(resolvedEndpoint, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -39,7 +42,7 @@ export const useImageUpload = ({ project, env, endpoint = process.env.NEXT_PUBLI
         finally {
             setIsLoading(false);
         }
-    }, [project, env, endpoint]);
+    }, [project, env, resolvedEndpoint]);
     const uploadFile = useCallback(async (file) => {
         const timestamp = Date.now();
         const randomString = generateSecureRandomString();

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