@pagamio/frontend-commons-lib 0.8.197 → 0.8.199

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/layout/Sidebar.js

@@ -1,13 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Sidebar, TextInput } from 'flowbite-react';
-import { HiSearch } from 'react-icons/hi';
+import { Sidebar } from 'flowbite-react';
 import { twMerge } from 'tailwind-merge';
 import React, { useEffect, useState } from 'react';
 import { useAppSidebarContext } from '../../context';
 import { useLibTranslations, useTranslation } from '../../translations';
 const AppSidebarMenu = () => {
     const { pages } = useAppSidebarContext();
-    return (_jsx(Sidebar.Items, { children: _jsx(Sidebar.ItemGroup, { className: "mt-0 border-t-0 pb-1 pt-0", children: pages.map((item) => (_jsx(AppSidebarItem, { ...item }, item.label))) }) }));
+    return (_jsx(Sidebar.Items, { children: pages.map((section, index) => (_jsx(Sidebar.ItemGroup, { className: twMerge('mt-0 pb-2 pt-0', index > 0 && 'border-t border-gray-200 dark:border-gray-700 pt-4 mt-4'), children: section.items?.map((item) => _jsx(AppSidebarItem, { ...item }, item.label)) }, section.label || index))) }));
 };
 const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown }) => {
     const { pathname, linkComponent: Link } = useAppSidebarContext();
@@ -50,15 +49,14 @@ const AppSidebarItem = ({ href, target, icon, label, items, badge, forceDropdown
             'text-primary-700 bg-primary-100/80 hover:bg-primary-100/80 dark:text-primary-300 dark:bg-primary-900/40 dark:hover:bg-primary-900/40'), children: t(label) }));
 };
 const AppMobileSidebar = () => {
-    const { mobile: { isOpen, close }, sidebarHeader, } = useAppSidebarContext();
+    const { mobile: { isOpen, close }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
     const { t } = useTranslation();
-    const { tLib } = useLibTranslations();
     if (!isOpen)
         return null;
-    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("form", { className: "pb-3", children: _jsx(TextInput, { icon: HiSearch, type: "search", placeholder: tLib('sidebar.searchPlaceholder', 'Search'), required: true, size: 32 }) }), _jsx(AppSidebarMenu, {})] }) }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Sidebar, { "aria-label": t('sidebar.mobileAriaLabel', 'Sidebar with multi-level dropdown example'), className: twMerge('fixed inset-y-0 left-0 z-20 hidden h-full shrink-0 flex-col border-r border-gray-200 pt-16 dark:border-gray-700 md:flex', isOpen && 'flex'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-3", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }), _jsx("div", { onClick: close, "aria-hidden": "true", className: "fixed inset-0 z-10 h-full w-full bg-gray-900/50 pt-16 dark:bg-gray-900/90" })] }));
 };
 const AppDesktopSidebar = () => {
-    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, } = useAppSidebarContext();
+    const { desktop: { isCollapsed, setCollapsed }, sidebarHeader, sidebarFooter, } = useAppSidebarContext();
     const [isPreview, setIsPreview] = useState(isCollapsed);
     const { tLib } = useLibTranslations();
     useEffect(() => {
@@ -78,7 +76,7 @@ const AppDesktopSidebar = () => {
             setCollapsed(true);
         },
     };
-    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsx("div", { className: "flex h-full flex-col justify-between", children: _jsxs("div", { className: "py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx(AppSidebarMenu, {})] }) }) }));
+    return (_jsx(Sidebar, { onMouseEnter: preview.enable, onMouseLeave: preview.disable, "aria-label": tLib('sidebar.desktopAriaLabel', 'Sidebar with multi-level dropdown example'), collapsed: isCollapsed, className: twMerge('fixed inset-y-0 left-0 z-20 flex h-full shrink-0 flex-col border-r border-gray-200 pt-16 duration-75 dark:border-gray-700 bg-white dark:bg-gray-900', isCollapsed && 'hidden w-16'), id: "sidebar", children: _jsxs("div", { className: "flex h-full flex-col justify-between", children: [_jsxs("div", { className: "flex-1 overflow-y-auto py-2", children: [sidebarHeader && _jsx("div", { className: "mb-4 px-3", children: sidebarHeader }), _jsx("div", { className: "px-2", children: _jsx(AppSidebarMenu, {}) })] }), sidebarFooter && _jsx("div", { className: "border-t border-gray-200 dark:border-gray-700 p-3", children: sidebarFooter })] }) }));
 };
 const AppDashboardSidebar = () => {
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "md:hidden", children: _jsx(AppMobileSidebar, {}) }), _jsx("div", { className: "hidden md:block", children: _jsx(AppDesktopSidebar, {}) })] }));

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/context/SidebarContext.d.ts

@@ -15,10 +15,11 @@ interface AppSidebarPageItem {
  * @interface AppSidebarContextProps
  * @property {Object} desktop - Desktop sidebar state and controls
  * @property {Object} mobile - Mobile sidebar state and controls
- * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar section items (each section has items property)
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
+ * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
  */
 interface AppSidebarContextProps {
     desktop: {
@@ -35,16 +36,18 @@ interface AppSidebarContextProps {
     pathname: string;
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
 }
 /**
  * Props for the AppSidebarProvider component
  * @interface AppSidebarProviderProps
  * @property {boolean} initialCollapsed - Initial collapsed state of desktop sidebar
- * @property {AppSidebarPageItem[]} pages - Array of sidebar page items
+ * @property {AppSidebarPageItem[]} pages - Array of sidebar section items (each section has items property)
  * @property {string} pathname - Current route pathname
  * @property {React.ElementType} linkComponent - Component used for navigation links
  * @property {ReactNode} children - Child components
  * @property {React.ReactNode} sidebarHeader - Optional custom header to render at top of sidebar
+ * @property {React.ReactNode} sidebarFooter - Optional custom footer to render at bottom of sidebar
  */
 interface AppSidebarProviderProps extends PropsWithChildren {
     initialCollapsed: boolean;
@@ -52,12 +55,13 @@ interface AppSidebarProviderProps extends PropsWithChildren {
     pathname: string;
     linkComponent: React.ElementType;
     sidebarHeader?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
 }
 /**
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const AppSidebarProvider: ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }: AppSidebarProviderProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Hook for accessing sidebar context
  * @throws {Error} When used outside AppSidebarProvider

package/lib/context/SidebarContext.js

@@ -8,7 +8,7 @@ const AppSidebarContext = createContext(null);
  * Provider component for sidebar state management
  * @param {AppSidebarProviderProps} props - Component props
  */
-const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, }) => {
+const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkComponent, sidebarHeader, sidebarFooter, }) => {
     const [isOpenMobile, setIsOpenMobile] = useState(false);
     const [isCollapsed, setIsCollapsed] = useState(initialCollapsed);
     function handleSetCollapsed(value) {
@@ -29,7 +29,8 @@ const AppSidebarProvider = ({ initialCollapsed, children, pages, pathname, linkC
         pathname,
         linkComponent,
         sidebarHeader,
-    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader]);
+        sidebarFooter,
+    }), [isCollapsed, isOpenMobile, pages, pathname, linkComponent, sidebarHeader, sidebarFooter]);
     return _jsx(AppSidebarContext.Provider, { value: value, children: children });
 };
 /**

package/lib/styles.css

@@ -2208,9 +2208,6 @@ input[type="range"]::-ms-fill-lower {
 .border-t {
   border-top-width: 1px;
 }
-.border-t-0 {
-  border-top-width: 0px;
-}
 .border-t-4 {
   border-top-width: 4px;
 }
@@ -2923,8 +2920,8 @@ input[type="range"]::-ms-fill-lower {
 .pb-0 {
   padding-bottom: 0px;
 }
-.pb-1 {
-  padding-bottom: 0.25rem;
+.pb-2 {
+  padding-bottom: 0.5rem;
 }
 .pb-2\.5 {
   padding-bottom: 0.625rem;

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