@pagamio/frontend-commons-lib 0.8.325 → 0.8.327

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

@@ -9,6 +9,8 @@ type UploadProps = {
     allowedFileTypes?: string[];
     maxFileSize?: number;
     helperText?: string;
+    /** Optional label for the inline trigger (defaults to "Choose file"). */
+    chooseFileLabel?: string;
     value?: never;
 };
 declare const UploadField: React.ForwardRefExoticComponent<UploadProps & React.RefAttributes<HTMLInputElement>>;

package/lib/components/ui/UploadField.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useState } from 'react';
 import { Button, Icon } from '../../components';
-const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
+const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton = false, className = '', disabled = false, allowedFileTypes, maxFileSize, helperText, chooseFileLabel = 'Choose file', value, // Explicitly exclude value prop becuase it's not allowed for security reasons.
 ...props }, ref) => {
     const [fileName, setFileName] = useState(null);
     const [key, setKey] = useState(0);
@@ -42,11 +42,11 @@ const UploadField = forwardRef(({ onChange, id, type = 'file', hideUploadButton
         setKey((prev) => prev + 1);
     };
     const acceptValue = allowedFileTypes?.map((ext) => `.${ext}`).join(',');
-    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: "Choose file" }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
+    return (_jsxs("div", { className: `flex flex-col gap-3 w-full ${className}`, children: [_jsxs("div", { className: "flex gap-3 w-full items-center", children: [_jsxs("label", { htmlFor: id, className: "flex items-center gap-2 cursor-pointer flex-1", children: [_jsx("div", { className: "bg-primary rounded-full h-10 w-10 flex items-center justify-center", children: _jsx(Icon, { name: "FiUpload", size: 20, className: "text-white" }) }), _jsx("span", { className: "text-sm font-medium text-foreground", children: chooseFileLabel }), _jsx("input", { type: type, onChange: handleFileChange, className: "hidden", id: id, ref: ref, disabled: disabled, accept: acceptValue, ...props }, key)] }), !hideUploadButton && (_jsx(Button, { onClick: () => {
                             if (ref && typeof ref === 'object' && ref.current) {
                                 ref.current.click();
                             }
-                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && (_jsx("div", { className: "w-full", children: _jsx("p", { className: "text-sm text-muted-foreground w-full md:w-[65%]", children: helperText }) })), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
+                        }, disabled: disabled, children: "Upload" }))] }), fileName && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsxs("span", { className: "text-sm text-muted-foreground", children: ["Selected: ", fileName] }), _jsx(Button, { variant: "destructive", size: "sm", onClick: handleClearFile, disabled: disabled, children: "Clear" })] })), helperText && _jsx("p", { className: "text-sm text-muted-foreground", children: helperText }), error && _jsx("div", { className: "text-red-500 text-sm", children: error })] }));
 });
 UploadField.displayName = 'UploadField';
 export default UploadField;

package/lib/form-engine/components/inputs/upload-field/UploadFieldForm.js

@@ -53,7 +53,7 @@ const UploadFieldForm = forwardRef(({ field, error, ...props }, ref) => {
         return _jsx("span", { className: "text-muted-foreground", children: "File uploaded." });
     }, [preview, field.name]);
     const previewLabel = preview.type === 'pdf' ? 'Uploaded PDF:' : 'Uploaded Image:';
-    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
+    return (_jsxs("div", { className: "flex flex-col space-y-4", children: [_jsxs("div", { className: "flex flex-col space-y-2", children: [_jsx("label", { htmlFor: field.name, className: "text-sm font-medium text-foreground", children: field.label }), _jsx(UploadField, { ...props, id: field.name, ref: ref, value: props.value || null, onChange: handleFileChange, className: "w-full p-2 border border-input rounded-md", hideUploadButton: field.hideUploadButton, allowedFileTypes: field.allowedFileTypes, maxFileSize: field.maxFileSize, helperText: field.fileUploadHelperText, chooseFileLabel: field.chooseFileLabel }), error && _jsx("p", { className: "mt-1 text-sm text-red-500", children: error.message })] }), field.showFileUploadPreview && (_jsxs("div", { className: "mt-4", children: [_jsx("label", { htmlFor: `${field.name}-preview`, className: "text-sm font-medium text-foreground", children: previewLabel }), _jsx("div", { className: "mt-2 flex flex-col items-center p-4 border border-input rounded-md", children: previewElement })] }))] }));
 });
 UploadFieldForm.displayName = 'UploadFieldForm';
 export default UploadFieldForm;

package/lib/form-engine/types/index.d.ts

@@ -157,6 +157,8 @@ export interface Field {
     showFileUploadPreview?: boolean;
     /** To display file upload helper text */
     fileUploadHelperText?: string;
+    /** Custom label for the inline upload trigger (defaults to "Choose file") */
+    chooseFileLabel?: string;
     /** Default country for phone input */
     defaultCountry?: string;
     /** Disables the field */

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

@@ -1,5 +1,20 @@
-import type { ResponseMapping } from '../../api';
+import type { QueryParamConfig, ResponseMapping } from '../../api';
 import type { BaseEntity, UsePagamioTableConfig, UsePagamioTableReturn } from '../../pagamio-table/data-table/types';
 export declare const springBootMapping: ResponseMapping;
 export declare const arrayResponseMapping: ResponseMapping;
+/**
+ * Response mapping for Pagamio NestJS backends (commerce-os-core,
+ * nestjs-api-commons). Matches `PaginatedResponseDto<T>`:
+ *   { data: T[], meta: { page, limit, total, totalPages, hasNextPage, hasPreviousPage } }
+ *
+ * Pair with `pagamioQueryConfig` so request params line up too.
+ */
+export declare const pagamioMapping: ResponseMapping;
+/**
+ * Query-param config for Pagamio NestJS backends. Matches `PaginationDto`:
+ *   page (1-based), limit, search, sortBy, sortOrder ('asc'|'desc')
+ *
+ * The hook tracks `page` zero-indexed internally; we bump on the way out.
+ */
+export declare const pagamioQueryConfig: QueryParamConfig;
 export declare const usePagamioTable: <T extends BaseEntity>({ queryKey, queryFn, enabled: queryEnabled, staleTime, gcTime, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination: paginationConfig, filtering: filteringConfig, sorting: sortingConfig, toolbar, searchPlaceholder, onRowClick, rowClassName, expandable, renderDetailPanel, }: UsePagamioTableConfig<T>) => UsePagamioTableReturn<T>;

package/lib/shared/hooks/usePagamioTable.js

@@ -30,6 +30,37 @@ export const arrayResponseMapping = {
     pageSize: '',
     defaultValues: { data: [], total: 0, page: 0, pageSize: 10 },
 };
+/**
+ * Response mapping for Pagamio NestJS backends (commerce-os-core,
+ * nestjs-api-commons). Matches `PaginatedResponseDto<T>`:
+ *   { data: T[], meta: { page, limit, total, totalPages, hasNextPage, hasPreviousPage } }
+ *
+ * Pair with `pagamioQueryConfig` so request params line up too.
+ */
+export const pagamioMapping = {
+    responseType: 'default',
+    data: 'data',
+    total: 'meta.total',
+    page: 'meta.page',
+    pageSize: 'meta.limit',
+    defaultValues: { data: [], total: 0, page: 1, pageSize: 10 },
+};
+/**
+ * Query-param config for Pagamio NestJS backends. Matches `PaginationDto`:
+ *   page (1-based), limit, search, sortBy, sortOrder ('asc'|'desc')
+ *
+ * The hook tracks `page` zero-indexed internally; we bump on the way out.
+ */
+export const pagamioQueryConfig = {
+    pagination: {
+        transform: (page, size) => ({
+            page: (page + 1).toString(),
+            limit: size.toString(),
+        }),
+    },
+    sorting: { sortByParam: 'sortBy', sortDirParam: 'sortOrder' },
+    filtering: { searchParam: 'search', filterFormat: 'flat' },
+};
 const defaultQueryConfig = {
     pagination: {
         transform: (page, size) => ({ page: page.toString(), size: size.toString() }),

package/lib/styles.css

@@ -6714,10 +6714,6 @@ video {
     width: 420px;
   }
 
-  .md\:w-\[65\%\] {
-    width: 65%;
-  }
-
   .md\:w-auto {
     width: auto;
   }

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