Merge pull request #8 from eduzz/feature-cpi-1245-cookie-theme

Feature cpi 1245 cookie theme

_dev/App.tsx

@@ -23,7 +23,7 @@ function App() {
 
   return (
     <>
-      <Layout mode='light'>
+      <Layout mode='light' persistMode={true}>
         <Topbar
           currentApplication='orbita'
           user={{

hooks/useMode.tsx

@@ -1,6 +1,6 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import { getLocalStorageInstance } from '../utils/localStorage';
+import Cookies from 'universal-cookie';
 
 export type PossibleModes = 'dark' | 'light';
 
@@ -12,7 +12,7 @@ type UseModeOptions = {
 };
 
 export default function useMode({ mode, acceptModeBySearchParam, persistMode, onModeChange }: UseModeOptions) {
-  const localStorageInstance = getLocalStorageInstance();
+  const cookies = useMemo(() => new Cookies(), []);
 
   const [currentMode, setCurrentMode] = useState<'light' | 'dark'>(() => {
     const getSearchParamsMode = (searchParamsAllowed?: boolean) => {
@@ -31,7 +31,7 @@ export default function useMode({ mode, acceptModeBySearchParam, persistMode, on
       return searchParamsMode;
     }
 
-    const storageMode = localStorageInstance?.getItem('eduzz-ui-mode') as PossibleModes | undefined;
+    const storageMode = cookies.get('eduzz-theme') as PossibleModes | undefined;
 
     if (!storageMode) {
       return mode || 'light';
@@ -57,10 +57,10 @@ export default function useMode({ mode, acceptModeBySearchParam, persistMode, on
       document.body.setAttribute('data-eduzz-theme', desiredTheme);
 
       if (persistMode) {
-        localStorageInstance?.setItem('eduzz-ui-mode', desiredTheme);
+        cookies.set('eduzz-theme', desiredTheme);
       }
     },
-    [localStorageInstance, persistMode]
+    [persistMode, cookies]
   );
 
   useEffect(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eduzz/ui-layout",
-  "version": "1.3.0",
+  "version": "1.4.0-beta.1",
   "keywords": [
     "eduzz",
     "react",
@@ -25,6 +25,7 @@
     "@types/node": "^20.12.7",
     "clsx": "^2.1.0",
     "tailwind-merge": "^2.3.0",
+    "universal-cookie": "^7.2.0",
     "use-context-selector": "^1.4.4"
   },
   "devDependencies": {