@cccsaurora/howler-ui 2.14.0-dev.269 → 2.14.0-dev.272

package/components/elements/ThemedEditor.tsx

@@ -1,130 +0,0 @@
-import type { EditorProps, Monaco } from '@monaco-editor/react';
-import { Editor, useMonaco } from '@monaco-editor/react';
-import { useTheme } from '@mui/material';
-import type { AppThemeConfigs } from '@cccsaurora/howler-ui/commons/components/app/AppConfigs';
-import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
-import useMyTheme from '@cccsaurora/howler-ui/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

@@ -1,79 +0,0 @@
-import type { SxProps, Theme } from '@mui/material';
-import { Autocomplete, Box, IconButton, Popover, TextField, Typography } from '@mui/material';
-import { UserListContext } from '@cccsaurora/howler-ui/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

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

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

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

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

@@ -1,39 +0,0 @@
-import usePageProps from '@cccsaurora/howler-ui/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

@@ -1,28 +0,0 @@
-import type { PageProps } from '@cccsaurora/howler-ui/commons/components/pages/hooks/usePageProps';
-import usePageProps from '@cccsaurora/howler-ui/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

@@ -1,52 +0,0 @@
-import { Stack, type StackProps } from '@mui/material';
-import { useAppBar, useAppBarHeight } from '@cccsaurora/howler-ui/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

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

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

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