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

package/components/elements/ThemedEditor.tsx

@@ -0,0 +1,130 @@
+import type { EditorProps, Monaco } from '@monaco-editor/react';
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import type { AppThemeConfigs } from 'commons/components/app/AppConfigs';
+import useThemeBuilder from 'commons/components/utils/hooks/useThemeBuilder';
+import useMyTheme from 'components/hooks/useMyTheme';
+import type { editor } from 'monaco-editor';
+import { memo, useCallback, useEffect, useMemo, type FC } from 'react';
+
+const ThemedEditor: FC<EditorProps> = ({ beforeMount, options = {}, ...otherProps }) => {
+  const myTheme: AppThemeConfigs = useMyTheme();
+  const themeBuilder = useThemeBuilder(myTheme);
+  const theme = useTheme();
+  const monaco = useMonaco();
+
+  const _beforeMount = useCallback(
+    (_monaco: Monaco) => {
+      let lightBackground = themeBuilder.lightTheme.palette.background.paper;
+      // monaco doesn't like colours in the form #fff, with only three digits.
+      if (lightBackground.startsWith('#') && lightBackground.length < 7) {
+        lightBackground = lightBackground.replace(/(\w)/g, '$1$1');
+      }
+
+      _monaco.editor.defineTheme('howler', {
+        base: 'vs',
+        inherit: true,
+        rules: [
+          {
+            token: 'handlebars',
+            foreground: themeBuilder.lightTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'operator',
+            foreground: themeBuilder.lightTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'string.invalid',
+            foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'invalid',
+            foreground: themeBuilder.lightTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'boolean',
+            foreground: themeBuilder.lightTheme.palette.success.main.toUpperCase().replaceAll('#', '')
+          }
+        ],
+        colors: {
+          'editor.background': lightBackground
+        }
+      });
+
+      let darkBackground = themeBuilder.darkTheme.palette.background.paper;
+      // monaco doesn't like colours in the form #fff, with only three digits.
+      if (darkBackground.startsWith('#') && darkBackground.length < 7) {
+        darkBackground = darkBackground.replace(/(\w)/g, '$1$1');
+      }
+      _monaco.editor.defineTheme('howler-dark', {
+        base: 'vs-dark',
+        inherit: true,
+        rules: [
+          {
+            token: 'handlebars',
+            foreground: themeBuilder.darkTheme.palette.warning.dark.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'operator',
+            foreground: themeBuilder.darkTheme.palette.warning.light.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'string.invalid',
+            foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'invalid',
+            foreground: themeBuilder.darkTheme.palette.error.main.toUpperCase().replaceAll('#', '')
+          },
+          {
+            token: 'boolean',
+            foreground: themeBuilder.darkTheme.palette.success.main.toUpperCase().replaceAll('#', '')
+          }
+        ],
+        colors: {
+          'editor.background': darkBackground
+        }
+      });
+
+      _monaco.languages.register({ id: 'lucene' });
+      _monaco.languages.register({ id: 'eql' });
+
+      beforeMount?.(_monaco);
+    },
+    [beforeMount, themeBuilder]
+  );
+
+  useEffect(() => {
+    if (!monaco) {
+      return;
+    }
+
+    monaco.editor.setTheme(theme.palette.mode === 'light' ? 'howler' : 'howler-dark');
+  }, [monaco, theme.palette.background.paper, theme.palette.mode]);
+
+  const _options: editor.IStandaloneEditorConstructionOptions = useMemo(
+    () => ({
+      automaticLayout: true,
+      minimap: { enabled: false },
+      overviewRulerBorder: false,
+      renderLineHighlight: 'gutter',
+      autoClosingBrackets: 'always',
+      scrollbar: {
+        horizontal: 'hidden'
+      },
+      ...options
+    }),
+    [options]
+  );
+
+  return (
+    <Editor
+      {...otherProps}
+      theme={theme.palette.mode === 'light' ? 'howler' : 'howler-dark'}
+      beforeMount={_beforeMount}
+      options={_options}
+    />
+  );
+};
+
+export default memo(ThemedEditor);

package/components/elements/UserList.tsx

@@ -0,0 +1,79 @@
+import type { SxProps, Theme } from '@mui/material';
+import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
+import { UserListContext } from 'components/app/providers/UserListProvider';
+import type { FC } from 'react';
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import HowlerAvatar from './display/HowlerAvatar';
+
+const UserList: FC<{
+  buttonSx?: SxProps<Theme>;
+  userId: string;
+  onChange: (userId: string) => void;
+  i18nLabel: string;
+}> = ({ buttonSx = {}, userId, onChange, i18nLabel }) => {
+  const { t } = useTranslation();
+
+  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>(null);
+  const { users, searchUsers } = useContext(UserListContext);
+
+  const userIds = useMemo(() => Object.keys(users), [users]);
+
+  useEffect(() => {
+    searchUsers('uname:*');
+  }, [searchUsers]);
+
+  return (
+    <>
+      <IconButton sx={buttonSx} onClick={e => setAnchorEl(e.currentTarget)}>
+        <HowlerAvatar userId={userId} />
+      </IconButton>
+      <Popover
+        open={!!anchorEl}
+        onClose={() => setAnchorEl(null)}
+        anchorEl={anchorEl}
+        anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}
+      >
+        <Box sx={{ p: 2 }}>
+          <Autocomplete
+            sx={{ minWidth: '300px' }}
+            options={userIds}
+            renderInput={params => <TextField {...params} label={t(i18nLabel)} size="small" />}
+            renderOption={(props, _userId) => {
+              const user = users[_userId];
+
+              return (
+                <li {...props}>
+                  <Box
+                    sx={{
+                      display: 'grid',
+                      gridTemplateColumns: 'auto 1fr',
+                      gridTemplateRows: 'auto auto',
+                      gridTemplateAreas: `"profile name"\n"profile email"`,
+                      columnGap: 1.5
+                    }}
+                  >
+                    <HowlerAvatar
+                      sx={{ gridArea: 'profile', alignSelf: 'center', height: '32px', width: '32px' }}
+                      userId={user.username}
+                    />
+                    <Typography sx={{ gridArea: 'name' }} variant="body1">
+                      {user.name}
+                    </Typography>
+                    <Typography sx={{ gridArea: 'email' }} variant="caption">
+                      {user.email}
+                    </Typography>
+                  </Box>
+                </li>
+              );
+            }}
+            value={userId}
+            onChange={(__, option) => onChange(option)}
+          />
+        </Box>
+      </Popover>
+    </>
+  );
+};
+
+export default UserList;

package/components/elements/addons/buttons/CustomButton.tsx

@@ -0,0 +1,93 @@
+import type { ButtonProps } from '@mui/material';
+import { alpha, Button, CircularProgress, darken, emphasize, Link as MuiLink, Tooltip, useTheme } from '@mui/material';
+import type { ReactNode } from 'react';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import type { MuiButtonColorType } from '.';
+import { isMuiButtonColor } from '.';
+
+export type TuiButtonProps = Omit<ButtonProps, 'color'> & {
+  solid?: boolean;
+  color?: string;
+  route?: string;
+  href?: string;
+  progress?: boolean;
+  tooltip?: string | ReactNode;
+};
+
+const CustomButton = ({ solid, color, route, href, progress, tooltip, variant, ...props }: TuiButtonProps) => {
+  const theme = useTheme();
+
+  const requestedColor = color || 'primary';
+
+  const isMuiColor = isMuiButtonColor(requestedColor);
+
+  const _solid = useMemo(() => solid || variant === 'contained', [solid, variant]);
+
+  const sx = useMemo(() => {
+    if (isMuiColor) {
+      return props.sx || {};
+    }
+    const transparent = variant === 'outlined' || variant === 'text' || !variant;
+    const _bgColor = !transparent && _solid ? requestedColor : alpha(requestedColor, 0.2);
+    const _color = !transparent && _solid ? theme.palette.getContrastText(requestedColor) : requestedColor;
+    return {
+      ...(props.sx && { ...props.sx }),
+      color: _color,
+      backgroundColor: transparent ? 'transparent' : _bgColor,
+      '&:hover': {
+        backgroundColor: transparent ? _bgColor : darken(_bgColor, 0.2)
+      }
+    };
+  }, [_solid, requestedColor, variant, props.sx, isMuiColor, theme]);
+
+  const progressColor = useMemo(() => {
+    const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+    return _solid ? emphasize(_color, 0.5) : _color;
+  }, [_solid, requestedColor, isMuiColor, theme]);
+
+  let ColorButton = (
+    <Button
+      {...props}
+      variant={variant}
+      color={isMuiColor ? (color as MuiButtonColorType) : 'inherit'}
+      sx={sx}
+      startIcon={
+        progress ? (
+          <CircularProgress
+            size={props.size === 'large' ? 22 : props.size === 'small' ? 18 : 20}
+            sx={{ color: progressColor }}
+          />
+        ) : (
+          props.startIcon
+        )
+      }
+    />
+  );
+
+  if (tooltip) {
+    ColorButton = (
+      <Tooltip title={tooltip}>
+        <span>{ColorButton}</span>
+      </Tooltip>
+    );
+  }
+
+  if (route) {
+    ColorButton = (
+      <Link to={route} style={{ textDecoration: 'none' }}>
+        {ColorButton}
+      </Link>
+    );
+  } else if (href) {
+    ColorButton = (
+      <MuiLink href={href} style={{ textDecoration: 'none' }} target="_new">
+        {ColorButton}
+      </MuiLink>
+    );
+  }
+
+  return ColorButton;
+};
+
+export default CustomButton;

package/components/elements/addons/buttons/CustomIconButton.tsx

@@ -0,0 +1,122 @@
+import {
+  alpha,
+  CircularProgress,
+  darken,
+  emphasize,
+  IconButton,
+  type IconButtonProps,
+  lighten,
+  Link as MuiLink,
+  Tooltip,
+  useTheme
+} from '@mui/material';
+import { type HTMLAttributeAnchorTarget, type ReactNode, useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { isMuiButtonColor, type MuiButtonColorType } from '.';
+
+export type CustomIconButtonProps = Omit<IconButtonProps, 'color'> & {
+  progress?: boolean | number;
+  transparent?: boolean;
+  solid?: boolean;
+  color?: string;
+  route?: string;
+  href?: string;
+  tooltip?: string | ReactNode;
+  target?: HTMLAttributeAnchorTarget;
+  clickableWithProgress?: boolean;
+};
+
+const CustomIconButton = ({
+  progress,
+  transparent,
+  solid,
+  color,
+  route,
+  href,
+  target,
+  tooltip,
+  disabled,
+  children,
+  clickableWithProgress = false,
+  ...props
+}: CustomIconButtonProps) => {
+  const theme = useTheme();
+
+  const requestedColor = color || 'primary';
+
+  const isMuiColor = isMuiButtonColor(requestedColor);
+
+  const sx = useMemo(() => {
+    if (isMuiColor) {
+      return props.sx || {};
+    }
+    const _bgColor = !transparent && solid ? requestedColor : alpha(requestedColor, 0.2);
+    const _color = !transparent && solid ? theme.palette.getContrastText(requestedColor) : requestedColor;
+    return {
+      ...(props.sx && { ...props.sx }),
+      color: _color,
+      backgroundColor: transparent ? 'transparent' : _bgColor,
+      '&:hover': {
+        backgroundColor: transparent ? _bgColor : darken(_bgColor, 0.2)
+      },
+      '&:disabled': {
+        backgroundColor: !transparent ? lighten(_bgColor, 0.1) : null
+      }
+    };
+  }, [requestedColor, solid, transparent, props.sx, isMuiColor, theme]);
+
+  const progressColor = useMemo(() => {
+    const _color = isMuiColor ? theme.palette[requestedColor].main : requestedColor;
+    return solid ? emphasize(_color, 0.5) : _color;
+  }, [solid, requestedColor, isMuiColor, theme]);
+
+  let _IconButton = (
+    <IconButton
+      {...props}
+      disabled={(!clickableWithProgress && !!progress) || disabled}
+      color={isMuiColor ? (color as MuiButtonColorType) : 'inherit'}
+      sx={sx}
+    >
+      {progress ? (
+        <div style={{ position: 'relative', display: 'inline-flex', alignItems: 'center', justifyContent: 'center' }}>
+          {children}
+          {
+            <CircularProgress
+              disableShrink
+              size={props.size === 'large' ? 52 : props.size === 'small' ? 28 : 40}
+              style={{
+                position: 'absolute',
+                color: progressColor,
+                animationDuration: typeof progress === 'number' ? `${progress}s` : null
+              }}
+            />
+          }
+        </div>
+      ) : (
+        children
+      )}
+    </IconButton>
+  );
+
+  if (tooltip) {
+    _IconButton = (
+      <Tooltip title={tooltip}>
+        <span>{_IconButton}</span>
+      </Tooltip>
+    );
+  }
+
+  if (route) {
+    _IconButton = <Link to={route}>{_IconButton}</Link>;
+  } else if (href) {
+    _IconButton = (
+      <MuiLink href={href} target={target ?? '_new'}>
+        {_IconButton}
+      </MuiLink>
+    );
+  }
+
+  return _IconButton;
+};
+
+export default CustomIconButton;

package/components/elements/addons/buttons/index.ts

@@ -0,0 +1,7 @@
+export const MuiButtonColors = ['inherit', 'primary', 'secondary', 'success', 'error', 'info', 'warning'] as const;
+
+export type MuiButtonColorType = (typeof MuiButtonColors)[number];
+
+export const isMuiButtonColor = (color: string): boolean => {
+  return MuiButtonColors.some(c => c === color);
+};

package/components/elements/addons/layout/FlexOne.tsx

@@ -0,0 +1,6 @@
+import { memo } from 'react';
+
+const FlexOne = ({ children = null }) => {
+  return <div style={{ flex: 1 }}>{children}</div>;
+};
+export default memo(FlexOne);

package/components/elements/addons/layout/FlexPort.tsx

@@ -0,0 +1,39 @@
+import usePageProps from 'commons/components/pages/hooks/usePageProps';
+import { memo } from 'react';
+
+type FlexPortProps = {
+  margin?: number;
+  mt?: number;
+  mr?: number;
+  mb?: number;
+  ml?: number;
+  disableOverflow?: boolean;
+  id?: string;
+  children: React.ReactNode;
+};
+
+const FlexPort = ({ children, disableOverflow = false, id = '', ...props }: FlexPortProps) => {
+  const pageProps = usePageProps({ props, defaultOverrides: { height: '100%', mb: 0, ml: 0, mr: 0, mt: 0 } });
+  return (
+    <div
+      className={pageProps.className}
+      style={{
+        position: 'relative',
+        flex: 1,
+        marginBottom: pageProps.style.marginBottom,
+        marginLeft: pageProps.style.marginLeft,
+        marginRight: pageProps.style.marginRight,
+        marginTop: pageProps.style.marginTop
+      }}
+    >
+      <div
+        style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0, overflow: !disableOverflow && 'auto' }}
+        id={id}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default memo(FlexPort);

package/components/elements/addons/layout/FlexVertical.tsx

@@ -0,0 +1,28 @@
+import type { PageProps } from 'commons/components/pages/hooks/usePageProps';
+import usePageProps from 'commons/components/pages/hooks/usePageProps';
+import type { ReactNode } from 'react';
+import { memo } from 'react';
+
+type FlexVerticalProps = PageProps & {
+  flex?: number;
+  children: ReactNode;
+};
+
+const FlexVertical = ({ flex = 1, children, ...props }: FlexVerticalProps) => {
+  const pageProps = usePageProps({ props, defaultOverrides: { mb: 0, ml: 0, mr: 0, mt: 0 } });
+  return (
+    <div
+      className={pageProps.className ? pageProps.className : ''}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        flex,
+        ...pageProps.style
+      }}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default memo(FlexVertical);

package/components/elements/addons/layout/vsbox/VSBox.tsx

@@ -0,0 +1,52 @@
+import { Stack, type StackProps } from '@mui/material';
+import { useAppBar, useAppBarHeight } from 'commons/components/app/hooks';
+import { createContext, useLayoutEffect, useMemo, useRef, useState } from 'react';
+
+type VSBoxProps = StackProps & {
+  top?: number;
+};
+
+type VSBoxState = {
+  header?: HTMLDivElement;
+  content?: HTMLDivElement;
+  top: number;
+  scrollTop: number;
+};
+
+export const VSBoxContext = createContext<{ state: VSBoxState; setState?: (state: VSBoxState) => void }>({
+  state: { top: 0, scrollTop: 0 }
+});
+
+const VSBox = ({ top, children, ...stackProps }: VSBoxProps) => {
+  const ref = useRef<HTMLDivElement>();
+  const appbarHeight = useAppBarHeight();
+  const { autoHide } = useAppBar();
+  const [state, setState] = useState<VSBoxState>({ top, scrollTop: top });
+
+  useLayoutEffect(() => {
+    // const tableHeader = content?.querySelector(':first-child[data-tuitable]') as HTMLDivElement;
+    const header = ref.current?.querySelector('[data-vsbox-header]') as HTMLDivElement;
+    const content = ref.current?.querySelector('[data-vsbox-content]') as HTMLDivElement;
+
+    // Explicit top or appbar height.
+    const _top = top !== undefined && top !== null ? top : autoHide ? 0 : appbarHeight;
+
+    // We compute scroll top value on demand in order to ensure the
+    //  header element is fully rendered.
+    const _scrollTop = _top + (header?.offsetHeight || 0);
+
+    setState({ top: _top, scrollTop: _scrollTop, header, content });
+  }, [top, appbarHeight, autoHide]);
+
+  const _value = useMemo(() => ({ state, setState }), [state]);
+
+  return (
+    <VSBoxContext.Provider value={_value}>
+      <Stack id="vs-box" ref={ref} height="fit-content" {...stackProps}>
+        {children}
+      </Stack>
+    </VSBoxContext.Provider>
+  );
+};
+
+export default VSBox;

package/components/elements/addons/layout/vsbox/VSBoxContent.tsx

@@ -0,0 +1,13 @@
+import type { BoxProps } from '@mui/material';
+import { Box } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+
+const VSBoxContent: FC<PropsWithChildren<Omit<BoxProps, 'children'>>> = ({ children, ...boxProps }) => {
+  return (
+    <Box data-vsbox-content="true" {...boxProps}>
+      {children}
+    </Box>
+  );
+};
+
+export default VSBoxContent;

package/components/elements/addons/layout/vsbox/VSBoxElement.tsx

@@ -0,0 +1,60 @@
+import type { BoxProps } from '@mui/material';
+import type { ReactElement } from 'react';
+import { memo, useContext, useLayoutEffect, useRef } from 'react';
+import { VSBoxContext } from './VSBox';
+
+type VSBoxElementProps = Omit<BoxProps, 'children'> & {
+  focus: boolean;
+  children: ReactElement;
+};
+const VSBoxElement = ({ focus, children }: VSBoxElementProps) => {
+  const {
+    state: { header, content, scrollTop }
+  } = useContext(VSBoxContext);
+  const ref = useRef<HTMLDivElement>(null);
+
+  useLayoutEffect(() => {
+    const element = ref.current;
+
+    if (focus && element && element.offsetParent) {
+      // if the first child of the vsbox content is a table,
+      //  then we'll offset the scroll bar by the height of
+      //  it header.
+      const tableHeader = content?.querySelector(
+        ':first-child[data-tuitable] [data-tuitable-header]'
+      ) as HTMLDivElement;
+
+      // the amount of offset to add to scroll bar.
+      // this accounts for the vsbox header and a tuitable header.
+      const hh = scrollTop + (tableHeader?.offsetHeight || 0);
+
+      // offsetParent has no offsetHeight, so we use bounding client object.
+      const parent = element.offsetParent.getBoundingClientRect();
+
+      // visual frame of reference.
+      const fStart = element.offsetParent.scrollTop + hh;
+      const fEnd = fStart + parent.height - hh;
+
+      // element frame of reference.
+      const eStart = element.offsetTop;
+      const eEnd = eStart + element.offsetHeight;
+
+      // Determine scroll direction
+      if (eStart < fStart) {
+        element.offsetParent.scrollBy({ top: eStart - fStart });
+      } else if (eEnd > fEnd) {
+        element.offsetParent.scrollBy({ top: eEnd - fEnd });
+      } else {
+        // element is within visual frame.
+      }
+    }
+  }, [header, content, scrollTop, focus]);
+
+  return (
+    <div ref={ref} className="tui-vsbox-element">
+      {children}
+    </div>
+  );
+};
+
+export default memo(VSBoxElement);

package/components/elements/addons/layout/vsbox/VSBoxHeader.tsx

@@ -0,0 +1,41 @@
+import type { BoxProps } from '@mui/material';
+import { Box, useTheme } from '@mui/material';
+import type { FC, PropsWithChildren } from 'react';
+import { useContext, useEffect, useRef } from 'react';
+import { useResizeDetector } from 'react-resize-detector';
+import { VSBoxContext } from './VSBox';
+
+type VSBoxHeaderProps = Omit<BoxProps, 'children'>;
+
+const VSBoxHeader: FC<PropsWithChildren<VSBoxHeaderProps>> = ({ children, ...boxProps }) => {
+  const theme = useTheme();
+  const heightRef = useRef<number>();
+  const { height, ref } = useResizeDetector({ handleWidth: false });
+  const { state, setState } = useContext(VSBoxContext);
+
+  useEffect(() => {
+    if (height !== heightRef.current) {
+      setState({ ...state, scrollTop: state.top + height });
+      heightRef.current = height;
+    }
+  }, [height, state, setState]);
+
+  return (
+    <Box
+      {...boxProps}
+      ref={ref}
+      data-vsbox-header="true"
+      position="sticky"
+      top={state.top}
+      sx={{
+        backgroundColor: theme.palette.background.default,
+        zIndex: theme.zIndex.appBar - 1,
+        ...(boxProps.sx && { ...boxProps.sx })
+      }}
+    >
+      {children}
+    </Box>
+  );
+};
+
+export default VSBoxHeader;