@digitaldefiance/express-suite-react-components 5.0.2 → 5.0.3

package/src/components/ResetPasswordForm.tsx

@@ -1,247 +0,0 @@
-import {
-  Constants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-  SuiteCoreStringKeyValue,
-} from '@digitaldefiance/suite-core-lib';
-import {
-  Alert,
-  Box,
-  Button,
-  Container,
-  TextField,
-  Typography,
-} from '@mui/material';
-import { useFormik } from 'formik';
-import { FC, useState } from 'react';
-import * as Yup from 'yup';
-import { useI18n } from '../contexts';
-
-export interface ResetPasswordFormValues {
-  password: string;
-  confirmPassword: string;
-}
-
-export interface ResetPasswordFormProps {
-  token: string | null;
-  onSubmit: (token: string, password: string) => Promise<void>;
-  passwordValidation?: Yup.StringSchema;
-  confirmPasswordValidation?: Yup.StringSchema;
-  labels?: {
-    title?: string;
-    password?: string;
-    confirmPassword?: string;
-    resetButton?: string;
-    successMessage?: string;
-    invalidToken?: string;
-  };
-}
-
-export const ResetPasswordForm: FC<ResetPasswordFormProps> = ({
-  token,
-  onSubmit,
-  passwordValidation,
-  confirmPasswordValidation,
-  labels = {},
-}) => {
-  const { tComponent } = useI18n();
-  const [success, setSuccess] = useState(false);
-  const [apiError, setApiError] = useState<string>('');
-
-  const validation = {
-    password:
-      passwordValidation ||
-      Yup.string()
-        .min(
-          Constants.PasswordMinLength,
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMinLengthTemplate
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-    confirmPassword:
-      confirmPasswordValidation ||
-      Yup.string()
-        .oneOf(
-          [Yup.ref('password')],
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_PasswordMatch
-          )
-        )
-        .required(
-          tComponent<SuiteCoreStringKeyValue>(
-            SuiteCoreComponentId,
-            SuiteCoreStringKey.Validation_Required
-          )
-        ),
-  };
-
-  const translatedLabels = {
-    title:
-      labels.title ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.PasswordReset_Title
-      ),
-    password:
-      labels.password ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_NewPassword
-      ),
-    confirmPassword:
-      labels.confirmPassword ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.Common_ConfirmNewPassword
-      ),
-    resetButton:
-      labels.resetButton ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.PasswordReset_Button
-      ),
-    successMessage:
-      labels.successMessage ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.PasswordReset_Success
-      ),
-    invalidToken:
-      labels.invalidToken ||
-      tComponent<SuiteCoreStringKeyValue>(
-        SuiteCoreComponentId,
-        SuiteCoreStringKey.ForgotPassword_InvalidToken
-      ),
-  };
-
-  const formik = useFormik<ResetPasswordFormValues>({
-    initialValues: {
-      password: '',
-      confirmPassword: '',
-    },
-    validationSchema: Yup.object({
-      password: validation.password,
-      confirmPassword: validation.confirmPassword,
-    }),
-    onSubmit: async (values) => {
-      if (!token) {
-        setApiError(translatedLabels.invalidToken);
-        return;
-      }
-
-      try {
-        await onSubmit(token, values.password);
-        setSuccess(true);
-        setApiError('');
-      } catch (error: unknown) {
-        const err = error as { response?: { data?: { message?: string } } };
-        setApiError(
-          err.response?.data?.message ||
-            tComponent<SuiteCoreStringKeyValue>(
-              SuiteCoreComponentId,
-              SuiteCoreStringKey.Error_PasswordChange
-            )
-        );
-        setSuccess(false);
-      }
-    },
-  });
-
-  if (!token) {
-    return (
-      <Container maxWidth="sm">
-        <Alert severity="error" sx={{ mt: 4 }}>
-          {translatedLabels.invalidToken}
-        </Alert>
-      </Container>
-    );
-  }
-
-  return (
-    <Container maxWidth="sm">
-      <Box
-        sx={{
-          mt: 8,
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-        }}
-      >
-        <Typography variant="h4" component="h1" gutterBottom>
-          {translatedLabels.title}
-        </Typography>
-
-        <Box
-          component="form"
-          onSubmit={formik.handleSubmit}
-          sx={{ mt: 1, width: '100%' }}
-        >
-          <TextField
-            fullWidth
-            id="password"
-            name="password"
-            label={translatedLabels.password}
-            type="password"
-            value={formik.values.password}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(formik.touched.password && formik.errors.password)}
-            helperText={formik.touched.password && formik.errors.password}
-            margin="normal"
-          />
-
-          <TextField
-            fullWidth
-            id="confirmPassword"
-            name="confirmPassword"
-            label={translatedLabels.confirmPassword}
-            type="password"
-            value={formik.values.confirmPassword}
-            onChange={formik.handleChange}
-            onBlur={formik.handleBlur}
-            error={Boolean(
-              formik.touched.confirmPassword && formik.errors.confirmPassword
-            )}
-            helperText={
-              formik.touched.confirmPassword && formik.errors.confirmPassword
-            }
-            margin="normal"
-          />
-
-          {apiError && (
-            <Alert severity="error" sx={{ mt: 2, mb: 2 }}>
-              {apiError}
-            </Alert>
-          )}
-
-          {success && (
-            <Alert severity="success" sx={{ mt: 2, mb: 2 }}>
-              {translatedLabels.successMessage}
-            </Alert>
-          )}
-
-          <Button
-            type="submit"
-            fullWidth
-            variant="contained"
-            color="primary"
-            sx={{ mt: 3, mb: 2 }}
-            disabled={formik.isSubmitting}
-          >
-            {translatedLabels.resetButton}
-          </Button>
-        </Box>
-      </Box>
-    </Container>
-  );
-};
-
-export default ResetPasswordForm;

package/src/components/SideMenu.tsx

@@ -1,46 +0,0 @@
-import { Drawer, List } from '@mui/material';
-import { FC } from 'react';
-import { useNavigate } from 'react-router';
-import { useMenu } from '../contexts/MenuContext';
-import { IMenuOption } from '../interfaces/IMenuOption';
-import { MenuTypes } from '../types/MenuType';
-import { SideMenuListItem } from './SideMenuListItem';
-
-interface SideMenuProps {
-  isOpen: boolean;
-  onClose: () => void;
-}
-
-export const SideMenu: FC<SideMenuProps> = ({ isOpen, onClose }) => {
-  const { getMenuOptions } = useMenu();
-  const navigate = useNavigate();
-
-  const menuOptions = getMenuOptions(MenuTypes.SideMenu, true);
-
-  const handleNavigate = (
-    link: string | Partial<{ pathname: string; state?: unknown }>
-  ) => {
-    if (typeof link === 'string') {
-      navigate(link);
-    } else if (link.pathname) {
-      navigate(link.pathname, { state: link.state });
-    }
-  };
-
-  return (
-    <Drawer anchor="left" open={isOpen} onClose={onClose}>
-      <List>
-        {menuOptions.map((item: IMenuOption) => (
-          <SideMenuListItem
-            key={item.id}
-            menuItem={item}
-            onClose={onClose}
-            onNavigate={handleNavigate}
-          />
-        ))}
-      </List>
-    </Drawer>
-  );
-};
-
-export default SideMenu;

package/src/components/SideMenuListItem.tsx

@@ -1,75 +0,0 @@
-import {
-  Divider,
-  ListItemButton,
-  ListItemIcon,
-  ListItemText,
-} from '@mui/material';
-import { FC, useCallback } from 'react';
-import { IMenuOption } from '../interfaces';
-
-export interface SideMenuListItemProps {
-  menuItem: IMenuOption;
-  onClose: () => void;
-  onNavigate?: (
-    link: string | Partial<{ pathname: string; state?: unknown }>
-  ) => void;
-}
-
-export const SideMenuListItem: FC<SideMenuListItemProps> = ({
-  menuItem,
-  onClose,
-  onNavigate,
-}) => {
-  const handleMenuItemClick = useCallback(
-    (option: IMenuOption) => (event: React.MouseEvent<HTMLElement>) => {
-      event.stopPropagation();
-      if (option.action) {
-        option.action();
-      } else if (option.link !== undefined && onNavigate) {
-        if (typeof option.link === 'string') {
-          onNavigate(option.link);
-        } else if (
-          typeof option.link === 'object' &&
-          'pathname' in option.link &&
-          option.link.pathname
-        ) {
-          onNavigate({
-            pathname: option.link.pathname,
-            state: 'state' in option.link ? option.link.state : undefined,
-          });
-        }
-      }
-      onClose();
-    },
-    [onNavigate, onClose]
-  );
-
-  if (menuItem.divider) {
-    return <Divider key={menuItem.id} sx={{...menuItem.sideSx}} />;
-  } else if (menuItem.link) {
-    return (
-      <ListItemButton key={menuItem.id} onClick={handleMenuItemClick(menuItem)} sx={{...menuItem.sideSx}}>
-        {menuItem.icon && <ListItemIcon sx={{...menuItem.sideIconSx}}>{menuItem.icon}</ListItemIcon>}
-        <ListItemText primary={menuItem.label} sx={{...menuItem.sideTextSx}} />
-      </ListItemButton>
-    );
-  } else if (menuItem.action) {
-    const action = menuItem.action;
-    return (
-      <ListItemButton
-        key={menuItem.id}
-        onClick={async () => {
-          await action();
-          onClose();
-        }}
-        sx={{...menuItem.sideSx}}
-      >
-        {menuItem.icon && <ListItemIcon sx={{...menuItem.sideIconSx}}>{menuItem.icon}</ListItemIcon>}
-        <ListItemText primary={menuItem.label} sx={{...menuItem.sideTextSx}} />
-      </ListItemButton>
-    );
-  }
-  return null;
-};
-
-export default SideMenuListItem;

package/src/components/T.tsx

@@ -1,24 +0,0 @@
-// src/app/components/T.tsx
-
-import { useMemo } from 'react';
-import { useI18n } from '../contexts';
-
-interface FCParams<TEnum extends string> {
-  stringKey: TEnum;
-  vars?: Record<string, string | number>;
-}
-
-export const Tbranded = <TEnum extends string>({
-  stringKey,
-  vars,
-}: FCParams<TEnum>): string | undefined => {
-  const { currentLanguage, tBranded } = useI18n();
-  const translated = useMemo(
-    () => tBranded<TEnum>(stringKey, vars, currentLanguage),
-    [tBranded, stringKey, vars, currentLanguage]
-  );
-
-  return translated;
-};
-
-export default Tbranded;

package/src/components/TDiv.tsx

@@ -1,26 +0,0 @@
-// src/app/components/TDiv.tsx
-
-import { DetailedHTMLProps, HTMLAttributes, ReactElement, useMemo } from 'react';
-import { useI18n } from '../contexts';
-
-interface FCParams<TEnum extends string> {
-  stringKey: TEnum;
-  vars?: Record<string, string | number>;
-  divOptions?: DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-}
-
-export const TDivBranded = <TEnum extends string>({
-  stringKey,
-  vars,
-  divOptions,
-}: FCParams<TEnum>): ReactElement => {
-  const { currentLanguage, tBranded } = useI18n();
-  const translated = useMemo(
-    () => tBranded<TEnum>(stringKey, vars, currentLanguage),
-    [tBranded, stringKey, vars, currentLanguage]
-  );
-
-  return <div {...divOptions}>{translated}</div>;
-};
-
-export default TDivBranded;

package/src/components/TImgAlt.tsx

@@ -1,28 +0,0 @@
-// src/app/components/TImgAlt.tsx
-
-import { DetailedHTMLProps, ImgHTMLAttributes, ReactElement, useMemo } from 'react';
-import { useI18n } from '../contexts';
-
-interface FCParams<TEnum extends string> {
-  src: string;
-  stringKey: TEnum;
-  vars?: Record<string, string | number>;
-  imgOptions?: DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>;
-}
-
-export const TImgAlt = <TEnum extends string>({
-  src,
-  stringKey,
-  vars,
-  imgOptions,
-}: FCParams<TEnum>): ReactElement => {
-  const { currentLanguage, tBranded } = useI18n();
-  const translated = useMemo(
-    () => tBranded<TEnum>(stringKey, vars, currentLanguage),
-    [tBranded, stringKey, vars, currentLanguage]
-  );
-
-  return <img src={src} {...imgOptions} alt={translated} />;
-};
-
-export default TImgAlt;

package/src/components/TopMenu.tsx

@@ -1,252 +0,0 @@
-import {
-  IConstants,
-  SuiteCoreComponentId,
-  SuiteCoreStringKey,
-  SuiteCoreStringKeyValue,
-} from '@digitaldefiance/suite-core-lib';
-import MenuIcon from '@mui/icons-material/Menu';
-import {
-  AppBar,
-  Box,
-  Button,
-  IconButton,
-  Toolbar,
-  Typography,
-} from '@mui/material';
-import React, {
-  ElementType,
-  FC,
-  ReactElement,
-  useContext,
-  useMemo,
-  useState,
-} from 'react';
-import { Link } from 'react-router';
-import { AuthContext } from '../contexts/AuthProvider';
-import { useI18n } from '../contexts/I18nProvider';
-import { useMenu } from '../contexts/MenuContext';
-import { ICategoryConfig } from '../interfaces/ICategoryConfig';
-import { IMenuConfig } from '../interfaces/IMenuConfig';
-import { MenuType } from '../types/MenuType';
-import { CategoryMenu } from './CategoryMenu';
-import { DropdownMenu } from './DropdownMenu';
-import { SideMenu } from './SideMenu';
-import { UserLanguageSelector } from './UserLanguageSelector';
-import { UserMenu } from './UserMenu';
-
-// Extend Window interface for APP_CONFIG
-declare global {
-  interface Window {
-    APP_CONFIG?: {
-      hostname: string;
-      siteTitle: string;
-      server: string;
-      [key: string]: unknown;
-    };
-  }
-}
-
-export interface AdditionalDropdownMenu {
-  menuType: MenuType;
-  menuIcon: ReactElement;
-  priority?: number;
-  /** Optional callback invoked when the icon button is clicked. */
-  action?: () => void;
-  /** When true, the menu icon is hidden if there are no sub-options. Defaults to false. */
-  hideWhenEmpty?: boolean;
-  /**
-   * Optional category id. When the TopMenu is given matching `categories`,
-   * this menu is rendered inside that category's popover instead of inline.
-   */
-  category?: string;
-  /** Optional label used for tile captions and tooltips. */
-  label?: string;
-}
-
-export interface TopMenuProps {
-  Logo: React.ReactNode;
-  additionalMenus?: Array<AdditionalDropdownMenu>;
-  /**
-   * Optional category configurations. When provided, any menu (whether
-   * registered via `MenuContext` or passed in `additionalMenus`) whose
-   * `category` matches a category `id` is rendered as a tile inside that
-   * category's mega-menu popover. Menus without a matching category render
-   * inline in the AppBar exactly as before, so this is backwards compatible:
-   * omit `categories` (or use empty array) for the original layout.
-   */
-  categories?: ICategoryConfig[];
-  /** Custom action elements rendered in the toolbar after menu dropdowns (e.g. notification bell). Only shown when authenticated. */
-  actions?: React.ReactNode;
-  constants?: IConstants;
-  showTitle?: boolean;
-}
-
-export const TopMenu: FC<TopMenuProps> = ({
-  Logo,
-  additionalMenus,
-  categories,
-  actions,
-  constants,
-  showTitle,
-}) => {
-  const { isAuthenticated } = useContext(AuthContext);
-  const { getTopMenus } = useMenu();
-  const [isSideMenuOpen, setIsSideMenuOpen] = useState(false);
-
-  const handleOpenSideMenu = () => setIsSideMenuOpen(true);
-  const handleCloseSideMenu = () => setIsSideMenuOpen(false);
-  const { tComponent } = useI18n();
-  // When constants are explicitly provided, pass Site as a template variable
-  // override. Otherwise let the i18n engine resolve {Site} from its registered
-  // constants (which the consuming app sets up via createI18nSetup).
-  const siteTitle = tComponent<SuiteCoreStringKeyValue>(
-    SuiteCoreComponentId,
-    SuiteCoreStringKey.Common_SiteTemplate,
-    constants ? { Site: constants.Site } : undefined
-  );
-
-  const allMenus = useMemo(() => {
-    const contextMenus = getTopMenus();
-    if (!additionalMenus || additionalMenus.length === 0) {
-      return contextMenus;
-    }
-    const additional = additionalMenus.map((m) => ({
-      ...m,
-      options: [],
-      isUserMenu: false,
-    }));
-    return [...contextMenus, ...additional].sort(
-      (a, b) => (b.priority ?? 0) - (a.priority ?? 0)
-    );
-  }, [getTopMenus, additionalMenus]);
-
-  // Split menus into those that belong to a configured category vs. those
-  // that should render inline in the AppBar (default, backwards-compatible
-  // behaviour). The user menu is always inline.
-  const { inlineMenus, menusByCategory, orderedCategories } = useMemo(() => {
-    const hasCategories = !!categories && categories.length > 0;
-    const categoryIds = new Set(
-      hasCategories ? (categories as ICategoryConfig[]).map((c) => c.id) : []
-    );
-    const byCategory = new Map<string, IMenuConfig[]>();
-    const inline: typeof allMenus = [];
-
-    for (const menu of allMenus) {
-      const cat = (menu as IMenuConfig).category;
-      if (!menu.isUserMenu && hasCategories && cat && categoryIds.has(cat)) {
-        const list = byCategory.get(cat) ?? [];
-        list.push(menu as IMenuConfig);
-        byCategory.set(cat, list);
-      } else {
-        inline.push(menu);
-      }
-    }
-
-    const ordered = hasCategories
-      ? [...(categories as ICategoryConfig[])].sort(
-          (a, b) => (b.priority ?? 0) - (a.priority ?? 0)
-        )
-      : [];
-
-    return {
-      inlineMenus: inline,
-      menusByCategory: byCategory,
-      orderedCategories: ordered,
-    };
-  }, [allMenus, categories]);
-
-  return (
-    <AppBar position="fixed" sx={{ top: 10 }}>
-      <Toolbar>
-        <IconButton
-          size="large"
-          edge="start"
-          color="inherit"
-          aria-label="menu"
-          sx={{ mr: 2 }}
-          onClick={handleOpenSideMenu}
-        >
-          <MenuIcon />
-        </IconButton>
-        <Box
-          sx={{
-            height: 40,
-            width: 'auto',
-            marginRight: 2,
-            display: 'flex',
-            alignItems: 'center',
-          }}
-        >
-          {Logo}
-        </Box>
-        <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
-          {showTitle !== false ? siteTitle : '\u00A0'}
-        </Typography>
-        <Box sx={{ display: 'flex', alignItems: 'center' }}>
-          {isAuthenticated ? (
-            <>
-              <Button
-                color="inherit"
-                component={Link as ElementType}
-                to="/dashboard"
-              >
-                {tComponent<SuiteCoreStringKeyValue>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.Common_Dashboard
-                )}
-              </Button>
-              {inlineMenus.map((menu, index) =>
-                menu.isUserMenu ? (
-                  <UserMenu key={`user-menu`} />
-                ) : (
-                  <DropdownMenu
-                    key={`menu-${index}`}
-                    menuType={menu.menuType}
-                    menuIcon={menu.menuIcon as ReactElement}
-                    action={menu.action}
-                    hideWhenEmpty={menu.hideWhenEmpty}
-                  />
-                )
-              )}
-              {orderedCategories.map((category) => (
-                <CategoryMenu
-                  key={`category-${category.id}`}
-                  category={category}
-                  menus={menusByCategory.get(category.id) ?? []}
-                />
-              ))}
-            </>
-          ) : (
-            <>
-              <Button
-                color="inherit"
-                component={Link as ElementType}
-                to="/login"
-              >
-                {tComponent<SuiteCoreStringKeyValue>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.Login_LoginButton
-                )}
-              </Button>
-              <Button
-                color="inherit"
-                component={Link as ElementType}
-                to="/register"
-              >
-                {tComponent<SuiteCoreStringKeyValue>(
-                  SuiteCoreComponentId,
-                  SuiteCoreStringKey.RegisterButton
-                )}
-              </Button>
-            </>
-          )}
-          {isAuthenticated && actions}
-          <UserLanguageSelector />
-        </Box>
-      </Toolbar>
-      <SideMenu isOpen={isSideMenuOpen} onClose={handleCloseSideMenu} />
-    </AppBar>
-  );
-};
-
-export default TopMenu;