@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/src/index.jsx

@@ -1,12 +1,9 @@
-export { default as Admin } from './Admin';
-export { default as ApplicaAdmin } from './ApplicaAdmin';
-export { ThemeCustomization as ThemeProvider } from './themes';
-
-export * from './hooks';
+export * from './Admin';
+export * from './ApplicaAdmin';
 export * from './components';
-export * from './contexts';
-export * from './utils';
+export * from './hooks';
 export * from './i18n';
+export * from './utils';
 
 export {
   ArrayField,
@@ -15,7 +12,6 @@ export {
   BulkDeleteWithConfirmButton,
   Button,
   ChipField,
-  choices,
   Confirm,
   CreateButton,
   CreateContextProvider,
@@ -24,7 +20,6 @@ export {
   DeleteWithUndoButton,
   EditButton,
   EditContextProvider,
-  email,
   FieldTitle,
   FilterButton,
   Form,
@@ -34,33 +29,35 @@ export {
   ListBase,
   ListToolbar,
   LoadingIndicator,
-  maxLength,
-  maxValue,
-  minLength,
-  minValue,
-  number,
   Pagination,
+  SimpleFormIterator as RaSimpleFormIterator,
   RecordContextProvider,
   ReferenceArrayField,
   ReferenceField,
-  regex,
-  required,
   Resource,
   ResourceContextProvider,
   SaveButton,
-  SimpleFormIterator as RaSimpleFormIterator,
   SimpleFormIteratorContext,
   SimpleShowLayout,
   SingleFieldList,
   TabbedFormTabs,
   TopToolbar,
   UrlField,
+  choices,
+  email,
+  maxLength,
+  maxValue,
+  minLength,
+  minValue,
+  number,
+  regex,
+  required,
   useArrayInput,
   useAuthProvider,
   useChoices,
   useChoicesContext,
-  useCreateContext,
   useCreate,
+  useCreateContext,
   useCreateController,
   useDataProvider,
   useEditContext,
@@ -73,8 +70,8 @@ export {
   useInput,
   useListContext,
   useListController,
-  useLocales,
   useLocaleState,
+  useLocales,
   useNotify,
   usePermissions,
   useRecordContext,
@@ -94,3 +91,5 @@ export {
   useUpdateMany,
   withLifecycleCallbacks
 } from 'react-admin';
+
+export { ThemeCustomization as ThemeProvider } from './themes';

package/src/main.tsx

@@ -1,4 +1,4 @@
-import App from './playground/App';
+import { App } from '@/playground/App';
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 

package/src/playground/.prettierrc

@@ -1,6 +1,6 @@
 {
   "bracketSpacing": true,
-  "printWidth": 140,
+  "printWidth": 120,
   "singleQuote": true,
   "trailingComma": "none",
   "tabWidth": 2,

package/src/playground/App.jsx

@@ -1,21 +1,17 @@
-// import '@applica-software-guru/react-admin/style.css';
-
 import * as entities from './entities';
-
-import { API_URL, APP_NAME } from './config';
-import { ActivatePage, ApplicaAdmin, HttpError, RecoverPage, RegisterPage, Resource } from '@applica-software-guru/react-admin';
-import { createAttachmentsParser, createDataProvider } from '@applica-software-guru/crud-client';
-
-import { CustomPage } from './components/pages';
+import { menu } from './menu';
+import { theme } from './theme';
+import { ActivatePage, ApplicaAdmin, HttpError, RecoverPage, RegisterPage, Resource } from '@/';
+import build from '@/playground/build.json';
+import { CustomPage } from '@/playground/components';
+import { API_URL, APP_NAME } from '@/playground/config';
+import { ApplicaDataProvider, createAttachmentsParser } from '@applica-software-guru/crud-client';
+import { ApplicaAuthProvider, LocalStorage } from '@applica-software-guru/iam-client';
 import { CustomRoutes } from 'ra-core';
 import { Route } from 'react-router-dom';
-import build from './build.json';
-import { createAuthProvider } from '@applica-software-guru/iam-client';
-import menu from './menu';
-import theme from './theme';
 
-const authProvider = createAuthProvider({ apiUrl: API_URL });
-const dataProvider = createDataProvider({
+const authProvider = new ApplicaAuthProvider(API_URL, new LocalStorage());
+const dataProvider = new ApplicaDataProvider({
   apiUrl: API_URL,
   authProvider,
   getHeaders: () => authProvider.getHeaders(),
@@ -23,7 +19,7 @@ const dataProvider = createDataProvider({
   attachmentsParser: createAttachmentsParser(),
   HttpErrorClass: HttpError
 });
-const App = () => {
+function App() {
   return (
     <ApplicaAdmin
       theme={theme}
@@ -56,6 +52,6 @@ const App = () => {
       </CustomRoutes>
     </ApplicaAdmin>
   );
-};
+}
 
-export default App;
+export { App };

package/src/playground/components/index.jsx

@@ -1,6 +1,6 @@
-export * from './ra-lists';
-export * from './ra-inputs';
+export * from './pages';
+export * from './ra-buttons';
 export * from './ra-fields';
 export * from './ra-forms';
-export * from './ra-buttons';
-export * from './pages';
+export * from './ra-inputs';
+export * from './ra-lists';

package/src/playground/components/pages/CustomPage.jsx

@@ -1,7 +1,12 @@
-import { OnboardingTip, OnboardingProvider, OnboardingModes, useRestartOnboarding } from '@applica-software-guru/react-admin';
+import {
+  OnboardingModes,
+  OnboardingProvider,
+  OnboardingTip,
+  useRestartOnboarding
+} from '@applica-software-guru/react-admin';
 import { Button, Stack, Typography } from '@mui/material';
 
-const CustomPage = () => {
+function CustomPage() {
   return (
     <OnboardingProvider mode={OnboardingModes.BROWSER}>
       <Stack direction="row" justifyContent="space-between">
@@ -18,11 +23,11 @@ const CustomPage = () => {
       <RestartButton />
     </OnboardingProvider>
   );
-};
+}
 
-export function RestartButton() {
+function RestartButton() {
   const restartOnboarding = useRestartOnboarding();
   return <Button onClick={restartOnboarding}>RESTART</Button>;
 }
 
-export default CustomPage;
+export { CustomPage, RestartButton };

package/src/playground/components/pages/index.jsx

@@ -1,2 +1 @@
-import CustomPage from './CustomPage';
-export { CustomPage };
+export * from './CustomPage';

package/src/playground/components/ra-fields/UserPictureField.jsx

@@ -1,20 +1,15 @@
 import { CoverField, useRecordContext } from '@applica-software-guru/react-admin';
-
+import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React from 'react';
-import { get } from 'lodash';
 
-const UserPictureField = ({ source, ...props }) => {
+function UserPictureField({ source, ...props }) {
   const record = useRecordContext();
-  const image = get(record, source);
+  const image = _.get(record, source);
   if (!image) {
     return null;
   }
   return <CoverField {...props} circle width={50} height={50} justify="flex-end" />;
-};
-
-UserPictureField.propTypes = {
-  source: PropTypes.string.isRequired
-};
+}
 
-export default UserPictureField;
+export { UserPictureField };

package/src/playground/components/ra-fields/index.jsx

@@ -1,2 +1 @@
-import UserPictureField from './UserPictureField';
-export { UserPictureField };
+export * from './UserPictureField';

package/src/playground/components/ra-forms/DeviceForm.jsx

@@ -1,29 +1,35 @@
-import { ReadonlyField, SimpleForm, TextInput, required, useRecordContext, useThemeConfig } from '@applica-software-guru/react-admin';
-
+import {
+  ReadonlyField,
+  SimpleForm,
+  TextInput,
+  required,
+  useRecordContext,
+  useThemeConfig
+} from '@applica-software-guru/react-admin';
 import { Grid } from '@mui/material';
 
-const DeviceForm = () => {
+function DeviceForm() {
   const { spacing } = useThemeConfig();
   const record = useRecordContext();
   return (
     <SimpleForm>
       <Grid container spacing={spacing}>
-        {record?.id && (
+        {record?.id ? (
           <Grid item xs={12} sm={12}>
             <ReadonlyField source="registrationDate" fullWidth />
           </Grid>
-        )}
+        ) : null}
         <Grid item xs={12} sm={12}>
           <TextInput source="code" validate={required()} fullWidth />
         </Grid>
-        {record?.id && (
+        {record?.id ? (
           <Grid item xs={12} sm={12}>
             <TextInput source="secret" validate={required()} fullWidth />
           </Grid>
-        )}
+        ) : null}
       </Grid>
     </SimpleForm>
   );
-};
+}
 
-export default DeviceForm;
+export { DeviceForm };

package/src/playground/components/ra-forms/I18nMessageForm.jsx

@@ -1,9 +1,8 @@
+import { LangSelectInput } from '@/playground/components/ra-inputs';
 import { SimpleForm, SmartTextInput, TextInput, useThemeConfig } from '@applica-software-guru/react-admin';
-
 import { Grid } from '@mui/material';
-import { LangSelectInput } from '../ra-inputs';
 
-const I18nMessageForm = () => {
+function I18nMessageForm() {
   const { spacing } = useThemeConfig();
   return (
     <SimpleForm defaultValues={{ lang: 'it' }}>
@@ -20,5 +19,5 @@ const I18nMessageForm = () => {
       </Grid>
     </SimpleForm>
   );
-};
-export default I18nMessageForm;
+}
+export { I18nMessageForm };

package/src/playground/components/ra-forms/TestModelForm.jsx

@@ -1,18 +1,20 @@
 import { LongForm, MainCard, TextInput } from '@applica-software-guru/react-admin';
 import { Grid } from '@mui/material';
 
-const TestModelForm = () => (
-  <LongForm>
-    <LongForm.Tab id="root" label="Root">
-      <MainCard title="Info">
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <TextInput source="name" fullWidth />
+function TestModelForm() {
+  return (
+    <LongForm>
+      <LongForm.Tab id="root" label="Root">
+        <MainCard title="Info">
+          <Grid container spacing={2}>
+            <Grid item xs={12}>
+              <TextInput source="name" fullWidth />
+            </Grid>
           </Grid>
-        </Grid>
-      </MainCard>
-    </LongForm.Tab>
-  </LongForm>
-);
+        </MainCard>
+      </LongForm.Tab>
+    </LongForm>
+  );
+}
 
-export default TestModelForm;
+export { TestModelForm };

package/src/playground/components/ra-forms/UserForm.jsx

@@ -1,6 +1,8 @@
 import {
   ArrayInput,
   BooleanInput,
+  CreateInDialogButton,
+  EditInDialogButton,
   ImageInput,
   SelectArrayInput,
   SimpleForm,
@@ -9,12 +11,10 @@ import {
   TextInput,
   useThemeConfig
 } from '@applica-software-guru/react-admin';
-
 import { Grid } from '@mui/material';
 import PropTypes from 'prop-types';
-import { CreateInDialogButton, EditInDialogButton } from '../../../components';
 
-const UserForm = ({ configuredRoles }) => {
+function UserForm({ roles }) {
   const { spacing } = useThemeConfig();
   return (
     <SimpleForm defaultValues={{ active: true }}>
@@ -29,40 +29,15 @@ const UserForm = ({ configuredRoles }) => {
           <TextInput source="name" fullWidth />
         </Grid>
         <Grid item lg={12} xs={12}>
-          <SelectArrayInput source="roles" label="ra.user.roles" choices={configuredRoles} fullWidth />
+          <SelectArrayInput source="roles" label="ra.user.roles" choices={roles} fullWidth />
         </Grid>
         <Grid item lg={12} xs={12}>
           <ImageInput source="image" accept="image/*" multiple={false} fullWidth />
         </Grid>
-        <Grid item lg={12} xs={12}>
-          <ArrayInput source="items" label={false}>
-            <TableFormIterator label="Informazioni utente">
-              <TextInput source="name" label="Name" sx={{ minWidth: 200 }} />
-              <TextInput source="surname" label="Surname" sx={{ minWidth: 150 }} />
-              <SelectArrayInput source="roles" label="Ruoli" choices={configuredRoles} />
-            </TableFormIterator>
-          </ArrayInput>
-        </Grid>
       </Grid>
-      <EditInDialogButton>
-        <TabbedForm>
-          <TabbedForm.Tab label="ciaooo">
-            <TextInput source="ciao" />
-          </TabbedForm.Tab>
-        </TabbedForm>
-      </EditInDialogButton>
-      <CreateInDialogButton>
-        <SimpleForm>
-          <TextInput source="ciao" />
-        </SimpleForm>
-      </CreateInDialogButton>
       <BooleanInput source="active" />
     </SimpleForm>
   );
-};
-
-UserForm.propTypes = {
-  configuredRoles: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })).isRequired
-};
+}
 
-export default UserForm;
+export { UserForm };

package/src/playground/components/ra-forms/index.jsx

@@ -1,3 +1,4 @@
-export { default as DeviceForm } from './DeviceForm';
-export { default as I18nMessageForm } from './I18nMessageForm';
-export { default as UserForm } from './UserForm';
+export * from './DeviceForm';
+export * from './I18nMessageForm';
+export * from './TestModelForm';
+export * from './UserForm';

package/src/playground/components/ra-inputs/LangSelectInput.jsx

@@ -1,4 +1,8 @@
-import { SelectInput } from '@applica-software-guru/react-admin';
-const LangSelectInput = (props) => <SelectInput {...props} choices={[{ id: 'it', name: 'Italiano' }]} />;
+import { SelectInput, useLocales } from '@applica-software-guru/react-admin';
 
-export default LangSelectInput;
+function LangSelectInput(props) {
+  const locales = useLocales();
+  return <SelectInput {...props} choices={locales.map(({ locale, name }) => ({ id: locale, name }))} />;
+}
+
+export { LangSelectInput };

package/src/playground/components/ra-inputs/YesOrNoSelectInput.jsx

@@ -1,14 +1,17 @@
 import { SelectInput } from '@applica-software-guru/react-admin';
-const YesOrNoSelectInput = (props) => (
-  <SelectInput
-    {...props}
-    display="legend"
-    emptyText={'ra.boolean.null'}
-    choices={[
-      { id: true, name: 'ra.yes' },
-      { id: false, name: 'ra.no' }
-    ]}
-  />
-);
 
-export default YesOrNoSelectInput;
+function YesOrNoSelectInput(props) {
+  return (
+    <SelectInput
+      {...props}
+      display="legend"
+      emptyText={'ra.boolean.null'}
+      choices={[
+        { id: true, name: 'ra.yes' },
+        { id: false, name: 'ra.no' }
+      ]}
+    />
+  );
+}
+
+export { YesOrNoSelectInput };

package/src/playground/components/ra-inputs/index.jsx

@@ -1,3 +1,2 @@
-import LangSelectInput from './LangSelectInput';
-import YesOrNoSelectInput from './YesOrNoSelectInput';
-export { LangSelectInput, YesOrNoSelectInput };
+export * from './LangSelectInput';
+export * from './YesOrNoSelectInput';

package/src/playground/components/ra-lists/DeviceList.jsx

@@ -1,8 +1,15 @@
-import { Datagrid, DateField, List, SearchInput, TextField, useThemeConfig, useTranslate } from '@applica-software-guru/react-admin';
-
+import {
+  Datagrid,
+  DateField,
+  List,
+  SearchInput,
+  TextField,
+  useThemeConfig,
+  useTranslate
+} from '@applica-software-guru/react-admin';
 import { Alert } from '@mui/material';
 
-const AlertBox = () => {
+function AlertBox() {
   const { spacing } = useThemeConfig();
   const translate = useTranslate();
   return (
@@ -10,16 +17,18 @@ const AlertBox = () => {
       {translate('resources.entities/device.alert')}
     </Alert>
   );
-};
-const DeviceList = () => (
-  <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
-    <AlertBox />
-    <Datagrid rowClick="edit">
-      <TextField source="id" />
-      <TextField source="code" />
-      <DateField source="registrationDate" showTime />
-    </Datagrid>
-  </List>
-);
+}
+function DeviceList() {
+  return (
+    <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
+      <AlertBox />
+      <Datagrid rowClick="edit">
+        <TextField source="id" />
+        <TextField source="code" />
+        <DateField source="registrationDate" showTime />
+      </Datagrid>
+    </List>
+  );
+}
 
-export default DeviceList;
+export { DeviceList };

package/src/playground/components/ra-lists/I18nMessageList.jsx

@@ -1,15 +1,24 @@
-import { ActionsField, BooleanField, Datagrid, List, RecordInput, SearchInput, TextField } from '@applica-software-guru/react-admin';
+import {
+  ActionsField,
+  BooleanField,
+  Datagrid,
+  List,
+  RecordInput,
+  SearchInput,
+  TextField
+} from '@applica-software-guru/react-admin';
 
-const I18nMessageList = () => (
-  <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
-    <Datagrid>
-      <TextField source="lang" />
-      <RecordInput source="code" />
-      <RecordInput source="text" />
-      <BooleanField source="translated" />
-      <ActionsField />
-    </Datagrid>
-  </List>
-);
-
-export default I18nMessageList;
+function I18nMessageList() {
+  return (
+    <List perPage={25} filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}>
+      <Datagrid>
+        <TextField source="lang" />
+        <RecordInput source="code" />
+        <RecordInput source="text" />
+        <BooleanField source="translated" />
+        <ActionsField />
+      </Datagrid>
+    </List>
+  );
+}
+export { I18nMessageList };

package/src/playground/components/ra-lists/UserList.jsx

@@ -15,35 +15,57 @@ import {
 } from '@applica-software-guru/react-admin';
 import { Chip, useMediaQuery } from '@mui/material';
 
-import PropTypes from 'prop-types';
-
-const sortRoles = (roles, configuredRoles) => {
-  return roles
-    ?.filter((r) => configuredRoles.find((cr) => cr.id === r))
+function sortRoles(userRoles, roles) {
+  return userRoles
+    ?.filter((r) => roles.find((cr) => cr.id === r))
     .sort((a, b) => {
-      const aIndex = configuredRoles.findIndex((r) => r.id === a);
-      const bIndex = configuredRoles.findIndex((r) => r.id === b);
+      const aIndex = roles.findIndex((r) => r.id === a);
+      const bIndex = roles.findIndex((r) => r.id === b);
 
       return aIndex - bIndex;
     });
-};
-const UserList = ({ configuredRoles }) => {
+}
+
+function RolesInput({ record, source, roles, ...props }) {
+  return (
+    <SelectInput
+      source={source}
+      choices={roles}
+      format={(v) => v}
+      parse={(v) => v}
+      alwaysOn
+      emptyText="ra.action.view_all"
+      display="legend"
+      {...props}
+    />
+  );
+}
+
+function ImageField({ record }) {
+  return <CoverField source="image" record={record} width={50} height={50} circle />;
+}
+
+function NameField({ record }) {
+  return record.name;
+}
+
+function SecondaryField({ record }) {
+  return record.email;
+}
+
+function UserList({ roles }) {
   const isSmall = useMediaQuery((theme) => theme.breakpoints.down('sm'));
   return (
     <List
       perPage={25}
       filters={[
         <SearchInput key="keyword" source="keyword" alwaysOn fullWidth />,
-        <SelectInput key="role" source="role" choices={configuredRoles} alwaysOn emptyText="ra.action.view_all" display="legend" />,
+        <RolesInput key="role" source="role" choices={roles} />,
         <BooleanInput key="active" source="active" display="legend" />
       ]}
     >
       {isSmall ? (
-        <SimpleList
-          leftAvatar={(record) => <CoverField source="image" circle width={50} height={50} justify="flex-end" record={record} />}
-          primaryText={(record) => record.name}
-          secondaryText={(record) => record.email}
-        />
+        <SimpleList leftAvatar={ImageField} primaryText={NameField} secondaryText={SecondaryField} />
       ) : (
         <Datagrid rowClick="edit">
           <CoverField source="image" sortable={false} label="" width={50} height={50} circle />
@@ -51,23 +73,11 @@ const UserList = ({ configuredRoles }) => {
           <TextField source="name" sortBy="username" />
           <EmailField source="email" />
           <DateField source="registrationDate" showTime />
-          <FunctionField
-            label="ra.user.roles"
-            render={(record) =>
-              sortRoles(record?.roles, configuredRoles)?.map((role) => (
-                <Chip label={configuredRoles.find((r) => r.id === role)?.name} key={role} sx={{ mr: 1, mt: 1 }} color="secondary" />
-              ))
-            }
-          />
           <ImpersonateUserButton />
         </Datagrid>
       )}
     </List>
   );
-};
-
-UserList.propTypes = {
-  configuredRoles: PropTypes.arrayOf(PropTypes.shape({ id: PropTypes.string, name: PropTypes.string })).isRequired
-};
+}
 
-export default UserList;
+export { UserList };

package/src/playground/components/ra-lists/index.jsx

@@ -1,3 +1,3 @@
-export { default as DeviceList } from './DeviceList';
-export { default as I18nMessageList } from './I18nMessageList';
-export { default as UserList } from './UserList';
+export * from './DeviceList';
+export * from './I18nMessageList';
+export * from './UserList';