@cccsaurora/howler-ui 2.14.0-dev.250 → 2.14.0-dev.254

package/components/app/providers/ViewProvider.test.js

@@ -1,168 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { act, renderHook, waitFor } from '@testing-library/react';
-import { hget, hpost, hput } from '@cccsaurora/howler-ui/api';
-import MockLocalStorage from '@cccsaurora/howler-ui/tests/MockLocalStorage';
-import { MOCK_RESPONSES } from '@cccsaurora/howler-ui/tests/server-handlers';
-import { useContextSelector } from 'use-context-selector';
-import { MY_LOCAL_STORAGE_PREFIX, StorageKey } from '@cccsaurora/howler-ui/utils/constants';
-import ViewProvider, { ViewContext } from './ViewProvider';
-let mockUser = {
-    favourite_views: ['favourited_view_id']
-};
-vi.mock('@cccsaurora/howler-ui/api', { spy: true });
-vi.mock('react-router-dom', () => ({
-    useLocation: vi.fn(() => ({ pathname: '/views/searched_view_id' })),
-    useParams: vi.fn(() => ({ id: 'searched_view_id' }))
-}));
-vi.mock('@cccsaurora/howler-ui/commons/components/app/hooks', () => ({
-    useAppUser: () => ({
-        user: mockUser,
-        setUser: _user => (mockUser = _user)
-    })
-}));
-const mockLocalStorage = new MockLocalStorage();
-// Replace localStorage in global scope
-Object.defineProperty(window, 'localStorage', {
-    value: mockLocalStorage,
-    writable: true
-});
-const Wrapper = ({ children }) => {
-    return _jsx(ViewProvider, { children: children });
-};
-beforeEach(() => {
-    mockLocalStorage.clear();
-});
-describe('ViewContext', () => {
-    it('should fetch the defaultView on initialization', async () => {
-        mockLocalStorage.setItem(`${MY_LOCAL_STORAGE_PREFIX}.${StorageKey.DEFAULT_VIEW}`, JSON.stringify('searched_view_id'));
-        let hook = await act(async () => renderHook(() => useContextSelector(ViewContext, ctx => ctx.views), { wrapper: Wrapper }));
-        await waitFor(() => expect(hook.result.current.searched_view_id).not.toBeFalsy());
-        expect(hook.result.current.searched_view_id).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
-    });
-    it('should allow the user to add and remove a favourite view', async () => {
-        const hook = await act(async () => {
-            return renderHook(() => useContextSelector(ViewContext, ctx => ({
-                addFavourite: ctx.addFavourite,
-                removeFavourite: ctx.removeFavourite
-            })), { wrapper: Wrapper });
-        });
-        await hook.result.current.addFavourite('example_view_id');
-        expect(mockUser.favourite_views).toEqual(['favourited_view_id', 'example_view_id']);
-        await hook.result.current.removeFavourite('example_view_id');
-        expect(mockUser.favourite_views).toEqual(['favourited_view_id']);
-    });
-    it('should allow the user to add and remove views', async () => {
-        const hook = await act(async () => {
-            return renderHook(() => useContextSelector(ViewContext, ctx => ({
-                addView: ctx.addView,
-                removeView: ctx.removeView,
-                views: ctx.views
-            })), { wrapper: Wrapper });
-        });
-        const result = await act(async () => hook.result.current.addView({
-            owner: 'user',
-            settings: {
-                advance_on_triage: false
-            },
-            view_id: 'example_created_view',
-            query: 'howler.id:*',
-            sort: 'event.created desc',
-            title: 'Example View',
-            type: 'personal',
-            span: 'date.range.1.month'
-        }));
-        hook.rerender();
-        expect(hook.result.current.views[result.view_id]).toEqual(result);
-        await act(async () => hook.result.current.removeView(result.view_id));
-        hook.rerender();
-        expect(hook.result.current.views[result.view_id]).toBeFalsy();
-    });
-    describe('fetchViews', () => {
-        let hook;
-        beforeEach(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.fetchViews), { wrapper: Wrapper });
-            });
-            vi.mocked(hpost).mockClear();
-            vi.mocked(hget).mockClear();
-        });
-        it('Should fetch all views when no ids are provided', async () => {
-            const result = await act(async () => hook.result.current());
-            expect(result.length).toBe(2);
-            expect(result[0].view_id).toBe('example_view_id');
-            expect(result[1].view_id).toBe('another_view_id');
-        });
-        it('Should search for specified views when ids are provided', async () => {
-            const result = await act(async () => hook.result.current(['searched_view_id']));
-            expect(hpost).toHaveBeenCalledOnce();
-            expect(hpost).toBeCalledWith('/api/v1/search/view', {
-                query: 'view_id:(searched_view_id)',
-                rows: 1,
-                sort: 'title asc'
-            });
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
-        });
-        it('Should search only for new views when ids are provided', async () => {
-            await act(async () => hook.result.current(['searched_view_id']));
-            expect(hpost).toHaveBeenCalledOnce();
-            expect(hpost).toBeCalledWith('/api/v1/search/view', {
-                query: 'view_id:(searched_view_id)',
-                rows: 1,
-                sort: 'title asc'
-            });
-            vi.mocked(hpost).mockClear();
-            await act(async () => hook.result.current(['searched_view_id', 'searched_view_id_2']));
-            expect(hpost).toHaveBeenCalledOnce();
-            expect(hpost).toBeCalledWith('/api/v1/search/view', {
-                query: 'view_id:(searched_view_id_2)',
-                rows: 1,
-                sort: 'title asc'
-            });
-        });
-        it('Should provide cached instances as a response when the same views are requested', async () => {
-            let result = await act(async () => hook.result.current(['searched_view_id']));
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
-            result = await act(async () => hook.result.current(['searched_view_id']));
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items);
-            expect(hpost).toHaveBeenCalledOnce();
-        });
-    });
-    describe('getCurrentView', () => {
-        let hook;
-        beforeEach(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.getCurrentView), { wrapper: Wrapper });
-            });
-        });
-        it('should allow the user to fetch their current view based on the location', async () => {
-            // lazy load should return nothing
-            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
-            const result = await act(async () => hook.result.current());
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
-        });
-        it('should allow the user to fetch their current view based on the view ID', async () => {
-            // lazy load should return nothing
-            await expect(hook.result.current({ lazy: true })).resolves.toBeFalsy();
-            const result = await act(async () => hook.result.current({ viewId: 'searched_view_id' }));
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/search/view'].items[0]);
-        });
-    });
-    describe('editView', () => {
-        let hook;
-        beforeAll(async () => {
-            hook = await act(async () => {
-                return renderHook(() => useContextSelector(ViewContext, ctx => ctx.editView), { wrapper: Wrapper });
-            });
-        });
-        beforeEach(() => {
-            vi.mocked(hput).mockClear();
-            vi.mocked(hpost).mockClear();
-        });
-        it('should allow users to edit views', async () => {
-            const result = await act(async () => hook.result.current('example_view_id', { query: 'howler.id:*' }));
-            expect(hput).toHaveBeenCalledOnce();
-            expect(hput).toBeCalledWith('/api/v1/view/example_view_id', { query: 'howler.id:*' });
-            expect(result).toEqual(MOCK_RESPONSES['/api/v1/view/example_view_id']);
-        });
-    });
-});

package/components/elements/Comment.d.ts

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

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

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

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

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

package/components/elements/PluginChip.js

@@ -1,22 +0,0 @@
-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, field, ...props }) => {
-    const pluginStore = usePluginStore();
-    for (const plugin of howlerPluginStore.plugins) {
-        const component = pluginStore.executeFunction(`${plugin}.chip`, {
-            children,
-            value,
-            context,
-            field,
-            ...props
-        });
-        if (component) {
-            return component;
-        }
-    }
-    return _jsx(Chip, { ...props, children: children });
-};
-export default PluginChip;

package/components/elements/PluginTypography.d.ts

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

package/components/elements/PluginTypography.js

@@ -1,22 +0,0 @@
-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, field, ...props }) => {
-    const pluginStore = usePluginStore();
-    for (const plugin of howlerPluginStore.plugins) {
-        const component = pluginStore.executeFunction(`${plugin}.typography`, {
-            children,
-            value,
-            context,
-            field,
-            ...props
-        });
-        if (component) {
-            return component;
-        }
-    }
-    return _jsx(Typography, { ...props, children: children ?? value });
-};
-export default PluginTypography;

package/components/elements/ThemedEditor.d.ts

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

package/components/elements/ThemedEditor.js

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

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

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