docs: update docusaurus to v3 (#5625)

* update dependencies

* update onboarding mdx

* fixes for mdx issues

* fixes for mdx compatibility

* resolve mdx errors

* fixes in reference

* fix check errors

* revert change in vale action

* fix node version in action

* fix summary in markdown

www/apps/docs/src/theme/Admonition/Icon/Danger.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import type { IconProps } from "@medusajs/icons/dist/types"
+import { ExclamationCircleSolid } from "@medusajs/icons"
+import clsx from "clsx"
+
+export default function AdmonitionIconDanger({
+  className,
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <ExclamationCircleSolid
+      {...props}
+      className={clsx("inline-block mr-0.125 text-medusa-fg-error", className)}
+    />
+  )
+}

www/apps/docs/src/theme/Admonition/Icon/Info.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+import AdmonitionIconNote from "./Note"
+import type { IconProps } from "@medusajs/icons/dist/types"
+
+export default function AdmonitionIconInfo(props: IconProps): JSX.Element {
+  return <AdmonitionIconNote {...props} />
+}

www/apps/docs/src/theme/Admonition/Icon/Note.tsx

@@ -0,0 +1,19 @@
+import React from "react"
+import { InformationCircleSolid } from "@medusajs/icons"
+import type { IconProps } from "@medusajs/icons/dist/types"
+import clsx from "clsx"
+
+export default function AdmonitionIconNote({
+  className,
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <InformationCircleSolid
+      {...props}
+      className={clsx(
+        "inline-block mr-0.125 text-medusa-tag-blue-icon",
+        className
+      )}
+    />
+  )
+}

www/apps/docs/src/theme/Admonition/Icon/Tip.tsx

@@ -0,0 +1,19 @@
+import { LightBulbSolid } from "@medusajs/icons"
+import type { IconProps } from "@medusajs/icons/dist/types"
+import clsx from "clsx"
+import React from "react"
+
+export default function AdmonitionIconTip({
+  className,
+  ...props
+}: IconProps): JSX.Element {
+  return (
+    <LightBulbSolid
+      {...props}
+      className={clsx(
+        "inline-block mr-0.125 text-medusa-tag-orange-icon",
+        className
+      )}
+    />
+  )
+}

www/apps/docs/src/theme/Admonition/Icon/Warning.tsx

@@ -0,0 +1,7 @@
+import React from "react"
+import AdmonitionIconDanger from "./Danger"
+import type { IconProps } from "@medusajs/icons/dist/types"
+
+export default function AdmonitionIconCaution(props: IconProps): JSX.Element {
+  return <AdmonitionIconDanger {...props} />
+}

www/apps/docs/src/theme/Admonition/Layout/index.tsx

@@ -0,0 +1,51 @@
+import React, { type ReactNode } from "react"
+import clsx from "clsx"
+
+import type { Props } from "@theme/Admonition/Layout"
+
+function AdmonitionContainer({
+  className,
+  children,
+}: Pick<Props, "type" | "className"> & { children: ReactNode }) {
+  return (
+    <div
+      className={clsx(
+        "p-1 border border-solid border-medusa-border-base rounded",
+        "bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-none",
+        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive hover:[&_a]:text-medusa-fg-interactive-hover ",
+        "mb-2 alert",
+        className
+      )}
+    >
+      <div className={clsx("flex")}>{children}</div>
+    </div>
+  )
+}
+
+function AdmonitionHeading({ icon }: Pick<Props, "icon">) {
+  return <span className={clsx("inline-block h-1.5 w-1.5 mr-1")}>{icon}</span>
+}
+
+function AdmonitionContent({ children }: Pick<Props, "children">) {
+  return children ? (
+    <div
+      className={clsx(
+        "text-medusa-fg-subtle",
+        "text-medium flex-1 [&>*:last-child]:mb-0",
+        "[&>p>code]:px-0.5 [&>p>code]:text-code-label"
+      )}
+    >
+      {children}
+    </div>
+  ) : null
+}
+
+export default function AdmonitionLayout(props: Props): JSX.Element {
+  const { type, icon, children, className } = props
+  return (
+    <AdmonitionContainer type={type} className={className}>
+      <AdmonitionHeading icon={icon} />
+      <AdmonitionContent>{children}</AdmonitionContent>
+    </AdmonitionContainer>
+  )
+}

www/apps/docs/src/theme/Admonition/index.tsx

@@ -1,188 +0,0 @@
-import React, { type ReactNode } from "react"
-import clsx from "clsx"
-import Translate from "@docusaurus/Translate"
-import type { Props } from "@theme/Admonition"
-import {
-  ExclamationCircleSolid,
-  InformationCircleSolid,
-  LightBulbSolid,
-} from "@medusajs/icons"
-
-function NoteIcon() {
-  return (
-    <InformationCircleSolid className="inline-block mr-0.125 text-medusa-tag-blue-icon" />
-  )
-}
-
-function TipIcon() {
-  return (
-    <LightBulbSolid className="inline-block mr-0.125 text-medusa-tag-orange-icon" />
-  )
-}
-
-function DangerIcon() {
-  return (
-    <ExclamationCircleSolid className="inline-block mr-0.125 text-medusa-fg-error" />
-  )
-}
-
-function InfoIcon() {
-  return NoteIcon()
-}
-
-function CautionIcon() {
-  return DangerIcon()
-}
-
-type AdmonitionConfig = {
-  iconComponent: React.ComponentType
-  infimaClassName: string
-  label: ReactNode
-}
-
-// eslint-disable-next-line @typescript-eslint/consistent-indexed-object-style
-const AdmonitionConfigs: Record<Props["type"], AdmonitionConfig> = {
-  note: {
-    infimaClassName: "secondary",
-    iconComponent: NoteIcon,
-    label: (
-      <Translate
-        id="theme.admonition.note"
-        description="The default label used for the Note admonition (:::note)"
-      >
-        note
-      </Translate>
-    ),
-  },
-  tip: {
-    infimaClassName: "success",
-    iconComponent: TipIcon,
-    label: (
-      <Translate
-        id="theme.admonition.tip"
-        description="The default label used for the Tip admonition (:::tip)"
-      >
-        tip
-      </Translate>
-    ),
-  },
-  danger: {
-    infimaClassName: "danger",
-    iconComponent: DangerIcon,
-    label: (
-      <Translate
-        id="theme.admonition.danger"
-        description="The default label used for the Danger admonition (:::danger)"
-      >
-        danger
-      </Translate>
-    ),
-  },
-  info: {
-    infimaClassName: "info",
-    iconComponent: InfoIcon,
-    label: (
-      <Translate
-        id="theme.admonition.info"
-        description="The default label used for the Info admonition (:::info)"
-      >
-        info
-      </Translate>
-    ),
-  },
-  caution: {
-    infimaClassName: "warning",
-    iconComponent: CautionIcon,
-    label: (
-      <Translate
-        id="theme.admonition.caution"
-        description="The default label used for the Caution admonition (:::caution)"
-      >
-        caution
-      </Translate>
-    ),
-  },
-}
-
-// Legacy aliases, undocumented but kept for retro-compatibility
-const aliases = {
-  secondary: "note",
-  important: "info",
-  success: "tip",
-  warning: "danger",
-} as const
-
-function getAdmonitionConfig(unsafeType: string): AdmonitionConfig {
-  const type =
-    (aliases as { [key: string]: Props["type"] })[unsafeType] ?? unsafeType
-  const config = (AdmonitionConfigs as { [key: string]: AdmonitionConfig })[
-    type
-  ]
-  if (config) {
-    return config
-  }
-  console.warn(
-    `No admonition config found for admonition type "${type}". Using Info as fallback.`
-  )
-  return AdmonitionConfigs.info
-}
-
-// Workaround because it's difficult in MDX v1 to provide a MDX title as props
-// See https://github.com/facebook/docusaurus/pull/7152#issuecomment-1145779682
-function extractMDXAdmonitionTitle(children: ReactNode): {
-  mdxAdmonitionTitle: ReactNode | undefined
-  rest: ReactNode
-} {
-  const items = React.Children.toArray(children)
-  const mdxAdmonitionTitle = items.find(
-    (item) =>
-      React.isValidElement(item) &&
-      (item.props as { mdxType: string } | null)?.mdxType ===
-        "mdxAdmonitionTitle"
-  )
-  const rest = <>{items.filter((item) => item !== mdxAdmonitionTitle)}</>
-  return {
-    mdxAdmonitionTitle,
-    rest,
-  }
-}
-
-function processAdmonitionProps(props: Props): Props {
-  const { mdxAdmonitionTitle, rest } = extractMDXAdmonitionTitle(props.children)
-  return {
-    ...props,
-    title: props.title ?? mdxAdmonitionTitle,
-    children: rest,
-  }
-}
-
-export default function Admonition(props: Props): JSX.Element {
-  const { children, type, icon: iconProp } = processAdmonitionProps(props)
-
-  const typeConfig = getAdmonitionConfig(type)
-  const { iconComponent: IconComponent } = typeConfig
-  const icon = iconProp ?? <IconComponent />
-  return (
-    <div
-      className={clsx(
-        "p-1 border border-solid border-medusa-border-base rounded",
-        "bg-medusa-bg-subtle dark:bg-medusa-bg-base shadow-none",
-        "[&_a]:no-underline [&_a]:text-medusa-fg-interactive hover:[&_a]:text-medusa-fg-interactive-hover ",
-        "mb-2 alert"
-      )}
-    >
-      <div className={clsx("flex")}>
-        <span className={clsx("inline-block h-1.5 w-1.5 mr-1")}>{icon}</span>
-        <div
-          className={clsx(
-            "text-medusa-fg-subtle",
-            "text-medium flex-1 [&>*:last-child]:mb-0",
-            "[&>p>code]:px-0.5 [&>p>code]:text-code-label"
-          )}
-        >
-          {children}
-        </div>
-      </div>
-    </div>
-  )
-}