@applica-software-guru/react-admin 1.3.163 → 1.3.166

package/src/components/Onboarding/onboardingDataProvider.tsx

@@ -0,0 +1,128 @@
+import _ from 'lodash';
+import { useLocalStorage } from '../../hooks';
+import { OnboardingModes } from './enums';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as yup from 'yup';
+import { onboardingModesSchema, onboardingTopicSchema } from './schemas';
+import { useDataProvider, useGetIdentity } from 'ra-core';
+import { useQuery, useQueryClient, useMutation } from 'react-query';
+
+type IOnboardingDataProvider = {
+  onboardingRequired: boolean;
+  acknowledgeOnboarding: () => Promise<void>;
+};
+
+function useUserProfileDataProvider(topic: string): (IOnboardingDataProvider | object) & { loading: boolean; error: boolean } {
+  const queryClient = useQueryClient(),
+    [onboardingRequired, setOnboardingRequired] = useState(false),
+    [acknowledgeOnboarding, setAcknowledgeOnboarding] = useState(() => () => Promise.resolve()),
+    identity = useGetIdentity(),
+    user = identity?.data?.email,
+    dataProvider = useDataProvider(),
+    fetch = useCallback(() => {
+      if (!user) {
+        return Promise.reject();
+      } else {
+        return dataProvider.get('onboarding').then((response: any) => {
+          return response?.data?.value;
+        });
+      }
+    }, [dataProvider, user]),
+    { data, isLoading, isError } = useQuery({
+      queryKey: ['GET', 'onboarding', user],
+      queryFn: fetch,
+      staleTime: 24 * 60 * 60 * 1000,
+      retry: user !== undefined
+    }),
+    [post, setPost] = useState(() => () => Promise.resolve()),
+    mutation = useMutation({ mutationFn: post }),
+    mutateAsync = mutation.mutateAsync;
+
+  useEffect(() => {
+    function post() {
+      const newValue = _.chain(data ?? {})
+        .clone()
+        .extend({ [topic]: Date.now() })
+        .value();
+      return dataProvider.post('onboarding', newValue).then(() => {
+        queryClient.invalidateQueries(['GET', 'onboarding', user]);
+      });
+    }
+    setPost(() => post);
+  }, [dataProvider, data, topic, queryClient, user]);
+
+  useEffect(() => {
+    setOnboardingRequired(_.isNil((data ?? {})[topic]));
+  }, [data, topic, setOnboardingRequired]);
+
+  useEffect(() => {
+    setAcknowledgeOnboarding(() => () => {
+      return mutateAsync();
+    });
+  }, [mutateAsync]);
+
+  return {
+    loading: isLoading,
+    error: isError,
+    onboardingRequired: onboardingRequired,
+    acknowledgeOnboarding: acknowledgeOnboarding
+  };
+}
+
+function useLocalStorageDataProvider(topic: string): IOnboardingDataProvider {
+  const [localStorageValue, setLocalStorageValue] = useLocalStorage('onboarding', {}) as [
+      { [key: string]: number },
+      (value: (oldValue: { [key: string]: number }) => { [key: string]: number }) => { [key: string]: number }
+    ],
+    [onboardingRequired, setOnboardingRequired] = useState(false),
+    [acknowledgeOnboarding, setAcknowledgeOnboarding] = useState(() => () => Promise.resolve());
+
+  useEffect(() => {
+    setOnboardingRequired(_.isNil((localStorageValue ?? {})[topic]));
+  }, [localStorageValue, topic, setOnboardingRequired]);
+
+  useEffect(() => {
+    setAcknowledgeOnboarding(() => () => {
+      setLocalStorageValue((oldValue) => _.extend(oldValue, { [topic]: Date.now() }));
+      return Promise.resolve();
+    });
+  }, [topic, setLocalStorageValue, setAcknowledgeOnboarding]);
+
+  return {
+    onboardingRequired: onboardingRequired,
+    acknowledgeOnboarding: acknowledgeOnboarding
+  };
+}
+
+function useFakeLocalStorageDataProvider(): IOnboardingDataProvider {
+  const setterRef = useRef(() => Promise.resolve());
+
+  return {
+    onboardingRequired: false,
+    acknowledgeOnboarding: setterRef.current
+  };
+}
+
+function useOnboardingDataProvider(mode: OnboardingModes, topic: string): IOnboardingDataProvider {
+  yup.object({ mode: onboardingModesSchema, topic: onboardingTopicSchema }).validateSync({ mode: mode, topic: topic });
+  const userProfileDataProvider = useUserProfileDataProvider(topic),
+    localStorageDataProvider = useLocalStorageDataProvider(topic),
+    fakeLocalStorageDataProvider = useFakeLocalStorageDataProvider();
+
+  switch (mode) {
+    case OnboardingModes.USER:
+      if (userProfileDataProvider.loading) {
+        return fakeLocalStorageDataProvider;
+      } else if (userProfileDataProvider.error) {
+        return localStorageDataProvider;
+      } else {
+        return _.pick(userProfileDataProvider, ['onboardingRequired', 'acknowledgeOnboarding']) as IOnboardingDataProvider;
+      }
+    case OnboardingModes.BROWSER:
+      return localStorageDataProvider;
+    default:
+      return fakeLocalStorageDataProvider;
+  }
+}
+
+export { useOnboardingDataProvider };

package/src/components/Onboarding/schemas.ts

@@ -0,0 +1,6 @@
+import * as yup from 'yup';
+import { OnboardingModes } from './enums';
+const onboardingTopicSchema = yup.string().required(),
+  onboardingModesSchema = yup.string().oneOf(Object.values(OnboardingModes));
+
+export { onboardingModesSchema, onboardingTopicSchema };

package/src/components/Onboarding/types.ts

@@ -0,0 +1,8 @@
+type ITipDescriptor = {
+  id: string;
+  step: number;
+  dismissed?: boolean;
+  completeOnboarding?: boolean;
+};
+
+export type { ITipDescriptor };

package/src/components/index.jsx

@@ -12,6 +12,7 @@ import ScrollX from './ScrollX';
 import SmallIcon from './SmallIcon';
 export { MainIcon, ActionsMenu, Loadable, Loader, Layout, Logo, MainCard, ScrollTop, ScrollX, MenuPopover, Notification, SmallIcon };
 export * from './Layout';
+export { OnboardingModes, OnboardingProvider, OnboardingTip, useRestartOnboarding } from './Onboarding';
 
 export * from './@extended';
 export * from './third-party';

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

@@ -0,0 +1,51 @@
+import _ from 'lodash';
+import { useEffect, 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;
+    };
+  }
+
+  const [fallbackValue, updateFallbackValue] = useState(defaultValue),
+    [state, updateState] = useState(localStorageInstance.get(key) ?? defaultValue),
+    [setter, updateSetter] = useState(() => buildSetter(key, state, updateState));
+
+  useEffect(() => {
+    if (!_.isEqual(defaultValue, fallbackValue)) {
+      updateFallbackValue(defaultValue);
+    }
+  }, [defaultValue, fallbackValue, updateFallbackValue]);
+
+  useEffect(() => {
+    updateState(localStorageInstance.get(key) ?? fallbackValue);
+  }, [key, fallbackValue, updateState]);
+
+  useEffect(() => {
+    function listener(value: unknown) {
+      updateState(value);
+    }
+    localStorageInstance.watch(key, listener);
+    return () => {
+      localStorageInstance.unwatch(key, listener);
+    };
+  }, [key, updateState]);
+
+  useEffect(() => {
+    updateSetter(() => buildSetter(key, state, updateState));
+  }, [key, state, updateState, updateSetter]);
+
+  return [state, setter];
+}
+
+export default useLocalStorage;

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

@@ -1,13 +1,28 @@
-import { Typography } from '@mui/material';
-
-import { useEffect } from 'react';
+import { OnboardingTip, OnboardingProvider, OnboardingModes, useRestartOnboarding } from '@applica-software-guru/react-admin';
+import { Button, Stack, Typography } from '@mui/material';
 
 const CustomPage = () => {
-  useEffect(() => {
-    throw new Error('Custom Page not implemented yet');
-  }, []);
-
-  return <Typography>Hello, Custom Page!</Typography>;
+  return (
+    <OnboardingProvider mode={OnboardingModes.BROWSER}>
+      <Stack direction="row" justifyContent="space-between">
+        <OnboardingTip title="Test 1" id="test1">
+          <Typography>Test 1</Typography>
+        </OnboardingTip>
+        <OnboardingTip title="Test 2" id="test2">
+          <Typography>Test 2</Typography>
+        </OnboardingTip>
+        <OnboardingTip title="Test 3" id="test3" step={1}>
+          <Typography>Test 3</Typography>
+        </OnboardingTip>
+      </Stack>
+      <RestartButton />
+    </OnboardingProvider>
+  );
 };
 
+export function RestartButton() {
+  const restartOnboarding = useRestartOnboarding();
+  return <Button onClick={restartOnboarding}>RESTART</Button>;
+}
+
 export default CustomPage;

package/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './time';
 export * from './lang';
 export * from './localizedValue';
+export * from './localStorage';

package/src/utils/localStorage.ts

@@ -0,0 +1,73 @@
+import _ from 'lodash';
+import * as yup from 'yup';
+
+const listenerSchema = yup.mixed().test('function', 'Invalid function', (value) => {
+  return _.isFunction(value);
+});
+
+type IListener = (value: unknown) => void;
+interface ILocalStorage {
+  get: (key: string) => unknown | null;
+  set: (key: string, value: unknown) => unknown | null;
+  watch: (key: string, callback: IListener) => void;
+  unwatch: (key: string, callback?: IListener) => void;
+}
+
+class LocalStorage implements ILocalStorage {
+  #listeners: Array<{ key: string; callback: IListener }> = [];
+
+  #canAccessLocalStorage(): boolean {
+    return typeof window !== 'undefined';
+  }
+
+  get(key: string): unknown | null {
+    yup.string().required().validateSync(key);
+    if (!this.#canAccessLocalStorage()) {
+      return null;
+    } else {
+      const value = localStorage.getItem(key);
+      return _.isNil(value) ? null : JSON.parse(value);
+    }
+  }
+
+  set(key: string, value: unknown): unknown | null {
+    yup.string().required().validateSync(key);
+    if (this.#canAccessLocalStorage()) {
+      localStorage.setItem(key, JSON.stringify(value));
+      return value;
+    } else {
+      return null;
+    }
+  }
+
+  watch(key: string, callback: IListener): void {
+    yup.string().required().validateSync(key);
+    listenerSchema.validateSync(callback);
+    if (this.#canAccessLocalStorage()) {
+      this.#listeners.push({ key: key, callback: callback });
+      window.addEventListener('storage', (e) => {
+        if (e.storageArea === localStorage && e.key === key) {
+          callback(this.get(key));
+        }
+      });
+    }
+  }
+
+  unwatch(key: string, callback?: IListener | undefined): void {
+    yup.string().required().validateSync(key);
+    listenerSchema.optional().default(_.identity).validateSync(callback);
+    if (this.#canAccessLocalStorage()) {
+      if (callback !== undefined) {
+        this.#listeners = _.reject(this.#listeners, (listener) => {
+          return listener.key === key && listener.callback === callback;
+        });
+      } else {
+        this.#listeners = _.reject(this.#listeners, (listener) => {
+          return listener.key === key;
+        });
+      }
+    }
+  }
+}
+
+export { LocalStorage };

package/src/hooks/useLocalStorage.jsx

@@ -1,31 +0,0 @@
-import { useEffect, useState } from 'react';
-
-export default function useLocalStorage(key, defaultValue) {
-  const [value, setValue] = useState(() => {
-    const storedValue = typeof window !== 'undefined' ? localStorage.getItem(key) : null;
-    return storedValue === null ? defaultValue : JSON.parse(storedValue);
-  });
-
-  useEffect(() => {
-    const listener = (e) => {
-      if (typeof window !== 'undefined' && e.storageArea === localStorage && e.key === key) {
-        setValue(e.newValue ? JSON.parse(e.newValue) : e.newValue);
-      }
-    };
-    window.addEventListener('storage', listener);
-
-    return () => {
-      window.removeEventListener('storage', listener);
-    };
-  }, [key, defaultValue]);
-
-  const setValueInLocalStorage = (newValue) => {
-    setValue((currentValue) => {
-      const result = typeof newValue === 'function' ? newValue(currentValue) : newValue;
-      if (typeof window !== 'undefined') localStorage.setItem(key, JSON.stringify(result));
-      return result;
-    });
-  };
-
-  return [value, setValueInLocalStorage];
-}