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

package/components/elements/Comment.tsx

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

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

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

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