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/MDXComponents/A.tsx

@@ -1,13 +1,13 @@
 import React, { useMemo } from "react"
-import type { Props } from "@theme/MDXComponents/A"
 import { getGlossaryByPath } from "../../utils/glossary"
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
 import { MedusaDocusaurusContext } from "@medusajs/docs"
 import Link from "@docusaurus/Link"
+import type { Props } from "@docusaurus/Link"
 import clsx from "clsx"
 import { Tooltip } from "docs-ui"
 
-const MDXA = (props: Props) => {
+const MDXA = (props: Omit<Props, "key">) => {
   const { href, children } = props
   const {
     siteConfig: { url },

www/apps/docs/src/theme/MDXComponents/Code.tsx

@@ -0,0 +1,17 @@
+import type { ComponentProps } from "react"
+import React from "react"
+import CodeBlock from "@theme/CodeBlock"
+import type { Props } from "@theme/MDXComponents/Code"
+import { InlineCode } from "docs-ui"
+
+export default function MDXCode(props: Omit<Props, "key">): JSX.Element {
+  const shouldBeInline = React.Children.toArray(props.children).every(
+    (el) => typeof el === "string" && !el.includes("\n")
+  )
+
+  return shouldBeInline ? (
+    <InlineCode {...props} />
+  ) : (
+    <CodeBlock {...(props as ComponentProps<typeof CodeBlock>)} />
+  )
+}

www/apps/docs/src/theme/MDXComponents/Details.tsx

@@ -1,23 +1,26 @@
 import React, { type ComponentProps, type ReactElement } from "react"
+import Details from "@theme/Details"
 import type { Props } from "@theme/MDXComponents/Details"
-import Details, { DetailsProps } from "../Details"
-import { type DetailsSummaryProps } from "docs-ui"
+import { DetailsSummary } from "docs-ui"
 
-type MDXDetailsProps = Props & DetailsProps
-
-export default function MDXDetails(props: MDXDetailsProps): JSX.Element {
+export default function MDXDetails(props: Omit<Props, "key">): JSX.Element {
   const items = React.Children.toArray(props.children)
   // Split summary item from the rest to pass it as a separate prop to the
   // Details theme component
   const summary = items.find(
-    (item): item is ReactElement<ComponentProps<"summary">> =>
-      React.isValidElement(item) &&
-      (item.props as { mdxType: string } | null)?.mdxType === "summary"
-  ) as React.ReactElement<DetailsSummaryProps>
+    (
+      item: ReactElement<ComponentProps<"summary">>
+    ): item is ReactElement<ComponentProps<"summary">> => {
+      return (
+        React.isValidElement(item) &&
+        (item.type === "summary" || item.type === DetailsSummary)
+      )
+    }
+  )
   const children = <>{items.filter((item) => item !== summary)}</>
 
   return (
-    <Details summary={summary} {...props}>
+    <Details {...props} summary={summary}>
       {children}
     </Details>
   )

www/apps/docs/src/theme/MDXComponents/H1.tsx

@@ -6,7 +6,7 @@ import { DocContextValue } from "@medusajs/docs"
 import { Badge, BadgeVariant } from "docs-ui"
 import clsx from "clsx"
 
-const H1 = ({ className, ...props }: Props) => {
+const H1 = ({ className, ...props }: Omit<Props, "key">) => {
   const {
     frontMatter: { badge },
   } = useDoc() as DocContextValue

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

@@ -1,18 +1,20 @@
 // Import the original mapper
 import MDXComponents from "@theme-original/MDXComponents"
 import CloudinaryImage from "@site/src/components/CloudinaryImage"
-import MDXDetails from "./Details"
 import MDXA from "./A"
-import { Kbd, DetailsSummary, InlineCode } from "docs-ui"
+import { Kbd, DetailsSummary } from "docs-ui"
 import H1 from "./H1"
+import MDXCode from "./Code"
+import MDXDetails from "./Details"
 
 export default {
   // Re-use the default mapping
   ...MDXComponents,
-  inlineCode: InlineCode,
+  code: MDXCode,
   img: CloudinaryImage,
   details: MDXDetails,
-  summary: DetailsSummary,
+  Details: MDXDetails,
+  Summary: DetailsSummary,
   a: MDXA,
   kbd: Kbd,
   h1: H1,