@digitaldefiance/express-suite-react-components 2.9.7 → 2.9.9

package/src/contexts/I18nProvider.tsx

@@ -1,85 +0,0 @@
-import {
-  GlobalActiveContext,
-  IActiveContext,
-  LanguageRegistry,
-  I18nEngine,
-  CoreLanguageCode,
-} 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

@@ -1,310 +0,0 @@
-// src/app/menuContext.tsx
-import { IRoleDTO, SuiteCoreComponentId } from '@digitaldefiance/suite-core-lib';
-import { 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 { useAuth } from './AuthProvider';
-import { useTheme } from './ThemeProvider';
-import { MenuType, MenuTypes } from '../types/MenuType';
-import { useI18n } from './I18nProvider';
-import { IMenuOption } from '../interfaces/IMenuOption';
-import { IMenuConfig } from '../interfaces/IMenuConfig';
-import { useUserSettings } from '../hooks';
-import { useSuiteConfig } from './SuiteConfigProvider';
-import { createAuthenticatedApiClient } from '../services';
-
-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]);
-
-  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

@@ -1,93 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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/hooks/useBackupCodes.ts

@@ -1,85 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { createAuthenticatedApiClient } from '../services';
-import { useSuiteConfig } from '../contexts';
-import { SuiteCoreStringKey, TranslatableSuiteError } from '@digitaldefiance/suite-core-lib';
-
-export interface UseBackupCodesOptions {
-  initialCodeCount?: number | null;
-}
-
-export interface UseBackupCodesResult {
-  backupCodesRemaining: number | null;
-  isLoading: boolean;
-  error: Error | null;
-  generateBackupCodes: (password?: string, mnemonic?: string) => Promise<{
-    message: string;
-    backupCodes: string[];
-  }>;
-  refreshCodeCount: () => Promise<void>;
-}
-
-export const useBackupCodes = (
-  options: UseBackupCodesOptions = {}
-): UseBackupCodesResult => {
-  const { baseUrl } = useSuiteConfig();
-  const [backupCodesRemaining, setBackupCodesRemaining] = useState<number | null>(
-    options.initialCodeCount ?? null
-  );
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-  const requestedOnMountRef = useRef(false);
-  const api = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
-
-  const refreshCodeCount = useCallback(async () => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await api.get('/user/backup-codes');
-      if (result?.data?.codeCount !== undefined) {
-        setBackupCodesRemaining(result.data.codeCount);
-      }
-    } catch (err) {
-      setError(err instanceof Error ? err : new TranslatableSuiteError(SuiteCoreStringKey.BackupCodes_FailedToFetch));
-      setBackupCodesRemaining(0);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [api]);
-
-  useEffect(() => {
-    if (requestedOnMountRef.current) return;
-    if (backupCodesRemaining !== null) return;
-
-    requestedOnMountRef.current = true;
-    refreshCodeCount();
-  }, [backupCodesRemaining, refreshCodeCount]);
-
-  const generateBackupCodes = async (password?: string, mnemonic?: string) => {
-    setIsLoading(true);
-    setError(null);
-    try {
-      const result = await api.post('/user/backup-codes', {
-        ...(password ? { password } : {}),
-        ...(mnemonic ? { mnemonic } : {}),
-      });
-      return {
-        message: result.data.message,
-        backupCodes: result.data.backupCodes,
-      };
-    } catch (err) {
-      const error = err instanceof Error ? err : new TranslatableSuiteError(SuiteCoreStringKey.BackupCodes_FailedToGenerate);
-      setError(error);
-      throw error;
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return {
-    backupCodesRemaining,
-    isLoading,
-    error,
-    generateBackupCodes,
-    refreshCodeCount,
-  };
-};

package/src/hooks/useEmailVerification.ts

@@ -1,39 +0,0 @@
-import { useMemo, useState } from 'react';
-import { createAuthenticatedApiClient } from '../services';
-import { useSuiteConfig } from '../contexts';
-import { getSuiteCoreTranslation, SuiteCoreStringKey } from '@digitaldefiance/suite-core-lib';
-
-export interface UseEmailVerificationResult {
-  isVerifying: boolean;
-  error: Error | null;
-  verifyEmail: (token: string) => Promise<{ success: boolean; message?: string }>;
-}
-
-export const useEmailVerification = (): UseEmailVerificationResult => {
-  const { baseUrl } = useSuiteConfig();
-  const api = useMemo(() => createAuthenticatedApiClient(baseUrl), [baseUrl]);
-  const [isVerifying, setIsVerifying] = useState(false);
-  const [error, setError] = useState<Error | null>(null);
-
-  const verifyEmail = async (verificationToken: string) => {
-    setIsVerifying(true);
-    setError(null);
-    try {
-      const result = await api.post('/verify-email', { token: verificationToken });
-      return { success: true, message: result.data.message };
-    } catch (err: any) {
-      const errorMessage = err.response?.data?.message || getSuiteCoreTranslation(SuiteCoreStringKey.Error_VerificationFailed);
-      const error = new Error(errorMessage);
-      setError(error);
-      return { success: false, message: errorMessage };
-    } finally {
-      setIsVerifying(false);
-    }
-  };
-
-  return {
-    isVerifying,
-    error,
-    verifyEmail,
-  };
-};