From 01aacf3566f1c875c74c6044281fc48f43fb8cd6 Mon Sep 17 00:00:00 2001
From: Anthony Shew <anthonyshew@gmail.com>
Date: Tue, 8 Apr 2025 11:56:09 -0600
Subject: [PATCH] docs(fix): persist tabs state

---
 docs/site/components/local-storage-hook.tsx | 101 --------------------
 docs/site/components/root-provider.tsx      |   7 +-
 docs/site/components/tabs.tsx               |  19 ++--
 3 files changed, 13 insertions(+), 114 deletions(-)
 delete mode 100644 docs/site/components/local-storage-hook.tsx

diff --git a/docs/site/components/local-storage-hook.tsx b/docs/site/components/local-storage-hook.tsx
deleted file mode 100644
index c0effb13fe6f8..0000000000000
--- a/docs/site/components/local-storage-hook.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-return    */
-
-"use client";
-
-import type React from "react";
-import {
-  createContext,
-  useContext,
-  useState,
-  useEffect,
-  type ReactNode,
-} from "react";
-
-interface LocalStorageContextType {
-  getItem: (key: string, initialValue: any) => any;
-  setItem: (key: string, value: any) => void;
-}
-
-const LocalStorageContext = createContext<LocalStorageContextType | undefined>(
-  undefined
-);
-
-export function LocalStorageProvider({
-  children,
-}: {
-  children: ReactNode;
-}): JSX.Element {
-  const [storage, setStorage] = useState<Record<string, any>>({});
-
-  useEffect(() => {
-    // Initialize storage from localStorage
-    if (typeof window !== "undefined") {
-      const initialStorage: Record<string, any> = {};
-      for (let i = 0; i < localStorage.length; i++) {
-        const key = localStorage.key(i);
-        if (key) {
-          try {
-            initialStorage[key] = JSON.parse(localStorage.getItem(key) || "");
-          } catch {
-            initialStorage[key] = localStorage.getItem(key);
-          }
-        }
-      }
-      setStorage(initialStorage);
-    }
-  }, []);
-
-  const getItem = (key: string, initialValue: any): any => {
-    return storage[key] !== undefined ? storage[key] : initialValue;
-  };
-
-  const setItem = (key: string, value: any): any => {
-    setStorage((prev) => {
-      const newStorage = { ...prev, [key]: value };
-      if (typeof window !== "undefined") {
-        localStorage.setItem(key, JSON.stringify(value));
-      }
-      return newStorage;
-    });
-  };
-
-  return (
-    <LocalStorageContext.Provider value={{ getItem, setItem }}>
-      {children}
-    </LocalStorageContext.Provider>
-  );
-}
-
-export const useLocalStorage = <T,>(
-  key: string | undefined,
-  initialValue: T
-): [T, (value: T | ((val: T) => T)) => void] => {
-  const context = useContext(LocalStorageContext);
-  if (!context) {
-    throw new Error(
-      "useLocalStorage must be used within a LocalStorageContext"
-    );
-  }
-
-  const [storedValue, setStoredValue] = useState<T>(() => {
-    if (key === undefined) {
-      return initialValue;
-    }
-    return context.getItem(key, initialValue) as any;
-  });
-
-  const setValue = (value: T | ((val: T) => T)): void => {
-    const valueToStore = value instanceof Function ? value(storedValue) : value;
-    setStoredValue(valueToStore);
-    if (key !== undefined) {
-      context.setItem(key, valueToStore);
-    }
-  };
-
-  useEffect(() => {
-    if (key === undefined) return;
-    setStoredValue(context.getItem(key, initialValue) as any);
-  }, [context, key, initialValue]);
-
-  return [storedValue, setValue];
-};
diff --git a/docs/site/components/root-provider.tsx b/docs/site/components/root-provider.tsx
index cb89d81ddeca6..c447c5ddb8788 100644
--- a/docs/site/components/root-provider.tsx
+++ b/docs/site/components/root-provider.tsx
@@ -3,7 +3,6 @@
 import { RootProvider as FumaRootProvider } from "fumadocs-ui/provider";
 import type { ReactNode } from "react";
 import { SearchDialog } from "@/components/search-dialog";
-import { LocalStorageProvider } from "./local-storage-hook";
 import { TopLevelMobileMenuProvider } from "./docs-layout/use-mobile-menu-context";
 
 export function RootProvider({
@@ -13,11 +12,7 @@ export function RootProvider({
 }): JSX.Element {
   return (
     <TopLevelMobileMenuProvider>
-      <LocalStorageProvider>
-        <FumaRootProvider search={{ SearchDialog }}>
-          {children}
-        </FumaRootProvider>
-      </LocalStorageProvider>
+      <FumaRootProvider search={{ SearchDialog }}>{children}</FumaRootProvider>
     </TopLevelMobileMenuProvider>
   );
 }
diff --git a/docs/site/components/tabs.tsx b/docs/site/components/tabs.tsx
index bc2c3bc4876dc..eb0ffa9420180 100644
--- a/docs/site/components/tabs.tsx
+++ b/docs/site/components/tabs.tsx
@@ -32,13 +32,11 @@ const checkPackageManagerIndex = (index: number, provided: string) => {
   }
 };
 
-/** Use <Tab /> component to create the tabs. They will automatically be assigned their values in the order ["npm", "yarn", "pnpm"]. */
+/** Use <Tab /> component to create the tabs. */
 export function PackageManagerTabs({
-  storageKey = "package-manager-tabs",
   children,
   ...props
 }: {
-  storageKey?: string;
   children: ReactNode;
 }): JSX.Element {
   if (!Array.isArray(children)) {
@@ -54,12 +52,20 @@ export function PackageManagerTabs({
   });
 
   return (
-    <FumaTabs id={storageKey} items={packageManagers} {...props}>
+    <FumaTabs
+      groupId="package-manager"
+      items={packageManagers}
+      persist
+      {...props}
+    >
       {children.map((child, index) => {
         // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-assignment
         return {
           ...child,
-          props: { ...child.props, value: packageManagers[index] },
+          props: {
+            ...child.props,
+            value: packageManagers[index],
+          },
         };
       })}
     </FumaTabs>
@@ -68,7 +74,6 @@ export function PackageManagerTabs({
 
 /** Use <Tab /> component to create the tabs. They will automatically be assigned their values in the order ["UNIX", "Windows"]. */
 export function PlatformTabs({
-  storageKey = "platform-tabs",
   children,
   ...props
 }: {
@@ -82,7 +87,7 @@ export function PlatformTabs({
   }
 
   return (
-    <FumaTabs id={storageKey} items={items} {...props}>
+    <FumaTabs groupId="platform-tabs" items={items} persist {...props}>
       {Children.map(children, (child, index) =>
         // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
         cloneElement(child, { ...child.props, value: items[index] })