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

package/components/app/providers/ViewProvider.js

@@ -0,0 +1,127 @@
+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 { has, omit } from 'lodash-es';
+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 [views, setViews] = useState({});
+    const fetchViews = useCallback(async (ids) => {
+        if (!ids) {
+            const newViews = (await dispatchApi(api.view.get(), { throwError: false })) ?? [];
+            setViews(_views => ({
+                ..._views,
+                ...Object.fromEntries(newViews.map(_view => [_view.view_id, _view]))
+            }));
+            return newViews;
+        }
+        const missingIds = ids.filter(_id => !has(views, _id));
+        if (missingIds.length < 1) {
+            return ids.map(id => views[id]);
+        }
+        try {
+            const response = await dispatchApi(api.search.view.post({
+                query: `view_id:(${missingIds.join(' OR ')})`,
+                rows: missingIds.length,
+                sort: 'title asc'
+            }));
+            const newViews = Object.fromEntries(response.items.map(_view => [_view.view_id, _view]));
+            setViews(_views => ({
+                ..._views,
+                ...Object.fromEntries(missingIds.map(_view_id => [_view_id, null])),
+                ...newViews
+            }));
+            return ids.map(id => views[id] ?? newViews[id]);
+        }
+        catch (e) {
+            // eslint-disable-next-line no-console
+            console.warn(e);
+            return [];
+        }
+    }, [dispatchApi, views]);
+    useEffect(() => {
+        if (!defaultView || has(views, defaultView)) {
+            return;
+        }
+        (async () => {
+            const result = await fetchViews([defaultView]);
+            if (!result.length) {
+                setDefaultView(undefined);
+            }
+        })();
+    }, [defaultView, fetchViews, setDefaultView, views]);
+    const getCurrentView = useCallback(async ({ viewId, lazy = false } = {}) => {
+        if (!viewId) {
+            viewId = location.pathname.startsWith('/views') ? routeParams.id : defaultView;
+        }
+        if (!viewId) {
+            return null;
+        }
+        if (!has(views, viewId) && !lazy) {
+            return (await fetchViews([viewId]))[0];
+        }
+        return views[viewId];
+    }, [defaultView, fetchViews, location.pathname, routeParams.id, views]);
+    const editView = useCallback(async (id, partialView) => {
+        const result = await dispatchApi(api.view.put(id, partialView));
+        setViews(_views => ({
+            ..._views,
+            [id]: { ...(_views[id] ?? {}), ...partialView }
+        }));
+        return result;
+    }, [dispatchApi]);
+    const addFavourite = useCallback(async (id) => {
+        await dispatchApi(api.view.favourite.post(id));
+        appUser.setUser({
+            ...appUser.user,
+            favourite_views: [...appUser.user.favourite_views, id]
+        });
+    }, [appUser, dispatchApi]);
+    const addView = useCallback(async (view) => {
+        const newView = await dispatchApi(api.view.post(view));
+        setViews(_views => ({ ..._views, [newView.view_id]: newView }));
+        addFavourite(newView.view_id);
+        return newView;
+    }, [addFavourite, dispatchApi]);
+    const removeFavourite = useCallback(async (id) => {
+        await dispatchApi(api.view.favourite.del(id));
+        appUser.setUser({
+            ...appUser.user,
+            favourite_views: appUser.user.favourite_views.filter(v => v !== id)
+        });
+    }, [appUser, dispatchApi]);
+    const removeView = useCallback(async (id) => {
+        const result = await dispatchApi(api.view.del(id));
+        setViews(_views => omit(_views, id));
+        if (appUser.user?.favourite_views.includes(id)) {
+            removeFavourite(id);
+        }
+        return result;
+    }, [appUser.user?.favourite_views, dispatchApi, 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/app/providers/ViewProvider.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

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

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

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

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

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