@cccsaurora/howler-ui 2.14.0-dev.259 → 2.14.0-dev.264

package/commons/components/app/providers/AppSearchServiceProvider.tsx

@@ -0,0 +1,65 @@
+import {
+  AppSearchServiceContext,
+  type AppSearchServiceContextType,
+  type AppSearchServiceState
+} from 'commons/components/app/AppContexts';
+import type { AppSearchService } from 'commons/components/app/AppSearchService';
+import { useAppConfigs } from 'commons/components/app/hooks';
+import { useMemo, useState, type ReactElement } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+const DEFAULT_CONTEXT: AppSearchServiceContextType = {
+  provided: false,
+  service: {
+    itemRenderer: () => <div />
+  },
+  state: {
+    searching: false,
+    menu: false,
+    mode: 'inline',
+    items: null,
+    set: () => null
+  }
+};
+
+export default function AppSearchServiceProvider<T = any>({
+  service,
+  children
+}: {
+  service?: AppSearchService<T>;
+  children: ReactElement | ReactElement[];
+}) {
+  // Hooks required for default implementation.
+  const navigate = useNavigate();
+  const { preferences } = useAppConfigs();
+
+  // Default implementation of the AppSearchService using configuration preferences.
+  const defaultService: AppSearchService<any> = useMemo(() => {
+    const searchUri = preferences.topnav.quickSearchURI;
+    const params = preferences.topnav.quickSearchParam;
+    return {
+      onEnter: (value: string) => {
+        navigate(`${searchUri}?${params}=${encodeURIComponent(value)}`);
+      },
+      itemRenderer: () => <div />
+    };
+  }, [preferences, navigate]);
+
+  // The state of the search service.
+  const [state, setState] = useState<AppSearchServiceState<T>>(DEFAULT_CONTEXT.state);
+
+  // Memoize context value to prevent unnecessary renders.
+  const context = useMemo(
+    () => ({
+      provided: !!service,
+      service: service || defaultService,
+      state: {
+        ...state,
+        set: setState
+      }
+    }),
+    [service, defaultService, state]
+  );
+
+  return <AppSearchServiceContext.Provider value={context}>{children}</AppSearchServiceContext.Provider>;
+}

package/commons/components/app/providers/AppSnackbarProvider.tsx

@@ -0,0 +1,16 @@
+import { styled } from '@mui/material';
+import { SnackbarProvider } from 'notistack';
+
+const StyledSnackbarProvider = styled(SnackbarProvider)`
+  & .SnackbarItem-message {
+    word-break: break-all;
+  }
+`;
+
+// Wrap SnackbarProvider into its own component so we can use theme base breakpoints
+//  to calculate css styles.
+// This has to be done as child of AppContextProvider and in a separate component in order
+//  to ensure the ThemeProvider is already initialized.
+export default function AppSnackbarProvider({ children }) {
+  return <StyledSnackbarProvider>{children}</StyledSnackbarProvider>;
+}

package/commons/components/app/providers/AppSwitcherProvider.tsx

@@ -0,0 +1,16 @@
+import type { AppSwitcherItem } from 'commons/components/app/AppConfigs';
+import { useMemo, useState, type ReactNode } from 'react';
+
+import { AppSwitcherContext } from 'commons/components/app/AppContexts';
+import { useAppConfigs } from 'commons/components/app/hooks';
+
+type AppSwitcherProviderProps = {
+  children: ReactNode;
+};
+
+export default function AppSwitcherProvider({ children }: AppSwitcherProviderProps) {
+  const { preferences } = useAppConfigs();
+  const [items, setItems] = useState<AppSwitcherItem[]>(preferences.topnav.apps || []);
+  const context = useMemo(() => ({ items, empty: !items || items.length === 0, setItems }), [items]);
+  return <AppSwitcherContext.Provider value={context}>{children}</AppSwitcherContext.Provider>;
+}

package/commons/components/app/providers/AppUserProvider.tsx

@@ -0,0 +1,22 @@
+import { AppUserContext } from 'commons/components/app/AppContexts';
+import type { AppUser, AppUserService } from 'commons/components/app/AppUserService';
+import { type ReactNode } from 'react';
+
+type AppUserProviderProps<U extends AppUser> = {
+  service: AppUserService<U>;
+  children: ReactNode;
+};
+
+const AppUserServiceImpl = {
+  user: null,
+  setUser: () => null,
+  isReady: () => false,
+  validateProps: () => true
+};
+
+export default function AppUserProvider<U extends AppUser>({
+  service = AppUserServiceImpl,
+  children
+}: AppUserProviderProps<U>) {
+  return <AppUserContext.Provider value={{ ...AppUserServiceImpl, ...service }}>{children}</AppUserContext.Provider>;
+}

package/commons/components/breadcrumbs/BreadcrumbIcon.tsx

@@ -0,0 +1,21 @@
+import { useTheme } from '@mui/material';
+import { type BreadcrumbItem } from 'commons/components/app/hooks/useAppSitemap';
+
+type BreadcrumbIconProps = {
+  item: BreadcrumbItem;
+};
+
+const BreadcrumbIcon: React.FC<BreadcrumbIconProps> = ({ item }) => {
+  const theme = useTheme();
+  const {
+    route: { icon }
+  } = item;
+  return icon ? (
+    <>
+      {icon}
+      <span style={{ marginRight: theme.spacing(1) }} />
+    </>
+  ) : null;
+};
+
+export default BreadcrumbIcon;

package/commons/components/breadcrumbs/BreadcrumbLastItem.tsx

@@ -0,0 +1,40 @@
+import { Tooltip, Typography } from '@mui/material';
+import { useAppSitemap, type BreadcrumbItem } from 'commons/components/app/hooks';
+import BreadcrumbIcon from 'commons/components/breadcrumbs/BreadcrumbIcon';
+
+type BreadcrumbLastItemProps = {
+  textOnly?: boolean;
+  item: BreadcrumbItem;
+};
+
+const BreadcrumbLastItem: React.FC<BreadcrumbLastItemProps> = ({ item, textOnly }) => {
+  const { route, matcher } = item;
+  const { getTitle: resolveTitle } = useAppSitemap();
+  const url = matcher ? matcher.pathname : route.path;
+
+  return (
+    <Typography
+      key={`bcrumb-${url}`}
+      style={{
+        display: 'flex',
+        alignItems: 'center'
+      }}
+    >
+      {!textOnly && <BreadcrumbIcon item={item} />}
+      <Tooltip title={url}>
+        <span
+          style={{
+            maxWidth: route.textWidth || '200px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {resolveTitle(item)}
+        </span>
+      </Tooltip>
+    </Typography>
+  );
+};
+
+export default BreadcrumbLastItem;

package/commons/components/breadcrumbs/BreadcrumbLinkItem.tsx

@@ -0,0 +1,43 @@
+import { Link, Tooltip } from '@mui/material';
+import { useAppSitemap, type BreadcrumbItem } from 'commons/components/app/hooks';
+import BreadcrumbIcon from 'commons/components/breadcrumbs/BreadcrumbIcon';
+import { Link as RouterLink } from 'react-router-dom';
+
+type BreadcrumbLinkItemProps = {
+  textOnly?: boolean;
+  item: BreadcrumbItem;
+};
+
+const BreadcrumbLinkItem: React.FC<BreadcrumbLinkItemProps> = ({ item, textOnly }) => {
+  const { route, matcher } = item;
+  const { getTitle: resolveTitle } = useAppSitemap();
+  const url = matcher ? matcher.pathname : route.path;
+  return (
+    <Link
+      component={RouterLink}
+      key={`bcrumb-${url}`}
+      color="inherit"
+      to={url}
+      style={{
+        display: 'flex',
+        alignItems: 'center'
+      }}
+    >
+      {!textOnly && <BreadcrumbIcon item={item} />}
+      <Tooltip title={url}>
+        <span
+          style={{
+            maxWidth: route.textWidth || '200px',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+          }}
+        >
+          {resolveTitle(item)}
+        </span>
+      </Tooltip>
+    </Link>
+  );
+};
+
+export default BreadcrumbLinkItem;

package/commons/components/breadcrumbs/BreadcrumbList.tsx

@@ -0,0 +1,87 @@
+import { MoreHoriz } from '@mui/icons-material';
+import { Breadcrumbs as MuiBreadcrumbs, Tooltip } from '@mui/material';
+import { type BreadcrumbItem } from 'commons/components/app/hooks';
+import BreadcrumbLastItem from 'commons/components/breadcrumbs/BreadcrumbLastItem';
+import BreadcrumbLinkItem from 'commons/components/breadcrumbs/BreadcrumbLinkItem';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+
+type BreadcrumbListProps = {
+  disableStyle?: boolean;
+  textOnly?: boolean;
+  isStatic?: boolean;
+  itemsBefore?: number;
+  itemsAfter?: number;
+  items: BreadcrumbItem[];
+};
+
+const splitItems = (
+  items: BreadcrumbItem[],
+  itemsBeforeCount: number,
+  itemsAfterCount: number,
+  expanded: boolean,
+  isStatic: boolean
+): { before: BreadcrumbItem[]; after: BreadcrumbItem[]; hasEllipsis: boolean } => {
+  const _items = items.concat().filter(i => !i.route.exclude);
+  const hasEllipsis = _items.length > itemsBeforeCount + itemsAfterCount;
+  if (!hasEllipsis || isStatic) {
+    return { before: null, after: _items, hasEllipsis: false };
+  }
+  const before = _items.slice(0, itemsBeforeCount);
+  const after = expanded ? _items.slice(itemsBeforeCount) : _items.slice(_items.length - itemsAfterCount);
+  return { before, after, hasEllipsis: hasEllipsis || expanded };
+};
+
+const BreadcrumbsEllipsis = ({ onClick, expanded }) => {
+  const { t } = useTranslation();
+  return (
+    <Tooltip title={t(expanded ? 'tooltip.breadcrumbs.min' : 'tooltip.breadcrumbs.max')}>
+      <MoreHoriz
+        fontSize="small"
+        sx={{
+          verticalAlign: 'bottom',
+          marginTop: '5px',
+          display: 'inline-flex',
+          '&:hover': {
+            cursor: 'pointer'
+          }
+        }}
+        onClick={onClick}
+      />
+    </Tooltip>
+  );
+};
+
+export default function BreadcrumbList({
+  items,
+  disableStyle,
+  itemsBefore,
+  itemsAfter,
+  textOnly,
+  isStatic
+}: BreadcrumbListProps) {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const { before, after, hasEllipsis } = splitItems(items, itemsBefore, itemsAfter, expanded, isStatic);
+  const last = after.length > 0 ? after.pop() : null;
+  return (
+    <MuiBreadcrumbs
+      aria-label="breadcrumb"
+      maxItems={1000}
+      style={{
+        ...(!disableStyle && {
+          color: 'inherit',
+          display: 'flex',
+          alignItems: 'center',
+          flexGrow: 2
+        })
+      }}
+    >
+      {before &&
+        before.map(item => <BreadcrumbLinkItem key={`bcrumb-${item.route.path}`} item={item} textOnly={textOnly} />)}
+      {hasEllipsis && <BreadcrumbsEllipsis expanded={expanded} onClick={() => setExpanded(!expanded)} />}
+      {after &&
+        after.map(item => <BreadcrumbLinkItem key={`bcrumb-${item.route.path}`} item={item} textOnly={textOnly} />)}
+      {last && <BreadcrumbLastItem item={last} textOnly={textOnly} />}
+    </MuiBreadcrumbs>
+  );
+}

package/commons/components/breadcrumbs/Breadcrumbs.tsx

@@ -0,0 +1,40 @@
+import { useMediaQuery, useTheme } from '@mui/material';
+import { useAppBreadcrumbs, useAppConfigs, useAppSitemap, type BreadcrumbItem } from 'commons/components/app/hooks';
+import BreadcrumbList from 'commons/components/breadcrumbs/BreadcrumbList';
+import { memo, useMemo } from 'react';
+
+const Breadcrumbs = ({ disableStyle = false }) => {
+  const theme = useTheme();
+  const isMedium = useMediaQuery(theme.breakpoints.up('md'));
+  const configs = useAppConfigs();
+  const breadcrumbs = useAppBreadcrumbs();
+  const sitemap = useAppSitemap();
+  const current = breadcrumbs.last();
+  const isStatic = !!current.route.breadcrumbs;
+  const isExpanded = isMedium;
+
+  const items = useMemo(() => {
+    let _items: BreadcrumbItem[] = null;
+    if (sitemap.is404(current)) {
+      _items = [current];
+    } else if (isStatic) {
+      const staticBreadcrumbs = current.route.breadcrumbs.map(path => sitemap.getRoute(path));
+      _items = [...staticBreadcrumbs, current];
+    } else {
+      _items = breadcrumbs.items;
+    }
+    return _items;
+  }, [current, isStatic, breadcrumbs, sitemap]);
+
+  return (
+    <BreadcrumbList
+      items={items}
+      disableStyle={disableStyle}
+      isStatic={isStatic}
+      itemsBefore={isExpanded ? configs.sitemap.itemsBefore : 0}
+      itemsAfter={isExpanded ? configs.sitemap.itemsAfter : 1}
+    />
+  );
+};
+
+export default memo(Breadcrumbs);

package/commons/components/display/AppAvatar.tsx

@@ -0,0 +1,34 @@
+import { Avatar, type AvatarProps } from '@mui/material';
+import { useAppConfigs } from 'commons/components/app/hooks/useAppConfigs';
+import md5 from 'md5';
+import { useMemo } from 'react';
+
+export type GravatarD = '404' | 'mp' | 'identicon' | 'monsterid' | 'wavatar' | 'retro' | 'robohash' | 'blank';
+
+export type AppAvatarProps = { d?: GravatarD; url?: string; email?: string } & Omit<AvatarProps, 'src'>;
+
+export default function AppAvatar({ d, url, email, ...props }: AppAvatarProps) {
+  const configs = useAppConfigs();
+
+  const avatarUrl = useMemo(
+    () =>
+      url ||
+      (configs.preferences.allowGravatar
+        ? `https://s.gravatar.com/avatar/${email ? md5(email as string) : ''}?d=${d || configs.preferences.avatarD}`
+        : null),
+    [configs, url, email, d]
+  );
+
+  return (
+    <Avatar
+      {...props}
+      sx={{
+        ...(props.sx || {}),
+        '&:hover': {
+          cursor: 'pointer'
+        }
+      }}
+      src={avatarUrl}
+    />
+  );
+}

package/commons/components/display/AppInfoPanel.tsx

@@ -0,0 +1,30 @@
+import { Info } from '@mui/icons-material';
+import { Box, Stack, Typography, emphasize, useTheme, type StackProps } from '@mui/material';
+import { useTranslation } from 'react-i18next';
+
+export type AppInfoPanelProps = { i18nKey: string } & StackProps;
+
+export default function AppInfoPanel({ i18nKey, ...props }: AppInfoPanelProps) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const bgColor = emphasize(theme.palette.background.default, 0.1);
+  const color = emphasize(bgColor, 0.4);
+  return (
+    <Stack
+      {...props}
+      direction="row"
+      p={2}
+      sx={{
+        ...props.sx,
+        alignItems: 'center',
+        borderRadius: 2,
+        backgroundColor: bgColor,
+        color: color
+      }}
+    >
+      <Info fontSize="large" />
+      <Box m={1} />
+      <Typography variant="h5">{t(i18nKey)}</Typography>
+    </Stack>
+  );
+}

package/commons/components/display/AppListEmpty.tsx

@@ -0,0 +1,5 @@
+import AppInfoPanel, { type AppInfoPanelProps } from 'commons/components/display/AppInfoPanel';
+
+export default function AppListEmpty(props: Omit<AppInfoPanelProps, 'i18nKey'>) {
+  return <AppInfoPanel {...props} i18nKey="app.list.empty" />;
+}

package/commons/components/display/AppToc.tsx

@@ -0,0 +1,160 @@
+import { styled, useTheme } from '@mui/material';
+import { useAppBar } from 'commons/components/app/hooks/useAppBar';
+import { useAppLayout } from 'commons/components/app/hooks/useAppLayout';
+import { useAppUser } from 'commons/components/app/hooks/useAppUser';
+import React, { memo, useEffect, type ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link, useLocation } from 'react-router-dom';
+
+const TocRoot = styled('div')(({ theme }) => ({
+  display: 'flex',
+  '.tocBar': {
+    display: 'none',
+    paddingLeft: '16px',
+    [theme.breakpoints.up('md')]: {
+      display: 'block'
+    }
+  },
+  '.toc': {
+    fontSize: '0.875rem',
+    listStyle: 'none',
+    paddingInlineStart: 0,
+    [theme.breakpoints.only('md')]: {
+      width: '124px'
+    },
+    [theme.breakpoints.up('lg')]: {
+      width: '164px'
+    },
+    '& li': {
+      color: theme.palette.text.primary,
+      marginLeft: theme.spacing(1),
+      marginBottom: theme.spacing(0.5),
+      paddingLeft: theme.spacing(1.25),
+      paddingRight: theme.spacing(1)
+    },
+    '& .active': {
+      borderLeft: `solid ${theme.palette.primary.main} 2px`,
+      paddingLeft: theme.spacing(1),
+      color: theme.palette.primary.main
+    },
+    '& li:hover': {
+      borderLeft: `solid ${theme.palette.text.disabled} 1px`,
+      paddingLeft: '9px',
+      color: theme.palette.text.disabled
+    },
+    '& li > a': {
+      color: 'inherit',
+      display: 'block',
+      textDecoration: 'none',
+      width: '100%'
+    }
+  },
+  '.ttop': {
+    paddingTop: theme.spacing(2.5),
+    marginLeft: theme.spacing(2.25),
+    color: theme.palette.text.primary,
+    '& a': {
+      color: 'inherit',
+      display: 'block',
+      textDecoration: 'none'
+    },
+    '& :hover': {
+      color: theme.palette.text.disabled
+    }
+  }
+}));
+
+export type AppTocItem = {
+  id: string;
+  subItems?: AppTocItem[];
+  is_admin?: boolean;
+};
+
+export type AppTocElementProps = {
+  translation: string;
+  item: AppTocItem;
+};
+
+const AppTocElement: React.FC<AppTocElementProps> = ({ translation, item }) => {
+  const location = useLocation();
+  const { t } = useTranslation([translation]);
+  const currentHash = location.hash && location.hash !== '' ? location.hash.substring(1) : null;
+  const active = currentHash && currentHash.startsWith(item.id) ? 'active' : null;
+  const { user: currentUser } = useAppUser();
+
+  return (
+    (!item.is_admin || (currentUser.is_admin && item.is_admin)) && (
+      <>
+        <li className={active}>
+          <Link to={`#${item.id}`} target="_self">
+            {t(item.id)}
+          </Link>
+        </li>
+        {active && item.subItems && (
+          <ul className="toc" style={{ fontSize: 'smaller', paddingInlineStart: '8px' }}>
+            {item.subItems.map(itm => (
+              <AppTocElement key={itm.id} item={itm} translation={translation} />
+            ))}
+          </ul>
+        )}
+      </>
+    )
+  );
+};
+
+type AppTocProps = {
+  children: ReactNode;
+  translation: string;
+  items: AppTocItem[];
+  titleI18nKey?: string;
+  topI18nKey?: string;
+};
+
+const AppToc = ({ children, translation, items, titleI18nKey = 'toc', topI18nKey = 'top' }: AppTocProps) => {
+  const { autoHide: autoHideAppbar } = useAppBar();
+  const { current: currentLayout } = useAppLayout();
+  const theme = useTheme();
+  const location = useLocation();
+  const { t } = useTranslation([translation]);
+
+  useEffect(() => {
+    if (location.hash && location.hash !== '') {
+      const scrollElement = document.getElementById(location.hash.substring(1));
+      if (scrollElement) {
+        // If element exists already, use native scrollIntoView.
+        scrollElement.scrollIntoView(true);
+      } else {
+        // eslint-disable-next-line no-console
+        console.log('[WARN] Trying to scroll to unknown ID:', location.hash);
+      }
+    }
+  }, [location.hash]);
+
+  return (
+    <TocRoot id="top">
+      <div id="content">{children}</div>
+      <div id="toc" className="tocBar">
+        <div
+          style={{
+            position: 'sticky',
+            top: theme.spacing(autoHideAppbar && currentLayout !== 'top' ? 5 : 13)
+          }}
+        >
+          {titleI18nKey && <div style={{ fontSize: '1.25rem', marginLeft: '18px' }}>{t(titleI18nKey)}</div>}
+          <ul className="toc">
+            {items && items.map(item => <AppTocElement key={item.id} item={item} translation={translation} />)}
+            {topI18nKey && (
+              <div className="ttop">
+                <Link to="#top" target="_self">
+                  {t(topI18nKey)}
+                </Link>
+              </div>
+            )}
+          </ul>
+        </div>
+      </div>
+    </TocRoot>
+  );
+};
+
+export default memo(AppToc);

package/commons/components/display/hooks/useAppColor.tsx

@@ -0,0 +1,21 @@
+import { colors } from '@mui/material';
+import { useAppTheme } from 'commons/components/app/hooks';
+import { useMemo } from 'react';
+
+type MuiColorType = keyof typeof colors;
+
+type MuiColor = typeof colors.blue;
+
+type MuiColorVariant = keyof typeof colors.blue;
+
+export default function useAppColor(
+  color: MuiColorType = 'grey',
+  lightVariant: MuiColorVariant = 100,
+  darkVariant: MuiColorVariant = 900
+) {
+  const { isDark } = useAppTheme();
+  return useMemo(() => {
+    // eslint-disable-next-line import/namespace
+    return (colors[color] as MuiColor)[isDark ? darkVariant : lightVariant];
+  }, [isDark, color, lightVariant, darkVariant]);
+}