From 39523ba798441686324e35964ebfd017a5911047 Mon Sep 17 00:00:00 2001 From: Shahed Nasser Date: Wed, 23 Apr 2025 09:59:08 +0300 Subject: [PATCH] docs: fix badges and tables not showing in code tabs (#12261) --- .../fundamentals/plugins/create/page.mdx | 4 +- .../tutorials/loyalty-points/page.mdx | 4 +- .../app/plugins/guides/wishlist/page.mdx | 2 +- .../docs-ui/src/components/CodeTabs/index.tsx | 77 +++++++++++-------- .../src/components/Npm2YarnCode/index.tsx | 8 +- 5 files changed, 53 insertions(+), 42 deletions(-) diff --git a/www/apps/book/app/learn/fundamentals/plugins/create/page.mdx b/www/apps/book/app/learn/fundamentals/plugins/create/page.mdx index faf9af4214..62110ef2e0 100644 --- a/www/apps/book/app/learn/fundamentals/plugins/create/page.mdx +++ b/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 ``` diff --git a/www/apps/resources/app/how-to-tutorials/tutorials/loyalty-points/page.mdx b/www/apps/resources/app/how-to-tutorials/tutorials/loyalty-points/page.mdx index 602bb848ed..eae71aa331 100644 --- a/www/apps/resources/app/how-to-tutorials/tutorials/loyalty-points/page.mdx +++ b/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 ``` diff --git a/www/apps/resources/app/plugins/guides/wishlist/page.mdx b/www/apps/resources/app/plugins/guides/wishlist/page.mdx index 78bf5ba3c3..26857e4de9 100644 --- a/www/apps/resources/app/plugins/guides/wishlist/page.mdx +++ b/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 ``` diff --git a/www/packages/docs-ui/src/components/CodeTabs/index.tsx b/www/packages/docs-ui/src/components/CodeTabs/index.tsx index 0e460b5692..93ef3d4a7d 100644 --- a/www/packages/docs-ui/src/components/CodeTabs/index.tsx +++ b/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} > - + {actionsProps && } {selectedTab?.codeBlock} diff --git a/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx b/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx index 6ff09ede8b..be61f17f3b 100644 --- a/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx +++ b/www/packages/docs-ui/src/components/Npm2YarnCode/index.tsx @@ -6,13 +6,15 @@ type Npm2YarnCodeProps = { npmCode: string } & Omit -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 ( - + {tabs.map((tab, index) => (