@applica-software-guru/react-admin 1.0.46 → 1.0.51

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+import React from 'react';
+/**
+ * Definisce le proprietà di un elemento del menu.
+ */
+export type MenuItemProps = {
+    id: string;
+    /**
+     * Titolo da attribure all'elemento del menu.
+     * Il titolo deve essere una stringa localizzata: es. ra.menu.item.foo
+     */
+    title: string;
+    /**
+     * Icona da attribuire all'elemento del menu.
+     */
+    icon: React.ReactNode;
+    /**
+     * Tipo di elemento del menu.
+     * - item: elemento di menu normale
+     * - group: gruppo di elementi di menu
+     * - collapse: gruppo di elementi di menu con collapse
+     */
+    type: 'item' | 'group' | 'collapse';
+    /**
+     * URL da attribuire all'elemento del menu.
+     * Può puntare ad una risorsa o ad una pagina personalizzata purché la stessa sia stata registrata nell'appliazione.
+     *
+     * @example
+     * /entities/user
+     * /pages/foo
+     */
+    url: string;
+    /**
+     * Indica se l'elemento del menu è una risorsa.
+     */
+    resource: boolean;
+    /**
+     * Elenco dei ruoli che possono accedere all'elemento del menu.
+     * Se l'utente collegato non contiene almeno uno dei ruoli specificati l'elemento del menu non viene visualizzato.
+     *
+     * @example
+     * ["ROLE_ADMIN", "ROLE_USER"]
+     */
+    roles: string[];
+    /**
+     * Elenco dei figli dell'elemento del menu.
+     * Valido solo per i tipi "group" e "collapse".
+     */
+    children?: MenuItemProps[];
+};
+/**
+ * Indica come deve essere configurato il menu dell'applicazione.
+ */
+export type MenuProps = MenuItemProps[];
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB;;;;;OAKG;IACH,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,CAAC;IACpC;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,QAAQ,EAAE,OAAO,CAAC;IAClB;;;;;;OAMG;IACH,KAAK,EAAE,MAAM,EAAE,CAAC;IAChB;;;OAGG;IACH,QAAQ,CAAC,EAAE,aAAa,EAAE,CAAC;CAC5B,CAAC;AAEF;;GAEG;AACH,MAAM,MAAM,SAAS,GAAG,aAAa,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.0.46",
+  "version": "1.0.51",
   "private": false,
   "repository": {
     "type": "git",

package/src/AdminContext.tsx

@@ -0,0 +1,19 @@
+import { CoreAdminContext, CoreAdminContextProps } from 'react-admin';
+
+import { ScrollTop } from './components';
+import { ThemeCustomization } from './themes';
+
+const AdminContext = ({ children, theme, ...props }: CoreAdminContextProps) => (
+  <CoreAdminContext {...props}>
+    <ThemeCustomization themeOverrides={theme}>
+      <ScrollTop>
+        {/** @ts-ignore */}
+        {children}
+      </ScrollTop>
+    </ThemeCustomization>
+  </CoreAdminContext>
+);
+
+AdminContext.displayName = 'ApplicaAdminContext';
+
+export default AdminContext;

package/src/{ApplicaAdmin.jsx → ApplicaAdmin.tsx}

@@ -4,13 +4,16 @@ import { Layout, MainIcon, Notification, SmallIcon } from './components';
 import { createI18nProvider, useI18nCatcher, useI18nLanguages } from './i18n';
 
 import Admin from './Admin';
+import { AdminProps } from 'react-admin';
+import { I18nCatcherBodyBuilderResultProps } from './i18n/useI18nCatcher';
+import { MenuProps } from 'src/types';
 import PropTypes from 'prop-types';
 import { QueryClient } from 'react-query';
 import { useMemo } from 'react';
 
-const languageResponseMapper = (response) =>
+const languageResponseMapper = (response: any) =>
   response.reduce(
-    (messages, message) => ({
+    (messages: any, message: any) => ({
       ...messages,
       [message.lang]: {
         ...(messages[message.lang] || {}),
@@ -20,8 +23,8 @@ const languageResponseMapper = (response) =>
     {}
   );
 
-const i18nBodyRequestMapper = (locale, message) => ({
-  lang: locale,
+const i18nBodyRequestMapper = (lang: string, message: string): I18nCatcherBodyBuilderResultProps => ({
+  lang,
   code: message,
   text: message
 });
@@ -34,22 +37,125 @@ const queryClient = new QueryClient({
   }
 });
 
+export type ApplicaAdminProps = AdminProps & {
+  theme: any;
+  apiUrl: string;
+  defaultLocale: string;
+  development: boolean;
+  logoMain: any;
+  logoIcon: any;
+  menu: MenuProps;
+  name: string;
+  version: string;
+  dataProvider: any;
+  authProvider: any;
+  notification: string;
+  disableNotification: boolean;
+};
+
+/**
+ * Definisce un'applicazione super figa basata su React Admi, Mantis Theme ed il nostro stile.
+ * Ogni applicazione che crei dovrebbe partire con un 'C'era una volta un ApplicaAdmin'.
+ *
+ * @example
+ * // Esempio di utilizzo
+ * import { ApplicaAdmin } from '@applica-software-guru/react-admin';
+ * import { createAuthProvider } from '@applica-software-guru/iam-client';
+ * import { createDataProvider } from '@applica-software-guru/crud-client';
+ * import * as entities from './entities';
+ *
+ * const apiUrl = "https://bimbobruno.applica.guru/api";
+ * const authProvider = createAuthProvider({ apiUrl });
+ * const getToken = async () => await authProvider.getToken();
+ * const getHeaders = async () => await authProvider.getHeaders();
+ *
+ * const dataProvider = createDataProvider({ apiUrl, getToken, getHeaders });
+ *
+ * const App = () => (
+ *  <ApplicaAdmin
+ *   apiUrl="https://api.applica.software-guru.it"
+ *   dataProvider={dataProvider}
+ *   authProvider={authProvider}
+ *   menu={menu}
+ *   name="Applica Admin"
+ *   version="1.0.0">
+ *   <Resource name="entities/user" {...entities.user} />
+ * </ApplicaAdmin>
+ *
+ * @param {ApplicaAdminProps}
+ * @returns {React.ReactElement}
+ */
 const ApplicaAdmin = ({
+  /**
+   * Eventuali configurazioni aggiuntive da passare al tema.
+   * @remarks Questo tema è basato su Mantis Theme (https://mantisdashboard.io/)
+   *
+   * @see https://marmelab.com/react-admin/Theming.html
+   * @see https://material-ui.com/customization/theming/
+   */
   theme,
+  /**
+   * URL dell'API da utilizzare nell'applicazione.
+   * Sebbene venga già definito un dataProvider ed authProvider di default, è possibile che l'app
+   * utilizzi l'apiUrl specificato per ulteriori operazioni (es. getstione delle notifiche).
+   */
   apiUrl,
+  /**
+   * La lingua di default da utilizzare nell'applicazione.
+   */
   defaultLocale,
+  /**
+   * Se impostato a true, l'applicazione lavora in modalità sviluppo.
+   * La modalità sviluppo è utile per effettuare test e debug ed esegue attività che non sono
+   * consigliate in produzione (es. cattura e inoltro dei messaggi non localizzati).
+   */
   development,
+  /**
+   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
+   */
   logoMain,
+  /**
+   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
+   */
   logoIcon,
+  /**
+   * Configurazione del menu da visualizzare nell'applicazione.
+   */
   menu,
+  /**
+   * Nome dell'applicazione da mostrare nell'header.
+   */
   name,
+  /**
+   * Versione dell'applicazione da mostrare nel footer.
+   */
   version,
+  /**
+   * Il provider di autenticazione da utilizzare nell'applicazione.
+   */
   dataProvider,
+  /**
+   * Il provider di dati da utilizzare nell'applicazione.
+   */
   authProvider,
+  /**
+   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
+   * @example
+   * // In questo caso, le notifiche verranno gestite tramite la risorsa "entities/notification"
+   * <ApplicaAdmin notification="entities/notification" />
+   */
   notification,
+  /**
+   * Indica se le notifiche devono essere disabilitate.
+   * Se le notifiche sono abilitate comparirà automaticamente un'icona in alto a destra nell'header.
+   *
+   * @example
+   * // In questo caso, le notifiche verranno disabilitate
+   * <ApplicaAdmin disableNotification />
+   */
   disableNotification,
   ...props
-}) => {
+}: ApplicaAdminProps) => {
   const languages = useI18nLanguages({
     apiUrl,
     endpoint: '/i18n/messages',
@@ -66,9 +172,9 @@ const ApplicaAdmin = ({
   useCliErrorCatcher({
     apiUrl,
     endpoint: '/cli/error',
-    catcherFn: (error) => {
-      var errorMessage = error?.toString();
-      var knownErrors = [
+    catcherFn: (error: any): CatchResult => {
+      const errorMessage = error?.toString();
+      const knownErrors = [
         // @see https://github.com/marmelab/react-admin/pull/8884
         'Invalid prop `file` of type `string` supplied to `FileInputPreview`, expected `object`.',
         'Failed prop type: Invalid prop `checked` of type `string` supplied to `ForwardRef(Switch)`, expected `boolean`.',
@@ -87,7 +193,7 @@ const ApplicaAdmin = ({
   });
 
   const layout = useMemo(
-    () => (props) => {
+    () => (props: any) => {
       const _logoMain = name ? <MainIcon title={name} /> : logoMain;
       const _logoIcon = name ? <SmallIcon title={name} /> : logoIcon;
       return (
@@ -146,59 +252,18 @@ ApplicaAdmin.defaultProps = {
 
 ApplicaAdmin.propTypes = {
   ...Admin.propTypes,
-  /**
-   * Eventuali configurazioni aggiuntive da passare al tema.
-   */
   theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
-  /**
-   * URL dell'API da utilizzare nell'applicazione.
-   */
   apiUrl: PropTypes.string.isRequired,
-
-  /**
-   * La lingua di default da utilizzare nell'applicazione.
-   */
   defaultLocale: PropTypes.string,
-  /**
-   * Se impostato a true, l'applicazione lavora in modalità sviluppo.
-   * In questa modalità, per esempio, l'applicazione è in grando di catturare ed inoltrare al server eventuali messaggi non localizzati.
-   */
   development: PropTypes.bool,
-  /**
-   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
-   */
   logoMain: PropTypes.node,
-  /**
-   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
-   */
   logoIcon: PropTypes.node,
-  /**
-   * Configurazione del menu da visualizzare nell'applicazione.
-   */
   menu: PropTypes.arrayOf(MenuPropTypes),
-  /**
-   * Nome dell'applicazione.
-   */
   name: PropTypes.string,
-  /**
-   * Versione dell'applicazione.
-   */
   version: PropTypes.string,
-  /**
-   * Il provider di autenticazione da utilizzare nell'applicazione.
-   */
   authProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Il provider di dati da utilizzare nell'applicazione.
-   */
   dataProvider: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-  /**
-   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
-   */
   notification: PropTypes.string,
-  /**
-   * Indica se le notifiche devono essere disabilitate.
-   */
   disableNotification: PropTypes.bool
 };
 

package/src/components/{MainCard.jsx → MainCard.tsx}

@@ -1,5 +1,5 @@
 import { Card, CardContent, CardHeader, Divider, Typography } from '@mui/material';
-import { lighten, useTheme } from '@mui/material/styles';
+import { SxProps, lighten, useTheme } from '@mui/material/styles';
 
 import PropTypes from 'prop-types';
 import { forwardRef } from 'react';
@@ -9,6 +9,74 @@ const headerSX = {
   '& .MuiCardHeader-action': { m: '0px auto', alignSelf: 'center' }
 };
 
+export type MainCardProps = {
+  /**
+   * Indicates if the card must be rendered with a border.
+   */
+  border?: boolean;
+  /**
+   * Indicates if the card must be rendered with a box shadow.
+   */
+  boxShadow?: boolean;
+  /**
+   * The content of the card.
+   */
+  children?: React.ReactNode | React.ReactNode[];
+  /**
+   * The subheader of the card.
+   */
+  subheader?: React.ReactNode | string;
+  /**
+   * Indicates if the card must be rendered with a content.
+   */
+  content?: boolean;
+  /**
+   * The class name of the content.
+   */
+  contentClass?: string;
+  /**
+   * The style of the content.
+   */
+  contentSX?: SxProps | any;
+  /**
+   * Indicates if the title of the card must be rendered with a dark color.
+   */
+  darkTitle?: boolean;
+  /**
+   * Indicates if the card must be rendered with a divider.
+   */
+  divider?: boolean;
+  /**
+   * The elevation of the card.
+   */
+  elevation?: number;
+  /**
+   * The secondary content of the card.
+   */
+  secondary?: React.ReactNode | string | object;
+  /**
+   * The shadow of the card.
+   * @example '0px 0px 0px 0px rgba(0,0,0,0.2)'
+   */
+  shadow?: string;
+  /**
+   * The style of the card.
+   */
+  sx?: SxProps | any;
+  /**
+   * The title of the card.
+   */
+  title?: React.ReactNode | string | object;
+  /**
+   * Indicates if the card must be rendered as a modal.
+   */
+  modal?: boolean;
+  /**
+   * The color of the card.
+   */
+  color?: 'default' | 'primary' | 'secondary';
+};
+
 const MainCard = forwardRef(
   (
     {
@@ -28,14 +96,15 @@ const MainCard = forwardRef(
       modal = false,
       color = 'default',
       ...others
-    },
+    }: MainCardProps,
     ref
   ) => {
-    const theme = useTheme();
+    const theme = useTheme() as any;
     boxShadow = theme.palette.mode === 'dark' ? boxShadow || true : boxShadow;
     return (
       <Card
         elevation={elevation || 0}
+        // @ts-ignore
         ref={ref}
         {...others}
         sx={{
@@ -69,6 +138,7 @@ const MainCard = forwardRef(
         }}
       >
         {!darkTitle && title && (
+          /** @ts-ignore */
           <CardHeader
             sx={headerSX}
             titleTypographyProps={{ variant: 'subtitle1' }}
@@ -77,6 +147,7 @@ const MainCard = forwardRef(
             subheader={subheader}
           />
         )}
+        {/** @ts-ignore */}
         {darkTitle && title && <CardHeader sx={headerSX} title={<Typography variant="h4">{title}</Typography>} action={secondary} />}
         {title && divider && <Divider />}
         {content && <CardContent sx={contentSX}>{children}</CardContent>}

package/src/components/ra-lists/{Datagrid.jsx → Datagrid.tsx}

@@ -1,8 +1,9 @@
-import { Datagrid as RaDatagrid } from 'react-admin';
+import { DatagridProps, Datagrid as RaDatagrid } from 'react-admin';
+
 import { styled } from '@mui/material/styles';
 
 const ApplicaStyledDatagrid = styled(RaDatagrid, {
-  name: 'RaApplicaDatagrid',
+  name: 'ApplicaDatagrid',
   slot: 'root'
 })(() => ({
   // Resolve an issue related to the visualization of the bulk actions toolbar.
@@ -29,7 +30,17 @@ const ApplicaStyledDatagrid = styled(RaDatagrid, {
   }
 }));
 
-const Datagrid = (props) => <ApplicaStyledDatagrid {...props} />;
+/**
+ * This component is a wrapper of the React-Admin Datagrid component.
+ * It is used to customize the Datagrid component.
+ * It is used by the List component.
+ * It is not meant to be used directly.
+ * Thsi version is designed by Applica for Mantis and expose few overrides on css styles based on this theme.
+ *
+ * @param {DatagridProps} props
+ * @returns {JSX.Element}
+ */
+const Datagrid = (props: DatagridProps): JSX.Element => <ApplicaStyledDatagrid {...props} />;
 
 Datagrid.propTypes = {
   ...RaDatagrid.propTypes

package/src/components/ra-lists/{Empty.jsx → Empty.tsx}

@@ -8,11 +8,40 @@ import PropTypes from 'prop-types';
 import { Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 
+export type EmptyProps = {
+  /**
+   * The actions of the empty page.
+   *
+   * @example <Button label="Refresh" onClick={refresh} />
+   * @example <Button label="Add" onClick={add} />
+   * @example <Button label="Export" onClick={export} />
+   * @example <Button label="Import" onClick={import} />
+   **/
+  actions?: React.ReactNode;
+  /**
+   * The class name of the empty page.
+   *
+   * @example 'my-custom-empty'
+   * @example 'my-custom-empty my-custom-empty--full-width'
+   **/
+  className?: string;
+};
+
 const StyledToolbar = styled('div')(({ theme }) => ({
   padding: theme.spacing(2)
 }));
 
-const Empty = ({ actions, className, ...props }) => {
+/**
+ * The Empty component is used to display a message when the list is empty.
+ * This component can be used only inside a List component.
+ *
+ * @example
+ * <List empty={<Empty actions={<Button label="Add" onClick={add} />} />} />
+ *
+ * @param {EmptyProps}
+ * @returns {JSX.Element}
+ */
+const Empty = ({ actions, className, ...props }: EmptyProps): JSX.Element => {
   const { hasCreate } = useResourceDefinition(props);
   const resource = useResourceContext(props);
 
@@ -50,7 +79,7 @@ const Empty = ({ actions, className, ...props }) => {
   );
 };
 
-const PREFIX = 'RaApplicaEmpty';
+const PREFIX = 'ApplicaEmpty';
 
 export const EmptyClasses = {
   message: `${PREFIX}-message`,

package/src/components/ra-lists/{List.jsx → List.tsx}

@@ -1,5 +1,6 @@
+import { ListProps, List as RaList } from 'react-admin';
+
 import MainCard from '../MainCard';
-import { List as RaList } from 'react-admin';
 import { styled } from '@mui/system';
 
 const ApplicaStyledList = styled(RaList, {
@@ -63,7 +64,7 @@ const ApplicaStyledList = styled(RaList, {
   }
 }));
 
-const List = (props) => {
+const List = (props: ListProps): JSX.Element => {
   return (
     <MainCard content={false}>
       <ApplicaStyledList {...RaList.defaultProps} {...props} />

package/src/contexts/MenuConfigContext.tsx

@@ -0,0 +1,117 @@
+import MenuPropTypes from './MenuPropTypes';
+import { MenuProps } from '../types';
+import PropTypes from 'prop-types';
+import { createContext } from 'react';
+import { useLocalStorage } from '../hooks';
+
+export type MenuConfigContextProps = {
+  openItem: string[];
+  openComponent: string;
+  selectedID: string | null;
+  drawerOpen: boolean;
+  componentDrawerOpen: boolean;
+  menuDashboard: any;
+  error: any;
+  groups: MenuProps;
+  activeItem: (openItem: string[]) => void;
+  activeComponent: (openComponent: string) => void;
+  openDrawer: (drawerOpen: boolean) => void;
+  openComponentDrawer: (componentDrawerOpen: boolean) => void;
+  activeID: (selectedID: string | null) => void;
+  getMenuSuccess: (menuDashboard: any) => void;
+  hasError: (error: any) => void;
+};
+
+const initialState = {
+  openItem: ['dashboard'],
+  openComponent: 'buttons',
+  selectedID: null,
+  drawerOpen: false,
+  componentDrawerOpen: true,
+  menuDashboard: {},
+  error: null
+};
+
+const MenuConfigContext = createContext(initialState);
+
+export type MenuConfigProviderProps = {
+  menu: MenuProps;
+  children: React.ReactNode;
+};
+
+const MenuConfigProvider = ({ menu: groups, children }: MenuConfigProviderProps) => {
+  const [menu, setMenu] = useLocalStorage('menu-config', { ...initialState });
+
+  const activeItem = (openItem: string) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      openItem
+    }));
+  };
+
+  const activeID = (selectedID: string) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      selectedID
+    }));
+  };
+
+  const activeComponent = (openComponent: string) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      openComponent
+    }));
+  };
+
+  const openDrawer = (drawerOpen: boolean) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      drawerOpen
+    }));
+  };
+
+  const openComponentDrawer = (componentDrawerOpen: boolean) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      componentDrawerOpen
+    }));
+  };
+
+  const getMenuSuccess = (menuDashboard: any) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      menuDashboard
+    }));
+  };
+
+  const hasError = (error: any) => {
+    setMenu((menu: MenuConfigContextProps) => ({
+      ...menu,
+      error
+    }));
+  };
+  return (
+    <MenuConfigContext.Provider
+      value={{
+        ...menu,
+        groups,
+        activeItem,
+        activeComponent,
+        openDrawer,
+        openComponentDrawer,
+        activeID,
+        getMenuSuccess,
+        hasError
+      }}
+    >
+      {children}
+    </MenuConfigContext.Provider>
+  );
+};
+
+MenuConfigProvider.propTypes = {
+  children: PropTypes.node,
+  menu: PropTypes.arrayOf(MenuPropTypes)
+};
+
+export { MenuConfigContext, MenuConfigProvider };

package/src/contexts/MenuPropTypes.jsx

@@ -13,7 +13,8 @@ const MenuPropTypes = PropTypes.shape({
   icon: PropTypes.elementType,
   url: PropTypes.string,
   parent: PropTypes.shape(lazy(() => MenuPropTypes)),
-  children: PropTypes.arrayOf(lazy(() => MenuPropTypes))
+  children: PropTypes.arrayOf(lazy(() => MenuPropTypes)),
+  resource: PropTypes.bool
 });
 
 export default MenuPropTypes;