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/packages/docs-ui/package.json

@@ -33,15 +33,15 @@
     "dev": "yarn build:js:cjs && yarn build:js:esm"
   },
   "devDependencies": {
-    "@types/react": "^17.0.1",
-    "@types/react-dom": "^17.0.1",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "@types/react-google-recaptcha": "^2.1.6",
     "clsx": "^2.0.0",
     "cpy-cli": "^5.0.0",
     "eslint-config-docs": "*",
     "next": "latest",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "rimraf": "^5.0.1",
     "tailwind": "*",
     "tailwindcss": "^3.3.3",
@@ -50,11 +50,11 @@
     "typescript": "^5.1.6"
   },
   "peerDependencies": {
-    "@types/react": ">=17",
-    "@types/react-dom": ">=17",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
     "next": "*",
-    "react": ">=17",
-    "react-dom": ">=17"
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "dependencies": {
     "@medusajs/icons": "latest",

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

@@ -5,8 +5,7 @@ import { IconProps } from "@medusajs/icons/dist/types"
 
 export type BorderedIconProps = {
   icon?: string
-  IconComponent?: ((props: IconProps) => React.JSX.Element) | null
-  // IconComponent?: React.FC<IconProps> | null
+  IconComponent?: React.FC<IconProps> | null
   wrapperClassName?: string
   iconWrapperClassName?: string
   iconClassName?: string

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

@@ -20,7 +20,7 @@ export type ModalProps = {
   footerContent?: React.ReactNode
   passedRef?: Ref<HTMLDialogElement>
   headerClassName?: string
-} & Omit<React.ComponentProps<"dialog">, "ref" | "title">
+} & Omit<React.ComponentProps<"dialog">, "ref" | "title" | "key">
 
 export const Modal = ({
   className,

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

@@ -1,11 +1,10 @@
 "use client"
 
-import React, { useEffect, useState } from "react"
+import React, { useId } from "react"
 import { Tooltip as ReactTooltip } from "react-tooltip"
 import type { ITooltip } from "react-tooltip"
 import clsx from "clsx"
 import "react-tooltip/dist/react-tooltip.css"
-import uuid from "react-uuid"
 
 export type TooltipProps = {
   text?: string
@@ -24,13 +23,7 @@ export const Tooltip = ({
   className,
   ...tooltipProps
 }: TooltipProps) => {
-  const [elementId, setElementId] = useState<string>("")
-
-  useEffect(() => {
-    if (!elementId) {
-      setElementId(uuid())
-    }
-  }, [elementId])
+  const elementId = useId()
 
   return (
     <>