docs: update to next 15 + eslint 9 (#9839)

* update next

* updated react

* update eslint

* finish updating eslint

* fix content lint errors

* fix docs test

* fix vale action

* fix installation errors

www/apps/ui/.content.eslintrc.js

@@ -1,6 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    "docs/content"
-  ],
-}

www/apps/ui/.content.eslintrc.mjs

@@ -0,0 +1,160 @@
+import prettier from "eslint-plugin-prettier"
+import markdown from "eslint-plugin-markdown"
+import globals from "globals"
+import babelParser from "@babel/eslint-parser"
+import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import js from "@eslint/js"
+import { FlatCompat } from "@eslint/eslintrc"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  {
+    ignores: [
+      "**/references/**/*",
+      "**/events-reference/**/*",
+      "**/_events-table/**/*",
+    ],
+  },
+  {
+    plugins: {
+      prettier,
+      markdown,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.node,
+      },
+
+      parser: babelParser,
+      ecmaVersion: 13,
+      sourceType: "module",
+
+      parserOptions: {
+        requireConfigFile: false,
+
+        ecmaFeatures: {
+          experimentalDecorators: true,
+          modules: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      "no-undef": "off",
+      "no-unused-expressions": "off",
+      "no-unused-vars": "off",
+      "no-unused-labels": "off",
+      "no-console": "off",
+      curly: ["error", "all"],
+      "new-cap": "off",
+      "require-jsdoc": "off",
+      camelcase: "off",
+      "no-invalid-this": "off",
+
+      "max-len": [
+        "warn",
+        {
+          code: 64,
+        },
+      ],
+
+      semi: ["error", "never"],
+
+      quotes: [
+        "error",
+        "double",
+        {
+          allowTemplateLiterals: true,
+        },
+      ],
+
+      "comma-dangle": [
+        "error",
+        {
+          arrays: "always-multiline",
+          objects: "always-multiline",
+          imports: "always-multiline",
+          exports: "always-multiline",
+          functions: "never",
+        },
+      ],
+
+      "object-curly-spacing": ["error", "always"],
+      "arrow-parens": ["error", "always"],
+      "linebreak-style": 0,
+
+      "no-confusing-arrow": [
+        "error",
+        {
+          allowParens: false,
+        },
+      ],
+
+      "space-before-function-paren": [
+        "error",
+        {
+          anonymous: "always",
+          named: "never",
+          asyncArrow: "always",
+        },
+      ],
+
+      "space-infix-ops": "off",
+      "eol-last": ["error", "always"],
+      "react/prop-types": "off",
+      "react/jsx-no-undef": "off",
+    },
+  },
+  {
+    files: ["**/*.md", "**/*.mdx"],
+    processor: "markdown/markdown",
+  },
+  {
+    files: ["**/*.md/*.js", "**/*.mdx/*.js", "**/*.md/*.jsx", "**/*.mdx/*.jsx"],
+  },
+  ...compat.extends("plugin:@typescript-eslint/recommended").map((config) => ({
+    ...config,
+    files: ["**/*.md/*.ts", "**/*.mdx/*.ts", "**/*.md/*.tsx", "**/*.mdx/*.tsx"],
+  })),
+  {
+    files: ["**/*.md/*.ts", "**/*.mdx/*.ts", "**/*.md/*.tsx", "**/*.mdx/*.tsx"],
+
+    plugins: {
+      "@typescript-eslint": typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+    },
+
+    rules: {
+      "@typescript-eslint/no-unused-vars": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-explicit-any": "off",
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "prefer-rest-params": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-non-null-asserted-optional-chain": "off",
+      "@typescript-eslint/ban-types": "off",
+      "@typescript-eslint/no-require-imports": "warn",
+    },
+  },
+]

www/apps/ui/.eslintrc.js

@@ -1,15 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    "docs/next"
-  ],
-  overrides: [
-    {
-      files: ["src/examples/*.tsx"],
-      rules: {
-        "@typescript-eslint/no-empty-function": "off",
-        "no-console": "off"
-      }
-    }
-  ],
-}

www/apps/ui/eslint.config.mjs

@@ -0,0 +1,212 @@
+import prettier from "eslint-plugin-prettier/recommended"
+import globals from "globals"
+import babelParser from "@babel/eslint-parser"
+import typescriptEslintEslintPlugin from "@typescript-eslint/eslint-plugin"
+import tsParser from "@typescript-eslint/parser"
+import path from "node:path"
+import { fileURLToPath } from "node:url"
+import js from "@eslint/js"
+import { FlatCompat } from "@eslint/eslintrc"
+
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+})
+
+export default [
+  prettier,
+  {
+    ignores: [
+      "**/eslint-config-docs",
+      "**/.eslintrc.js",
+      "**/dist",
+      "src/examples",
+    ],
+  },
+  ...compat.extends(
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:react-hooks/recommended",
+    "plugin:@next/next/recommended"
+  ),
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.jest,
+        ...globals.browser,
+      },
+
+      parser: babelParser,
+      ecmaVersion: 13,
+      sourceType: "module",
+
+      parserOptions: {
+        requireConfigFile: false,
+
+        ecmaFeatures: {
+          experimentalDecorators: true,
+          jsx: true,
+          modules: true,
+        },
+
+        project: true,
+      },
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      curly: ["error", "all"],
+      "new-cap": "off",
+      "require-jsdoc": "off",
+      "no-unused-expressions": "off",
+      "no-unused-vars": "off",
+      camelcase: "off",
+      "no-invalid-this": "off",
+
+      "max-len": [
+        "error",
+        {
+          code: 80,
+          ignoreStrings: true,
+          ignoreRegExpLiterals: true,
+          ignoreComments: true,
+          ignoreTrailingComments: true,
+          ignoreUrls: true,
+          ignoreTemplateLiterals: true,
+        },
+      ],
+
+      semi: ["error", "never"],
+
+      quotes: [
+        "error",
+        "double",
+        {
+          allowTemplateLiterals: true,
+        },
+      ],
+
+      "comma-dangle": [
+        "error",
+        {
+          arrays: "always-multiline",
+          objects: "always-multiline",
+          imports: "always-multiline",
+          exports: "always-multiline",
+          functions: "never",
+        },
+      ],
+
+      "object-curly-spacing": ["error", "always"],
+      "arrow-parens": ["error", "always"],
+      "linebreak-style": 0,
+
+      "no-confusing-arrow": [
+        "error",
+        {
+          allowParens: false,
+        },
+      ],
+
+      "space-before-function-paren": [
+        "error",
+        {
+          anonymous: "always",
+          named: "never",
+          asyncArrow: "always",
+        },
+      ],
+
+      "space-infix-ops": "error",
+      "eol-last": ["error", "always"],
+
+      "no-console": [
+        "error",
+        {
+          allow: ["error", "warn"],
+        },
+      ],
+
+      "react/prop-types": [
+        2,
+        {
+          ignore: ["className"],
+        },
+      ],
+    },
+  },
+  ...compat
+    .extends(
+      "plugin:@typescript-eslint/recommended",
+      "plugin:react/recommended"
+    )
+    .map((config) => ({
+      ...config,
+      files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+    })),
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.js", "**/*.jsx"],
+
+    plugins: {
+      "@typescript-eslint": typescriptEslintEslintPlugin,
+    },
+
+    languageOptions: {
+      parser: tsParser,
+      ecmaVersion: 13,
+      sourceType: "module",
+
+      parserOptions: {
+        project: "./tsconfig.json",
+      },
+    },
+
+    settings: {
+      next: {
+        rootDir: ".",
+      },
+    },
+    ignores: [
+      "**/next.config.js",
+      "**/spec",
+      "**/node_modules",
+      "**/public",
+      "**/.eslintrc.js",
+    ],
+
+    rules: {
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/prefer-ts-expect-error": "off",
+      "valid-jsdoc": "off",
+
+      "@typescript-eslint/no-non-null-assertion": "off",
+      "@typescript-eslint/no-floating-promises": "error",
+      "@typescript-eslint/await-thenable": "error",
+      "@typescript-eslint/promise-function-async": "error",
+      "@/keyword-spacing": "error",
+
+      "@/space-before-function-paren": [
+        "error",
+        {
+          anonymous: "always",
+          named: "never",
+          asyncArrow: "always",
+        },
+      ],
+
+      "@/space-infix-ops": "error",
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": "warn",
+    },
+  },
+]

www/apps/ui/package.json

@@ -10,33 +10,26 @@
     "start:monorepo": "yarn start -p 3002",
     "lint": "next lint --fix",
     "copy-colors": "ts-node ./scripts/copy-colors.ts",
-    "lint:content": "eslint --no-eslintrc -c .content.eslintrc.js src/content/docs --fix"
+    "lint:content": "eslint --no-config-lookup -c .content.eslintrc.mjs src/content/docs --fix"
   },
   "dependencies": {
     "@faker-js/faker": "^8.0.2",
+    "@mdx-js/react": "^3.1.0",
     "@medusajs/icons": "^2.0.0",
     "@medusajs/ui": "^4.0.0",
     "@medusajs/ui-preset": "^1.1.3",
-    "@radix-ui/react-dialog": "1.0.4",
-    "@radix-ui/react-scroll-area": "^1.0.4",
-    "@radix-ui/react-tabs": "^1.0.4",
-    "@types/node": "20.4.9",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
     "autoprefixer": "10.4.14",
     "clsx": "^2.0.0",
     "contentlayer": "^0.3.4",
     "date-fns": "^3.3.1",
     "docs-ui": "*",
-    "eslint-config-docs": "*",
     "mdast-util-toc": "^7.0.0",
-    "next": "^14.2.14",
+    "next": "15.0.1",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.2.1",
     "postcss": "8.4.27",
-    "react": "18.2.0",
-    "react-day-picker": "^8.10.0",
-    "react-dom": "18.2.0",
+    "react": "rc",
+    "react-dom": "rc",
     "rehype-slug": "^6.0.0",
     "remark": "^14.0.3",
     "tailwind": "*",
@@ -46,12 +39,21 @@
     "unist-util-visit": "4.1.2"
   },
   "devDependencies": {
-    "eslint": "^8.49.0",
-    "react-docgen": "^7.0.1",
+    "@types/node": "20.4.9",
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react@rc",
+    "eslint": "^9.13.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "react-docgen": "^7.1.0",
     "ts-node": "^10.9.1",
     "types": "*"
   },
   "engines": {
     "node": ">=20"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }

www/apps/ui/src/app/(content)/[[...slug]]/page.tsx

@@ -7,27 +7,26 @@ import { siteConfig } from "@/config/site"
 import { Metadata } from "next"
 
 interface DocPageProps {
-  params: {
+  params: Promise<{
     slug: string[]
-  }
+  }>
 }
 
-async function getDocFromParams({ params }: DocPageProps) {
+async function getDocFromParams(props: DocPageProps) {
+  const params = await props.params
   const slug = params.slug?.join("/") || ""
 
   const doc = allDocs.find((doc) => doc.slugAsParams === slug)
 
   if (!doc) {
-    null
+    return
   }
 
   return doc
 }
 
-export async function generateMetadata({
-  params,
-}: DocPageProps): Promise<Metadata> {
-  const doc = await getDocFromParams({ params })
+export async function generateMetadata(props: DocPageProps): Promise<Metadata> {
+  const doc = await getDocFromParams(props)
 
   if (!doc) {
     return {}
@@ -44,16 +43,14 @@ export async function generateMetadata({
   }
 }
 
-export async function generateStaticParams(): Promise<
-  DocPageProps["params"][]
-> {
+export async function generateStaticParams() {
   return allDocs.map((doc) => ({
     slug: doc.slugAsParams.split("/"),
   }))
 }
 
-export default async function DocPage({ params }: DocPageProps) {
-  const doc = await getDocFromParams({ params })
+export default async function DocPage(props: DocPageProps) {
+  const doc = await getDocFromParams(props)
 
   if (!doc) {
     notFound()

www/apps/ui/src/app/not-found.tsx

@@ -7,6 +7,7 @@ import {
   ComputerDesktopSolid,
   BuildingStorefront,
 } from "@medusajs/icons"
+import React from "react"
 
 const H1 = MDXComponents.h1!
 const P = MDXComponents.p!
@@ -18,8 +19,11 @@ export const metadata: Metadata = {
 export default function NotFound() {
   return (
     <div>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <H1>Page Not Found</H1>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <P>The page you were looking for isn&apos;t available.</P>
+      {/* @ts-expect-error React v19 doesn't recognize these as elements. */}
       <P>
         If you think this is a mistake, please
         <Link href="https://github.com/medusajs/medusa/issues/new?assignees=&labels=type%3A+docs&template=docs.yml">

www/apps/ui/src/components/component-example.tsx

@@ -28,7 +28,7 @@ export function ComponentExample({
   }, [name])
 
   const CodeElement = children as React.ReactElement
-  const Code = CodeElement.props.code
+  const Code = (CodeElement.props as Record<string, string>).code
 
   return (
     <div className="relative my-4 flex flex-col space-y-2" {...props}>

www/apps/ui/src/components/icon-search.tsx

@@ -8,7 +8,7 @@ import * as React from "react"
 
 const iconNames = Object.keys(Icons).filter((name) => name !== "default")
 
-const IconSearch = React.memo(function IconSearch() {
+const IconSearch = () => {
   const [query, setQuery] = React.useState<string | undefined>("")
 
   return (
@@ -23,7 +23,7 @@ const IconSearch = React.memo(function IconSearch() {
       </Container>
     </div>
   )
-})
+}
 
 const SearchResults = ({ query = "" }: { query?: string }) => {
   const cleanQuery = escapeStringRegexp(query.trim().replace(/\s/g, " "))