@applica-software-guru/react-admin 1.0.45 → 1.0.47

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.45",
+  "version": "1.0.47",
   "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/Layout/Header/HeaderContent/Profile.jsx

@@ -129,7 +129,7 @@ const Profile = () => {
                           <Stack>
                             <Typography variant="h6">{identity?.name}</Typography>
                             <Typography variant="body2" color="textSecondary">
-                              {identity?.roles?.map((r) => r.name).join(',')}
+                              {identity?.roles?.map((r) => r.name.replace('ROLE_', '')).join(',')}
                             </Typography>
                           </Stack>
                         </Stack>

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;

package/src/dev/useCliErrorCatcher.ts

@@ -0,0 +1,142 @@
+/* eslint-disable prefer-rest-params */
+/* eslint-disable no-console */
+import * as React from 'react';
+
+export type CatchResultProps = {
+  catch: boolean;
+  display: boolean;
+  log: boolean;
+  error?: string;
+};
+
+class CatchResult {
+  catch: boolean;
+  display: boolean;
+  log: boolean;
+  error?: string;
+
+  constructor({ catch: catchErr, display: displayErr, log: logErr, error }: CatchResultProps) {
+    this.catch = catchErr;
+    this.display = displayErr;
+    this.log = logErr;
+    this.error = error;
+  }
+
+  isCatched() {
+    return this.catch;
+  }
+
+  logError() {
+    return this.log;
+  }
+
+  displayError() {
+    return this.display;
+  }
+}
+
+export type CliErrorCatcherBodyBuilderProps = (error: string | any) => any;
+
+type CliErrorCatcherPutProps = {
+  apiUrl: string;
+  endpoint?: string;
+  message: string;
+  bodyBuilder: CliErrorCatcherBodyBuilderProps;
+};
+
+const putError = ({ apiUrl, endpoint, message, bodyBuilder }: CliErrorCatcherPutProps) =>
+  fetch(`${apiUrl}${endpoint}`, {
+    method: 'PUT',
+    headers: new Headers({
+      Accept: 'application/json',
+      'Content-Type': 'application/json'
+    }),
+    body: JSON.stringify(bodyBuilder(message))
+  });
+
+export type UseCliErrorCatcherProps = {
+  /**
+   * Definisce l'URL del server API.
+   */
+  apiUrl: string;
+  /**
+   * Definisce se il catcher è abilitato.
+   */
+  enabled?: boolean;
+  /**
+   * Definisce l'endpoint del server API su cui inviare l'errore.
+   * Questo parametro viene aggiunto all'URL del server API (apiUrl) attraverso una semplice concatenazione.
+   *
+   * @example
+   * // Serve più per ricordarti come funziona quando lo utilizzerai attivamente dopo tanto tempo (ti conosco bene Roberto, dimenticherai tutto!).
+   * let apiUrl = 'http://localhost:3000';
+   * let endpoint = '/ui-errors/put';
+   * let url = apiUrl + endpoint;
+   * // url = 'http://localhost:3000/ui-errors/put'
+   */
+  endpoint?: string;
+  /**
+   * Definisce se l'applicazione chiamante è in caricamento.
+   * In tal caso il catcher non viene attivato.
+   */
+  loading?: boolean;
+  /**
+   * Definisce la funzione che determina se l'errore deve essere catturato.
+   *
+   * @param error
+   * @returns {CatchResult} Restituisce un oggetto di tipo CatchResult.
+   */
+  catcherFn?: (error: string | any) => CatchResult;
+  /**
+   * Definisce la funzione che costruisce il body da inviare al server API.
+   */
+  bodyBuilder?: CliErrorCatcherBodyBuilderProps;
+};
+
+const useCliErrorCatcher = ({
+  enabled = true,
+  apiUrl,
+  endpoint = '/ui-errors/put',
+  loading,
+  catcherFn = (error) => new CatchResult({ catch: error != undefined, display: false, log: false }),
+  bodyBuilder = (error) => ({ message: error })
+}: UseCliErrorCatcherProps) => {
+  React.useMemo(() => {
+    if (loading) {
+      return;
+    }
+    if (!enabled) {
+      return;
+    }
+
+    const consoleError = console.error;
+
+    console.error = function (error, ...args) {
+      if (!error || typeof error !== 'string') {
+        consoleError.apply(console, arguments as any);
+        return;
+      }
+      const message = error.replace(/%s/g, () => args.shift());
+      const catchResult = catcherFn(message);
+      if (!catchResult.isCatched()) {
+        consoleError.apply(console, arguments as any);
+        return;
+      }
+
+      if (catchResult.logError()) {
+        putError({ apiUrl, endpoint, message, bodyBuilder });
+      }
+
+      if (catchResult.displayError()) {
+        consoleError.apply(console, arguments as any);
+      } else {
+        // eslint-disable-next-line prefer-spread
+        console.debug.apply(console, arguments as any);
+      }
+    };
+  }, [apiUrl, loading, bodyBuilder, endpoint, catcherFn, enabled]);
+  return true;
+};
+export { CatchResult };
+
+export default useCliErrorCatcher;

package/src/i18n/{useI18nCatcher.jsx → useI18nCatcher.ts}

@@ -3,9 +3,33 @@ import * as React from 'react';
 
 import { useLocaleState } from 'react-admin';
 
-const queued = [];
+const queued: string[] = [];
 
-const putMessage = ({ apiUrl, endpoint, locale, message, bodyBuilder }) =>
+export type I18nCatcherBodyBuilderResultProps =
+  | {
+      lang: string;
+      code: string;
+      text: string;
+    }
+  | {
+      message: {
+        lang: string;
+        code: string;
+        text: string;
+      };
+    };
+
+export type I18nCatcherBodyBuilderProps = (lang: string, message: string) => I18nCatcherBodyBuilderResultProps;
+
+type PutMessageProps = {
+  apiUrl: string;
+  endpoint?: string;
+  locale: string;
+  message: string;
+  bodyBuilder: I18nCatcherBodyBuilderProps;
+};
+
+const putMessage = ({ apiUrl, endpoint, locale, message, bodyBuilder }: PutMessageProps): any =>
   message != null &&
   message !== 'undefined' &&
   message.indexOf('[') === -1 &&
@@ -18,22 +42,34 @@ const putMessage = ({ apiUrl, endpoint, locale, message, bodyBuilder }) =>
       Accept: 'application/json',
       'Content-Type': 'application/json'
     }),
-    body: JSON.stringify(bodyBuilder(locale, message))
+    body: JSON.stringify(bodyBuilder(locale, message) || {})
   });
 
+export type UseI18nCatcherProps = {
+  apiUrl: string;
+  enabled?: boolean;
+  endpoint?: string;
+  loading?: boolean;
+  bodyBuilder: I18nCatcherBodyBuilderProps;
+};
+
+/**
+ * Hook che consente di catturare ed inoltrare al server API le stringhe non tradotte.
+ *
+ * @param {UseI18nCatcherProps}
+ * @returns {boolean}
+ */
 const useI18nCatcher = ({
   apiUrl,
   enabled = true,
   endpoint = '/languages/put-message',
   loading,
-  bodyBuilder = (locale, message) => ({
-    code: locale,
-    message: {
-      code: message,
-      text: message
-    }
+  bodyBuilder = (lang, message) => ({
+    lang,
+    code: message,
+    text: message
   })
-}) => {
+}: UseI18nCatcherProps) => {
   const [locale] = useLocaleState();
   React.useMemo(() => {
     if (loading) {
@@ -62,7 +98,9 @@ const useI18nCatcher = ({
         return;
       }
 
-      consoleError.apply(console, arguments);
+      // eslint-disable-next-line prefer-rest-params
+      // eslint-disable-next-line prefer-rest-params
+      consoleError.apply(console, arguments as any);
     };
   }, [apiUrl, locale, loading, bodyBuilder, endpoint, enabled]);
   return true;