feat: cookies (#11)

Author: Marcus-Rise

packages/docs/stories/simple-example.component.tsx

@@ -15,7 +15,7 @@ const ThemeToggle = () => {
 };
 
 const App = () => (
-  <ThemeProvider>
+  <ThemeProvider cookiesKey={"theme"}>
     <ThemeToggle />
   </ThemeProvider>
 );

packages/theme/README.md

@@ -59,6 +59,12 @@ To set custom localStorage key set `preferencesStorageKey` property for user pre
 <ThemeProvider preferencesStorageKey={"OPTIONAL_APP_THEME_STORAGE_KEY"}>
 ```
 
+To save user preferences in cookies, provide `cookiesKey` prop as a cookie key string
+
+```tsx
+<ThemeProvider cookiesKey={"theme-preferences"}>
+```
+
 ### Hook `useTheme`
 
 - `isDarkTheme` is a`boolean` what color scheme is selected, basing on user preferences and system

packages/theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@marcus-rise/react-theme",
   "license": "MIT",
-  "version": "0.4.5",
+  "version": "1.0.0-canary.0",
   "description": "react theme toggle hook",
   "author": {
     "name": "Ilya Konstantinov",

packages/theme/src/theme-preferences.hook.ts

@@ -10,13 +10,21 @@ const useThemePreferences = () => {
     (data: ThemePreferences) => {
       dispatch({ type: ThemeReducerActions.SET_PREFERENCES, payload: data });
       localStorage.setItem(state.storageKey, data);
+
+      if (state.cookiesKey) {
+        document.cookie = `${state.cookiesKey}=${data}`;
+      }
     },
     [state.storageKey],
   );
 
   const clearPreferences = useCallback(() => {
     dispatch({ type: ThemeReducerActions.CLEAR_PREFERENCES });
     localStorage.removeItem(state.storageKey);
+
+    if (state.cookiesKey) {
+      document.cookie = `${state.cookiesKey}=""; max-age=0`;
+    }
   }, [state.storageKey]);
 
   return { savePreferences, clearPreferences };

packages/theme/src/theme.context.tsx

@@ -14,12 +14,18 @@ const ThemeContext = createContext<{
 
 type Config = {
   preferencesStorageKey?: string;
+  cookiesKey?: string | null;
 };
 
-const ThemeProvider: FC<PropsWithChildren<Config>> = ({ children, preferencesStorageKey }) => {
+const ThemeProvider: FC<PropsWithChildren<Config>> = ({
+  children,
+  preferencesStorageKey,
+  cookiesKey = null,
+}) => {
   const [state, dispatch] = useReducer(themeReducer, {
     ...themeReducerInitialState,
     storageKey: preferencesStorageKey ?? themeReducerInitialState.storageKey,
+    cookiesKey,
   });
 
   /**
@@ -59,6 +65,10 @@ const ThemeProvider: FC<PropsWithChildren<Config>> = ({ children, preferencesSto
         type: ThemeReducerActions.SET_PREFERENCES,
         payload: preferences,
       });
+
+      if (state.cookiesKey) {
+        document.cookie = `${state.cookiesKey}=${preferences}`;
+      }
     }
   }, []);
 

packages/theme/src/theme.reducer.ts

@@ -2,14 +2,16 @@ import type { Reducer } from "react";
 import type { ThemePreferences } from "./theme-preferences";
 
 type ThemeReducerState = {
-  isSystemThemeDark: boolean;
+  cookiesKey: string | null;
   storageKey: string;
+  isSystemThemeDark: boolean;
   preferences: ThemePreferences | null;
 };
 
 const themeReducerInitialState: ThemeReducerState = {
-  preferences: null,
+  cookiesKey: null,
   storageKey: "THEME_PREFERENCES",
+  preferences: null,
   isSystemThemeDark: false,
 };