feat: Add theme switch

packages/stl/src/lib/react/useLocalStorage/useLocalStorage.ts

@@ -0,0 +1,56 @@
+import { useCallback, useSyncExternalStore } from 'react';
+
+import type { StorageManager } from '../../window/localStorage';
+
+/**
+ * A React hook that synchronizes state with a StorageManager.
+ *
+ * It provides reactivity across the component lifecycle and synchronizes
+ * values across multiple browser tabs using the 'storage' event.
+ *
+ * @template T - The type of the stored value.
+ * @param manager - The StorageManager instance returned by createLocalStorage.
+ * @returns A tuple containing the current value and a setter function.
+ *
+ * @example
+ * ```tsx
+ * const [theme, setTheme] = useLocalStorage(themeStorage);
+ * ```
+ */
+export function useLocalStorage<T>(
+  manager: StorageManager<T>
+): [T, (value: T | ((prev: T) => T)) => void] {
+  const subscribe = useCallback(
+    (callback: () => void) => {
+      const handleStorageChange = (event: StorageEvent): void => {
+        if (event.key === manager.key) {
+          callback();
+        }
+      };
+
+      window.addEventListener('storage', handleStorageChange);
+      return () => {
+        window.removeEventListener('storage', handleStorageChange);
+      };
+    },
+    [manager.key]
+  );
+
+  const getSnapshot = useCallback(() => manager.get(), [manager]);
+
+  const value = useSyncExternalStore(subscribe, getSnapshot, () => {
+    // During SSR, we can't access localStorage. 
+    // However, createLocalStorage is designed to throw if accessed during SSR.
+    // This hook is intended to be used in client-side components.
+    return manager.get();
+  });
+
+  const setValue = useCallback(
+    (nextValue: T | ((prev: T) => T)) => {
+      manager.set(nextValue);
+    },
+    [manager]
+  );
+
+  return [value, setValue];
+}