fix: code tabs behavior

 - do not scroll to top when changing tabs
 - use components names as url param value to make slug parsing deterministic
 - update local storage value according url param
 - separate local storage state for all frameworks and base frameworks

Author: diedu89

docs/components/Code/index.tsx

@@ -9,6 +9,7 @@ interface ChildrenProps {
 }
 
 const AUTHJS_TAB_KEY = "authjs.codeTab.framework"
+const AUTHJS_TAB_KEY_ALL = "authjs.codeTab.framework.all"
 
 Code.Next = NextCode
 Code.NextClient = NextClientCode
@@ -34,15 +35,76 @@ const allFrameworks = {
   [ExpressCode.name]: "Express",
 }
 
-/**
- * Replace all non-alphabetic characters with a hyphen
- *
- * @param url - URL to parse
- * @returns - A string parsed from the URL
- */
-const parseParams = (url: string): string => {
-  let parsedUrl = url.toLowerCase().replaceAll(/[^a-zA-z]+/g, "-")
-  return parsedUrl.endsWith("-") ? parsedUrl.slice(0, -1) : parsedUrl
+const findFrameworkKey = (
+  text: string,
+  frameworks: Record<string, string>
+): string | null => {
+  const entry = Object.entries(frameworks).find(([_, value]) => value === text)
+  return entry ? entry[0] : null
+}
+
+const getIndexFrameworkFromUrl = (
+  url: string,
+  frameworks: Record<string, string>
+): number | null => {
+  const params = new URLSearchParams(url)
+  const paramValue = params.get("framework")
+  if (!paramValue) return null
+
+  const pascalCase = paramValue.replace(
+    /(^|-)([a-z])/g,
+    (_, _separator, letter) => letter.toUpperCase()
+  )
+
+  const index = Object.keys(frameworks).findIndex((key) => key === pascalCase)
+  return index === -1 ? null : index
+}
+
+const getIndexFrameworkFromStorage = (
+  frameworks: Record<string, string>,
+  isAllFrameworks: boolean
+): number | null => {
+  const storageKey = isAllFrameworks ? AUTHJS_TAB_KEY_ALL : AUTHJS_TAB_KEY
+  const storedIndex = window.localStorage.getItem(storageKey)
+
+  if (!storedIndex) {
+    return null
+  }
+
+  return parseInt(storedIndex) % Object.keys(frameworks).length
+}
+
+const updateFrameworkStorage = (
+  frameworkKey: string,
+  frameworks: Record<string, string>,
+  isAllFrameworks: boolean
+): void => {
+  const index = Object.keys(frameworks).findIndex((key) => key === frameworkKey)
+  if (index === -1) return
+
+  const storageKey = isAllFrameworks ? AUTHJS_TAB_KEY_ALL : AUTHJS_TAB_KEY
+  window.localStorage.setItem(storageKey, index.toString())
+
+  // Update other storage if framework exists in other object
+  const otherFrameworksKeys = Object.keys(
+    isAllFrameworks ? baseFrameworks : allFrameworks
+  )
+  const otherStorageKey = isAllFrameworks ? AUTHJS_TAB_KEY : AUTHJS_TAB_KEY_ALL
+
+  const existsInOther = otherFrameworksKeys.includes(frameworkKey)
+  if (existsInOther) {
+    const otherIndex = otherFrameworksKeys.findIndex(
+      (key) => key === frameworkKey
+    )
+    window.localStorage.setItem(otherStorageKey, otherIndex.toString())
+    // see https://github.com/shuding/nextra/blob/7ae958f02922e608151411042f658480b75164a6/packages/nextra/src/client/components/tabs/index.client.tsx#L106
+    window.dispatchEvent(
+      new StorageEvent("storage", {
+        key: otherStorageKey,
+        newValue: otherIndex.toString(),
+      })
+    )
+  }
 }
 
 export function Code({ children }: ChildrenProps) {
@@ -58,37 +120,69 @@ export function Code({ children }: ChildrenProps) {
 
   const renderedFrameworks = withNextJsPages ? allFrameworks : baseFrameworks
 
-  const updateFrameworkStorage = (value: string): void => {
+  const updateFrameworkInUrl = (frameworkKey: string): void => {
     const params = new URLSearchParams(searchParams?.toString())
-    params.set("framework", value)
-    router.push(`${router.pathname}?${params.toString()}`)
+    const kebabCaseValue = frameworkKey
+      .replace(/([a-z])([A-Z])/g, "$1-$2")
+      .toLowerCase()
+    params.set("framework", kebabCaseValue)
+
+    router.push(`${router.pathname}?${params.toString()}`, undefined, {
+      scroll: false,
+    })
   }
 
   const handleClickFramework = (event: MouseEvent<HTMLDivElement>) => {
     if (!(event.target instanceof HTMLButtonElement)) return
     const { textContent } = event.target as unknown as HTMLDivElement
-    updateFrameworkStorage(parseParams(textContent!))
+    if (!textContent) return
+
+    const frameworkKey = findFrameworkKey(textContent, renderedFrameworks)
+    if (frameworkKey) {
+      updateFrameworkInUrl(frameworkKey)
+      updateFrameworkStorage(frameworkKey, renderedFrameworks, withNextJsPages)
+
+      // Focus and scroll to maintain position when code blocks above are expanded
+      const element = event.target as HTMLButtonElement
+      const rect = element.getBoundingClientRect()
+      requestAnimationFrame(() => {
+        element.focus()
+        window.scrollBy(0, element.getBoundingClientRect().top - rect.top)
+      })
+    }
   }
 
   useEffect(() => {
-    const length = Object.keys(renderedFrameworks).length
-    const getFrameworkStorage = window.localStorage.getItem(AUTHJS_TAB_KEY)
-    const indexFramework = parseInt(getFrameworkStorage ?? "0") % length
-    if (!getFrameworkStorage) {
-      window.localStorage.setItem(AUTHJS_TAB_KEY, "0")
-    }
-    updateFrameworkStorage(
-      parseParams(Object.values(renderedFrameworks)[indexFramework])
+    const indexFrameworkFromStorage = getIndexFrameworkFromStorage(
+      renderedFrameworks,
+      withNextJsPages
+    )
+    const indexFrameworkFromUrl = getIndexFrameworkFromUrl(
+      router.asPath,
+      renderedFrameworks
     )
-  }, [router.pathname, renderedFrameworks])
+
+    if (indexFrameworkFromStorage === null) {
+      updateFrameworkStorage(
+        Object.keys(renderedFrameworks)[indexFrameworkFromUrl ?? 0],
+        renderedFrameworks,
+        withNextJsPages
+      )
+    }
+
+    if (!indexFrameworkFromUrl) {
+      const index = indexFrameworkFromStorage ?? 0
+      updateFrameworkInUrl(Object.keys(renderedFrameworks)[index])
+    }
+  }, [router.pathname, renderedFrameworks, withNextJsPages])
 
   return (
     <div
       className="[&_div[role='tablist']]:!pb-0"
       onClick={handleClickFramework}
     >
       <Tabs
-        storageKey={AUTHJS_TAB_KEY}
+        storageKey={withNextJsPages ? AUTHJS_TAB_KEY_ALL : AUTHJS_TAB_KEY}
         items={Object.values(renderedFrameworks)}
       >
         {Object.keys(renderedFrameworks).map((f) => {