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/components/LargeCard/index.tsx

@@ -3,11 +3,10 @@ import clsx from "clsx"
 import Link from "@docusaurus/Link"
 import { Badge } from "docs-ui"
 import BorderedIcon from "../BorderedIcon"
+import { IconProps } from "@medusajs/icons/dist/types"
 
 type LargeCardProps = {
-  // TODO change to React.FC<IconProps>
-  // once react versions are resolved
-  Icon: any
+  Icon: React.FC<IconProps>
   image: {
     light: string
     dark?: string

www/apps/docs/src/components/MobileLogo/index.tsx

@@ -0,0 +1,79 @@
+import React from "react"
+import Link from "@docusaurus/Link"
+import useBaseUrl from "@docusaurus/useBaseUrl"
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
+import { useThemeConfig, type NavbarLogo } from "@docusaurus/theme-common"
+import ThemedImage from "@theme/ThemedImage"
+import type { Props } from "@theme/Logo"
+import { ThemeConfig } from "@medusajs/docs"
+
+function LogoThemedImage({
+  logo,
+  alt,
+  imageClassName,
+}: {
+  logo: NavbarLogo
+  alt: string
+  imageClassName?: string
+}) {
+  const sources = {
+    light: useBaseUrl(logo.src),
+    dark: useBaseUrl(logo.srcDark || logo.src),
+  }
+  const themedImage = (
+    <ThemedImage
+      className={logo.className}
+      sources={sources}
+      height={logo.height}
+      width={logo.width}
+      alt={alt}
+      style={logo.style}
+    />
+  )
+
+  // Is this extra div really necessary?
+  // introduced in https://github.com/facebook/docusaurus/pull/5666
+  return imageClassName ? (
+    <div className={imageClassName}>{themedImage}</div>
+  ) : (
+    themedImage
+  )
+}
+
+export default function MobileLogo(props: Omit<Props, "key">): JSX.Element {
+  const {
+    siteConfig: { title },
+  } = useDocusaurusContext()
+  const {
+    navbar: { title: navbarTitle },
+    mobileLogo: logo,
+  } = useThemeConfig() as ThemeConfig
+
+  const { imageClassName, titleClassName, ...propsRest } = props
+  const logoLink = useBaseUrl(logo?.href || "/")
+
+  // If visible title is shown, fallback alt text should be
+  // an empty string to mark the logo as decorative.
+  const fallbackAlt = navbarTitle ? "" : title
+
+  // Use logo alt text if provided (including empty string),
+  // and provide a sensible fallback otherwise.
+  const alt = logo?.alt ?? fallbackAlt
+
+  return (
+    <Link
+      to={logoLink}
+      {...propsRest}
+      {...(logo?.target && { target: logo.target })}
+    >
+      {logo && (
+        <LogoThemedImage
+          logo={logo}
+          alt={alt}
+          imageClassName={imageClassName}
+        />
+      )}
+      {navbarTitle != null && <b className={titleClassName}>{navbarTitle}</b>}
+    </Link>
+  )
+}

www/apps/docs/src/components/ParameterTypes/Items/index.tsx

@@ -1,5 +1,4 @@
 import {
-  Badge,
   DetailsSummary,
   ExpandableNotice,
   FeatureFlagNotice,
@@ -70,7 +69,7 @@ const ParameterTypesItems = ({
       !details && getBorderForGroupName()
     )
   }
-  function getSummary(parameter: Parameter, key: number, nested = true) {
+  function getSummary(parameter: Parameter, nested = true) {
     return (
       <DetailsSummary
         subtitle={
@@ -173,7 +172,7 @@ const ParameterTypesItems = ({
           <>
             {parameter.children?.length > 0 && (
               <Details
-                summary={getSummary(parameter, key)}
+                summary={getSummary(parameter)}
                 key={key}
                 className={clsx(getItemClassNames())}
                 heightAnimation={true}
@@ -187,7 +186,7 @@ const ParameterTypesItems = ({
               </Details>
             )}
             {(parameter.children?.length || 0) === 0 &&
-              getSummary(parameter, key, false)}
+              getSummary(parameter, false)}
           </>
         )
       })}