api-ref: added syncing between code tabs (#4786)

* api-ref: added syncing between code tabs

* updated comment

* resolve metadata warning

* fix colors

www/api-reference/components/Card/index.tsx

@@ -13,7 +13,7 @@ const Card = ({ title, text, href, className }: CardProps) => {
   return (
     <div
       className={clsx(
-        "bg-medusa-bg-subtle dark:bg-medusa-bg-subtle-dark w-full rounded",
+        "bg-medusa-bg-subtle dark:bg-medusa-code-bg-base-dark w-full rounded",
         "shadow-card-rest dark:shadow-card-rest-dark py-0.75 relative px-1",
         "flex items-center justify-between gap-1 transition-shadow",
         href && "hover:shadow-card-hover dark:hover:shadow-card-hover-dark",

www/api-reference/components/CodeBlock/index.tsx

@@ -37,7 +37,7 @@ const CodeBlock = ({
           ...themes.vsDark,
           plain: {
             ...themes.vsDark.plain,
-            backgroundColor: colorMode === "light" ? "#111827" : "#1B1B1B",
+            backgroundColor: colorMode === "light" ? "#111827" : "#1E1E1E",
           },
         }}
         code={source.trim()}

www/api-reference/components/CodeTabs/index.tsx

@@ -1,26 +1,32 @@
 "use client"
 
 import clsx from "clsx"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef } from "react"
 import CodeBlock, { CodeBlockProps } from "../CodeBlock"
+import useTabs, { BaseTabType } from "../../hooks/use-tabs"
+import { useScrollPositionBlocker } from "../../hooks/scroll-utils"
 
 type TabType = {
-  label: string
-  value: string
   code?: CodeBlockProps
   codeBlock?: React.ReactNode
-}
+} & BaseTabType
 
 type CodeTabsProps = {
   tabs: TabType[]
   className?: string
+  group?: string
 }
 
-const CodeTabs = ({ tabs, className }: CodeTabsProps) => {
-  const [selectedTab, setSelectedTab] = useState(tabs[0])
+const CodeTabs = ({ tabs, className, group = "client" }: CodeTabsProps) => {
+  const { selectedTab, changeSelectedTab } = useTabs<TabType>({
+    tabs,
+    group,
+  })
   const tabRefs: (HTMLButtonElement | null)[] = useMemo(() => [], [])
   const codeTabSelectorRef = useRef<HTMLSpanElement | null>(null)
   const codeTabsWrapperRef = useRef<HTMLDivElement | null>(null)
+  const { blockElementScrollPositionUntilNextRender } =
+    useScrollPositionBlocker()
 
   const changeTabSelectorCoordinates = useCallback(
     (selectedTabElm: HTMLElement) => {
@@ -79,18 +85,21 @@ const CodeTabs = ({ tabs, className }: CodeTabsProps) => {
             <button
               className={clsx(
                 "text-compact-small-plus xs:border-0 py-0.25 px-0.75 relative z-[2] rounded-full border",
-                selectedTab.value !== tab.value &&
+                (!selectedTab || selectedTab.value !== tab.value) && [
                   "text-medusa-code-text-subtle dark:text-medusa-code-text-subtle-dark border-transparent",
-                selectedTab.value === tab.value &&
-                  "text-medusa-code-text-base dark:text-medusa-code-text-base-dark bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark xs:!bg-transparent",
-                selectedTab.value !== tab.value &&
-                  "hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark"
+                  "hover:bg-medusa-code-bg-base dark:hover:bg-medusa-code-bg-base-dark",
+                ],
+                selectedTab?.value === tab.value &&
+                  "text-medusa-code-text-base dark:text-medusa-code-text-base-dark bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark xs:!bg-transparent"
               )}
               ref={(tabControl) => tabRefs.push(tabControl)}
-              onClick={() => {
-                setSelectedTab(tab)
+              onClick={(e) => {
+                blockElementScrollPositionUntilNextRender(
+                  e.target as HTMLButtonElement
+                )
+                changeSelectedTab(tab)
               }}
-              aria-selected={selectedTab.value === tab.value}
+              aria-selected={selectedTab?.value === tab.value}
               role="tab"
             >
               {tab.label}
@@ -99,16 +108,16 @@ const CodeTabs = ({ tabs, className }: CodeTabsProps) => {
         ))}
       </ul>
       <>
-        {selectedTab.code && (
+        {selectedTab?.code && (
           <CodeBlock
-            {...selectedTab.code}
+            {...selectedTab?.code}
             className={clsx(
               "!mt-0 !rounded-t-none",
               selectedTab.code.className
             )}
           />
         )}
-        {selectedTab.codeBlock && <>{selectedTab.codeBlock}</>}
+        {selectedTab?.codeBlock && <>{selectedTab.codeBlock}</>}
       </>
     </div>
   )

www/api-reference/components/Tags/Operation/CodeSection/index.tsx

@@ -28,13 +28,15 @@ const TagOperationCodeSection = ({
     <div className={clsx("mt-2 flex flex-col gap-2", className)}>
       <div
         className={clsx(
-          "bg-medusa-code-bg-base dark:bg-medusa-code-bg-base-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
+          "bg-medusa-bg-subtle dark:bg-medusa-code-bg-base-dark border-medusa-border-base dark:border-medusa-border-base-dark px-0.75 rounded border py-0.5",
           "text-code-body flex w-full justify-between gap-1"
         )}
       >
         <div className={clsx("flex w-[calc(100%-36px)] gap-1")}>
           <MethodLabel method={method} className="h-fit" />
-          <code className="break-words break-all">{endpointPath}</code>
+          <code className="text-medusa-fg-subtle dark:text-medusa-code-text-base-dark break-words break-all">
+            {endpointPath}
+          </code>
         </div>
         <CopyButton text={endpointPath} tooltipClassName="font-base">
           <IconCopyOutline iconColorClassName="stroke-medusa-fg-muted dark:stroke-medusa-fg-muted-dark" />