@pagamio/frontend-commons-lib 0.8.175 → 0.8.183

package/lib/translations/components/LocaleSwitcher.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface LocaleSwitcherProps {
+    className?: string;
+    localeNames?: Record<string, string>;
+}
+export declare const LocaleSwitcher: React.FC<LocaleSwitcherProps>;
+export {};

package/lib/translations/components/LocaleSwitcher.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Dropdown } from 'flowbite-react';
+import { useTranslation } from '../hooks';
+export const LocaleSwitcher = ({ className, localeNames = {
+    en: 'English',
+    es: 'Español',
+    fr: 'Français',
+    pt: 'Português',
+}, }) => {
+    const { locale, setLocale, availableLocales } = useTranslation();
+    const options = availableLocales
+        .filter((code) => localeNames[code])
+        .map((code) => ({
+        value: code,
+        label: localeNames[code] ?? code,
+    }));
+    return (_jsx(Dropdown, { style: { backgroundColor: 'white', color: 'white' }, label: localeNames[locale] ?? locale, className: `min-w-[120px] bg-white text-black z-[100] text-sm ${className ?? ''}`, inline: true, children: options.map((option) => (_jsx(Dropdown.Item, { onClick: () => setLocale(option.value), children: option.label }, option.value))) }));
+};

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

@@ -0,0 +1 @@
+export * from './LocaleSwitcher';

package/lib/translations/components/index.js

@@ -0,0 +1 @@
+export * from './LocaleSwitcher';

package/lib/translations/context/TranslationContext.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TranslationContextType, TranslationProviderProps } from '../types';
+export declare const TranslationContext: React.Context<TranslationContextType>;
+export declare const TranslationProvider: React.FC<TranslationProviderProps>;
+export declare const useTranslationContext: () => TranslationContextType;

package/lib/translations/context/TranslationContext.js

@@ -0,0 +1,151 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { loadTranslations } from '../utils';
+const DEFAULT_LOCALE = 'en';
+const LOCALE_STORAGE_KEY = 'pagamio-locale';
+const defaultContextValue = {
+    locale: DEFAULT_LOCALE,
+    setLocale: () => { },
+    t: (key, defaultValue, variables) => defaultValue ?? key,
+    isLoading: true,
+    availableLocales: [DEFAULT_LOCALE],
+};
+export const TranslationContext = createContext(defaultContextValue);
+export const TranslationProvider = ({ children, defaultLocale = DEFAULT_LOCALE, localeData, loadPath, }) => {
+    // Get initial locale from localStorage or use browser's language or fallback to default
+    const getInitialLocale = () => {
+        if (typeof window === 'undefined')
+            return defaultLocale;
+        try {
+            const savedLocale = localStorage.getItem(LOCALE_STORAGE_KEY);
+            if (savedLocale)
+                return savedLocale;
+            // Try to use browser language as fallback
+            const browserLang = navigator.language.split('-')[0];
+            return browserLang || defaultLocale;
+        }
+        catch (e) {
+            // In case localStorage is not available (e.g., incognito mode)
+            console.log('Failed to access localStorage:', e);
+            return defaultLocale;
+        }
+    };
+    const [localeState, setLocaleState] = useState(getInitialLocale);
+    const [translations, setTranslations] = useState({});
+    const [isLoading, setIsLoading] = useState(true);
+    const [availableLocales, setAvailableLocales] = useState([defaultLocale]);
+    // Custom setLocale function that also updates localStorage
+    const setLocale = (newLocale) => {
+        try {
+            localStorage.setItem(LOCALE_STORAGE_KEY, newLocale);
+        }
+        catch (e) {
+            console.warn('Failed to store locale preference:', e);
+        }
+        setLocaleState(newLocale);
+    };
+    useEffect(() => {
+        // If locale data is provided directly, use it
+        if (localeData) {
+            const translationsMap = localeData.reduce((acc, { locale, messages }) => {
+                acc[locale] = messages;
+                return acc;
+            }, {});
+            setTranslations(translationsMap);
+            setAvailableLocales(localeData.map((data) => data.locale));
+            setIsLoading(false);
+        }
+        // Otherwise load from file path if provided
+        else if (loadPath) {
+            setIsLoading(true);
+            loadTranslations(localeState, loadPath)
+                .then(({ messages, availableLocales }) => {
+                setTranslations((prevTranslations) => ({
+                    ...prevTranslations,
+                    [localeState]: messages,
+                }));
+                setAvailableLocales(availableLocales);
+                setIsLoading(false);
+            })
+                .catch((error) => {
+                console.error('Failed to load translations:', error);
+                setIsLoading(false);
+            });
+        }
+        else {
+            setIsLoading(false);
+        }
+    }, [localeData, loadPath]);
+    useEffect(() => {
+        if (localeData && localeState !== defaultLocale) {
+            // Make sure we have the translations for the current locale loaded
+            const localeExists = localeData.some((data) => data.locale === localeState);
+            if (localeExists && !translations[localeState]) {
+                const localeMessages = localeData.find((data) => data.locale === localeState)?.messages;
+                if (localeMessages) {
+                    setTranslations((prev) => ({
+                        ...prev,
+                        [localeState]: localeMessages,
+                    }));
+                }
+            }
+        }
+    }, [localeState, localeData, translations]);
+    // When locale changes, load translations if they're not already loaded
+    useEffect(() => {
+        if (!translations[localeState] && loadPath) {
+            setIsLoading(true);
+            loadTranslations(localeState, loadPath)
+                .then(({ messages }) => {
+                setTranslations((prevTranslations) => ({
+                    ...prevTranslations,
+                    [localeState]: messages,
+                }));
+                setIsLoading(false);
+            })
+                .catch((error) => {
+                console.error('Failed to load translations:', error);
+                setIsLoading(false);
+            });
+        }
+    }, [localeState, loadPath, translations]);
+    const getNestedTranslation = (obj, path) => {
+        let current = obj;
+        for (const segment of path) {
+            if (current[segment] === undefined) {
+                return undefined;
+            }
+            current = current[segment];
+        }
+        return typeof current === 'string' ? current : undefined;
+    };
+    const t = (key, defaultValue, variables) => {
+        const currentTranslations = translations[localeState] ?? {};
+        const keyPath = key.split('.');
+        let result = getNestedTranslation(currentTranslations, keyPath);
+        if (!result) {
+            if (defaultValue)
+                result = defaultValue;
+            else {
+                console.warn(`Translation key not found: ${key}`);
+                result = key;
+            }
+        }
+        // Replace variables in the string if provided
+        if (variables && result) {
+            Object.entries(variables).forEach(([varName, value]) => {
+                result = result.replace(new RegExp(`{${varName}}`, 'g'), String(value));
+            });
+        }
+        return result;
+    };
+    const contextValue = React.useMemo(() => ({
+        locale: localeState,
+        setLocale,
+        t,
+        isLoading,
+        availableLocales,
+    }), [localeState, t, isLoading, availableLocales]);
+    return _jsx(TranslationContext.Provider, { value: contextValue, children: children });
+};
+export const useTranslationContext = () => useContext(TranslationContext);

package/lib/translations/context/index.d.ts

@@ -0,0 +1 @@
+export * from './TranslationContext';

package/lib/translations/context/index.js

@@ -0,0 +1 @@
+export * from './TranslationContext';

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

@@ -0,0 +1,2 @@
+export * from './useTranslation';
+export * from './useLibTranslations';

package/lib/translations/hooks/index.js

@@ -0,0 +1,2 @@
+export * from './useTranslation';
+export * from './useLibTranslations';

package/lib/translations/hooks/useLibTranslations.d.ts

@@ -0,0 +1,7 @@
+import type { LibTranslationKey } from '../types';
+/**
+ * Hook for accessing library-specific translations
+ */
+export declare const useLibTranslations: () => {
+    tLib: (key: LibTranslationKey, defaultValue?: string, variables?: Record<string, any>) => string;
+};

package/lib/translations/hooks/useLibTranslations.js

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react';
+import { useTranslation } from './useTranslation';
+// Default English translations as fallback
+const defaultTranslations = {
+    changePassword: 'Change Password',
+    signOut: 'Sign Out',
+    search: 'Search...',
+    cancel: 'Cancel',
+    submit: 'Submit',
+    save: 'Save',
+};
+/**
+ * Hook for accessing library-specific translations
+ */
+export const useLibTranslations = () => {
+    const { t, locale } = useTranslation();
+    const [libTranslations, setLibTranslations] = useState(defaultTranslations);
+    // Load library translations based on current locale
+    useEffect(() => {
+        // Dynamic import of library locale files based on current language
+        import(`../locales/${locale}.json`)
+            .then((translations) => {
+            setLibTranslations((prev) => ({
+                ...prev,
+                ...translations.default, // Extract keys that match LibTranslationKey
+            }));
+        })
+            .catch((error) => {
+            console.warn(`Failed to load library translations for ${locale}, using fallbacks`, error);
+        });
+    }, [locale]);
+    const tLib = (key, defaultValue, variables) => {
+        // First check in library translations
+        if (libTranslations[key]) {
+            return libTranslations[key];
+        }
+        // Fall back to default library translations
+        if (defaultTranslations[key]) {
+            return defaultTranslations[key];
+        }
+        // As a last resort, try the general translation system
+        // Return the translated text or key as final fallback
+        return t(key, defaultValue, variables);
+    };
+    return { tLib };
+};

package/lib/translations/hooks/useTranslation.d.ts

@@ -0,0 +1,7 @@
+export declare const useTranslation: () => {
+    t: (key: string, defaultValue?: string, variables?: Record<string, any>) => string;
+    locale: string;
+    setLocale: (locale: string) => void;
+    isLoading: boolean;
+    availableLocales: string[];
+};

package/lib/translations/hooks/useTranslation.js

@@ -0,0 +1,11 @@
+import { useTranslationContext } from '../context';
+export const useTranslation = () => {
+    const { t, locale, setLocale, isLoading, availableLocales } = useTranslationContext();
+    return {
+        t,
+        locale,
+        setLocale,
+        isLoading,
+        availableLocales,
+    };
+};

package/lib/translations/index.d.ts

@@ -0,0 +1,91 @@
+export * from './context';
+export * from './hooks';
+export * from './utils';
+export * from './types';
+export * from './components';
+export declare const locales: {
+    en: {
+        sidebar: {
+            toggle: string;
+            mobileAriaLabel: string;
+            searchPlaceholder: string;
+            desktopAriaLabel: string;
+        };
+        theme: {
+            toggleLight: string;
+            toggleDark: string;
+        };
+        userProfile: string;
+        changePassword: string;
+        signOut: string;
+        sessionExpiryModal: {
+            title: string;
+            message: string;
+            dismiss: string;
+            renew: string;
+        };
+    };
+    es: {
+        sidebar: {
+            toggle: string;
+            mobileAriaLabel: string;
+            searchPlaceholder: string;
+            desktopAriaLabel: string;
+        };
+        theme: {
+            toggleLight: string;
+            toggleDark: string;
+        };
+        userProfile: string;
+        changePassword: string;
+        signOut: string;
+        sessionExpiryModal: {
+            title: string;
+            message: string;
+            dismiss: string;
+            renew: string;
+        };
+    };
+    fr: {
+        sidebar: {
+            toggle: string;
+            mobileAriaLabel: string;
+            searchPlaceholder: string;
+            desktopAriaLabel: string;
+        };
+        theme: {
+            toggleLight: string;
+            toggleDark: string;
+        };
+        userProfile: string;
+        changePassword: string;
+        signOut: string;
+        sessionExpiryModal: {
+            title: string;
+            message: string;
+            dismiss: string;
+            renew: string;
+        };
+    };
+    pt: {
+        sidebar: {
+            toggle: string;
+            mobileAriaLabel: string;
+            searchPlaceholder: string;
+            desktopAriaLabel: string;
+        };
+        theme: {
+            toggleLight: string;
+            toggleDark: string;
+        };
+        userProfile: string;
+        changePassword: string;
+        signOut: string;
+        sessionExpiryModal: {
+            title: string;
+            message: string;
+            dismiss: string;
+            renew: string;
+        };
+    };
+};

package/lib/translations/index.js

@@ -0,0 +1,11 @@
+// Export locale files
+import en from './locales/en.json';
+import es from './locales/es.json';
+import fr from './locales/fr.json';
+import pt from './locales/pt.json';
+export * from './context';
+export * from './hooks';
+export * from './utils';
+export * from './types';
+export * from './components';
+export const locales = { en, es, fr, pt };

package/lib/translations/locales/en.json

@@ -0,0 +1,21 @@
+{
+    "sidebar": {
+        "toggle": "Toggle sidebar",
+        "mobileAriaLabel": "Sidebar with multi-level dropdown example",
+        "searchPlaceholder": "Search",
+        "desktopAriaLabel": "Sidebar with multi-level dropdown example"
+    },
+    "theme": {
+        "toggleLight": "Toggle light mode",
+        "toggleDark": "Toggle dark mode"
+    },
+    "userProfile": "User Profile",
+    "changePassword": "Change Password",
+    "signOut": "Sign Out",
+    "sessionExpiryModal": {
+        "title": "Session Expiring Soon",
+        "message": "Your session will expire in {seconds} seconds. Please save your work or renew your session.",
+        "dismiss": "Dismiss",
+        "renew": "Renew Session"
+    }
+}

package/lib/translations/locales/es.json

@@ -0,0 +1,21 @@
+{
+    "sidebar": {
+        "toggle": "Alternar barra lateral",
+        "mobileAriaLabel": "Barra lateral con ejemplo de menú desplegable multinivel",
+        "searchPlaceholder": "Buscar",
+        "desktopAriaLabel": "Barra lateral con ejemplo de menú desplegable multinivel"
+    },
+    "theme": {
+        "toggleLight": "Cambiar a modo claro",
+        "toggleDark": "Cambiar a modo oscuro"
+    },
+    "userProfile": "Perfil de Usuario",
+    "changePassword": "Cambiar Contraseña",
+    "signOut": "Cerrar Sesión",
+    "sessionExpiryModal": {
+        "title": "Sesión a punto de expirar",
+        "message": "Tu sesión expirará en {seconds} segundos. Por favor, guarda tu trabajo o renueva tu sesión.",
+        "dismiss": "Descartar",
+        "renew": "Renovar Sesión"
+    }
+}

package/lib/translations/locales/fr.json

@@ -0,0 +1,21 @@
+{
+    "sidebar": {
+        "toggle": "Alternar barra lateral",
+        "mobileAriaLabel": "Barra lateral com exemplo de menu suspenso multinível",
+        "searchPlaceholder": "Buscar",
+        "desktopAriaLabel": "Barra lateral com exemplo de menu suspenso multinível"
+    },
+    "theme": {
+        "toggleLight": "Ativar modo claro",
+        "toggleDark": "Ativar modo escuro"
+    },
+    "userProfile": "Perfil do Usuário",
+    "changePassword": "Alterar Senha",
+    "signOut": "Sair",
+    "sessionExpiryModal": {
+        "title": "Sessão Expirando em Breve",
+        "message": "Sua sessão expirará em {seconds} segundos. Por favor, salve seu trabalho ou renove sua sessão.",
+        "dismiss": "Dispensar",
+        "renew": "Renovar Sessão"
+    }
+}

package/lib/translations/locales/pt.json

@@ -0,0 +1,21 @@
+{
+    "sidebar": {
+        "toggle": "Toggle sidebar",
+        "mobileAriaLabel": "Sidebar with multi-level dropdown example",
+        "searchPlaceholder": "Search",
+        "desktopAriaLabel": "Sidebar with multi-level dropdown example"
+    },
+    "theme": {
+        "toggleLight": "Toggle light mode",
+        "toggleDark": "Toggle dark mode"
+    },
+    "userProfile": "User Profile",
+    "changePassword": "Change Password",
+    "signOut": "Sign Out",
+    "sessionExpiryModal": {
+        "title": "Session Expiring Soon",
+        "message": "Your session will expire in {seconds} seconds. Please save your work or renew your session.",
+        "dismiss": "Dismiss",
+        "renew": "Renew Session"
+    }
+}

package/lib/translations/types/index.d.ts

@@ -0,0 +1,24 @@
+import type React from 'react';
+export interface TranslationDictionary {
+    [key: string]: string | TranslationDictionary;
+}
+export interface LocaleData {
+    locale: string;
+    messages: TranslationDictionary;
+}
+export interface TranslationContextType {
+    locale: string;
+    setLocale: (locale: string) => void;
+    t: (key: string, defaultValue?: string, variables?: Record<string, any>) => string;
+    isLoading: boolean;
+    availableLocales: string[];
+}
+export interface TranslationProviderProps {
+    children: React.ReactNode;
+    defaultLocale?: string;
+    localeData?: LocaleData[];
+    loadPath?: string;
+}
+export type LibTranslationKey = 'changePassword' | 'signOut' | 'search' | 'cancel' | 'submit' | 'save' | (string & {
+    __brand?: 'LibTranslationKey';
+});

package/lib/translations/types/index.js

@@ -0,0 +1 @@
+export {};

package/lib/translations/utils/index.d.ts

@@ -0,0 +1,6 @@
+import type { TranslationDictionary } from '../types';
+export declare const loadTranslations: (locale: string, loadPath: string) => Promise<{
+    messages: TranslationDictionary;
+    availableLocales: string[];
+}>;
+export declare const detectBrowserLocale: () => string;

package/lib/translations/utils/index.js

@@ -0,0 +1,25 @@
+export const loadTranslations = async (locale, loadPath) => {
+    try {
+        // Replace this with your actual loading logic
+        const response = await fetch(`${loadPath}/${locale}.json`);
+        if (!response.ok) {
+            throw new Error(`Failed to load translations for locale ${locale}`);
+        }
+        const messages = await response.json();
+        // Get available locales by listing directory or from an endpoint
+        // This is just a placeholder - implement based on your needs
+        const localesResponse = await fetch(`${loadPath}/locales.json`);
+        const availableLocales = localesResponse.ok ? await localesResponse.json() : [locale];
+        return { messages, availableLocales };
+    }
+    catch (error) {
+        console.error(`Error loading translations for ${locale}:`, error);
+        return { messages: {}, availableLocales: [locale] };
+    }
+};
+export const detectBrowserLocale = () => {
+    if (typeof window === 'undefined') {
+        return 'en'; // Default for SSR
+    }
+    return (navigator.language ?? navigator.browserLanguage ?? navigator.userLanguage ?? 'en').split('-')[0];
+};

package/package.json

@@ -1,7 +1,15 @@
 {
   "name": "@pagamio/frontend-commons-lib",
   "description": "Pagamio library for Frontend reusable components like the form engine and table container",
-  "version": "0.8.175",
+  "version": "0.8.183",
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/PAGAMIO/pagamio-frontend-commons-lib.git"
+  },
   "private": false,
   "main": "lib/index.js",
   "module": "lib/index.js",