@applica-software-guru/react-admin 1.3.165 → 1.3.167

package/package.json

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

package/src/ApplicaAdmin.tsx

@@ -21,98 +21,98 @@ const defaultQueryClient = new QueryClient({
 
 export type ApplicaAdminProps = AdminProps & {
   /**
-   * Eventuali configurazioni aggiuntive da passare al tema.
-   * @remarks Questo tema è basato su Mantis Theme (https://mantisdashboard.io/)
+   * Optionally, a custom theme to use in the application.
+   * @remarks This theme is based on Mantis Theme (https://mantisdashboard.io/)
    *
    * @see https://marmelab.com/react-admin/Theming.html
    * @see https://material-ui.com/customization/theming/
    */
   theme: any;
   /**
-   * Consente di personalizzare ulteriormente il tema in base alle specifiche esposte dal tema stesso.
-   * Divertiti con cautela a modificare variabili di configurazione del tema, se fai un casino Marco Colucci potrebbe usare l'estintore (ho detto tutto).
+   * Optionally, a custom theme configuration to use in the application.
+   * Have fun with caution to modify theme configuration variables, if you make a mess Marco Colucci could use the fire extinguisher (I said everything).
    */
   themeConfig: ThemeConfig;
   /**
-   * 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).
+   * The URL of the API to use in the application.
+   * Although a default dataProvider and authProvider are already defined, it is possible that the app
+   * uses the specified apiUrl for further operations (e.g. handling notifications).
    */
   apiUrl: string;
   /**
-   * La lingua di default da utilizzare nell'applicazione.
+   * The default language to use in the application (default: en).
    */
   defaultLocale: string;
   /**
-   * 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).
+   * If set to true, the application works in development mode.
+   * Development mode is useful for testing and debugging and performs activities that are not
+   * recommended in production (e.g. capturing and forwarding non-localized messages).
    */
   development: boolean;
   /**
-   * Il logo da visualizzare nella barra laterale quando il menu è espanso lateralmente.
+   * The main logo to display in the sidebar when the menu is expanded laterally.
    */
   logoMain: any;
   /**
-   * Eventuale logo da visualizzare nella barra laterale quando il menu è ridotto lateralmente.
+   * The icon to display in the sidebar when the menu is collapsed laterally.
    */
   logoIcon: any;
   /**
-   * Configurazione del menu da visualizzare nell'applicazione.
+   * Configured menu to display in the application.
    */
   menu: MenuProps;
   /**
-   * Nome dell'applicazione da mostrare nell'header.
+   * The name of the application to display in the header.
    */
   name: string;
   /**
-   * Testo da mostrare nel footer. Default: '© Applica Software Guru for'.
+   * Text to display in the footer. Default: '© Applica Software Guru for'.
    */
   copy: string;
   /**
-   * Versione dell'applicazione da mostrare nel footer.
+   * Application version to display in the footer.
    */
   version: string;
   /**
-   * Il provider di autenticazione da utilizzare nell'applicazione.
+   * The data provider to use in the application.
    */
   dataProvider: DataProvider;
   /**
-   * Il provider di dati da utilizzare nell'applicazione.
+   * The auth provider to use in the application.
    */
   authProvider: AuthProvider;
   /**
-   * Indica l'eventuale handler da utilizzare per la gestione degli errori.
-   * Di default è eseguita una chiamata PUT /api/ui/error con il messaggio di errore "error".
-   * Puoi implementare un tuo handler per gestire gli errori in modo diverso.
+   * Indicates the handler to use for error management.
+   * By default, a PUT /api/ui/error call is made with the error message "error".
+   * You can implement your own handler to manage errors differently.
    */
   errorHandler?: IErrorEventHandler | undefined;
   /**
-   * Indica il componente da visualizzare in caso di errore.
+   * Indicates the component to display in case of error.
    */
   error: React.Component;
   /**
-   * Indica il nome della risorsa REST da utilizzare per la gestione delle notifiche.
+   * Indicates the name of the REST resource to use for notification management.
    * @default "entities/notification"
    * @example
-   * // In questo caso, le notifiche verranno gestite tramite la risorsa "entities/notification"
+   * // In this case, notifications will be managed through the "entities/notification" resource
    * <ApplicaAdmin notification="entities/notification" />
    */
   notification: string;
   /**
-   * Indica se le notifiche devono essere disabilitate.
-   * Se le notifiche sono abilitate comparirà automaticamente un'icona in alto a destra nell'header.
+   * Indicates whether notifications should be disabled.
+   * If notifications are enabled, an icon will automatically appear in the top right of the header.
    *
    * @example
    * <ApplicaAdmin enableNotification />
    */
   enableNotification: boolean;
   /**
-   * Indica se la schermata di registrazione deve essere disabilitata.
-   * Se abilitata è necessario registrare una pagina, nelle rotte, che punti a /register
+   * Indicates whether the registration screen should be disabled.
+   * If enabled, it is necessary to register a page, in the routes, that points to /register
    *
    * @example
-   * // Pagina di base realizzata da Applica
+   * // Basic page made by Applica
    * import { RegisterPage } from "@applica-software-guru/react-admin";
    * <CustomRoutes noLayout>
    *  <Route path="/register" component={RegisterPage} />
@@ -120,11 +120,11 @@ export type ApplicaAdminProps = AdminProps & {
    */
   enableRegistration: boolean;
   /**
-   * Indica se la schermata di recupero password deve essere disabilitata.
-   * Se abilitata è necessario registrare una pagina, nelle rotte, che punti a /recover
+   * Indicates whether the password recovery screen should be disabled.
+   * If enabled, it is necessary to register a page, in the routes, that points to /recover
    *
    * @example
-   * // Pagina di base realizzata da Applica
+   * // Basic page made by Applica
    * import { RecoverPage } from "@applica-software-guru/react-admin";
    * <CustomRoutes noLayout>
    *  <Route path="/recover" component={RecoverPage} />
@@ -132,13 +132,20 @@ export type ApplicaAdminProps = AdminProps & {
    */
   enablePasswordRecover: boolean;
   /**
-   * L'instanza di QueryClient da utilizzare nell'applicazione
+   * The query client instance to use in the application.
    */
   queryClient: QueryClient;
+  /**
+   * Background image to display in login, recover, and register pages.
+   * This image must be a component with absolute positioning.
+   */
+  background?: React.ReactNode;
 };
 
 /**
- * Definisce un'applicazione super figa basata su React Admin, Mantis Theme ed il nostro stile.
+ * Define a basic super cool application based on React Admin, Mantis Theme and our style.
+ *
+ * @author A-Team - The Applica Software Guru
  * @param {ApplicaAdminProps}
  * @returns {React.ReactElement}
  */
@@ -164,6 +171,7 @@ const ApplicaAdmin = ({
   enableRegistration,
   enablePasswordRecover,
   queryClient,
+  background,
   ...props
 }: ApplicaAdminProps) => {
   useErrorEventCatcher({
@@ -196,13 +204,15 @@ const ApplicaAdmin = ({
         // @ts-ignore
         name,
         copy,
+        logo: logoMain,
         version,
+        background,
         enableRegistration,
         enablePasswordRecover
       });
     }
     return loginPage;
-  }, [loginPage, name, version, copy, enableRegistration, enablePasswordRecover]);
+  }, [loginPage, name, version, copy, background, logoMain, enableRegistration, enablePasswordRecover]);
   const layout = useMemo(
     () => (props: any) => {
       const _logoMain = name ? <MainIcon title={name} /> : logoMain;

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

@@ -7,10 +7,19 @@ import MainIcon from './MainIcon';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-const AuthWrapper = ({ version, name, copy, children, background = AuthBackground }) => {
+export type AuthWrapperProps = {
+  version: string;
+  name: string;
+  copy?: string;
+  background?: React.ReactNode | React.ComponentType;
+  children: React.ReactNode;
+  logo?: React.ReactNode;
+};
+
+const AuthWrapper = ({ version, name, copy, children, logo, background = AuthBackground }: AuthWrapperProps) => {
   return (
     <Box sx={{ minHeight: '100vh' }}>
-      {React.isValidElement(background) ? background : React.createElement(background)}
+      {React.isValidElement(background) ? background : React.createElement(background as any)}
       <Grid
         container
         direction="column"
@@ -19,8 +28,8 @@ const AuthWrapper = ({ version, name, copy, children, background = AuthBackgroun
           minHeight: '100vh'
         }}
       >
-        <Grid item xs={12} sx={{ ml: 3, mt: 3 }}>
-          <MainIcon title={name} />
+        <Grid item xs={12} sx={{ ml: 3 }}>
+          {logo ? logo : <MainIcon title={name} />}
         </Grid>
         <Grid item xs={12}>
           <Grid

package/src/components/Layout/Navigation/NavGroup.jsx

@@ -37,8 +37,7 @@ const NavGroup = ({ item, lastItem, remItems, lastItemId, setSelectedItems, sele
   const { pathname } = { pathname: '' }; // useLocation()
   const { horizontal, downLg } = useLayoutMediaState();
   const menu = useMenuConfig();
-  const { drawerOpen, selectedID } = menu;
-  const { activeID } = useMenuConfig();
+  const { drawerOpen, selectedID, activeID } = menu;
 
   const [anchorEl, setAnchorEl] = useState(null);
   const [currentItem, setCurrentItem] = useState(item);

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

@@ -1,8 +1,8 @@
 import { Stack, Typography } from '@mui/material';
-
-import PropTypes from 'prop-types';
-
-const MainIcon = ({ title }) => (
+export type MainIconProps = {
+  title: string;
+};
+const MainIcon = ({ title }: MainIconProps) => (
   <Stack direction="row">
     <Typography variant="h2" sx={{ fontWeight: 'regular', letterSpacing: -2.5 }}>
       a.
@@ -14,8 +14,4 @@ const MainIcon = ({ title }) => (
   </Stack>
 );
 
-MainIcon.propTypes = {
-  title: PropTypes.string.isRequired
-};
-
 export default MainIcon;

package/src/components/ra-pages/ActivatePage.tsx

@@ -9,7 +9,7 @@ import PropTypes from 'prop-types';
 import _ from 'lodash';
 import { useEffect } from 'react';
 
-const ActivatePage = ({ name, copy, version, background }: BaseAuthProps) => {
+const ActivatePage = ({ name, copy, logo, version, background }: BaseAuthProps) => {
   const translate = useTranslate();
   const authProvider = useAuthProvider();
   const notify = useNotify();
@@ -31,7 +31,7 @@ const ActivatePage = ({ name, copy, version, background }: BaseAuthProps) => {
       });
   }, [token]);
   return (
-    <AuthWrapper name={name} copy={copy} version={version} background={background}>
+    <AuthWrapper name={name} copy={copy} logo={logo} version={version} background={background}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

package/src/components/ra-pages/LoginPage.tsx

@@ -11,11 +11,11 @@ import { useEffect } from 'react';
 
 export type LoginPageProps = BaseAuthProps & {
   /**
-   * Indica se abilitare o meno la schermata di recupero password.
-   * Se abilitato è opportuno registrare una rotta a /recover con un componente
-   * che si occupi del recupero, puoi utilizzare direttamente il componente di Applica
+   * Indicates whether to enable the password recovery screen.
+   * If enabled, it is advisable to register a route to /recover with a component
+   * that takes care of recovery, you can use the Applica component directly for this
    *
-   * @see RecoverPage per maggiori informazioni.
+   * @see RecoverPage for more information.
    * @example
    * import { RecoverPage } from "@applica-software-guru/react-admin";
    * <CustomRoutes noLayout>
@@ -24,11 +24,11 @@ export type LoginPageProps = BaseAuthProps & {
    */
   enablePasswordRecover?: boolean;
   /**
-   * Indica se abilitare o meno la schermata di registrazione.
-   * Se abilitato è opportuno registrare una rotta a /register con un componente
-   * che si occupi della registrazione, puoi utilizzare direttamente il componente di Applica
+   * Indicates whether to enable the registration screen.
+   * If enabled, it is advisable to register a route to /register with a component
+   * that takes care of registration, you can use the Applica component directly for this
    *
-   * @see RegisterPage per maggiori informazioni.
+   * @see RegisterPage for more information.
    * @example
    * import { RegisterPage } from "@applica-software-guru/react-admin";
    * <CustomRoutes noLayout>
@@ -37,12 +37,12 @@ export type LoginPageProps = BaseAuthProps & {
    */
   enableRegistration?: boolean;
   /**
-   * Indica la pagina a cui reindirizzare l'utente dopo il login.
-   * Se non specificata viene utilizzata la home page di react-admin.
+   * Indicates the page to redirect the user to after login.
+   * If not specified, the react-admin home page is used.
    */
   redirectTo: string;
 };
-const LoginPage = ({ version, name, copy, enablePasswordRecover, enableRegistration, redirectTo, background }: LoginPageProps) => {
+const LoginPage = ({ version, name, copy, logo, enablePasswordRecover, enableRegistration, redirectTo, background }: LoginPageProps) => {
   const [loading, setLoading] = useSafeSetState(false);
   const login = useLogin();
   const translate = useTranslate();
@@ -78,7 +78,7 @@ const LoginPage = ({ version, name, copy, enablePasswordRecover, enableRegistrat
       });
   };
   return (
-    <AuthWrapper name={name} version={version} copy={copy} background={background}>
+    <AuthWrapper name={name} version={version} copy={copy} logo={logo} background={background}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

package/src/components/ra-pages/RecoverPage.tsx

@@ -10,7 +10,7 @@ import { Link } from 'react-router-dom';
 import PropTypes from 'prop-types';
 import { TextInput } from '../ra-inputs';
 
-const RecoverPage = ({ name, copy, version, background }: BaseAuthProps) => {
+const RecoverPage = ({ name, copy, logo, version, background }: BaseAuthProps) => {
   const [loading, setLoading] = useState(false);
   const translate = useTranslate();
   const redirect = useRedirect();
@@ -34,7 +34,7 @@ const RecoverPage = ({ name, copy, version, background }: BaseAuthProps) => {
       .finally(() => setLoading(false));
   };
   return (
-    <AuthWrapper name={name} copy={copy} version={version} background={background}>
+    <AuthWrapper name={name} copy={copy} logo={logo} version={version} background={background}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

package/src/components/ra-pages/RegisterPage.tsx

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import { TextInput } from '../ra-inputs';
 import { useState } from 'react';
 
-const RegisterPage = ({ name, copy, version }: BaseAuthProps) => {
+const RegisterPage = ({ name, copy, version, logo, background }: BaseAuthProps) => {
   const [loading, setLoading] = useState(false);
   const translate = useTranslate();
   const redirect = useRedirect();
@@ -34,7 +34,7 @@ const RegisterPage = ({ name, copy, version }: BaseAuthProps) => {
       .finally(() => setLoading(false));
   };
   return (
-    <AuthWrapper name={name} copy={copy} version={version}>
+    <AuthWrapper name={name} copy={copy} logo={logo} background={background} version={version}>
       <Grid container spacing={3}>
         <Grid item xs={12}>
           <Stack direction="row" justifyContent="space-between" alignItems="baseline" sx={{ mb: { xs: -0.5, sm: 0.5 } }}>

package/src/components/ra-pages/types.ts

@@ -1,19 +1,22 @@
 export type BaseAuthProps = {
   /**
-   * Versione dell'applicazione da mostrare.
+   * Application version to show.
    */
   version: string;
   /**
-   * Nome dell'applicazione da mostrare.
+   * Application name to show.
    */
   name: string;
   /**
-   * Copyright da mostrare nella pagina.
+   * Copy to show.
    */
   copy?: string;
   /**
-   * Immagine di sfondo della pagina.
-   * Se non specificata viene utilizzata l'immagine di default.
+   * Indicates top left logo to display in the login page.
+   */
+  logo?: React.ReactNode;
+  /**
+   * Background image to show.
    *
    * @see AuthBackground per maggiori informazioni.
    * @example

package/src/hooks/useLocalStorage.tsx

@@ -1,51 +1,48 @@
 import _ from 'lodash';
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import * as yup from 'yup';
 import { LocalStorage } from '../utils/localStorage';
 
 const localStorageInstance = new LocalStorage();
 
-function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
-  yup.string().required().validateSync(key);
-
-  function buildSetter(key: string, currentValue: unknown, callback: (newValue: unknown) => unknown): (newValue: unknown) => unknown {
-    return function (newValue: unknown) {
-      const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
-      localStorageInstance.set(key, updatedValue);
-      callback(updatedValue);
-      return updatedValue;
-    };
-  }
+type ISetter = (newValue: unknown) => unknown;
 
-  const [fallbackValue, updateFallbackValue] = useState(defaultValue),
-    [state, updateState] = useState(localStorageInstance.get(key) ?? defaultValue),
-    [setter, updateSetter] = useState(() => buildSetter(key, state, updateState));
+function buildSetter(key: string, currentValue: unknown, callback: ISetter): ISetter {
+  return function (newValue: unknown) {
+    const updatedValue = _.isFunction(newValue) ? newValue(currentValue) : newValue;
+    localStorageInstance.set(key, updatedValue);
+    callback(updatedValue);
+    return updatedValue;
+  };
+}
 
-  useEffect(() => {
-    if (!_.isEqual(defaultValue, fallbackValue)) {
-      updateFallbackValue(defaultValue);
-    }
-  }, [defaultValue, fallbackValue, updateFallbackValue]);
+function useLocalStorage(key: string, defaultValue?: unknown): [unknown, (newValue: unknown) => unknown] {
+  yup.string().required().validateSync(key);
+  const [state, setState] = useState(localStorageInstance.get(key) ?? defaultValue),
+    defaultValueRef = useRef<unknown | undefined>(defaultValue),
+    storedDefaultValue = _.isEqual(defaultValueRef.current, defaultValue) ? defaultValueRef.current : defaultValue,
+    setterRef = useRef<{ key: string; value: unknown; setter: ISetter } | undefined>(),
+    storedSetter = setterRef.current;
 
   useEffect(() => {
-    updateState(localStorageInstance.get(key) ?? fallbackValue);
-  }, [key, fallbackValue, updateState]);
+    setState(localStorageInstance.get(key) ?? storedDefaultValue);
+  }, [key, storedDefaultValue, setState]);
 
   useEffect(() => {
     function listener(value: unknown) {
-      updateState(value);
+      setState(value);
     }
     localStorageInstance.watch(key, listener);
     return () => {
       localStorageInstance.unwatch(key, listener);
     };
-  }, [key, updateState]);
+  }, [key, setState]);
 
-  useEffect(() => {
-    updateSetter(() => buildSetter(key, state, updateState));
-  }, [key, state, updateState, updateSetter]);
+  if (key !== storedSetter?.key || !_.isEqual(state, storedSetter?.value)) {
+    setterRef.current = { key, value: state, setter: buildSetter(key, state, setState) };
+  }
 
-  return [state, setter];
+  return [state, setterRef.current?.setter ?? _.noop];
 }
 
 export default useLocalStorage;