docs: fix badges and tables not showing in code tabs (#12261)

www/apps/book/app/learn/fundamentals/plugins/create/page.mdx

@@ -306,7 +306,7 @@ Make sure to replace `~/path/to/medusa-app` with the path to your Medusa applica
 
 Then, if your project was created before v2.3.1 of Medusa, make sure to install `yalc` as a development dependency:
 
-```bash npm2yarn title="Medusa application"
+```bash npm2yarn badgeLabel="Medusa Application" badgeColor="green"
 npm install --save-dev yalc
 ```
 
@@ -387,7 +387,7 @@ This command will:
 
 You can start your Medusa application's development server to test out your plugin:
 
-```bash npm2yarn title="Medusa application"
+```bash npm2yarn badgeLabel="Medusa Application" badgeColor="green"
 npm run dev
 ```
 

www/apps/resources/app/how-to-tutorials/tutorials/loyalty-points/page.mdx

@@ -1006,13 +1006,13 @@ To test out the loyalty points flow, you'll use the [Next.js Starter Storefront]
 
 So, run the following command in the Medusa application's directory to start the Medusa server:
 
-```bash title="Medusa Application"
+```bash npm2yarn badgeLabel="Medusa Application" badgeColor="green"
 npm run dev
 ```
 
 Then, run the following command in the Next.js Starter Storefront's directory to start the Next.js server:
 
-```bash title="Next.js Starter Storefront"
+```bash npm2yarn badgeLabel="Storefront" badgeColor="blue"
 npm run dev
 ```
 

www/apps/resources/app/plugins/guides/wishlist/page.mdx

@@ -1734,7 +1734,7 @@ In this step, you'll add the functionality to allow customers to share their wis
 
 To create the token and decode it later, you'll use the [jsonwebtoken](https://www.npmjs.com/package/jsonwebtoken) package. So, run the following command in the plugin project to install the package:
 
-```bash npm2yarn title="Plugin project"
+```bash npm2yarn badgeLabel="Plugin project" badgeColor="orange"
 npm install jsonwebtoken
 ```
 

www/packages/docs-ui/src/components/CodeTabs/index.tsx

@@ -23,7 +23,6 @@ type CodeTabProps = {
   children: React.ReactNode
   className?: string
   group?: string
-  title?: string
   blockStyle?: CodeBlockStyle
 }
 
@@ -108,9 +107,11 @@ export const CodeTabs = ({
       }
 
       let codeBlockProps = codeBlock.props as CodeBlockProps
+      const showBadge = !codeBlockProps.title
+      const originalBadgeLabel = codeBlockProps.badgeLabel
 
       const commonProps = {
-        badgeLabel: undefined,
+        badgeLabel: showBadge ? undefined : originalBadgeLabel,
         hasTabs: true,
         className: clsx("!my-0", codeBlockProps.className),
       }
@@ -136,7 +137,10 @@ export const CodeTabs = ({
       tempTabs.push({
         label: typedChildProps.label,
         value: typedChildProps.value,
-        codeProps: modifiedProps,
+        codeProps: {
+          ...modifiedProps,
+          badgeLabel: !showBadge ? undefined : originalBadgeLabel,
+        },
         codeBlock: {
           ...codeBlock,
           props: {
@@ -259,39 +263,44 @@ export const CodeTabs = ({
           )}
           ref={codeTabSelectorRef}
         ></span>
-        <ul
+        <div className="flex gap-docs_1 items-center">
-          className={clsx(
+          {selectedTab?.codeProps.badgeLabel && (
-            "!list-none flex gap-docs_0.75 items-center",
+            <Badge
-            "p-0 mb-0"
+              variant={selectedTab?.codeProps.badgeColor || "code"}
+              className="!font-base"
+            >
+              {selectedTab.codeProps.badgeLabel}
+            </Badge>
           )}
-        >
+          <ul
-          {Children.map(children, (child, index) => {
+            className={clsx(
-            if (!React.isValidElement(child)) {
+              "!list-none flex gap-docs_0.75 items-center",
-              return <></>
+              "p-0 mb-0"
-            }
+            )}
+          >
+            {Children.map(children, (child, index) => {
+              if (!React.isValidElement(child)) {
+                return <></>
+              }
 
-            return (
+              return (
-              <child.type
+                <child.type
-                {...(typeof child.props === "object" ? child.props : {})}
+                  {...(typeof child.props === "object" ? child.props : {})}
-                changeSelectedTab={changeSelectedTab}
+                  changeSelectedTab={changeSelectedTab}
-                pushRef={(tabButton: HTMLButtonElement | null) =>
+                  pushRef={(tabButton: HTMLButtonElement | null) =>
-                  tabRefs.push(tabButton)
+                    tabRefs.push(tabButton)
-                }
+                  }
-                blockStyle={blockStyle}
+                  blockStyle={blockStyle}
-                isSelected={
+                  isSelected={
-                  !selectedTab
+                    !selectedTab
-                    ? index === 0
+                      ? index === 0
-                    : selectedTab.value === (child.props as CodeTab).value
+                      : selectedTab.value === (child.props as CodeTab).value
-                }
+                  }
-              />
+                />
-            )
+              )
-          })}
+            })}
-        </ul>
+          </ul>
-        {selectedTab?.codeProps.badgeLabel && (
+        </div>
-          <Badge variant={selectedTab?.codeProps.badgeColor || "code"}>
-            {selectedTab.codeProps.badgeLabel}
-          </Badge>
-        )}
         {actionsProps && <CodeBlockActions {...actionsProps} />}
       </CodeBlockHeaderWrapper>
       {selectedTab?.codeBlock}

www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx

@@ -6,13 +6,15 @@ type Npm2YarnCodeProps = {
   npmCode: string
 } & Omit<CodeBlockMetaFields, "npm2yarn">
 
-export const Npm2YarnCode = ({ npmCode, ...rest }: Npm2YarnCodeProps) => {
+export const Npm2YarnCode = ({
+  npmCode,
+  ...codeOptions
+}: Npm2YarnCodeProps) => {
   // convert npm code
   const yarnCode = convert(npmCode, "yarn").replaceAll(/([^\s])&&/g, "$1 &&")
   const pnpmCode = convert(npmCode, "pnpm").replaceAll(/([^\s])&&/g, "$1 &&")
   const lang = "bash"
 
-  const { title = "", ...codeOptions } = rest
   codeOptions.hasTabs = true
 
   const tabs = [
@@ -46,7 +48,7 @@ export const Npm2YarnCode = ({ npmCode, ...rest }: Npm2YarnCodeProps) => {
   ]
 
   return (
-    <CodeTabs group="npm2yarn" title={title}>
+    <CodeTabs group="npm2yarn">
       {tabs.map((tab, index) => (
         <CodeTab label={tab.label} value={tab.value} key={index}>
           <CodeBlock {...tab.code} />