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

package/src/components/MenuPopover/{styles.jsx → styles.tsx}

@@ -1,6 +1,11 @@
-import { alpha, styled } from '@mui/material/styles';
+import { Arrow } from '@/components/MenuPopover/types';
+import { Theme, alpha, styled } from '@mui/material/styles';
 
-export const StyledArrow = styled('span')(({ arrow, theme }) => {
+type StyledArrowProps = {
+  arrow: Arrow;
+  theme: Theme;
+};
+const StyledArrow = styled('span')(({ arrow = 'top-right', theme }: StyledArrowProps) => {
   const SIZE = 12;
 
   const POSITION = -(SIZE / 2);
@@ -88,3 +93,6 @@ export const StyledArrow = styled('span')(({ arrow, theme }) => {
     ...(arrow === 'right-bottom' && { ...rightStyle, bottom: 20 })
   };
 });
+
+export { StyledArrow };
+export type { StyledArrowProps };

package/src/components/MenuPopover/types.ts

@@ -0,0 +1,15 @@
+type Arrow =
+  | 'top-left'
+  | 'top-center'
+  | 'top-right'
+  | 'bottom-left'
+  | 'bottom-center'
+  | 'bottom-right'
+  | 'left-top'
+  | 'left-center'
+  | 'left-bottom'
+  | 'right-top'
+  | 'right-center'
+  | 'right-bottom';
+
+export type { Arrow };

package/src/components/Notification.tsx

@@ -1,5 +1,5 @@
-import { Notification as RaNotification, NotificationProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { NotificationProps, Notification as RaNotification } from 'react-admin';
 
 const StyledNotification = styled(
   RaNotification,
@@ -9,7 +9,7 @@ const StyledNotification = styled(
     fontSize: theme.typography.body1.fontSize
   }
 }));
-export function Notification(props: NotificationProps) {
+function Notification(props: NotificationProps) {
   return <StyledNotification {...props} />;
 }
-export default Notification;
+export { Notification };

package/src/components/Onboarding/{onboardingDataProvider.tsx → DataProvider.tsx}

@@ -1,42 +1,44 @@
-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 { useLocalStorage } from '@/hooks';
+import _ from 'lodash';
 import { useDataProvider, useGetIdentity } from 'ra-core';
-import { useQuery, useQueryClient, useMutation } from 'react-query';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useMutation, useQuery, useQueryClient } from 'react-query';
+import * as yup from 'yup';
 
 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;
+function useUserProfileDataProvider(
+  topic: string
+): (IOnboardingDataProvider | object) & { loading: boolean; error: boolean } {
+  const queryClient = useQueryClient();
+  const [onboardingRequired, setOnboardingRequired] = useState(false);
+  const [acknowledgeOnboarding, setAcknowledgeOnboarding] = useState(() => () => Promise.resolve());
+  const identity = useGetIdentity();
+  const user = identity?.data?.email;
+  const dataProvider = useDataProvider();
+  const fetch = useCallback(() => {
+    if (!user) {
+      return Promise.reject();
+    } else {
+      return dataProvider.get('onboarding').then((response: any) => {
+        return response?.data?.value;
+      });
+    }
+  }, [dataProvider, user]);
+  const { data, isLoading, isError } = useQuery({
+    queryKey: ['GET', 'onboarding', user],
+    queryFn: fetch,
+    staleTime: 24 * 60 * 60 * 1000,
+    retry: user !== undefined
+  });
+  const [post, setPost] = useState(() => () => Promise.resolve());
+  const mutation = useMutation({ mutationFn: post });
+  const mutateAsync = mutation.mutateAsync;
 
   useEffect(() => {
     function post() {
@@ -71,11 +73,11 @@ function useUserProfileDataProvider(topic: string): (IOnboardingDataProvider | o
 
 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());
+    { [key: string]: number },
+    (value: (oldValue: { [key: string]: number }) => { [key: string]: number }) => { [key: string]: number }
+  ];
+  const [onboardingRequired, setOnboardingRequired] = useState(false);
+  const [acknowledgeOnboarding, setAcknowledgeOnboarding] = useState(() => () => Promise.resolve());
 
   useEffect(() => {
     setOnboardingRequired(_.isNil((localStorageValue ?? {})[topic]));
@@ -105,9 +107,9 @@ function useFakeLocalStorageDataProvider(): IOnboardingDataProvider {
 
 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();
+  const userProfileDataProvider = useUserProfileDataProvider(topic);
+  const localStorageDataProvider = useLocalStorageDataProvider(topic);
+  const fakeLocalStorageDataProvider = useFakeLocalStorageDataProvider();
 
   switch (mode) {
     case OnboardingModes.USER:
@@ -116,7 +118,10 @@ function useOnboardingDataProvider(mode: OnboardingModes, topic: string): IOnboa
       } else if (userProfileDataProvider.error) {
         return localStorageDataProvider;
       } else {
-        return _.pick(userProfileDataProvider, ['onboardingRequired', 'acknowledgeOnboarding']) as IOnboardingDataProvider;
+        return _.pick(userProfileDataProvider, [
+          'onboardingRequired',
+          'acknowledgeOnboarding'
+        ]) as IOnboardingDataProvider;
       }
     case OnboardingModes.BROWSER:
       return localStorageDataProvider;

package/src/components/Onboarding/OnboardingTip.tsx

@@ -1,21 +1,22 @@
-import _ from 'lodash';
-import { ITipDescriptor } from './types';
 import { useOnboardingTip } from './hooks';
-import { Optional } from 'src/types';
+import { ITipDescriptor } from './types';
+import { Tooltip } from '@/components/@extended';
+import { Optional } from '@/types';
 import { Button, Stack, TooltipProps, Typography, buttonClasses, styled, tooltipClasses } from '@mui/material';
-import { Tooltip } from '../@extended';
+import _ from 'lodash';
 
 type IOnboardingTipProps = TooltipProps & Optional<Pick<ITipDescriptor, 'id' | 'step' | 'completeOnboarding'>, 'step'>;
 
 function BaseOnboardingTip(props: IOnboardingTipProps) {
-  const { id, step = 0, title, completeOnboarding } = props,
-    { tip, dismiss } = useOnboardingTip({ id: id, step: step, completeOnboarding: completeOnboarding }),
-    { open } = tip,
-    passProps = _.omit(props, ['id', 'step', 'title', 'completeOnboarding']);
+  const { id, step = 0, title, completeOnboarding } = props;
+  const { tip, dismiss } = useOnboardingTip({ id: id, step: step, completeOnboarding: completeOnboarding });
+  const { open } = tip;
+  const passProps = _.omit(props, ['id', 'step', 'title', 'completeOnboarding']);
   return (
     <Tooltip
       {...passProps}
       arrow={true}
+      // @ts-ignore
       open={open}
       title={
         <Stack gap={1}>
@@ -32,8 +33,8 @@ function BaseOnboardingTip(props: IOnboardingTipProps) {
 }
 
 const OnboardingTip = styled(BaseOnboardingTip)(({ theme }) => {
-  const { palette, spacing } = theme,
-    { primary, background } = palette;
+  const { palette, spacing } = theme;
+  const { primary, background } = palette;
   return {
     [`& .${tooltipClasses.tooltip}`]: {
       padding: `${spacing(1)} ${spacing(1.5)}`,

package/src/components/Onboarding/Provider.tsx

@@ -1,8 +1,8 @@
+import { useOnboardingDataProvider } from './DataProvider';
+import { OnboardingModes } from '@/components/Onboarding/enums';
+import { ITipDescriptor } from '@/components/Onboarding/types';
 import _ from 'lodash';
 import { PropsWithChildren, createContext, useEffect, useMemo, useReducer } from 'react';
-import { OnboardingModes } from './enums';
-import { useOnboardingDataProvider } from './onboardingDataProvider';
-import { ITipDescriptor } from './types';
 
 enum OnboardingActionType {
   RESTART = 'RESTART',
@@ -34,8 +34,8 @@ type IOnboardingAction =
 type IOnboardingContext = { state: IOnboardingState; dispatch: (action: IOnboardingAction) => void };
 
 function reducer(state: IOnboardingState, action: IOnboardingAction): IOnboardingState {
-  const newState = _.clone(state),
-    { type } = action;
+  const newState = _.clone(state);
+  const { type } = action;
 
   switch (type) {
     case OnboardingActionType.SET_SHOW: {
@@ -43,37 +43,37 @@ function reducer(state: IOnboardingState, action: IOnboardingAction): IOnboardin
       return _.extend(newState, { show: payload });
     }
     case OnboardingActionType.REGISTER_TIP: {
-      const { payload } = action,
-        { id } = payload,
-        tips = _.chain(newState.tips)
-          .clone()
-          .reject((t) => t.id === id)
-          .value(),
-        existingTip = _.find(newState.tips, { id: id }),
-        newTip = _.chain(existingTip ?? {})
-          .clone()
-          .extend(payload)
-          .value();
+      const { payload } = action;
+      const { id } = payload;
+      const tips = _.chain(newState.tips)
+        .clone()
+        .reject((t) => t.id === id)
+        .value();
+      const existingTip = _.find(newState.tips, { id: id });
+      const newTip = _.chain(existingTip ?? {})
+        .clone()
+        .extend(payload)
+        .value();
 
       tips.push(newTip);
       return _.extend(newState, { tips: _.sortBy(tips, ['step']) });
     }
     case OnboardingActionType.UNREGISTER_TIP: {
-      const { payload } = action,
-        id = _.isString(payload) ? payload : payload.id,
-        tips = _.chain(newState.tips)
-          .reject((t) => t.id === id)
-          .sortBy(['step'])
-          .value();
+      const { payload } = action;
+      const id = _.isString(payload) ? payload : payload.id;
+      const tips = _.chain(newState.tips)
+        .reject((t) => t.id === id)
+        .sortBy(['step'])
+        .value();
       return _.extend(newState, { tips: tips });
     }
     case OnboardingActionType.DISMISS_TIP: {
-      const { payload } = action,
-        id = _.isString(payload) ? payload : payload.id,
-        tips = _.chain(newState.tips)
-          .reject((t) => t.id === id)
-          .value(),
-        tip = _.find(newState.tips, { id: id });
+      const { payload } = action;
+      const id = _.isString(payload) ? payload : payload.id;
+      const tips = _.chain(newState.tips)
+        .reject((t) => t.id === id)
+        .value();
+      const tip = _.find(newState.tips, { id: id });
 
       if (_.isNil(tip)) {
         return newState;
@@ -82,17 +82,17 @@ function reducer(state: IOnboardingState, action: IOnboardingAction): IOnboardin
       const newTip = _.chain(tip).clone().extend({ dismissed: true }).value();
       tips.push(newTip);
       const updatedStep =
-          _.chain(tips)
-            .reject((t) => t.dismissed ?? false)
-            .minBy('step')
-            .value()?.step ?? 0,
-        isOnboardingComplete =
-          newTip?.completeOnboarding &&
-          _.chain(tips)
-            .reject((t) => t.step < updatedStep)
-            .reject((t) => t.dismissed ?? false)
-            .isEmpty()
-            .value();
+        _.chain(tips)
+          .reject((t) => t.dismissed ?? false)
+          .minBy('step')
+          .value()?.step ?? 0;
+      const isOnboardingComplete =
+        newTip?.completeOnboarding &&
+        _.chain(tips)
+          .reject((t) => t.step < updatedStep)
+          .reject((t) => t.dismissed ?? false)
+          .isEmpty()
+          .value();
 
       if (isOnboardingComplete) {
         state.onComplete();
@@ -119,10 +119,15 @@ function reducer(state: IOnboardingState, action: IOnboardingAction): IOnboardin
 const OnboardingContext = createContext<IOnboardingContext | undefined>(undefined);
 
 function OnboardingProvider(props: IOnboardingProviderProps) {
-  const { mode, topic = 'default' } = props,
-    { onboardingRequired, acknowledgeOnboarding } = useOnboardingDataProvider(mode, topic),
-    [state, dispatch] = useReducer(reducer, { show: onboardingRequired, tips: [], currentStep: 0, onComplete: () => {} }),
-    value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
+  const { mode, topic = 'default' } = props;
+  const { onboardingRequired, acknowledgeOnboarding } = useOnboardingDataProvider(mode, topic);
+  const [state, dispatch] = useReducer(reducer, {
+    show: onboardingRequired,
+    tips: [],
+    currentStep: 0,
+    onComplete: () => {}
+  });
+  const value = useMemo(() => ({ state, dispatch }), [state, dispatch]);
 
   useEffect(() => {
     dispatch({ type: OnboardingActionType.SET_SHOW, payload: onboardingRequired });
@@ -140,6 +145,6 @@ function OnboardingProvider(props: IOnboardingProviderProps) {
   return <OnboardingContext.Provider value={value}>{props.children}</OnboardingContext.Provider>;
 }
 
-export type { IOnboardingContext, IOnboardingState, IOnboardingAction };
+export type { IOnboardingAction, IOnboardingContext, IOnboardingState };
 
-export { OnboardingProvider, OnboardingContext, OnboardingActionType };
+export { OnboardingActionType, OnboardingContext, OnboardingProvider };

package/src/components/Onboarding/hooks.tsx

@@ -1,8 +1,14 @@
+import {
+  IOnboardingAction,
+  IOnboardingContext,
+  IOnboardingState,
+  OnboardingActionType,
+  OnboardingContext
+} from './Provider';
+import { ITipDescriptor } from './types';
 import _ from 'lodash';
 import { useCallback, useContext, useEffect } from 'react';
-import { ITipDescriptor } from './types';
 import * as yup from 'yup';
-import { IOnboardingAction, IOnboardingContext, IOnboardingState, OnboardingActionType, OnboardingContext } from './Provider';
 
 function useOnboardingContext(): IOnboardingContext {
   const context = useContext(OnboardingContext);
@@ -30,17 +36,17 @@ function useOnboardingTip(config: ITipDescriptor): {
 } {
   yup.object({ id: yup.string().required(), step: yup.number().required() }).validateSync(config);
 
-  const { id, step, completeOnboarding } = config,
-    { show, tips, currentStep } = useOnboardingState(),
-    tip = _.find(tips, { id: id }),
-    { dismissed } = tip ?? {},
-    dispatch = useOnboardingDispatch(),
-    dismiss = useCallback(() => {
-      dispatch({
-        type: OnboardingActionType.DISMISS_TIP,
-        payload: id
-      });
-    }, [dispatch, id]);
+  const { id, step, completeOnboarding } = config;
+  const { show, tips, currentStep } = useOnboardingState();
+  const tip = _.find(tips, { id: id });
+  const { dismissed } = tip ?? {};
+  const dispatch = useOnboardingDispatch();
+  const dismiss = useCallback(() => {
+    dispatch({
+      type: OnboardingActionType.DISMISS_TIP,
+      payload: id
+    });
+  }, [dispatch, id]);
 
   useEffect(() => {
     if (_.isNil(tip) || step !== tip?.step) {
@@ -53,7 +59,7 @@ function useOnboardingTip(config: ITipDescriptor): {
         }
       });
     }
-  }, [id, step, completeOnboarding, tip]);
+  }, [id, step, completeOnboarding, tip, dispatch]);
 
   useEffect(() => {
     return () => {

package/src/components/Onboarding/index.ts

@@ -1,6 +1,6 @@
-export * from './enums';
-export * from './hooks';
-export * from './onboardingDataProvider';
+export * from './DataProvider';
 export * from './OnboardingTip';
 export * from './Provider';
+export * from './enums';
+export * from './hooks';
 export * from './schemas';

package/src/components/Onboarding/schemas.ts

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

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

@@ -1,8 +1,9 @@
-import PropTypes from 'prop-types';
-import { useEffect } from 'react';
+import { PropsWithChildren, useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 
-const ScrollTop = ({ children }) => {
+type ScrollTopProps = PropsWithChildren<Record<string, never>>;
+
+function ScrollTop({ children }: ScrollTopProps) {
   const location = useLocation();
   const { pathname } = location;
 
@@ -14,11 +15,7 @@ const ScrollTop = ({ children }) => {
     });
   }, [pathname]);
 
-  return children || null;
-};
-
-ScrollTop.propTypes = {
-  children: PropTypes.node
-};
+  return <>{children}</>;
+}
 
-export default ScrollTop;
+export { ScrollTop };

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

@@ -1,4 +1,3 @@
-// material-ui
 import { styled } from '@mui/material/styles';
 
 const ScrollX = styled('div')({
@@ -7,4 +6,4 @@ const ScrollX = styled('div')({
   display: 'block'
 });
 
-export default ScrollX;
+export { ScrollX };

package/src/components/SmallIcon.tsx

@@ -0,0 +1,16 @@
+import { Typography } from '@mui/material';
+
+type SmallIconProps = {
+  title: string;
+};
+
+function SmallIcon({ title }: SmallIconProps) {
+  return (
+    <Typography variant="h2" sx={{ style: 'bold' }}>
+      {title?.substring(0, 1).toUpperCase()}
+    </Typography>
+  );
+}
+
+export { SmallIcon };
+export type { SmallIconProps };

package/src/components/index.jsx

@@ -1,29 +1,23 @@
+export * from './@extended';
+export * from './ActionsMenu';
 export * from './AuthBackground';
-import ActionsMenu from './ActionsMenu';
-import Layout from './Layout';
-import Loadable from './Loadable';
-import Loader from './Loader';
-import Logo from './Logo';
-import MainCard from './MainCard';
-import MainIcon from './MainIcon';
-import { MenuPopover } from './MenuPopover';
-import Notification from './Notification';
-import ScrollTop from './ScrollTop';
-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 * from './AuthWrapper';
-export { OnboardingModes, OnboardingProvider, OnboardingTip, useRestartOnboarding } from './Onboarding';
-
-export * from './@extended';
-export * from './third-party';
-
-// Ra-Applica
+export * from './Loadable';
+export * from './Loader';
+export * from './Logo';
+export * from './MainCard';
+export * from './MainIcon';
+export * from './MenuPopover';
+export * from './Notification';
+export * from './Onboarding';
+export * from './ScrollTop';
+export * from './ScrollX';
+export * from './SmallIcon';
 export * from './ra-buttons';
+export * from './ra-custom';
 export * from './ra-fields';
+export * from './ra-forms';
 export * from './ra-inputs';
 export * from './ra-lists';
-export * from './ra-forms';
-export * from './ra-custom';
 export * from './ra-pages';
+export * from './third-party';