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

package/src/components/ResetPasswordForm.tsx

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

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

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

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

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

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

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