@deix/rossini-identity-management 1.1.3 → 2.0.0

package/lib/utils/hooks/{useAPIClient.js → useAPIClient.jsx}

@@ -6,11 +6,13 @@ const APIContext = createContext(axios.create({
     },
 }));
 export const APIClientProvider = ({ baseURL, children, }) => {
-    return (React.createElement(APIContext.Provider, { value: axios.create({
+    return (<APIContext.Provider value={axios.create({
             baseURL,
             headers: {
                 Accept: 'application/json',
             },
-        }) }, children));
+        })}>
+      {children}
+    </APIContext.Provider>);
 };
 export const useAPIClient = () => useContext(APIContext);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deix/rossini-identity-management",
-  "version": "1.1.3",
+  "version": "2.0.0",
   "main": "lib/index.js",
   "repository": {
     "type": "git",
@@ -23,8 +23,8 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@fontsource/raleway": "^5.1.1",
-    "@mui/icons-material": "^6.4.2",
-    "@mui/material": "^6.4.2",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@types/react": "^19.0.10",
@@ -36,48 +36,40 @@
   },
   "devDependencies": {
     "@babel/core": "^7.23.7",
-    "@chromatic-com/storybook": "^3.2.2",
+    "@chromatic-com/storybook": "^4.0.1",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
     "@eslint/js": "^9.15.0",
     "@fontsource/raleway": "^5.1.1",
-    "@hipster/mdx2-issue-checker": "^0.0.7",
     "@mdx-js/loader": "^3.1.0",
     "@mdx-js/react": "^3.1.0",
-    "@mui/icons-material": "^6.4.2",
-    "@mui/material": "^6.4.2",
-    "@storybook/addon-docs": "^8.4.5",
-    "@storybook/addon-essentials": "^8.4.5",
-    "@storybook/addon-interactions": "^8.4.5",
-    "@storybook/addon-links": "^8.4.5",
-    "@storybook/addon-mdx-gfm": "^8.4.5",
-    "@storybook/addon-onboarding": "^8.4.5",
-    "@storybook/blocks": "^8.4.5",
-    "@storybook/manager-api": "^8.4.5",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@storybook/addon-docs": "^9.0.15",
+    "@storybook/addon-links": "^9.0.15",
+    "@storybook/addon-onboarding": "^9.0.15",
     "@storybook/mdx2-csf": "^1.1.0",
-    "@storybook/nextjs": "^8.4.5",
-    "@storybook/react": "^8.4.5",
-    "@storybook/test": "^8.4.5",
-    "@storybook/theming": "^8.4.5",
+    "@storybook/nextjs": "^9.0.15",
     "@tanstack/react-query": "^5.17.12",
     "@tanstack/react-query-devtools": "^5.17.12",
-    "@types/node": "^22.13.0",
+    "@types/node": "^24.0.10",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "axios": "^1.7.9",
-    "babel-loader": "^9.1.3",
+    "babel-loader": "^10.0.0",
     "commitizen": "^4.3.0",
     "cz-conventional-changelog": "^3.3.0",
     "eslint": "^9.19.0",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-storybook": "9.0.15",
     "json-server": "^1.0.0-alpha.21",
     "next": "^15.1.6",
     "react": "^19.0.0",
     "react-docgen-typescript-plugin": "^1.0.5",
     "react-dom": "^19.0.0",
     "remark-mdx": "^3.0.0",
-    "storybook": "^8.4.5",
+    "storybook": "^9.0.15",
     "ts-loader": "^9.5.1",
     "typescript": "^5.7.3",
     "typescript-eslint": "^8.24.1"
@@ -94,9 +86,9 @@
     }
   },
   "dependencies": {
-    "@deix/rossini-core": "^3.1.1",
-    "@mui/icons-material": "^6.4.2",
-    "@mui/material": "^6.3.2",
+    "@deix/rossini-core": "^4.0.0",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
     "notistack": "^3.0.1",
     "react-hook-form": "^7.49.3"
   }

package/lib/components/AddItemDialog.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import { Autocomplete, Button, Dialog, DialogActions, DialogContent, DialogTitle, TextField, } from '@mui/material';
-import { useLocale } from '@deix/rossini-core';
-import { useEffect, useState } from 'react';
-const translations = {
-    ok: {
-        en: 'Add',
-        it: 'Aggiungi',
-    },
-    cancel: {
-        en: 'Cancel',
-        it: 'Annulla',
-    },
-    search: {
-        en: 'Search...',
-        it: 'Cerca...',
-    },
-};
-const AddItemDialog = ({ title, options, open, onClose, onConfirm, }) => {
-    const locale = useLocale();
-    const [value, setValue] = useState(null);
-    // Reset the value when the dialog is closed
-    useEffect(() => {
-        if (!open) {
-            setValue(null);
-        }
-    }, [open]);
-    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
-        React.createElement(DialogTitle, null, title[locale]),
-        React.createElement(DialogContent, null,
-            React.createElement(Autocomplete
-            // multiple
-            , { 
-                // multiple
-                options: options ?? [], getOptionLabel: (option) => option.label, getOptionKey: (option) => option.value, isOptionEqualToValue: (option, value) => option.value === value.value, renderInput: (params) => (React.createElement(TextField, { ...params, label: translations.search[locale], placeholder: '' })), onChange: (event, newValue) => {
-                    setValue(newValue);
-                }, value: value })),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.cancel[locale]),
-            React.createElement(Button, { variant: 'contained', onClick: () => {
-                    onConfirm(value);
-                    onClose();
-                } }, translations.ok[locale]))));
-};
-export default AddItemDialog;

package/lib/components/DeleteConfirmationDialog.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, Typography, } from '@mui/material';
-import { useLocale } from '@deix/rossini-core';
-const translations = {
-    title: {
-        en: 'Delete item?',
-        it: 'Cancellare elemento?',
-    },
-    message: {
-        en: 'This is a permanent action',
-        it: "Questa è un'azione permanente",
-    },
-    yes: {
-        en: 'Yes',
-        it: 'Si',
-    },
-    no: {
-        en: 'No',
-        it: 'No',
-    },
-};
-const DeleteConfirmationDialog = ({ open, onClose, onConfirm, }) => {
-    const locale = useLocale();
-    return (React.createElement(Dialog, { open: open, fullWidth: true, maxWidth: 'sm', onClose: onClose },
-        React.createElement(DialogTitle, null, translations.title[locale]),
-        React.createElement(DialogContent, null,
-            React.createElement(Typography, { variant: 'caption' }, translations.message[locale])),
-        React.createElement(DialogActions, null,
-            React.createElement(Button, { size: 'small', variant: 'outlined', onClick: onClose }, translations.no[locale]),
-            React.createElement(Button, { size: 'small', variant: 'contained', onClick: () => {
-                    onConfirm();
-                    onClose();
-                } }, translations.yes[locale]))));
-};
-export default DeleteConfirmationDialog;

package/lib/components/SearchField.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import SearchIcon from '@mui/icons-material/Search';
-import { IconButton, TextField, } from '@mui/material';
-import { useState } from 'react';
-const SearchField = ({ placeholder = 'Search...', onSearch, ...props }) => {
-    const [value, setValue] = useState('');
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TextField, { size: 'small', placeholder: placeholder, value: value, onChange: (evt) => {
-                setValue(evt.target.value);
-                onSearch(evt.target.value);
-            }, ...props, InputProps: {
-                endAdornment: (React.createElement(IconButton, { size: 'small', onClick: () => onSearch(value) },
-                    React.createElement(SearchIcon, null))),
-            } })));
-};
-export default SearchField;

package/lib/components/groups/GroupForm.js

@@ -1,38 +0,0 @@
-import React from 'react';
-import { useLocale } from '@deix/rossini-core';
-import { Button, Grid, TextField } from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-import { useEffect } from 'react';
-import groupsTranslations from '../../lang/groups';
-const GroupForm = ({ group, onCancel, onSave, mode, editName, }) => {
-    const locale = useLocale();
-    const { control, handleSubmit, setValue } = useForm({
-        defaultValues: {
-            id: group?.id,
-            name: group?.name || '',
-        },
-    });
-    useEffect(() => {
-        if (group) {
-            setValue('id', group?.id);
-            setValue('name', group?.name);
-        }
-    }, [group, setValue]);
-    const onSubmit = (data) => {
-        onSave(data);
-    };
-    return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
-        React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'name', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: groupsTranslations.name[locale], disabled: mode === 'modify' && !editName, sx: { flexShrink: 0 }, ...field })) })),
-            React.createElement(Grid, { item: true, sx: {
-                    mt: 2,
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: 2,
-                    width: '100%',
-                } },
-                mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, groupsTranslations.cancel[locale])),
-                React.createElement(Button, { variant: 'contained', type: 'submit' }, groupsTranslations.save[locale])))));
-};
-export default GroupForm;

package/lib/components/groups/GroupTabs.js

@@ -1,29 +0,0 @@
-'use client';
-import React, { useState } from 'react';
-import { Box, Tab, Tabs } from '@mui/material';
-import { useLocale } from '@deix/rossini-core';
-import GroupDetails from './GroupDetails';
-import groupsTranslations from '../../lang/groups';
-import GroupUsers from './GroupUsers';
-const GroupTabs = ({ group, additionalTabs = [], onGroupUpdate, editName, }) => {
-    const locale = useLocale();
-    const [selectedTab, setSelectedTab] = useState('DETAILS');
-    return (React.createElement(Box, { sx: {
-            flexGrow: 1,
-            maxWidth: '100%',
-            overflowX: 'hidden',
-            alignSelf: 'stretch',
-        } },
-        React.createElement(Box, { sx: { borderBottom: 1, borderColor: 'divider' } },
-            React.createElement(Tabs, { value: selectedTab, onChange: (_evt, newValue) => {
-                    setSelectedTab(newValue);
-                }, "aria-label": 'basic tabs example' },
-                React.createElement(Tab, { label: groupsTranslations.details[locale], value: 'DETAILS' }),
-                React.createElement(Tab, { label: groupsTranslations.users[locale], value: 'USERS' }),
-                additionalTabs.map((tab, index) => (React.createElement(Tab, { key: `tab${index}`, label: tab.title[locale], value: `ADDITIONAL_TAB_${index}` }))))),
-        React.createElement(Box, { sx: { p: 1 } },
-            selectedTab === 'DETAILS' && (React.createElement(GroupDetails, { group: group, onGroupUpdate: onGroupUpdate, editName: editName })),
-            selectedTab === 'USERS' && React.createElement(GroupUsers, { group: group }),
-            additionalTabs.map((tab, index) => selectedTab === `ADDITIONAL_TAB_${index}` && (React.createElement(tab.component, { key: `tab${index}`, group: group }))))));
-};
-export default GroupTabs;

package/lib/components/groups/GroupUsers.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { isStringTranslation, useLocale } from '@deix/rossini-core';
-import { useAddUserToGroup, useRemoveUserFromGroup, useUsers, } from '../../utils/hooks/users';
-import { useState } from 'react';
-import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
-import { useQueryClient } from '@tanstack/react-query';
-import AddItemDialog from '../AddItemDialog';
-import { useGroupUsers } from '../../utils/hooks/groups';
-import groupsTranslations from '../../lang/groups';
-import { useAPIClient } from '../../utils/hooks/useAPIClient';
-const groupUsersTableColumns = [
-    {
-        id: 'username',
-        label: { en: 'Username', it: 'Username' },
-    },
-    {
-        id: 'firstName',
-        label: { en: 'First name', it: 'Nome' },
-    },
-    {
-        id: 'lastName',
-        label: { en: 'Last name', it: 'Cognome' },
-    },
-];
-const GroupUsers = ({ group }) => {
-    const locale = useLocale();
-    const apiClient = useAPIClient();
-    const queryClient = useQueryClient();
-    const { data: users } = useUsers(apiClient);
-    const { data: groupUsers } = useGroupUsers(group?.id, apiClient);
-    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
-    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
-    const [openAddUserDialog, setOpenAddUserDialog] = useState(false);
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteId, setDeleteId] = useState();
-    return (React.createElement(React.Fragment, null,
-        groupUsers && groupUsers.length > 0 && (React.createElement(Box, { maxWidth: 'md' },
-            React.createElement(TableContainer, null,
-                React.createElement(Table, { size: 'small' },
-                    React.createElement(TableHead, null,
-                        React.createElement(TableRow, null,
-                            groupUsersTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
-                                ? col.label[locale]
-                                : col.label))),
-                            React.createElement(TableCell, { padding: 'none' }, ''))),
-                    React.createElement(TableBody, null, groupUsers?.map((user, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
-                        React.createElement(TableCell, null, user.username),
-                        React.createElement(TableCell, null, user.firstName),
-                        React.createElement(TableCell, null, user.lastName),
-                        React.createElement(TableCell, { padding: 'none', align: 'right' },
-                            React.createElement(IconButton, { size: 'small', onClick: (evt) => {
-                                    evt.stopPropagation();
-                                    setOpenConfirmationDialog(true);
-                                    setDeleteId(user.id);
-                                } },
-                                React.createElement(DeleteIcon, null))))))))))),
-        React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddUserDialog(true), sx: { marginTop: 2 } }, groupsTranslations.addUser[locale]),
-        React.createElement(AddItemDialog, { open: openAddUserDialog, onClose: () => setOpenAddUserDialog(false), onConfirm: (value) => {
-                if (value) {
-                    addUserToGroup({ userId: value?.value, groupId: group.id });
-                }
-            }, title: groupsTranslations.addUser, options: users?.map((user) => ({
-                value: user.id,
-                label: user.username || '',
-            })) }),
-        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
-                ? removeUserFromGroup({ userId: deleteId, groupId: group.id })
-                : {} })));
-};
-export default GroupUsers;

package/lib/components/groups/Groups.js

@@ -1,97 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import GroupAddIcon from '@mui/icons-material/GroupAdd';
-import { Box, Button, Grid, IconButton, Link } from '@mui/material';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
-import { useAPI, useLocale } from '@deix/rossini-core';
-import { SearchField } from '..';
-import CreateGroupDialog from './CreateGroupDialog';
-import GroupsTable from './GroupsTable';
-import groupsTranslations from '../../lang/groups';
-import { useDeleteGroup, useGroups } from '../../utils/hooks/groups';
-import GroupTabs from './GroupTabs';
-import { useQueryClient } from '@tanstack/react-query';
-import { APIClientProvider } from '../../utils/hooks/useAPIClient';
-const Groups = ({ apiUrl, additionalTabs = [], onGroupUpdate, onGroupCreate, onGroupDelete, editName, }) => {
-    const locale = useLocale();
-    const apiClient = useAPI(apiUrl);
-    const queryClient = useQueryClient();
-    const { data: groups } = useGroups(apiClient);
-    const { mutate: deleteGroup } = useDeleteGroup(queryClient, apiClient);
-    const [searchString, setSearchString] = useState('');
-    const [filteredGroups, setFilteredGroups] = useState();
-    const [selectedGroup, setSelectedGroup] = useState();
-    const [openGroupDialog, setOpenGroupDialog] = useState(false);
-    // Update the filtered groups using the search string
-    useEffect(() => {
-        if (groups && searchString === '') {
-            setFilteredGroups(groups);
-        }
-        else if (groups && searchString !== '') {
-            setFilteredGroups(groups.filter((group) => group.name.includes(searchString)));
-        }
-    }, [searchString, groups, setFilteredGroups]);
-    // If the groups change updated the selected group to reflect the chages
-    useEffect(() => {
-        if (selectedGroup) {
-            const updatedSelectedGroup = groups?.find((group) => group.id === selectedGroup.id);
-            if (updatedSelectedGroup) {
-                setSelectedGroup(updatedSelectedGroup);
-            }
-            else {
-                // deselect the group if it doesn't exist anymore
-                setSelectedGroup(undefined);
-            }
-        }
-    }, [groups, selectedGroup, setSelectedGroup]);
-    const handleDelete = (group) => {
-        deleteGroup(group.id);
-        if (typeof onGroupDelete === 'function') {
-            onGroupDelete(group);
-        }
-        setSelectedGroup(undefined);
-    };
-    return (React.createElement(APIClientProvider, { baseURL: apiUrl },
-        React.createElement(Box, { sx: {
-                flexGrow: 1,
-                maxWidth: '100%',
-                overflowX: 'hidden',
-                paddingTop: 3,
-                paddingLeft: 3,
-                paddingRight: 3,
-            } },
-            !selectedGroup && (React.createElement(React.Fragment, null,
-                React.createElement(Grid, { container: true, spacing: 2, sx: { marginBottom: 2 } },
-                    React.createElement(Grid, { item: true },
-                        React.createElement(SearchField, { placeholder: groupsTranslations.search[locale], onSearch: (value) => setSearchString(value) })),
-                    React.createElement(Grid, { item: true },
-                        React.createElement(Button, { variant: 'contained', startIcon: React.createElement(GroupAddIcon, null), onClick: () => {
-                                setOpenGroupDialog(true);
-                                setSelectedGroup(undefined);
-                            } }, groupsTranslations.new[locale]))),
-                React.createElement(GroupsTable, { groups: filteredGroups, selectedGroup: selectedGroup, setSelectedGroup: (group) => {
-                        setSelectedGroup(group);
-                    }, onDelete: handleDelete }))),
-            selectedGroup && (React.createElement(Box, { sx: {
-                    display: 'flex',
-                    flexDirection: 'column',
-                    alignItems: 'flex-start',
-                    width: '100%',
-                } },
-                React.createElement(Box, { sx: {
-                        display: 'flex',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                    } },
-                    React.createElement(IconButton, { "aria-label": 'delete', color: 'primary', onClick: () => setSelectedGroup(undefined), sx: { mr: 2 } },
-                        React.createElement(ArrowBackIcon, null)),
-                    React.createElement(Link, { underline: 'none', href: '#', onClick: () => setSelectedGroup(undefined) }, groupsTranslations.title[locale]),
-                    React.createElement(KeyboardArrowRightIcon, null),
-                    selectedGroup.name),
-                React.createElement(GroupTabs, { group: selectedGroup, additionalTabs: additionalTabs, onGroupUpdate: onGroupUpdate, editName: editName }))),
-            React.createElement(CreateGroupDialog, { open: openGroupDialog, onClose: () => {
-                    setOpenGroupDialog(false);
-                }, onGroupCreate: onGroupCreate }))));
-};
-export default Groups;

package/lib/components/groups/GroupsTable.js

@@ -1,43 +0,0 @@
-import React from 'react';
-import { isStringTranslation, useLocale } from '@deix/rossini-core';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, useTheme, } from '@mui/material';
-import { useState } from 'react';
-import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
-const groupsTableColumns = [
-    {
-        id: 'name',
-        label: { en: 'Name', it: 'Nome' },
-    },
-];
-const GroupsTable = ({ groups = [], selectedGroup, setSelectedGroup, onDelete, }) => {
-    const locale = useLocale();
-    const muiTheme = useTheme();
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteGroup, setDeleteGroup] = useState();
-    return (React.createElement(React.Fragment, null,
-        React.createElement(TableContainer, null,
-            React.createElement(Table, { size: 'small' },
-                React.createElement(TableHead, null,
-                    React.createElement(TableRow, null,
-                        groupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
-                            ? col.label[locale]
-                            : col.label))),
-                        React.createElement(TableCell, { padding: 'none' }, ''))),
-                React.createElement(TableBody, null, groups.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx, onClick: () => setSelectedGroup(group), sx: {
-                        cursor: 'pointer',
-                        background: selectedGroup && group.id === selectedGroup.id
-                            ? muiTheme.palette.primary.light
-                            : undefined,
-                    } },
-                    React.createElement(TableCell, null, group.name),
-                    React.createElement(TableCell, { padding: 'none', align: 'right' },
-                        React.createElement(IconButton, { size: 'small', onClick: (evt) => {
-                                evt.stopPropagation();
-                                setOpenConfirmationDialog(true);
-                                setDeleteGroup(group);
-                            } },
-                            React.createElement(DeleteIcon, null))))))))),
-        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => (deleteGroup ? onDelete(deleteGroup) : {}) })));
-};
-export default GroupsTable;

package/lib/components/users/UserForm.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import { useLocale } from '@deix/rossini-core';
-import { Button, FormControlLabel, Grid, Switch, TextField, } from '@mui/material';
-import { Controller, useForm } from 'react-hook-form';
-import { useEffect } from 'react';
-import usersTranslations from '../../lang/users';
-const UserForm = ({ user, onSave, onCancel, mode = 'create', editUsername, emailAsUsername = false, }) => {
-    const locale = useLocale();
-    const { control, formState: { errors }, handleSubmit, setValue, } = useForm({
-        defaultValues: {
-            id: user?.id,
-            username: user?.username || '',
-            firstName: user?.firstName || '',
-            lastName: user?.lastName || '',
-            email: user?.email || '',
-            emailVerified: user?.emailVerified || true,
-            enabled: user?.enabled || true,
-            sendEmailOnCreation: true,
-        },
-    });
-    useEffect(() => {
-        if (user) {
-            setValue('id', user?.id);
-            if (!emailAsUsername) {
-                setValue('username', user?.username);
-            }
-            setValue('firstName', user?.firstName);
-            setValue('lastName', user?.lastName);
-            setValue('email', user?.email);
-            setValue('emailVerified', user?.emailVerified);
-            setValue('enabled', user?.enabled);
-            setValue('groups', user?.groups);
-            // The user already exists, we don't want to send an email
-            setValue('sendEmailOnCreation', false);
-        }
-    }, [user, setValue]);
-    const onSubmit = (data) => {
-        onSave(data);
-    };
-    return (React.createElement("form", { onSubmit: (event) => void handleSubmit(onSubmit)(event) },
-        React.createElement(Grid, { container: true, spacing: 2, sx: { mt: 2, maxWidth: 'sm' }, justifyContent: 'stretch' },
-            !emailAsUsername && (React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'username', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.username[locale], disabled: mode === 'modify' && !editUsername, sx: { flexShrink: 0 }, ...field })) }))),
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'firstName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.firstName[locale], sx: { flexShrink: 0 }, ...field })) })),
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'lastName', control: control, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, label: usersTranslations.lastName[locale], sx: { flexShrink: 0 }, ...field })) })),
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'email', control: control, rules: { required: true }, render: ({ field }) => (React.createElement(TextField, { size: 'small', fullWidth: true, error: !!errors.email, helperText: errors.email
-                            ? usersTranslations.requiredField[locale]
-                            : undefined, label: usersTranslations.email[locale], sx: { flexShrink: 0 }, ...field })) })),
-            React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'enabled', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.enabled[locale] })) })),
-            mode === 'create' && (React.createElement(Grid, { item: true, xs: 12 },
-                React.createElement(Controller, { name: 'sendEmailOnCreation', control: control, render: ({ field }) => (React.createElement(FormControlLabel, { sx: { ml: 1 }, control: React.createElement(Switch, { checked: field.value, size: 'small', ...field }), label: usersTranslations.sendResetPasswordEmail[locale] })) }))),
-            React.createElement(Grid, { item: true, sx: {
-                    mt: 2,
-                    display: 'flex',
-                    justifyContent: 'flex-end',
-                    gap: 2,
-                    width: '100%',
-                } },
-                mode === 'create' && (React.createElement(Button, { variant: 'outlined', onClick: onCancel }, usersTranslations.cancel[locale])),
-                React.createElement(Button, { variant: 'contained', type: 'submit' }, usersTranslations.save[locale])))));
-};
-export default UserForm;

package/lib/components/users/UserGroups.js

@@ -1,63 +0,0 @@
-import React from 'react';
-import { Box, Button, IconButton, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, } from '@mui/material';
-import AddIcon from '@mui/icons-material/Add';
-import DeleteIcon from '@mui/icons-material/Delete';
-import { isStringTranslation, useLocale } from '@deix/rossini-core';
-import { useAddUserToGroup, useRemoveUserFromGroup, useUserGroups, } from '../../utils/hooks/users';
-import { useState } from 'react';
-import DeleteConfirmationDialog from '../DeleteConfirmationDialog';
-import { useQueryClient } from '@tanstack/react-query';
-import usersTranslations from '../../lang/users';
-import AddItemDialog from '../AddItemDialog';
-import { useGroups } from '../../utils/hooks/groups';
-import { useAPIClient } from '../../utils/hooks/useAPIClient';
-const userGroupsTableColumns = [
-    {
-        id: 'name',
-        label: { en: 'Group', it: 'Gruppo' },
-    },
-];
-const UserGroups = ({ user }) => {
-    const locale = useLocale();
-    const apiClient = useAPIClient();
-    const queryClient = useQueryClient();
-    const { data: groups } = useGroups(apiClient);
-    const { data: userGroups } = useUserGroups(user?.id, apiClient);
-    const { mutate: addUserToGroup } = useAddUserToGroup(queryClient, apiClient);
-    const { mutate: removeUserFromGroup } = useRemoveUserFromGroup(queryClient, apiClient);
-    const [openAddGroupDialog, setOpenAddGroupDialog] = useState(false);
-    const [openConfirmationDialog, setOpenConfirmationDialog] = useState(false);
-    const [deleteId, setDeleteId] = useState();
-    return (React.createElement(React.Fragment, null,
-        userGroups && userGroups.length > 0 && (React.createElement(Box, { maxWidth: 'sm' },
-            React.createElement(TableContainer, null,
-                React.createElement(Table, { size: 'small' },
-                    React.createElement(TableHead, null,
-                        React.createElement(TableRow, null,
-                            userGroupsTableColumns.map((col) => (React.createElement(TableCell, { key: col.id, align: col.align || 'inherit' }, isStringTranslation(col.label)
-                                ? col.label[locale]
-                                : col.label))),
-                            React.createElement(TableCell, { padding: 'none' }, ''))),
-                    React.createElement(TableBody, null, userGroups?.map((group, rowIdx) => (React.createElement(TableRow, { key: rowIdx },
-                        React.createElement(TableCell, null, group.name),
-                        React.createElement(TableCell, { padding: 'none', align: 'right' },
-                            React.createElement(IconButton, { size: 'small', onClick: (evt) => {
-                                    evt.stopPropagation();
-                                    setOpenConfirmationDialog(true);
-                                    setDeleteId(group.id);
-                                } },
-                                React.createElement(DeleteIcon, null))))))))))),
-        React.createElement(Button, { variant: 'outlined', startIcon: React.createElement(AddIcon, null), onClick: () => setOpenAddGroupDialog(true), sx: { marginTop: 2 } }, usersTranslations.addGroup[locale]),
-        React.createElement(AddItemDialog, { open: openAddGroupDialog, onClose: () => setOpenAddGroupDialog(false), onConfirm: (value) => {
-                if (value) {
-                    addUserToGroup({ userId: user.id, groupId: value?.value });
-                }
-            }, title: usersTranslations.addGroup, options: groups?.map((group) => ({
-                value: group.id,
-                label: group.name,
-            })) }),
-        React.createElement(DeleteConfirmationDialog, { open: openConfirmationDialog, onClose: () => setOpenConfirmationDialog(false), onConfirm: () => deleteId
-                ? removeUserFromGroup({ userId: user.id, groupId: deleteId })
-                : {} })));
-};
-export default UserGroups;