@digitaldefiance/express-suite-react-components 2.9.37 → 2.9.38

package/src/contexts/I18nProvider.tsx

@@ -0,0 +1,114 @@
+import {
+  GlobalActiveContext,
+  I18nEngine,
+  IActiveContext,
+  LanguageRegistry,
+} from '@digitaldefiance/i18n-lib';
+import {
+  createContext,
+  FC,
+  ReactNode,
+  useCallback,
+  useContext,
+  useState,
+} from 'react';
+
+export interface I18nProviderProps {
+  children: ReactNode;
+  i18nEngine: I18nEngine;
+  onLanguageChange?: (language: string) => Promise<void>;
+}
+
+export interface I18nContextType {
+  t: (
+    key: string,
+    vars?: Record<string, string | number>,
+    language?: string
+  ) => string;
+  tComponent: <TStringKey extends string>(
+    componentId: string,
+    stringKey: TStringKey,
+    vars?: Record<string, string | number>,
+    language?: string
+  ) => string;
+  changeLanguage: (language: string) => void;
+  currentLanguage: string;
+}
+
+const I18nContext = createContext<I18nContextType | undefined>(undefined);
+
+export const I18nProvider: FC<I18nProviderProps> = ({
+  children,
+  i18nEngine,
+  onLanguageChange,
+}) => {
+  const context = GlobalActiveContext.getInstance<
+    string,
+    IActiveContext<string>
+  >();
+  const [currentLanguage, setCurrentLanguage] = useState<string>(
+    context.userLanguage
+  );
+
+  const changeLanguage = useCallback(
+    async (language: string) => {
+      const languageDetails = LanguageRegistry.getLanguageByCode(language);
+      if (language && languageDetails) {
+        context.userLanguage = language;
+        i18nEngine.setLanguage(language);
+        localStorage.setItem('language', languageDetails.name);
+        localStorage.setItem('languageCode', language);
+        setCurrentLanguage(language);
+        if (onLanguageChange) {
+          await onLanguageChange(language);
+        }
+      }
+    },
+    [onLanguageChange, i18nEngine, context]
+  );
+
+  const t = useCallback(
+    (
+      key: string,
+      vars?: Record<string, string | number>,
+      language?: string
+    ) => {
+      return i18nEngine.t(key, vars, language ?? currentLanguage);
+    },
+    [i18nEngine, currentLanguage]
+  );
+
+  const tComponent = useCallback(
+    <TStringKey extends string>(
+      componentId: string,
+      stringKey: TStringKey,
+      vars?: Record<string, string | number>,
+      language?: string
+    ): string => {
+      return i18nEngine.translate(
+        componentId,
+        stringKey,
+        vars,
+        language ?? currentLanguage
+      );
+    },
+    [currentLanguage, i18nEngine]
+  );
+
+  const value = {
+    t,
+    tComponent,
+    changeLanguage,
+    currentLanguage,
+  };
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+};
+
+export const useI18n = () => {
+  const context = useContext(I18nContext);
+  if (context === undefined) {
+    throw new Error('useI18n must be used within an I18nProvider');
+  }
+  return context;
+};

package/src/contexts/MenuContext.tsx

@@ -0,0 +1,398 @@
+// src/app/menuContext.tsx
+import {
+  IRoleDTO,
+  SuiteCoreComponentId,
+  SuiteCoreStringKey,
+} from '@digitaldefiance/suite-core-lib';
+import {
+  AccountCircle,
+  Autorenew as AutorenewIcon,
+  Brightness4,
+  Brightness7,
+  Dashboard as DashboardIcon,
+  Key as KeyIcon,
+  LockOpen as LockOpenIcon,
+  LockReset as LockResetIcon,
+  Login as LoginIcon,
+  ExitToApp as LogoutIcon,
+  PersonAdd as PersonAddIcon,
+  Settings,
+} from '@mui/icons-material';
+import {
+  FC,
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useUserSettings } from '../hooks';
+import { IMenuConfig } from '../interfaces/IMenuConfig';
+import { IMenuOption } from '../interfaces/IMenuOption';
+import { createAuthenticatedApiClient } from '../services';
+import { MenuType, MenuTypes } from '../types/MenuType';
+import { useAuth } from './AuthProvider';
+import { useI18n } from './I18nProvider';
+import { useSuiteConfig } from './SuiteConfigProvider';
+import { useTheme } from './ThemeProvider';
+
+interface MenuProviderProps {
+  children: ReactNode;
+  menuConfigs?: IMenuConfig[];
+  enableBackupCodes?: boolean;
+}
+
+interface MenuContextType {
+  menuOptions: IMenuOption[];
+  getMenuOptions: (
+    menuType: MenuType,
+    includeDividers: boolean
+  ) => IMenuOption[];
+  registerMenuOption: (option: IMenuOption) => () => void;
+  registerMenuOptions: (options: IMenuOption[]) => () => void;
+  getTopMenus: () => Array<IMenuConfig>;
+}
+
+const MenuContext = createContext<MenuContextType | undefined>(undefined);
+
+export const MenuProvider: FC<MenuProviderProps> = ({
+  children,
+  menuConfigs = [],
+  enableBackupCodes = true,
+}) => {
+  const {
+    userData: user,
+    isAuthenticated,
+    mnemonic,
+    clearMnemonic,
+    wallet,
+    clearWallet,
+  } = useAuth();
+  const { mode: colorMode } = useTheme();
+  const registeredMenuOptions = useRef(new Set<() => void>());
+  const [registeredOptions, setRegisteredOptions] = useState<
+    Map<string, IMenuOption>
+  >(new Map<string, IMenuOption>());
+  const { tComponent } = useI18n();
+  const { baseUrl } = useSuiteConfig();
+  const authenticatedApi = useMemo(
+    () => createAuthenticatedApiClient(baseUrl),
+    [baseUrl]
+  );
+  const { toggleColorMode } = useUserSettings({
+    authenticatedApi,
+    isAuthenticated,
+  });
+
+  const registerMenuOption = useCallback((option: IMenuOption) => {
+    const unregister = () => {
+      setRegisteredOptions((prev) => {
+        const newMap = new Map(prev);
+        newMap.delete(option.id);
+        return newMap;
+      });
+      registeredMenuOptions.current.delete(unregister);
+    };
+
+    setRegisteredOptions((prev) => {
+      const newMap = new Map(prev);
+      newMap.set(option.id, option);
+      return newMap;
+    });
+    registeredMenuOptions.current.add(unregister);
+
+    return unregister;
+  }, []);
+
+  const registerMenuOptions = useCallback(
+    (options: IMenuOption[]) => {
+      const unregisterFunctions = options.map(registerMenuOption);
+      return () => unregisterFunctions.forEach((f) => f());
+    },
+    [registerMenuOption]
+  );
+
+  const menuOptions = useMemo(() => {
+    const isUserRestricted = () => {
+      return user?.roles?.some((role: IRoleDTO) => role.child) ?? false;
+    };
+    let index = 0;
+    const baseOptions: IMenuOption[] = [
+      {
+        id: 'dashboard',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Common_Dashboard
+        ),
+        icon: <DashboardIcon />,
+        link: '/dashboard',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'user-divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: false,
+      },
+      {
+        id: 'logout',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.LogoutButton
+        ),
+        icon: <LogoutIcon />,
+        link: '/logout',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'login',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Login_LoginButton
+        ),
+        icon: <LoginIcon />,
+        link: '/login',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'register',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.RegisterButton
+        ),
+        icon: <PersonAddIcon />,
+        link: '/register',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'forgot-password',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.ForgotPassword_Title
+        ),
+        icon: <LockOpenIcon />,
+        link: '/forgot-password',
+        requiresAuth: false,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      {
+        id: 'change-password',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Common_ChangePassword
+        ),
+        icon: <LockResetIcon />,
+        link: '/change-password',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+      ...(enableBackupCodes
+        ? [
+            {
+              id: 'backup-code',
+              label: tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.BackupCodeRecovery_Title
+              ),
+              icon: <KeyIcon />,
+              link: '/backup-code',
+              requiresAuth: false,
+              includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+              index: index++,
+            },
+            {
+              id: 'backup-codes',
+              label: tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.BackupCodeRecovery_GenerateNewCodes
+              ),
+              icon: <AutorenewIcon />,
+              link: '/backup-codes',
+              requiresAuth: true,
+              includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+              index: index++,
+            },
+          ]
+        : []),
+      {
+        id: 'divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: false,
+      },
+      {
+        id: 'clear-mnemonic',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Common_ClearMnemonic
+        ),
+        action: clearMnemonic,
+        icon: <KeyIcon />,
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+        filter: () => !!mnemonic,
+      },
+      {
+        id: 'clear-wallet',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Common_ClearWallet
+        ),
+        action: clearWallet,
+        icon: <KeyIcon />,
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+        filter: () => !!wallet,
+      },
+      ...(isUserRestricted() ? [] : []),
+      {
+        id: 'color-divider',
+        label: '',
+        divider: true,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: undefined,
+      },
+      {
+        id: 'theme-toggle',
+        label:
+          colorMode === 'dark'
+            ? tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.Common_ThemeToggle_Light
+              )
+            : tComponent<SuiteCoreStringKey>(
+                SuiteCoreComponentId,
+                SuiteCoreStringKey.Common_ThemeToggle_Dark
+              ),
+        icon: colorMode === 'dark' ? <Brightness7 /> : <Brightness4 />,
+        includeOnMenus: [MenuTypes.SideMenu],
+        index: index++,
+        requiresAuth: undefined,
+        action: toggleColorMode,
+      },
+      {
+        id: 'user-settings',
+        label: tComponent<SuiteCoreStringKey>(
+          SuiteCoreComponentId,
+          SuiteCoreStringKey.Settings_Title
+        ),
+        icon: <Settings />,
+        link: '/user-settings',
+        requiresAuth: true,
+        includeOnMenus: [MenuTypes.UserMenu, MenuTypes.SideMenu],
+        index: index++,
+      },
+    ];
+
+    const allOptions = [...baseOptions, ...registeredOptions.values()];
+    return allOptions.sort((a, b) => a.index - b.index);
+  }, [
+    tComponent,
+    registeredOptions,
+    user?.roles,
+    colorMode,
+    toggleColorMode,
+    clearMnemonic,
+    clearWallet,
+    mnemonic,
+    wallet,
+    enableBackupCodes,
+  ]);
+
+  const getMenuOptions = useCallback(
+    (menuType: MenuType, includeDividers: boolean) => {
+      const MenuFilter = (o: IMenuOption) => {
+        // Apply the custom filter first
+        let customFilterPasses = true;
+        if (o.filter !== undefined) {
+          customFilterPasses = o.filter(o);
+        }
+        if (!customFilterPasses) return false;
+
+        if (o.divider === true && !includeDividers) return false;
+
+        return (
+          o.includeOnMenus.includes(menuType) &&
+          (o.requiresAuth === undefined || o.requiresAuth === isAuthenticated)
+        );
+      };
+
+      return menuOptions.filter(MenuFilter);
+    },
+    [isAuthenticated, menuOptions]
+  );
+
+  useEffect(() => {
+    if (menuConfigs.length > 0) {
+      return registerMenuOptions(
+        menuConfigs.flatMap((config) => config.options)
+      );
+    }
+    return undefined;
+  }, [menuConfigs, registerMenuOptions]);
+
+  const getTopMenus = useCallback(() => {
+    const menus: Array<IMenuConfig & { isUserMenu?: boolean }> = [
+      ...menuConfigs.map((config) => ({ ...config, isUserMenu: false })),
+      {
+        menuType: MenuTypes.UserMenu,
+        menuIcon: <AccountCircle />,
+        priority: 0,
+        options: [],
+        isUserMenu: true,
+      },
+    ];
+    return menus.sort((a, b) => (b.priority ?? 0) - (a.priority ?? 0));
+  }, [menuConfigs]);
+
+  const contextValue = useMemo(() => {
+    return {
+      menuOptions: menuOptions,
+      getMenuOptions: getMenuOptions,
+      registerMenuOption: registerMenuOption,
+      registerMenuOptions: registerMenuOptions,
+      getTopMenus: getTopMenus,
+    };
+  }, [
+    menuOptions,
+    getMenuOptions,
+    registerMenuOption,
+    registerMenuOptions,
+    getTopMenus,
+  ]);
+
+  const memoizedChildren = useMemo(() => children, [children]);
+  return (
+    <MenuContext.Provider value={contextValue}>
+      {memoizedChildren}
+    </MenuContext.Provider>
+  );
+};
+
+export const useMenu = (): MenuContextType => {
+  const context = useContext(MenuContext);
+  if (context === undefined) {
+    throw new Error('useMenu must be used within a MenuProvider');
+  }
+  return context;
+};

package/src/contexts/SuiteConfigProvider.tsx

@@ -0,0 +1,93 @@
+import { createContext, ReactNode, useContext } from 'react';
+
+export interface SuiteConfigRoutes {
+  dashboard?: string;
+  login?: string;
+  register?: string;
+  verifyEmail?: string;
+  forgotPassword?: string;
+  resetPassword?: string;
+  settings?: string;
+}
+
+export interface SuiteConfigContextData {
+  /**
+   * Base URL for API calls
+   */
+  baseUrl: string;
+  
+  /**
+   * Application routes for navigation
+   */
+  routes: SuiteConfigRoutes;
+  
+  /**
+   * Available languages for the application
+   */
+  languages: Array<{ code: string; label: string }>;
+  
+  /**
+   * Available timezones
+   */
+  timezones?: string[];
+}
+
+const defaultRoutes: SuiteConfigRoutes = {
+  dashboard: '/dashboard',
+  login: '/login',
+  register: '/register',
+  verifyEmail: '/verify-email',
+  forgotPassword: '/forgot-password',
+  resetPassword: '/reset-password',
+  settings: '/settings',
+};
+
+const defaultLanguages = [
+  { code: 'en-US', label: 'English (US)' },
+  { code: 'en-GB', label: 'English (UK)' },
+  { code: 'es-ES', label: 'Español' },
+  { code: 'fr-FR', label: 'Français' },
+  { code: 'de-DE', label: 'Deutsch' },
+  { code: 'ja', label: '日本語' },
+  { code: 'zh-CN', label: '中文 (简体)' },
+  { code: 'uk', label: 'Українська' },
+];
+
+const SuiteConfigContext = createContext<SuiteConfigContextData | undefined>(undefined);
+
+export interface SuiteConfigProviderProps {
+  children: ReactNode;
+  baseUrl: string;
+  routes?: Partial<SuiteConfigRoutes>;
+  languages?: Array<{ code: string; label: string }>;
+  timezones?: string[];
+}
+
+export const SuiteConfigProvider = ({
+  children,
+  baseUrl,
+  routes = {},
+  languages = defaultLanguages,
+  timezones,
+}: SuiteConfigProviderProps) => {
+  const value: SuiteConfigContextData = {
+    baseUrl,
+    routes: { ...defaultRoutes, ...routes },
+    languages,
+    timezones,
+  };
+
+  return (
+    <SuiteConfigContext.Provider value={value}>
+      {children}
+    </SuiteConfigContext.Provider>
+  );
+};
+
+export const useSuiteConfig = (): SuiteConfigContextData => {
+  const context = useContext(SuiteConfigContext);
+  if (!context) {
+    throw new Error('useSuiteConfig must be used within a SuiteConfigProvider');
+  }
+  return context;
+};

package/src/contexts/ThemeProvider.tsx

@@ -0,0 +1,67 @@
+import { Brightness4, Brightness7 } from '@mui/icons-material';
+import {
+  IconButton,
+  ThemeProvider as MuiThemeProvider,
+  PaletteMode,
+  createTheme,
+  Theme,
+} from '@mui/material';
+import { FC, ReactNode, createContext, useContext, useMemo, useState } from 'react';
+
+export interface ThemeContextType {
+  toggleColorMode: () => void;
+  setColorMode: (mode: PaletteMode) => void;
+  mode: PaletteMode;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within an AppThemeProvider');
+  }
+  return context;
+};
+
+export interface AppThemeProviderProps {
+  children: ReactNode;
+  customTheme?: (mode: PaletteMode) => Theme;
+}
+
+export const AppThemeProvider: FC<AppThemeProviderProps> = ({ children, customTheme }) => {
+  const [mode, setMode] = useState<PaletteMode>('light');
+
+  const colorMode = useMemo(
+    () => ({
+      toggleColorMode: () => {
+        setMode((prevMode) => (prevMode === 'light' ? 'dark' : 'light'));
+      },
+      setColorMode: (newMode: PaletteMode) => {
+        setMode(newMode);
+      },
+      mode,
+    }),
+    [mode]
+  );
+
+  const theme = useMemo(
+    () => (customTheme ? customTheme(mode) : createTheme({ palette: { mode } })),
+    [mode, customTheme]
+  );
+
+  return (
+    <ThemeContext.Provider value={colorMode}>
+      <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+    </ThemeContext.Provider>
+  );
+};
+
+export const ThemeToggleButton: FC = () => {
+  const { mode, toggleColorMode } = useTheme();
+  return (
+    <IconButton onClick={toggleColorMode} color="inherit">
+      {mode === 'dark' ? <Brightness7 /> : <Brightness4 />}
+    </IconButton>
+  );
+};

package/src/contexts/{index.d.ts → index.ts}

@@ -3,4 +3,3 @@ export * from './MenuContext';
 export * from './I18nProvider';
 export * from './ThemeProvider';
 export * from './SuiteConfigProvider';
-//# sourceMappingURL=index.d.ts.map

package/src/hooks/{index.d.ts → index.ts}

@@ -3,4 +3,3 @@ export * from './useLocalStorage';
 export * from './useBackupCodes';
 export * from './useUserSettings';
 export * from './useEmailVerification';
-//# sourceMappingURL=index.d.ts.map