@cccsaurora/howler-ui 2.12.0-dev.168

package/components/app/providers/ViewProvider.js

@@ -0,0 +1,102 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import api from '@cccsaurora/howler-ui/api';
+import { useAppUser } from '@cccsaurora/howler-ui/commons/components/app/hooks';
+import useMyApi from '@cccsaurora/howler-ui/components/hooks/useMyApi';
+import { useMyLocalStorageItem } from '@cccsaurora/howler-ui/components/hooks/useMyLocalStorage';
+import { useCallback, useEffect, useState } from 'react';
+import { useLocation, useParams } from 'react-router-dom';
+import { createContext, useContextSelector } from 'use-context-selector';
+import { StorageKey } from '@cccsaurora/howler-ui/utils/constants';
+export const ViewContext = createContext(null);
+const ViewProvider = ({ children }) => {
+    const { dispatchApi } = useMyApi();
+    const appUser = useAppUser();
+    const [defaultView, setDefaultView] = useMyLocalStorageItem(StorageKey.DEFAULT_VIEW);
+    const location = useLocation();
+    const routeParams = useParams();
+    const [loading, setLoading] = useState(false);
+    const [views, setViews] = useState({ ready: false, views: [] });
+    const fetchViews = useCallback(async (force = false) => {
+        if (views.ready && !force) {
+            return;
+        }
+        if (!appUser.isReady()) {
+            return;
+        }
+        setLoading(true);
+        try {
+            setViews({ ready: true, views: await api.view.get() });
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [appUser, views.ready]);
+    useEffect(() => {
+        if (!views.ready && !loading) {
+            fetchViews();
+        }
+    }, [fetchViews, views.ready, appUser, loading]);
+    useEffect(() => {
+        if (defaultView && views.views?.length > 0 && !views.views?.find(v => v.view_id === defaultView)) {
+            setDefaultView(undefined);
+        }
+    });
+    const getCurrentView = useCallback(() => {
+        if (!location.pathname.startsWith('/views')) {
+            return null;
+        }
+        return views.views.find(_view => _view.view_id === routeParams.id);
+    }, [location.pathname, routeParams.id, views.views]);
+    const editView = useCallback(async (id, title, query, sort, span, advanceOnTriage) => {
+        const result = await api.view.put(id, title, query, sort, span, advanceOnTriage);
+        setViews(_views => ({
+            ..._views,
+            views: _views.views.map(v => v.view_id === id ? { ...v, title, query, sort, span, settings: { advance_on_triage: advanceOnTriage } } : v)
+        }));
+        return result;
+    }, []);
+    const addFavourite = useCallback(async (id) => {
+        await api.view.favourite.post(id);
+        appUser.setUser({
+            ...appUser.user,
+            favourite_views: [...appUser.user.favourite_views, id]
+        });
+    }, [appUser]);
+    const addView = useCallback(async (view) => {
+        const newView = await dispatchApi(api.view.post(view));
+        setViews(_views => ({ ..._views, views: [..._views.views, newView] }));
+        addFavourite(newView.view_id);
+        return newView;
+    }, [addFavourite, dispatchApi]);
+    const removeFavourite = useCallback(async (id) => {
+        await api.view.favourite.del(id);
+        appUser.setUser({
+            ...appUser.user,
+            favourite_views: appUser.user.favourite_views.filter(v => v !== id)
+        });
+    }, [appUser]);
+    const removeView = useCallback(async (id) => {
+        const result = await api.view.del(id);
+        setViews(_views => ({ ..._views, views: _views.views.filter(v => v.view_id !== id) }));
+        if (appUser.user?.favourite_views.includes(id)) {
+            removeFavourite(id);
+        }
+        return result;
+    }, [appUser.user?.favourite_views, removeFavourite]);
+    return (_jsx(ViewContext.Provider, { value: {
+            ...views,
+            addFavourite,
+            removeFavourite,
+            fetchViews,
+            addView,
+            editView,
+            removeView,
+            defaultView,
+            setDefaultView,
+            getCurrentView
+        }, children: children }));
+};
+export const useViewContextSelector = (selector) => {
+    return useContextSelector(ViewContext, selector);
+};
+export default ViewProvider;

package/components/elements/Comment.d.ts

@@ -0,0 +1,17 @@
+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 { ReactNode } from 'react';
+declare const _default: import("react").NamedExoticComponent<{
+    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;
+}>;
+export default _default;

package/components/elements/Comment.js

@@ -0,0 +1,114 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 } 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 { 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 = ({ comment, handleDelete, handleEdit, handleQuote, handleReact, users, extra, onClick }) => {
+    const { t } = useTranslation();
+    const { user } = useAppUser();
+    const { shiftColor } = useMyUtils();
+    const [anchorEl, setAnchorEl] = useState(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) => 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 = 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) ? (_jsx(Fade, { in: true, children: _jsx(Chip, { size: "small", variant: "outlined", color: comment.reactions?.[user.username] === type ? 'primary' : 'default', icon: _jsx(Icon, {}), onClick: handleReact ? () => handleReact(comment.reactions?.[user.username] !== type ? type : null) : null, sx: [
+                        !quantity && {
+                            '& svg': { mr: '-14px !important' }
+                        }
+                    ], label: quantity || null }) }, type)) : null;
+        });
+    }, [comment.reactions, handleReact, showInteractions, user.username]);
+    return (_jsxs(Stack, { direction: "row", spacing: 1, children: [_jsx(HowlerAvatar, { userId: comment.user }), _jsxs(HowlerCard, { 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' } }
+                ], children: [_jsxs(CardContent, { sx: { p: 0 }, children: [_jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, children: [_jsx(Typography, { variant: "body1", children: users[comment.user]?.name ?? comment.user }), wasEdited && (_jsx(Typography, { variant: "caption", sx: theme => ({
+                                            marginRight: `${theme.spacing(1)} !important`,
+                                            color: shiftColor(theme.palette.text.primary, 0.25)
+                                        }), children: t('comments.edited') })), _jsx(Tooltip, { title: new Date(comment.timestamp).toLocaleString(), children: _jsx(Typography, { variant: "caption", sx: theme => ({
+                                                marginRight: `${theme.spacing(1)} !important`,
+                                                color: shiftColor(theme.palette.text.primary, 0.25)
+                                            }), children: twitterShort(comment.timestamp) }) }), extra, (handleDelete || handleEdit || handleQuote) && (_jsx(Fade, { in: showInteractions, children: _jsx(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, children: _jsx(MoreHoriz, { fontSize: "small" }) }) })), _jsxs(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'
+                                        }, children: [handleDelete && (comment?.user === user.username || user.is_admin) && (_jsxs(MenuItem, { onClick: onDelete, disabled: loading, children: [_jsx(ListItemIcon, { children: loading ? (_jsx(CircularProgress, { size: 18, sx: theme => ({ color: theme.palette.text.primary }) })) : (_jsx(Delete, {})) }), _jsx(ListItemText, { children: t('comments.delete') })] })), handleEdit && comment?.user === user.username && (_jsxs(MenuItem, { onClick: () => {
+                                                    setEditing(!editing);
+                                                    handleClose();
+                                                }, disabled: loading, children: [_jsx(ListItemIcon, { children: _jsx(Edit, {}) }), _jsx(ListItemText, { children: !editing ? t('comments.edit') : t('comments.edit.stop') })] })), handleQuote && (_jsxs(MenuItem, { onClick: onQuote, disabled: loading, children: [_jsx(ListItemIcon, { children: _jsx(FormatQuote, {}) }), _jsx(ListItemText, { children: t('comments.quote') })] }))] })] }), !editing ? (_jsx(Typography, { variant: "body2", color: "text.secondary", component: "div", sx: {
+                                    '& > *': {
+                                        wordBreak: 'break-word'
+                                    },
+                                    '& > :last-child': {
+                                        marginBottom: 0
+                                    }
+                                }, children: _jsx(Markdown, { md: comment.value }) })) : (_jsx(TextField, { sx: { mt: 1 }, inputProps: { sx: (theme) => ({ fontSize: theme.typography.body2.fontSize }) }, inputRef: (ref) => setTimeout(() => ref?.current?.focus(), 100), defaultValue: comment.value, onChange: e => setEditValue(e.target.value), onKeyDown: checkForActions, fullWidth: true, multiline: true }))] }), _jsx(CardActions, { sx: { px: 0 }, children: _jsx(Collapse, { in: editing || showInteractions || Object.values(comment?.reactions ?? {}).length > 0, sx: { width: '100%' }, children: _jsxs(Stack, { direction: "row", sx: { width: '100%' }, spacing: 0.5, children: [reactions, _jsx(FlexOne, {}), editing && (_jsxs(_Fragment, { children: [_jsx(IconButton, { size: "small", onClick: () => setEditing(false), disabled: loading, children: _jsx(Clear, { fontSize: "small" }) }), _jsx(IconButton, { size: "small", onClick: onEdit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) })] }))] }) }) })] }, comment.timestamp)] }, comment.id));
+};
+export default memo(Comment);

package/components/elements/EditRow.d.ts

@@ -0,0 +1,14 @@
+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;
+};
+declare const EditRow: <T extends string | number | boolean>({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate, type, min, max, optional }: EditRowTypes<T>) => import("react/jsx-runtime").JSX.Element;
+export default EditRow;

package/components/elements/EditRow.js

@@ -0,0 +1,115 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+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 { useCallback, useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+const EditRow = ({ titleKey, descriptionKey, value, onEdit, validate, failOnValidate = false, type = 'text', min, max, optional }) => {
+    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(type === 'password' ? '' : value);
+    const [confirmPassword, setConfirmPassword] = useState('');
+    useEffect(() => {
+        if ((editValue === undefined || editValue === null) && value) {
+            setEditValue(value);
+        }
+    }, [editValue, value]);
+    const onChange = useCallback((_value) => {
+        if (validate && !validate(_value)) {
+            if (failOnValidate) {
+                return;
+            }
+            else {
+                setError(true);
+            }
+        }
+        else {
+            setError(false);
+        }
+        if (type === 'number' || type === 'range') {
+            if (!isNull(min) && !isUndefined(min) && parseInt(_value) < min) {
+                if (failOnValidate) {
+                    return;
+                }
+                else {
+                    setError(true);
+                }
+            }
+            else if (!isNull(max) && !isUndefined(max) && parseInt(_value) > 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 = 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 (_jsxs(_Fragment, { children: [_jsxs(TableRow, { children: [_jsx(TableCell, { sx: cellSx, style: { whiteSpace: 'nowrap' }, children: t(titleKey) }), editing ? (_jsx(TableCell, { sx: cellSx, colSpan: 2, children: _jsxs(Stack, { direction: "row", spacing: 1, alignItems: "center", children: [_jsxs(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
+                                            }
+                                        }
+                                    }, children: [!['checkbox', 'range'].includes(type) && (_jsx(TextField, { size: "small", value: editValue, onChange: ev => onChange(ev.target.value), onKeyDown: checkForActions, fullWidth: true, label: type === 'password' ? t('password') : null, type: type, error: error, sx: { '& input': { fontSize: '13.5px !important' } }, InputProps: {
+                                                endAdornment: loading && _jsx(CircularProgress, { size: 24 })
+                                            } })), type === 'checkbox' && (_jsx(Checkbox, { sx: { marginRight: 'auto' }, value: editValue, onChange: ev => onChange(ev.target.checked) })), type === 'range' && (_jsx(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), value: editValue, valueLabelDisplay: "auto", valueLabelFormat: val => `${val}px` })), type === 'password' && (_jsx(TextField, { size: "small", value: confirmPassword, onChange: ev => {
+                                                setConfirmPassword(ev.target.value);
+                                                setError(false);
+                                            }, onKeyDown: checkForActions, fullWidth: true, label: t('password.confirm'), type: "password", error: error, sx: { '& input': { fontSize: '13.5px !important' } }, InputProps: {
+                                                endAdornment: loading && _jsx(CircularProgress, { size: 24 })
+                                            } }))] }), _jsx(IconButton, { onClick: onSubmit, disabled: loading, children: _jsx(Check, { fontSize: "small" }) }), _jsx(IconButton, { onClick: () => setEditing(false), disabled: loading, children: _jsx(Close, { fontSize: "small" }) }), optional && (_jsx(IconButton, { onClick: () => {
+                                        setEditing(false);
+                                        onEdit(null);
+                                    }, disabled: loading, children: _jsx(Delete, { fontSize: "small" }) }))] }) })) : (_jsxs(TableCell, { sx: cellSx, width: "100%", children: [type === 'checkbox' ? (_jsx(Checkbox, { onChange: ev => onChange(ev.target.checked), checked: value.toString() === 'true' })) : ((value ?? t('none'))), type === 'range' && value && 'px'] })), onEdit && !editing && type !== 'checkbox' && (_jsx(TableCell, { sx: cellSx, align: "right", children: _jsx(IconButton, { onClick: () => setEditing(true), children: _jsx(Edit, { fontSize: "small" }) }) }))] }), descriptionKey && (_jsx(TableRow, { children: _jsx(TableCell, { colSpan: 3, sx: { paddingTop: '0 !important' }, children: _jsx(Typography, { variant: "caption", color: "text.secondary", children: t(descriptionKey) }) }) }))] }));
+};
+export default EditRow;

package/components/elements/PluginChip.d.ts

@@ -0,0 +1,8 @@
+import { type ChipProps } from '@mui/material';
+import { type FC } from 'react';
+export type PluginChipProps = ChipProps & {
+    value: string;
+    context: string;
+};
+declare const PluginChip: FC<PluginChipProps>;
+export default PluginChip;

package/components/elements/PluginChip.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Chip } from '@mui/material';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import {} from 'react';
+import { usePluginStore } from 'react-pluggable';
+const PluginChip = ({ children, value, context, ...props }) => {
+    const pluginStore = usePluginStore();
+    for (const plugin of howlerPluginStore.plugins) {
+        const component = pluginStore.executeFunction(`${plugin}.chip`, {
+            children,
+            value,
+            context,
+            ...props
+        });
+        if (component) {
+            return component;
+        }
+    }
+    return _jsx(Chip, { ...props, children: children });
+};
+export default PluginChip;

package/components/elements/PluginTypography.d.ts

@@ -0,0 +1,8 @@
+import { type TypographyProps } from '@mui/material';
+import { type FC } from 'react';
+export type PluginTypographyProps = TypographyProps & {
+    value: string;
+    context: string;
+};
+declare const PluginTypography: FC<PluginTypographyProps>;
+export default PluginTypography;

package/components/elements/PluginTypography.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Typography } from '@mui/material';
+import howlerPluginStore from '@cccsaurora/howler-ui/plugins/store';
+import {} from 'react';
+import { usePluginStore } from 'react-pluggable';
+const PluginTypography = ({ children, value, context, ...props }) => {
+    const pluginStore = usePluginStore();
+    for (const plugin of howlerPluginStore.plugins) {
+        const component = pluginStore.executeFunction(`${plugin}.typography`, {
+            children,
+            value,
+            context,
+            ...props
+        });
+        if (component) {
+            return component;
+        }
+    }
+    return _jsx(Typography, { ...props, children: children ?? value });
+};
+export default PluginTypography;

package/components/elements/ThemedEditor.d.ts

@@ -0,0 +1,3 @@
+import type { EditorProps } from '@monaco-editor/react';
+declare const _default: import("react").NamedExoticComponent<EditorProps>;
+export default _default;

package/components/elements/ThemedEditor.js

@@ -0,0 +1,104 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Editor, useMonaco } from '@monaco-editor/react';
+import { useTheme } from '@mui/material';
+import useThemeBuilder from '@cccsaurora/howler-ui/commons/components/utils/hooks/useThemeBuilder';
+import useMyTheme from '@cccsaurora/howler-ui/components/hooks/useMyTheme';
+import { memo, useCallback, useEffect, useMemo } from 'react';
+const ThemedEditor = ({ beforeMount, options = {}, ...otherProps }) => {
+    const myTheme = useMyTheme();
+    const themeBuilder = useThemeBuilder(myTheme);
+    const theme = useTheme();
+    const monaco = useMonaco();
+    const _beforeMount = useCallback((_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 = useMemo(() => ({
+        automaticLayout: true,
+        minimap: { enabled: false },
+        overviewRulerBorder: false,
+        renderLineHighlight: 'gutter',
+        autoClosingBrackets: 'always',
+        scrollbar: {
+            horizontal: 'hidden'
+        },
+        ...options
+    }), [options]);
+    return (_jsx(Editor, { ...otherProps, theme: theme.palette.mode === 'light' ? 'howler' : 'howler-dark', beforeMount: _beforeMount, options: _options }));
+};
+export default memo(ThemedEditor);

package/components/elements/UserList.d.ts

@@ -0,0 +1,9 @@
+import type { SxProps, Theme } from '@mui/material';
+import type { FC } from 'react';
+declare const UserList: FC<{
+    buttonSx?: SxProps<Theme>;
+    userId: string;
+    onChange: (userId: string) => void;
+    i18nLabel: string;
+}>;
+export default UserList;

package/components/elements/UserList.js

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

package/components/elements/addons/buttons/CustomButton.d.ts

@@ -0,0 +1,12 @@
+import type { ButtonProps } from '@mui/material';
+import type { ReactNode } from 'react';
+export type TuiButtonProps = Omit<ButtonProps, 'color'> & {
+    solid?: boolean;
+    color?: string;
+    route?: string;
+    href?: string;
+    progress?: boolean;
+    tooltip?: string | ReactNode;
+};
+declare const CustomButton: ({ solid, color, route, href, progress, tooltip, variant, ...props }: TuiButtonProps) => import("react/jsx-runtime").JSX.Element;
+export default CustomButton;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { alpha, Button, CircularProgress, darken, emphasize, Link as MuiLink, Tooltip, useTheme } from '@mui/material';
+import { useMemo } from 'react';
+import { Link } from 'react-router-dom';
+import { isMuiButtonColor } from '.';
+const CustomButton = ({ solid, color, route, href, progress, tooltip, variant, ...props }) => {
+    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 = (_jsx(Button, { ...props, variant: variant, color: isMuiColor ? color : 'inherit', sx: sx, startIcon: progress ? (_jsx(CircularProgress, { size: props.size === 'large' ? 22 : props.size === 'small' ? 18 : 20, sx: { color: progressColor } })) : (props.startIcon) }));
+    if (tooltip) {
+        ColorButton = (_jsx(Tooltip, { title: tooltip, children: _jsx("span", { children: ColorButton }) }));
+    }
+    if (route) {
+        ColorButton = (_jsx(Link, { to: route, style: { textDecoration: 'none' }, children: ColorButton }));
+    }
+    else if (href) {
+        ColorButton = (_jsx(MuiLink, { href: href, style: { textDecoration: 'none' }, target: "_new", children: ColorButton }));
+    }
+    return ColorButton;
+};
+export default CustomButton;