From b8f43369b5485c609b1d959bfdd6b2049b1112a8 Mon Sep 17 00:00:00 2001
From: ptvty <ptvty@proton.me>
Date: Tue, 17 Dec 2024 21:24:57 +0330
Subject: [PATCH 1/2] docs(www): fix mdx reset on package manager tab switch

---
 apps/www/components/code-block-command.tsx   | 11 ++++-------
 apps/www/hooks/use-config-package-manager.ts | 10 ++++++++++
 apps/www/hooks/use-config.ts                 |  2 --
 3 files changed, 14 insertions(+), 9 deletions(-)
 create mode 100644 apps/www/hooks/use-config-package-manager.ts

diff --git a/apps/www/components/code-block-command.tsx b/apps/www/components/code-block-command.tsx
index f74e21f1693..eed56a464e7 100644
--- a/apps/www/components/code-block-command.tsx
+++ b/apps/www/components/code-block-command.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 import { CheckIcon, ClipboardIcon } from "lucide-react"
 
 import { NpmCommands } from "@/types/unist"
-import { useConfig } from "@/hooks/use-config"
+import { useConfigPackageManager } from "@/hooks/use-config-package-manager"
 import { copyToClipboardWithMeta } from "@/components/copy-button"
 import { Tabs } from "@/registry/default/ui/tabs"
 import { Button } from "@/registry/new-york/ui/button"
@@ -16,7 +16,7 @@ export function CodeBlockCommand({
   __pnpmCommand__,
   __bunCommand__,
 }: React.ComponentProps<"pre"> & NpmCommands) {
-  const [config, setConfig] = useConfig()
+  const [configPackageManager, setConfigPackageManager] = useConfigPackageManager()
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
@@ -26,7 +26,7 @@ export function CodeBlockCommand({
     }
   }, [hasCopied])
 
-  const packageManager = config.packageManager || "pnpm"
+  const packageManager = configPackageManager || "pnpm"
   const tabs = React.useMemo(() => {
     return {
       pnpm: __pnpmCommand__,
@@ -58,10 +58,7 @@ export function CodeBlockCommand({
       <Tabs
         defaultValue={packageManager}
         onValueChange={(value) => {
-          setConfig({
-            ...config,
-            packageManager: value as "pnpm" | "npm" | "yarn" | "bun",
-          })
+          setConfigPackageManager(value as "pnpm" | "npm" | "yarn" | "bun")
         }}
       >
         <div className="flex items-center justify-between border-b border-zinc-800 bg-zinc-900 px-3 pt-2.5">
diff --git a/apps/www/hooks/use-config-package-manager.ts b/apps/www/hooks/use-config-package-manager.ts
new file mode 100644
index 00000000000..d45f1cc16bd
--- /dev/null
+++ b/apps/www/hooks/use-config-package-manager.ts
@@ -0,0 +1,10 @@
+import { useAtom } from "jotai"
+import { atomWithStorage } from "jotai/utils"
+
+type ConfigPackageManager = "npm" | "yarn" | "pnpm" | "bun"
+
+const configAtom = atomWithStorage<ConfigPackageManager>("config-package-manager", "pnpm")
+
+export function useConfigPackageManager() {
+  return useAtom(configAtom)
+}
diff --git a/apps/www/hooks/use-config.ts b/apps/www/hooks/use-config.ts
index 982e9ba0e06..8f0b26b2feb 100644
--- a/apps/www/hooks/use-config.ts
+++ b/apps/www/hooks/use-config.ts
@@ -8,14 +8,12 @@ type Config = {
   style: Style["name"]
   theme: BaseColor["name"]
   radius: number
-  packageManager: "npm" | "yarn" | "pnpm" | "bun"
 }
 
 const configAtom = atomWithStorage<Config>("config", {
   style: "new-york",
   theme: "zinc",
   radius: 0.5,
-  packageManager: "pnpm",
 })
 
 export function useConfig() {

From 9cd10c23fa958ee402d358ab8259b4fb5ce718e3 Mon Sep 17 00:00:00 2001
From: ptvty <ptvty@proton.me>
Date: Thu, 19 Dec 2024 15:54:52 +0330
Subject: [PATCH 2/2] Fix prettier errors

---
 apps/www/components/code-block-command.tsx   | 3 ++-
 apps/www/hooks/use-config-package-manager.ts | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/apps/www/components/code-block-command.tsx b/apps/www/components/code-block-command.tsx
index eed56a464e7..3725490d954 100644
--- a/apps/www/components/code-block-command.tsx
+++ b/apps/www/components/code-block-command.tsx
@@ -16,7 +16,8 @@ export function CodeBlockCommand({
   __pnpmCommand__,
   __bunCommand__,
 }: React.ComponentProps<"pre"> & NpmCommands) {
-  const [configPackageManager, setConfigPackageManager] = useConfigPackageManager()
+  const [configPackageManager, setConfigPackageManager] =
+    useConfigPackageManager()
   const [hasCopied, setHasCopied] = React.useState(false)
 
   React.useEffect(() => {
diff --git a/apps/www/hooks/use-config-package-manager.ts b/apps/www/hooks/use-config-package-manager.ts
index d45f1cc16bd..e84e76a9683 100644
--- a/apps/www/hooks/use-config-package-manager.ts
+++ b/apps/www/hooks/use-config-package-manager.ts
@@ -3,7 +3,10 @@ import { atomWithStorage } from "jotai/utils"
 
 type ConfigPackageManager = "npm" | "yarn" | "pnpm" | "bun"
 
-const configAtom = atomWithStorage<ConfigPackageManager>("config-package-manager", "pnpm")
+const configAtom = atomWithStorage<ConfigPackageManager>(
+  "config-package-manager",
+  "pnpm"
+)
 
 export function useConfigPackageManager() {
   return useAtom(configAtom)