@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/rbac/types.d.ts

@@ -0,0 +1,39 @@
+/**
+ * Role-Based Access Control (RBAC) types
+ */
+/**
+ * Configuration mapping roles to permissions
+ */
+export interface RBACConfig<P> {
+    [role: string]: P[];
+}
+/**
+ * Generic user interface that can be extended by specific applications.
+ * Optionally supports multiple roles via the `roleNames` property.
+ */
+export interface RBACUser {
+    [key: string]: unknown;
+    roleNames?: string[];
+}
+/**
+ * RBAC configuration options.
+ * Supports both single-role and multi-role users.
+ */
+export interface RBACOptions<P, U extends RBACUser = RBACUser> {
+    /**
+     * Configuration mapping roles to permissions
+     */
+    rbacConfig: RBACConfig<P>;
+    /**
+     * The permission value that represents "ALL permissions"
+     */
+    allPermissionValue: P;
+    /**
+     * Array of all available permissions
+     */
+    allPermissions: P[];
+    /**
+     * The key in the user object that contains the role(s) - can be a string or array of strings
+     */
+    roleKey?: keyof U;
+}

package/lib/rbac/types.js

@@ -0,0 +1,4 @@
+/**
+ * Role-Based Access Control (RBAC) types
+ */
+export {};

package/lib/rbac/utils.d.ts

@@ -0,0 +1,44 @@
+import type { RBACOptions, RBACUser } from './types';
+/**
+ * Initialize the RBAC system with configuration
+ * @param options - RBAC configuration options
+ */
+export declare const initializeRBAC: <P, U extends RBACUser = RBACUser>(options: RBACOptions<P, U>) => void;
+/**
+ * Check if a user has a specific permission
+ * @param user - The user object to check permissions for
+ * @param permission - The permission to check
+ * @returns boolean indicating if the user has the permission
+ */
+export declare const hasPermission: <P, U extends RBACUser = RBACUser>(user: U | null, permission: P) => boolean;
+/**
+ * Check if a user has any of the specified permissions
+ * @param user - The user object to check permissions for
+ * @param permissions - Array of permissions to check
+ * @returns boolean indicating if the user has any of the permissions
+ */
+export declare const hasAnyPermission: <P, U extends RBACUser = RBACUser>(user: U | null, permissions: P[]) => boolean;
+/**
+ * Check if a user has all of the specified permissions
+ * @param user - The user object to check permissions for
+ * @param permissions - Array of permissions to check
+ * @returns boolean indicating if the user has all of the permissions
+ */
+export declare const hasAllPermissions: <P, U extends RBACUser = RBACUser>(user: U | null, permissions: P[]) => boolean;
+/**
+ * Get all permissions for a user (union of all roles' permissions)
+ * @param user - The user object to get permissions for
+ * @returns Array of permissions the user has
+ */
+export declare const getUserPermissions: <P, U extends RBACUser = RBACUser>(user: U | null) => P[];
+/**
+ * Check if a user has a specific role (matches any of their roles)
+ * @param user - The user object to check role for
+ * @param roleName - The role name to check against
+ * @returns boolean indicating if the user has the specified role
+ */
+export declare const hasRole: <U extends RBACUser = RBACUser>(user: U | null, roleName: string) => boolean;
+/**
+ * Check if a user has access to IQ Retail
+ */
+export declare const hasIQRetailAccess: <P, U extends RBACUser = RBACUser>(user: U | null) => boolean;

package/lib/rbac/utils.js

@@ -0,0 +1,117 @@
+import { RBACConfigStore } from './store';
+/**
+ * Get user roles from the user object
+ * @param user - The user object
+ * @param roleKey - The key for role(s) - can be string or array of strings
+ * @returns Array of roles
+ */
+function getUserRoles(user, roleKey) {
+    if (roleKey && user[roleKey]) {
+        const val = user[roleKey];
+        return Array.isArray(val) ? val : [val];
+    }
+    return [];
+}
+/**
+ * Initialize the RBAC system with configuration
+ * @param options - RBAC configuration options
+ */
+export const initializeRBAC = (options) => {
+    const store = RBACConfigStore.getInstance();
+    store.initialize(options);
+};
+/**
+ * Check if a user has a specific permission
+ * @param user - The user object to check permissions for
+ * @param permission - The permission to check
+ * @returns boolean indicating if the user has the permission
+ */
+export const hasPermission = (user, permission) => {
+    if (!user)
+        return false;
+    const store = RBACConfigStore.getInstance();
+    const { rbacConfig, allPermissionValue, roleKey } = store.options;
+    const roles = getUserRoles(user, roleKey);
+    if (!roles.length)
+        return false;
+    for (const role of roles) {
+        const rolePermissions = rbacConfig[role];
+        if (!rolePermissions)
+            continue;
+        if (rolePermissions.includes(allPermissionValue) || rolePermissions.includes(permission)) {
+            return true;
+        }
+    }
+    return false;
+};
+/**
+ * Check if a user has any of the specified permissions
+ * @param user - The user object to check permissions for
+ * @param permissions - Array of permissions to check
+ * @returns boolean indicating if the user has any of the permissions
+ */
+export const hasAnyPermission = (user, permissions) => {
+    return permissions.some((permission) => hasPermission(user, permission));
+};
+/**
+ * Check if a user has all of the specified permissions
+ * @param user - The user object to check permissions for
+ * @param permissions - Array of permissions to check
+ * @returns boolean indicating if the user has all of the permissions
+ */
+export const hasAllPermissions = (user, permissions) => {
+    return permissions.every((permission) => hasPermission(user, permission));
+};
+/**
+ * Get all permissions for a user (union of all roles' permissions)
+ * @param user - The user object to get permissions for
+ * @returns Array of permissions the user has
+ */
+export const getUserPermissions = (user) => {
+    if (!user)
+        return [];
+    const store = RBACConfigStore.getInstance();
+    const { rbacConfig, allPermissionValue, allPermissions, roleKey } = store.options;
+    const roles = getUserRoles(user, roleKey);
+    if (!roles.length)
+        return [];
+    let permissionsSet = new Set();
+    for (const role of roles) {
+        const rolePermissions = rbacConfig[role];
+        if (!rolePermissions)
+            continue;
+        if (rolePermissions.includes(allPermissionValue)) {
+            // If any role has ALL, return all permissions
+            return allPermissions;
+        }
+        rolePermissions.forEach((perm) => permissionsSet.add(perm));
+    }
+    return Array.from(permissionsSet);
+};
+/**
+ * Check if a user has a specific role (matches any of their roles)
+ * @param user - The user object to check role for
+ * @param roleName - The role name to check against
+ * @returns boolean indicating if the user has the specified role
+ */
+export const hasRole = (user, roleName) => {
+    if (!user)
+        return false;
+    const store = RBACConfigStore.getInstance();
+    const { roleKey } = store.options;
+    const roles = getUserRoles(user, roleKey);
+    if (!roles.length)
+        return false;
+    return roles.includes(roleName);
+};
+/**
+ * Check if a user has access to IQ Retail
+ */
+export const hasIQRetailAccess = (user) => {
+    if (!user)
+        return false;
+    // Check permission
+    const hasPerm = hasPermission(user, 'export:iqretail');
+    // Check user-level flag
+    return hasPerm && !!user.hasIQRetailAccess;
+};

package/lib/shared/constants/index.d.ts

@@ -0,0 +1,2 @@
+export declare const SECONDS_IN_AN_HOUR: number;
+export declare const SECONDS_IN_DAY: number;

package/lib/shared/constants/index.js

@@ -0,0 +1,2 @@
+export const SECONDS_IN_AN_HOUR = 60 * 60;
+export const SECONDS_IN_DAY = 24 * SECONDS_IN_AN_HOUR;

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

@@ -0,0 +1,4 @@
+export * from './useContainerWidth';
+export * from './useMediaQueries';
+export * from './useSessionTimer';
+export * from './usePagamioTable';

package/lib/shared/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useContainerWidth';
+export * from './useMediaQueries';
+export * from './useSessionTimer';
+export * from './usePagamioTable';

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

@@ -0,0 +1,4 @@
+/**
+ * A unified hook to check if any drawer is open (from either the old or new provider).
+ */
+export declare const useAnyDrawerOpen: () => boolean;

package/lib/shared/hooks/useAnyDrawerOpen.js

@@ -0,0 +1,18 @@
+// Old provider
+import { useFormEngineDrawer, useMultiFormEngineDrawer } from '../../context';
+// New provider
+/**
+ * A unified hook to check if any drawer is open (from either the old or new provider).
+ */
+export const useAnyDrawerOpen = () => {
+    try {
+        const { isOpen: isOldDrawerOpen } = useFormEngineDrawer(); // Check old provider
+        const { isAnyDrawerOpen } = useMultiFormEngineDrawer(); // Check new provider
+        return isOldDrawerOpen || isAnyDrawerOpen();
+    }
+    catch (error) {
+        // If the old provider is not available, only check the new provider
+        const { isAnyDrawerOpen } = useMultiFormEngineDrawer();
+        return isAnyDrawerOpen();
+    }
+};

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

@@ -0,0 +1,2 @@
+import { type RefObject } from 'react';
+export declare function useContainerWidth<T extends HTMLElement>(): [RefObject<T>, number];

package/lib/shared/hooks/useContainerWidth.js

@@ -0,0 +1,18 @@
+import { useEffect, useRef, useState } from 'react';
+export function useContainerWidth() {
+    const containerRef = useRef(null);
+    const [containerWidth, setContainerWidth] = useState(0);
+    useEffect(() => {
+        const updateWidth = () => {
+            if (containerRef.current) {
+                setContainerWidth(containerRef.current.offsetWidth);
+            }
+        };
+        // Measure once on mount
+        updateWidth();
+        // Re-measure on window resize
+        window.addEventListener('resize', updateWidth);
+        return () => window.removeEventListener('resize', updateWidth);
+    }, []);
+    return [containerRef, containerWidth];
+}

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

@@ -0,0 +1,15 @@
+export interface UploadResponse {
+    uploadURL: string;
+    publicURL: string;
+}
+export interface UseImageUploadProps {
+    project: 'vas' | 'stocklink' | 'events';
+    env: 'dev' | 'uat' | 'prod';
+    endpoint?: string;
+}
+export declare const useImageUpload: ({ project, env, endpoint, }: UseImageUploadProps) => {
+    getPresignedUrl: (fileName: string, contentType: string) => Promise<UploadResponse>;
+    uploadFile: (file: File) => Promise<string>;
+    isLoading: boolean;
+    error: Error | null;
+};

package/lib/shared/hooks/useImageUpload.js

@@ -0,0 +1,66 @@
+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', }) => {
+    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, {
+                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,
+            };
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Failed to get upload URL');
+            setError(error);
+            throw error;
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [project, env, endpoint]);
+    const uploadFile = useCallback(async (file) => {
+        const timestamp = Date.now();
+        const randomString = generateSecureRandomString();
+        const extension = file.name.split('.').pop() || 'jpg';
+        const fileName = `${timestamp}_${randomString}.${extension}`;
+        try {
+            const { uploadURL, publicURL } = await getPresignedUrl(fileName, file.type);
+            // Use shared helper for XHR upload
+            await uploadFileWithXHR(uploadURL, file);
+            return publicURL;
+        }
+        catch (err) {
+            const error = err instanceof Error ? err : new Error('Upload failed');
+            setError(error);
+            throw error;
+        }
+    }, [getPresignedUrl, generateSecureRandomString]);
+    return {
+        getPresignedUrl,
+        uploadFile,
+        isLoading,
+        error,
+    };
+};

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

@@ -0,0 +1,5 @@
+export declare function useMediaQueries(): {
+    isXs: boolean;
+    isSm: boolean;
+    isMd: boolean;
+};

package/lib/shared/hooks/useMediaQueries.js

@@ -0,0 +1,35 @@
+import { useMantineTheme } from '@mantine/core';
+import { useMediaQuery } from '@mantine/hooks';
+export function useMediaQueries() {
+    const theme = useMantineTheme();
+    function convertToPx(value) {
+        const breakpointRegex = /^([\d.]+)(em|rem|px)$/;
+        const match = breakpointRegex.exec(value);
+        if (!match) {
+            console.error(`Unsupported unit in breakpoint value: "${value}"`);
+            return NaN;
+        }
+        const [, numericValue, unit] = match;
+        const num = parseFloat(numericValue);
+        switch (unit) {
+            case 'px':
+                return num;
+            case 'em':
+            case 'rem':
+                return num * 16;
+            default:
+                console.error(`Unsupported unit: "${unit}"`);
+                return NaN;
+        }
+    }
+    const xsPx = convertToPx(theme.breakpoints.xs);
+    const smPx = convertToPx(theme.breakpoints.sm);
+    const isXs = useMediaQuery(`(max-width: ${xsPx - 1}px)`);
+    const isSm = useMediaQuery(`(min-width: ${xsPx}px) and (max-width: ${smPx - 1}px)`);
+    const isMd = useMediaQuery(`(min-width: ${smPx}px)`);
+    return {
+        isXs,
+        isSm,
+        isMd,
+    };
+}

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

@@ -0,0 +1,158 @@
+import type { QueryParamConfig, ResponseMapping } from '../../api';
+import type { BaseEntity, CoreTableColumnDef, SortConfig } from '../../pagamio-table/data-table/types';
+/**
+ * Props interface for usePagamioTable hook
+ */
+export interface UsePagamioTableProps<T extends BaseEntity> {
+    /** Function to fetch data from the API */
+    fetchData?: (query?: Record<string, string>, signal?: AbortSignal) => Promise<any>;
+    /** Data for client-side operations */
+    data?: T[];
+    /** Table column definitions */
+    columns: CoreTableColumnDef<T>[];
+    /** Initial filter values */
+    defaultFilters?: Record<string, string>;
+    /** Configuration for response structure mapping */
+    responseMapping?: ResponseMapping;
+    /** Configuration for query parameter formatting */
+    queryParamConfig?: QueryParamConfig;
+    /** Pagination configuration */
+    pagination?: {
+        enabled: boolean;
+        mode: 'client' | 'server';
+        pageSize?: number;
+        pageIndex?: number;
+    };
+    /** Filtering configuration */
+    filtering?: {
+        enabled: boolean;
+        mode: 'client' | 'server';
+        searchMode?: 'client' | 'server';
+    };
+    /** Sorting configuration */
+    sorting?: {
+        enabled: boolean;
+        mode: 'client' | 'server';
+    };
+}
+interface UsePagamioTableReturn<T extends BaseEntity> {
+    data: T[];
+    totalItems: number;
+    loading: boolean;
+    error: string | null;
+    currentPage: number;
+    itemsPerPage: number;
+    searchQuery: string;
+    selectedFilters: Record<string, string>;
+    appliedFilters: Record<string, string>;
+    sortConfig: SortConfig;
+    columns: CoreTableColumnDef<T>[];
+    handleApplyFilters: () => void;
+    handlePageChange: (newPage: number) => void;
+    handlePaginationChange: (newPageIndex: number, newPageSize: number) => void;
+    setSearchQuery: (query: string) => void;
+    setCurrentPage: (page: number) => void;
+    setItemsPerPage: (size: number) => void;
+    handleFilterChange: (columnKey: string, value: string) => void;
+    handleSort: (sortBy: string, sortDir: 'asc' | 'desc') => void;
+    handleClearFilters: () => void;
+    refresh: () => void;
+}
+export declare const springBootMapping: ResponseMapping;
+export declare const arrayResponseMapping: ResponseMapping;
+/**
+ * Custom hook for managing table data with pagination, sorting, and filtering.
+ * Supports both client-side and server-side operations.
+ *
+ * @template T - The type of data items in the table. Must extend `BaseEntity`.
+ *
+ * @param {UsePagamioTableProps<T>} props - Configuration options for the hook.
+ * @param {Function} [props.fetchData] - Function to fetch data from the API (required for server-side operations).
+ * @param {T[]} [props.data] - Initial data for client-side operations.
+ * @param {CoreTableColumnDef<T>[]} props.columns - Column definitions for the table.
+ * @param {Record<string, string>} [props.defaultFilters] - Initial filter values.
+ * @param {ResponseMapping} [props.responseMapping] - Configuration for mapping API response structure.
+ * @param {QueryParamConfig} [props.queryParamConfig] - Configuration for query parameter formatting.
+ * @param {Object} [props.pagination] - Pagination configuration.
+ * @param {boolean} [props.pagination.enabled] - Whether pagination is enabled.
+ * @param {'client' | 'server'} [props.pagination.mode] - Pagination mode ('client' or 'server').
+ * @param {number} [props.pagination.pageSize] - Default page size.
+ * @param {Object} [props.filtering] - Filtering configuration.
+ * @param {boolean} [props.filtering.enabled] - Whether filtering is enabled.
+ * @param {'client' | 'server'} [props.filtering.mode] - Filtering mode ('client' or 'server').
+ * @param {Object} [props.sorting] - Sorting configuration.
+ * @param {boolean} [props.sorting.enabled] - Whether sorting is enabled.
+ * @param {'client' | 'server'} [props.sorting.mode] - Sorting mode ('client' or 'server').
+ *
+ * @returns {Object} - Table state and utility functions.
+ * @returns {T[]} data - The processed and paginated data.
+ * @returns {number} totalItems - Total number of items (for server-side pagination).
+ * @returns {boolean} loading - Whether data is being fetched.
+ * @returns {string | null} error - Error message, if any.
+ * @returns {number} currentPage - Current page index.
+ * @returns {number} itemsPerPage - Number of items per page.
+ * @returns {string} searchQuery - Current search query.
+ * @returns {Record<string, string>} appliedFilters - Currently applied filters.
+ * @returns {Record<string, string>} selectedFilters - Currently selected filters.
+ * @returns {SortConfig} sortConfig - Current sorting configuration.
+ * @returns {CoreTableColumnDef<T>[]} columns - Column definitions.
+ * @returns {Function} handleApplyFilters - Function to apply filters.
+ * @returns {Function} handlePageChange - Function to change the current page.
+ * @returns {Function} handlePaginationChange - Function to change pagination settings.
+ * @returns {Function} setSearchQuery - Function to update the search query.
+ * @returns {Function} setCurrentPage - Function to update the current page.
+ * @returns {Function} setItemsPerPage - Function to update the items per page.
+ * @returns {Function} handleFilterChange - Function to update filters.
+ * @returns {Function} handleSort - Function to update sorting.
+ * @returns {Function} handleClearFilters - Function to clear all filters.
+ * @returns {Function} refresh - Function to manually refresh the table data.
+ */
+export declare const usePagamioTable: <T extends BaseEntity>({ fetchData, data: clientData, columns, defaultFilters, responseMapping, queryParamConfig, pagination, filtering, sorting, }: UsePagamioTableProps<T>) => UsePagamioTableReturn<T>;
+export {};
+/**
+ * Example usage of the `usePagamioTable` hook.
+ *
+ * @example
+ * const table = usePagamioTable<Product>({
+ *   fetchData: fetchProducts,
+ *   columns: columns as unknown as CoreTableColumnDef<Product>[],
+ *   defaultFilters: initialFilters,
+ *   pagination: { enabled: true, mode: "server" },
+ *   filtering: { enabled: true, mode: "server" },
+ *   queryParamConfig: {
+ *     filtering: { searchParam: "name", filterFormat: "flat" },
+ *   },
+ * });
+ *
+ * // Render the table
+ * return (
+ *   <CoreTable
+ *     columns={table.columns}
+ *     data={table.data}
+ *     pagination={{
+ *       enabled: true,
+ *       pageIndex: table.currentPage,
+ *       pageSize: table.itemsPerPage,
+ *       itemsPerPage: table.itemsPerPage,
+ *       itemsPerPageOptions: [10, 25, 50],
+ *       onPageChange: table.handlePageChange,
+ *       onPaginationChange: table.handlePaginationChange,
+ *     }}
+ *     filtering={{
+ *       filters: filters,
+ *       appliedFilters: table.selectedFilters,
+ *       onTableFilter: table.handleFilterChange,
+ *     }}
+ *     sorting={{
+ *       sortConfig: table.sortConfig,
+ *       onSort: table.handleSort,
+ *     }}
+ *     search={{
+ *       enabled: true,
+ *       searchQuery: table.searchQuery,
+ *       onSearch: (e) => table.setSearchQuery(e.target.value),
+ *     }}
+ *     onClearFilters={table.handleClearFilters}
+ *   />
+ * );
+ */