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

package/dist/utils/index.d.ts

@@ -1,4 +1,5 @@
 export * from './time';
 export * from './lang';
 export * from './localizedValue';
+export * from './localStorage';
 //# sourceMappingURL=index.d.ts.map

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC"}

package/dist/utils/localStorage.d.ts

@@ -0,0 +1,16 @@
+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;
+}
+declare class LocalStorage implements ILocalStorage {
+    #private;
+    get(key: string): unknown | null;
+    set(key: string, value: unknown): unknown | null;
+    watch(key: string, callback: IListener): void;
+    unwatch(key: string, callback?: IListener | undefined): void;
+}
+export { LocalStorage };
+//# sourceMappingURL=localStorage.d.ts.map

package/dist/utils/localStorage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"localStorage.d.ts","sourceRoot":"","sources":["../../../src/utils/localStorage.ts"],"names":[],"mappings":"AAOA,KAAK,SAAS,GAAG,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;AAC1C,UAAU,aAAa;IACrB,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,OAAO,GAAG,IAAI,CAAC;IACrC,GAAG,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,KAAK,OAAO,GAAG,IAAI,CAAC;IACrD,KAAK,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,KAAK,IAAI,CAAC;CACtD;AAED,cAAM,YAAa,YAAW,aAAa;;IAOzC,GAAG,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAUhC,GAAG,CAAC,GAAG,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,GAAG,OAAO,GAAG,IAAI;IAUhD,KAAK,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,GAAG,IAAI;IAa7C,OAAO,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI;CAe7D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.163",
+  "version": "1.3.165",
   "private": false,
   "repository": {
     "type": "git",
@@ -68,7 +68,8 @@
     "react-router-dom": "^6.1.0",
     "react-sticky-box": "2.0.4",
     "simplebar": "6.2.5",
-    "simplebar-react": "3.2.4"
+    "simplebar-react": "3.2.4",
+    "yup": "^1.3.3"
   },
   "devDependencies": {
     "@applica-software-guru/crud-client": "^1.1",

package/src/components/Onboarding/OnboardingTip.tsx

@@ -0,0 +1,52 @@
+import _ from 'lodash';
+import { ITipDescriptor } from './types';
+import { useOnboardingTip } from './hooks';
+import { Optional } from 'src/types';
+import { Button, Stack, TooltipProps, Typography, buttonClasses, styled, tooltipClasses } from '@mui/material';
+import { Tooltip } from '../@extended';
+
+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']);
+  return (
+    <Tooltip
+      {...passProps}
+      arrow={true}
+      open={open}
+      title={
+        <Stack gap={1}>
+          <Typography>{title}</Typography>
+          <Button onClick={dismiss} variant="text" color="primary" size="small">
+            Got it!
+          </Button>
+        </Stack>
+      }
+    >
+      {props.children}
+    </Tooltip>
+  );
+}
+
+const OnboardingTip = styled(BaseOnboardingTip)(({ theme }) => {
+  const { palette, spacing } = theme,
+    { primary, background } = palette;
+  return {
+    [`& .${tooltipClasses.tooltip}`]: {
+      padding: `${spacing(1)} ${spacing(1.5)}`,
+      backgroundColor: primary.main,
+      color: primary.contrastText,
+      [`& .${buttonClasses.root}`]: {
+        backgroundColor: background.paper
+      }
+    },
+    [`& .${tooltipClasses.arrow}`]: {
+      color: primary.main
+    }
+  };
+});
+
+export { OnboardingTip };

package/src/components/Onboarding/Provider.tsx

@@ -0,0 +1,145 @@
+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',
+  SET_SHOW = 'SET_SHOW',
+  REGISTER_TIP = 'REGISTER_TIP',
+  UNREGISTER_TIP = 'UNREGISTER_TIP',
+  DISMISS_TIP = 'DISMISS_TIP',
+  SET_ON_COMPLETE = 'SET_ON_COMPLETE'
+}
+
+type IOnboardingProviderProps = PropsWithChildren<{
+  mode: OnboardingModes;
+  topic?: string;
+}>;
+type IOnCompleteCallback = () => void;
+type IOnboardingState = {
+  show: boolean;
+  tips: Array<ITipDescriptor>;
+  currentStep: number;
+  onComplete: IOnCompleteCallback;
+};
+type IOnboardingAction =
+  | { type: OnboardingActionType.RESTART }
+  | { type: OnboardingActionType.SET_SHOW; payload: boolean }
+  | { type: OnboardingActionType.REGISTER_TIP; payload: ITipDescriptor }
+  | { type: OnboardingActionType.UNREGISTER_TIP; payload: ITipDescriptor | string }
+  | { type: OnboardingActionType.DISMISS_TIP; payload: ITipDescriptor | string }
+  | { type: OnboardingActionType.SET_ON_COMPLETE; payload: IOnCompleteCallback };
+type IOnboardingContext = { state: IOnboardingState; dispatch: (action: IOnboardingAction) => void };
+
+function reducer(state: IOnboardingState, action: IOnboardingAction): IOnboardingState {
+  const newState = _.clone(state),
+    { type } = action;
+
+  switch (type) {
+    case OnboardingActionType.SET_SHOW: {
+      const { payload } = action;
+      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();
+
+      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();
+      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 });
+
+      if (_.isNil(tip)) {
+        return newState;
+      }
+
+      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();
+
+      if (isOnboardingComplete) {
+        state.onComplete();
+      }
+
+      return _.extend(newState, { tips: _.sortBy(tips, ['step']), currentStep: updatedStep });
+    }
+    case OnboardingActionType.SET_ON_COMPLETE: {
+      const { payload } = action;
+      return _.extend(newState, { onComplete: payload });
+    }
+    case OnboardingActionType.RESTART: {
+      const tips = _.chain(newState.tips)
+        .clone()
+        .map((t) => _.omit(t, 'dismissed'))
+        .value();
+      return _.extend(newState, { tips: tips, currentStep: 0 });
+    }
+    default:
+      return newState;
+  }
+}
+
+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]);
+
+  useEffect(() => {
+    dispatch({ type: OnboardingActionType.SET_SHOW, payload: onboardingRequired });
+  }, [onboardingRequired, dispatch]);
+
+  useEffect(() => {
+    function onComplete() {
+      acknowledgeOnboarding().then(() => {
+        dispatch({ type: OnboardingActionType.SET_SHOW, payload: false });
+      });
+    }
+    dispatch({ type: OnboardingActionType.SET_ON_COMPLETE, payload: onComplete });
+  }, [acknowledgeOnboarding, dispatch]);
+
+  return <OnboardingContext.Provider value={value}>{props.children}</OnboardingContext.Provider>;
+}
+
+export type { IOnboardingContext, IOnboardingState, IOnboardingAction };
+
+export { OnboardingProvider, OnboardingContext, OnboardingActionType };

package/src/components/Onboarding/enums.ts

@@ -0,0 +1,7 @@
+enum OnboardingModes {
+  NONE = 'none',
+  BROWSER = 'browser',
+  USER = 'user'
+}
+
+export { OnboardingModes };

package/src/components/Onboarding/hooks.tsx

@@ -0,0 +1,80 @@
+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);
+  if (context === undefined) {
+    throw new Error(
+      '[Onboarding] useOnboardingContext: context undefined. Please provide a valid OnboardingContext using OnboardingProvider'
+    );
+  }
+  return context;
+}
+
+function useOnboardingState(): IOnboardingState {
+  const context = useOnboardingContext();
+  return context.state;
+}
+
+function useOnboardingDispatch(): React.Dispatch<IOnboardingAction> {
+  const context = useOnboardingContext();
+  return context.dispatch;
+}
+
+function useOnboardingTip(config: ITipDescriptor): {
+  tip: ITipDescriptor & { open: boolean };
+  dismiss: () => void;
+} {
+  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]);
+
+  useEffect(() => {
+    if (_.isNil(tip) || step !== tip?.step) {
+      dispatch({
+        type: OnboardingActionType.REGISTER_TIP,
+        payload: {
+          id: id,
+          step: step,
+          completeOnboarding: completeOnboarding
+        }
+      });
+    }
+  }, [id, step, completeOnboarding, tip]);
+
+  useEffect(() => {
+    return () => {
+      dispatch({ type: OnboardingActionType.UNREGISTER_TIP, payload: id });
+    };
+  }, [id, dispatch]);
+
+  return {
+    tip: _.chain(tip ?? config)
+      .clone()
+      .extend({ open: show && !_.isNil(tip) && currentStep === step && !dismissed })
+      .value(),
+    dismiss: dismiss
+  };
+}
+
+function useRestartOnboarding(): () => void {
+  const dispatch = useOnboardingDispatch();
+  return useCallback(() => {
+    dispatch({ type: OnboardingActionType.RESTART });
+  }, [dispatch]);
+}
+
+export { useOnboardingTip, useRestartOnboarding };

package/src/components/Onboarding/index.ts

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

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/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 };