@cccsaurora/howler-ui 2.14.0-dev.268 → 2.14.0-dev.271

package/components/elements/Comment.tsx

@@ -1,315 +0,0 @@
-import {
-  Celebration,
-  Check,
-  Clear,
-  Delete,
-  Edit,
-  Favorite,
-  FireTruck,
-  FormatQuote,
-  Mood,
-  MoreHoriz,
-  RocketLaunch,
-  ThumbDown,
-  ThumbUp
-} from '@mui/icons-material';
-import {
-  CardActions,
-  CardContent,
-  Chip,
-  CircularProgress,
-  Collapse,
-  Fade,
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  Stack,
-  TextField,
-  Tooltip,
-  Typography,
-  type Theme
-} from '@mui/material';
-import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
-import FlexOne from '@cccsaurora/howler-ui/components/elements/addons/layout/FlexOne';
-import useMyUtils from '@cccsaurora/howler-ui/components/hooks/useMyUtils';
-import type { HowlerUser } from '@cccsaurora/howler-ui/models/entities/HowlerUser';
-import type { Comment as AnalyticComment } from '@cccsaurora/howler-ui/models/entities/generated/Comment';
-import type { HowlerComment } from '@cccsaurora/howler-ui/models/entities/generated/HowlerComment';
-import type { FC, KeyboardEventHandler, ReactNode } from 'react';
-import { memo, useCallback, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { compareTimestamp, twitterShort } from '@cccsaurora/howler-ui/utils/utils';
-import HowlerAvatar from './display/HowlerAvatar';
-import HowlerCard from './display/HowlerCard';
-import Markdown from './display/Markdown';
-
-const REACTION_ICONS = {
-  '+1': ThumbUp,
-  '-1': ThumbDown,
-  laugh: Mood,
-  confetti: Celebration,
-  heart: Favorite,
-  rocket: RocketLaunch,
-  fire: FireTruck
-};
-
-const Comment: FC<{
-  comment: HowlerComment | AnalyticComment;
-  handleDelete?: () => Promise<void>;
-  handleEdit?: (value: string) => Promise<void>;
-  handleReact?: (type: string) => Promise<void>;
-  handleQuote?: () => void;
-  onClick?: () => void;
-  users: { [id: string]: HowlerUser };
-  extra?: ReactNode;
-}> = ({ comment, handleDelete, handleEdit, handleQuote, handleReact, users, extra, onClick }) => {
-  const { t } = useTranslation();
-  const { user } = useAppUser();
-  const { shiftColor } = useMyUtils();
-
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const [wasEdited, setEdited] = useState(compareTimestamp(comment.modified, comment.timestamp) > 1);
-  const [editing, setEditing] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [showInteractions, setShowInteractions] = useState(false);
-  const [editValue, setEditValue] = useState(comment.value);
-
-  const handleOpen = useCallback((event: React.MouseEvent<HTMLButtonElement>) => setAnchorEl(event.currentTarget), []);
-  const handleClose = useCallback(() => setAnchorEl(null), []);
-
-  const onDelete = useCallback(async () => {
-    setLoading(true);
-    try {
-      await handleDelete();
-    } finally {
-      setLoading(false);
-      handleClose();
-    }
-  }, [handleDelete, handleClose]);
-
-  const onEdit = useCallback(async () => {
-    if (editValue === comment.value) {
-      setEditing(false);
-      return;
-    }
-
-    try {
-      setLoading(true);
-      await handleEdit(editValue);
-      setEdited(true);
-    } finally {
-      setLoading(false);
-      setEditing(false);
-    }
-  }, [comment.value, editValue, handleEdit]);
-
-  const checkForActions: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    e => {
-      e.stopPropagation();
-
-      if (e.ctrlKey && e.key === 'Enter' && !loading) {
-        onEdit();
-      } else if (e.key === 'Escape') {
-        setEditing(false);
-      }
-    },
-    [loading, onEdit]
-  );
-
-  const onQuote = useCallback(() => {
-    handleQuote();
-    handleClose();
-  }, [handleClose, handleQuote]);
-
-  const reactions = useMemo(() => {
-    return Object.keys(REACTION_ICONS).map(type => {
-      const quantity = Object.values(comment?.reactions ?? {}).filter(r => r === type).length;
-      const Icon = REACTION_ICONS[type];
-
-      return !!quantity || (showInteractions && handleReact) ? (
-        <Fade key={type} in>
-          <Chip
-            size="small"
-            variant="outlined"
-            color={comment.reactions?.[user.username] === type ? 'primary' : 'default'}
-            icon={<Icon />}
-            onClick={handleReact ? () => handleReact(comment.reactions?.[user.username] !== type ? type : null) : null}
-            sx={[
-              !quantity && {
-                '& svg': { mr: '-14px !important' }
-              }
-            ]}
-            label={quantity || null}
-          />
-        </Fade>
-      ) : null;
-    });
-  }, [comment.reactions, handleReact, showInteractions, user.username]);
-
-  return (
-    <Stack direction="row" spacing={1} key={comment.id}>
-      <HowlerAvatar userId={comment.user} />
-      <HowlerCard
-        key={comment.timestamp}
-        onClick={onClick}
-        onMouseEnter={() => setShowInteractions(true)}
-        onMouseLeave={() => setShowInteractions(false)}
-        sx={[
-          { p: 2, pb: 0, pt: 1, border: 'thin solid transparent' },
-          editing && { flex: 1 },
-          onClick && { '&:hover': { cursor: 'pointer', borderColor: 'primary.main' } }
-        ]}
-      >
-        <CardContent sx={{ p: 0 }}>
-          <Stack direction="row" alignItems="center" spacing={2}>
-            <Typography variant="body1">{users[comment.user]?.name ?? comment.user}</Typography>
-            {wasEdited && (
-              <Typography
-                variant="caption"
-                sx={theme => ({
-                  marginRight: `${theme.spacing(1)} !important`,
-                  color: shiftColor(theme.palette.text.primary, 0.25)
-                })}
-              >
-                {t('comments.edited')}
-              </Typography>
-            )}
-            <Tooltip title={new Date(comment.timestamp).toLocaleString()}>
-              <Typography
-                variant="caption"
-                sx={theme => ({
-                  marginRight: `${theme.spacing(1)} !important`,
-                  color: shiftColor(theme.palette.text.primary, 0.25)
-                })}
-              >
-                {twitterShort(comment.timestamp)}
-              </Typography>
-            </Tooltip>
-            {extra}
-            {(handleDelete || handleEdit || handleQuote) && (
-              <Fade in={showInteractions}>
-                <IconButton
-                  size="small"
-                  sx={[{ marginLeft: 'auto !important' }, editing && { display: 'none' }]}
-                  id={`comment${comment.id}-button`}
-                  aria-haspopup="true"
-                  aria-controls={anchorEl ? `comment${comment.id}-action-menu` : undefined}
-                  aria-expanded={anchorEl ? 'true' : undefined}
-                  onClick={handleOpen}
-                >
-                  <MoreHoriz fontSize="small" />
-                </IconButton>
-              </Fade>
-            )}
-            <Menu
-              id={`comment${comment.id}-action-menu`}
-              anchorEl={anchorEl}
-              open={!!anchorEl}
-              onClose={handleClose}
-              MenuListProps={{
-                dense: true,
-                'aria-labelledby': `comment${comment.id}-button`
-              }}
-              anchorOrigin={{
-                vertical: 'bottom',
-                horizontal: 'right'
-              }}
-              transformOrigin={{
-                vertical: 'top',
-                horizontal: 'right'
-              }}
-            >
-              {handleDelete && (comment?.user === user.username || user.is_admin) && (
-                <MenuItem onClick={onDelete} disabled={loading}>
-                  <ListItemIcon>
-                    {loading ? (
-                      <CircularProgress size={18} sx={theme => ({ color: theme.palette.text.primary })} />
-                    ) : (
-                      <Delete />
-                    )}
-                  </ListItemIcon>
-                  <ListItemText>{t('comments.delete')}</ListItemText>
-                </MenuItem>
-              )}
-              {handleEdit && comment?.user === user.username && (
-                <MenuItem
-                  onClick={() => {
-                    setEditing(!editing);
-                    handleClose();
-                  }}
-                  disabled={loading}
-                >
-                  <ListItemIcon>
-                    <Edit />
-                  </ListItemIcon>
-                  <ListItemText>{!editing ? t('comments.edit') : t('comments.edit.stop')}</ListItemText>
-                </MenuItem>
-              )}
-              {handleQuote && (
-                <MenuItem onClick={onQuote} disabled={loading}>
-                  <ListItemIcon>
-                    <FormatQuote />
-                  </ListItemIcon>
-                  <ListItemText>{t('comments.quote')}</ListItemText>
-                </MenuItem>
-              )}
-            </Menu>
-          </Stack>
-          {!editing ? (
-            <Typography
-              variant="body2"
-              color="text.secondary"
-              component="div"
-              sx={{
-                '& > *': {
-                  wordBreak: 'break-word'
-                },
-                '& > :last-child': {
-                  marginBottom: 0
-                }
-              }}
-            >
-              <Markdown md={comment.value} />
-            </Typography>
-          ) : (
-            <TextField
-              sx={{ mt: 1 }}
-              inputProps={{ sx: (theme: Theme) => ({ fontSize: theme.typography.body2.fontSize }) }}
-              inputRef={(ref: React.RefObject<HTMLInputElement>) => setTimeout(() => ref?.current?.focus(), 100)}
-              defaultValue={comment.value}
-              onChange={e => setEditValue(e.target.value)}
-              onKeyDown={checkForActions}
-              fullWidth
-              multiline
-            />
-          )}
-        </CardContent>
-        <CardActions sx={{ px: 0 }}>
-          <Collapse
-            in={editing || showInteractions || Object.values(comment?.reactions ?? {}).length > 0}
-            sx={{ width: '100%' }}
-          >
-            <Stack direction="row" sx={{ width: '100%' }} spacing={0.5}>
-              {reactions}
-              <FlexOne />
-              {editing && (
-                <>
-                  <IconButton size="small" onClick={() => setEditing(false)} disabled={loading}>
-                    <Clear fontSize="small" />
-                  </IconButton>
-                  <IconButton size="small" onClick={onEdit} disabled={loading}>
-                    <Check fontSize="small" />
-                  </IconButton>
-                </>
-              )}
-            </Stack>
-          </Collapse>
-        </CardActions>
-      </HowlerCard>
-    </Stack>
-  );
-};
-
-export default memo(Comment);

package/components/elements/EditRow.tsx

@@ -1,268 +0,0 @@
-import { Check, Close, Delete, Edit } from '@mui/icons-material';
-import {
-  Box,
-  Checkbox,
-  CircularProgress,
-  IconButton,
-  Slider,
-  Stack,
-  TableCell,
-  TableRow,
-  TextField,
-  Typography
-} from '@mui/material';
-import useMySnackbar from '@cccsaurora/howler-ui/components/hooks/useMySnackbar';
-import { isNull, isUndefined } from 'lodash-es';
-import type { KeyboardEventHandler } from 'react';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-
-type EditRowTypes<T extends string | number | boolean> = {
-  titleKey: string;
-  descriptionKey?: string;
-  value: T;
-  onEdit?: (value: string) => Promise<void>;
-  validate?: (value: T) => boolean;
-  failOnValidate?: boolean;
-  type?: 'password' | 'number' | 'text' | 'checkbox' | 'range';
-  min?: number;
-  max?: number;
-  optional?: boolean;
-};
-
-const EditRow = <T extends string | number | boolean>({
-  titleKey,
-  descriptionKey,
-  value,
-  onEdit,
-  validate,
-  failOnValidate = false,
-  type = 'text',
-  min,
-  max,
-  optional
-}: EditRowTypes<T>) => {
-  const { t } = useTranslation();
-  const { showErrorMessage } = useMySnackbar();
-
-  const [editing, setEditing] = useState(false);
-  const [error, setError] = useState(false);
-  const [loading, setLoading] = useState(false);
-  const [editValue, setEditValue] = useState<string | number | boolean>(type === 'password' ? '' : value);
-  const [confirmPassword, setConfirmPassword] = useState('');
-
-  useEffect(() => {
-    if ((editValue === undefined || editValue === null) && value) {
-      setEditValue(value);
-    }
-  }, [editValue, value]);
-
-  const onChange = useCallback(
-    (_value: string | boolean | number) => {
-      if (validate && !validate(_value as T)) {
-        if (failOnValidate) {
-          return;
-        } else {
-          setError(true);
-        }
-      } else {
-        setError(false);
-      }
-
-      if (type === 'number' || type === 'range') {
-        if (!isNull(min) && !isUndefined(min) && parseInt(_value as string) < min) {
-          if (failOnValidate) {
-            return;
-          } else {
-            setError(true);
-          }
-        } else if (!isNull(max) && !isUndefined(max) && parseInt(_value as string) > max) {
-          if (failOnValidate) {
-            return;
-          } else {
-            setError(true);
-          }
-        } else {
-          setError(false);
-        }
-      }
-
-      if (type !== 'checkbox') {
-        setEditValue(_value);
-      } else {
-        onEdit(_value.toString());
-      }
-    },
-    [failOnValidate, max, min, onEdit, type, validate]
-  );
-
-  const onSubmit = useCallback(async () => {
-    if (editValue === value) {
-      setEditing(false);
-      return;
-    }
-
-    if (type === 'password' && editValue !== confirmPassword) {
-      showErrorMessage(t('password.match'));
-      setError(true);
-      return;
-    }
-
-    setLoading(true);
-    try {
-      await onEdit(editValue.toString());
-      setEditing(false);
-    } finally {
-      setLoading(false);
-    }
-  }, [confirmPassword, editValue, onEdit, showErrorMessage, t, type, value]);
-
-  const checkForActions: KeyboardEventHandler<HTMLDivElement> = useCallback(
-    e => {
-      if (e.ctrlKey && e.key === 'Enter' && !loading) {
-        onSubmit();
-      }
-
-      if (e.key === 'Escape') {
-        setEditing(false);
-      }
-    },
-    [loading, onSubmit]
-  );
-
-  const cellSx = useMemo(
-    () => [!!descriptionKey && { borderBottom: 0, paddingBottom: '0 !important' }, { width: '100%' }],
-    [descriptionKey]
-  );
-
-  return (
-    <>
-      <TableRow>
-        <TableCell sx={cellSx} style={{ whiteSpace: 'nowrap' }}>
-          {t(titleKey)}
-        </TableCell>
-        {editing ? (
-          <TableCell sx={cellSx} colSpan={2}>
-            <Stack direction="row" spacing={1} alignItems="center">
-              <Box
-                sx={{
-                  display: 'flex',
-                  width: '100%',
-                  flexDirection: { xs: 'column', md: 'row' },
-                  '& > .MuiTextField-root:nth-of-type(2)': {
-                    ml: {
-                      xs: 0,
-                      md: 1
-                    },
-                    mt: {
-                      xs: 1,
-                      md: 0
-                    }
-                  }
-                }}
-              >
-                {!['checkbox', 'range'].includes(type) && (
-                  <TextField
-                    size="small"
-                    value={editValue}
-                    onChange={ev => onChange(ev.target.value)}
-                    onKeyDown={checkForActions}
-                    fullWidth
-                    label={type === 'password' ? t('password') : null}
-                    type={type}
-                    error={error}
-                    sx={{ '& input': { fontSize: '13.5px !important' } }}
-                    InputProps={{
-                      endAdornment: loading && <CircularProgress size={24} />
-                    }}
-                  />
-                )}
-                {type === 'checkbox' && (
-                  <Checkbox
-                    sx={{ marginRight: 'auto' }}
-                    value={editValue}
-                    onChange={ev => onChange(ev.target.checked)}
-                  />
-                )}
-                {type === 'range' && (
-                  <Slider
-                    min={min ?? 0}
-                    max={max ?? 100}
-                    step={Math.pow(10, Math.floor(Math.log10(max ?? 100) - Math.log10(Math.max(min ?? 0, 1)) / 2))}
-                    onChange={(__, val) => onChange(val as number)}
-                    value={editValue as number}
-                    valueLabelDisplay="auto"
-                    valueLabelFormat={val => `${val}px`}
-                  />
-                )}
-                {type === 'password' && (
-                  <TextField
-                    size="small"
-                    value={confirmPassword}
-                    onChange={ev => {
-                      setConfirmPassword(ev.target.value);
-                      setError(false);
-                    }}
-                    onKeyDown={checkForActions}
-                    fullWidth
-                    label={t('password.confirm')}
-                    type="password"
-                    error={error}
-                    sx={{ '& input': { fontSize: '13.5px !important' } }}
-                    InputProps={{
-                      endAdornment: loading && <CircularProgress size={24} />
-                    }}
-                  />
-                )}
-              </Box>
-              <IconButton onClick={onSubmit} disabled={loading}>
-                <Check fontSize="small" />
-              </IconButton>
-              <IconButton onClick={() => setEditing(false)} disabled={loading}>
-                <Close fontSize="small" />
-              </IconButton>
-              {optional && (
-                <IconButton
-                  onClick={() => {
-                    setEditing(false);
-                    onEdit(null);
-                  }}
-                  disabled={loading}
-                >
-                  <Delete fontSize="small" />
-                </IconButton>
-              )}
-            </Stack>
-          </TableCell>
-        ) : (
-          <TableCell sx={cellSx} width="100%">
-            {type === 'checkbox' ? (
-              <Checkbox onChange={ev => onChange(ev.target.checked)} checked={value.toString() === 'true'} />
-            ) : (
-              (value ?? t('none'))
-            )}
-            {type === 'range' && value && 'px'}
-          </TableCell>
-        )}
-        {onEdit && !editing && type !== 'checkbox' && (
-          <TableCell sx={cellSx} align="right">
-            <IconButton onClick={() => setEditing(true)}>
-              <Edit fontSize="small" />
-            </IconButton>
-          </TableCell>
-        )}
-      </TableRow>
-      {descriptionKey && (
-        <TableRow>
-          <TableCell colSpan={3} sx={{ paddingTop: '0 !important' }}>
-            <Typography variant="caption" color="text.secondary">
-              {t(descriptionKey)}
-            </Typography>
-          </TableCell>
-        </TableRow>
-      )}
-    </>
-  );
-};
-
-export default EditRow;

package/components/elements/PluginChip.tsx

@@ -1,32 +0,0 @@
-import { Chip, type ChipProps } from '@mui/material';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { type FC, type ReactNode } from 'react';
-import { usePluginStore } from 'react-pluggable';
-
-export type PluginChipProps = ChipProps & {
-  value: string;
-  context: string;
-  field?: string;
-};
-
-const PluginChip: FC<PluginChipProps> = ({ children, value, context, field, ...props }) => {
-  const pluginStore = usePluginStore();
-
-  for (const plugin of howlerPluginStore.plugins) {
-    const component = pluginStore.executeFunction(`${plugin}.chip`, {
-      children,
-      value,
-      context,
-      field,
-      ...props
-    }) as ReactNode;
-
-    if (component) {
-      return component;
-    }
-  }
-
-  return <Chip {...props}>{children}</Chip>;
-};
-
-export default PluginChip;

package/components/elements/PluginTypography.tsx

@@ -1,31 +0,0 @@
-import { Typography, type TypographyProps } from '@mui/material';
-import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
-import { type FC, type ReactNode } from 'react';
-import { usePluginStore } from 'react-pluggable';
-
-export type PluginTypographyProps = TypographyProps & {
-  value: string;
-  context: string;
-  field?: string;
-};
-
-const PluginTypography: FC<PluginTypographyProps> = ({ children, value, context, field, ...props }) => {
-  const pluginStore = usePluginStore();
-  for (const plugin of howlerPluginStore.plugins) {
-    const component = pluginStore.executeFunction(`${plugin}.typography`, {
-      children,
-      value,
-      context,
-      field,
-      ...props
-    }) as ReactNode;
-
-    if (component) {
-      return component;
-    }
-  }
-
-  return <Typography {...props}>{children ?? value}</Typography>;
-};
-
-export default PluginTypography;