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/api-reference/.eslintrc.js

@@ -1,11 +0,0 @@
-module.exports = {
-  root: true,
-  extends: [
-    "docs/next"
-  ],
-  settings: {
-    next: {
-      rootDir: ".",
-    },
-  }
-}

www/apps/api-reference/app/admin/page.tsx

@@ -1,11 +1,13 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import AreaProvider from "@/providers/area"
-import AdminContent from "../_mdx/admin.mdx"
+import AdminContent from "@/markdown/admin.mdx"
 import Tags from "@/components/Tags"
 import PageTitleProvider from "@/providers/page-title"
 import { H1 } from "docs-ui"
 import { getBaseSpecs } from "../../lib"
 import BaseSpecsProvider from "../../providers/base-specs"
 import clsx from "clsx"
+import React from "react"
 
 const AdminPage = async () => {
   const data = await getBaseSpecs("admin")
@@ -23,6 +25,7 @@ const AdminPage = async () => {
           >
             Medusa V2 Admin API Reference
           </H1>
+          {/* @ts-ignore React v19 doesn't see MDX as valid component */}
           <AdminContent />
           <Tags tags={data?.tags} />
         </PageTitleProvider>

www/apps/api-reference/app/download/[area]/route.ts

@@ -3,12 +3,13 @@ import { NextResponse } from "next/server"
 import path from "path"
 
 type DownloadParams = {
-  params: {
+  params: Promise<{
     area: string
-  }
+  }>
 }
 
-export function GET(request: Request, { params }: DownloadParams) {
+export async function GET(request: Request, props: DownloadParams) {
+  const params = await props.params
   const { area } = params
   const filePath = path.join(process.cwd(), "specs", area, "openapi.full.yaml")
 

www/apps/api-reference/app/store/page.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
 import AreaProvider from "@/providers/area"
-import StoreContent from "../_mdx/store.mdx"
+import StoreContent from "@/markdown/store.mdx"
 import Tags from "@/components/Tags"
 import PageTitleProvider from "@/providers/page-title"
 import { H1 } from "docs-ui"
@@ -23,6 +24,7 @@ const StorePage = async () => {
           >
             Medusa V2 Store API Reference
           </H1>
+          {/* @ts-ignore React v19 doesn't see MDX as valid component */}
           <StoreContent />
           <Tags tags={data?.tags} />
         </PageTitleProvider>

www/apps/api-reference/components/Tags/Operation/Parameters/Types/Object/index.tsx

@@ -94,8 +94,8 @@ const TagOperationParametersObject = ({
           properties[property2].isRequired
           ? 0
           : properties[property1].isRequired
-          ? -1
-          : 1
+            ? -1
+            : 1
       }
     )
     const content = (

www/apps/api-reference/components/Tags/Operation/Parameters/Types/Union/index.tsx

@@ -36,8 +36,8 @@ const TagOperationParametersUnion = ({
   const objectSchema = schema.anyOf
     ? schema.anyOf.find((item) => item.type === "object" && item.properties)
     : schema.allOf
-    ? mergeAllOfTypes(schema)
-    : undefined
+      ? mergeAllOfTypes(schema)
+      : undefined
 
   if (!objectSchema) {
     return (

www/apps/api-reference/components/Tags/Section/Schema/index.tsx

@@ -116,6 +116,7 @@ const TagSectionSchema = ({ schema, tagName }: TagSectionSchemaProps) => {
   return (
     <Suspense>
       <InView
+        // @ts-expect-error Type is being read as undefined
         as="div"
         id={schemaSlug}
         initialInView={true}

www/apps/api-reference/components/Tags/index.tsx

@@ -14,9 +14,7 @@ type TagsProps = {
 const Tags = ({ tags }: TagsProps) => {
   return (
     <Suspense>
-      {tags?.map((tag) => (
-        <TagSection tag={tag} key={tag.name} />
-      ))}
+      {tags?.map((tag) => <TagSection tag={tag} key={tag.name} />)}
     </Suspense>
   )
 }

www/apps/api-reference/eslint.config.mjs

@@ -0,0 +1,205 @@
+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"],
+  },
+  ...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/api-reference/next.config.mjs

@@ -1,10 +1,12 @@
-import mdx from "@next/mdx"
+import createMDX from "@next/mdx"
 import bundleAnalyzer from "@next/bundle-analyzer"
 import rehypeMdxCodeProps from "rehype-mdx-code-props"
 import rehypeSlug from "rehype-slug"
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
+  // Configure `pageExtensions` to include MDX files
+  pageExtensions: ["js", "jsx", "mdx", "ts", "tsx"],
   basePath: process.env.NEXT_PUBLIC_BASE_PATH || "/api",
   webpack: (config) => {
     config.ignoreWarnings = [{ module: /node_modules\/keyv\/src\/index\.js/ }]
@@ -23,8 +25,7 @@ const nextConfig = {
   },
 }
 
-const withMDX = mdx({
-  extension: /\.mdx?$/,
+const withMDX = createMDX({
   options: {
     rehypePlugins: [
       [
@@ -43,4 +44,4 @@ const withBundleAnalyzer = bundleAnalyzer({
   enabled: process.env.ANALYZE_BUNDLE === "true",
 })
 
-export default withBundleAnalyzer(withMDX(nextConfig))
+export default withMDX(nextConfig)

www/apps/api-reference/package.json

@@ -3,7 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "scripts": {
-    "dev": "next dev",
+    "dev": "NODE_OPTIONS='--inspect' next dev",
     "dev:monorepo": "yarn dev -p 3000",
     "build": "next build",
     "build:dev": "NODE_ENV=test next build",
@@ -13,40 +13,33 @@
     "lint": "next lint --fix"
   },
   "dependencies": {
-    "@mdx-js/loader": "^3.0.0",
-    "@mdx-js/react": "^3.0.0",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@medusajs/icons": "^2.0.0",
     "@medusajs/ui": "^3.0.0",
-    "@next/mdx": "14.2.14",
+    "@next/mdx": "15.0.1",
     "@react-hook/resize-observer": "^2.0.2",
     "@readme/openapi-parser": "^2.5.0",
-    "@types/mapbox__rehype-prism": "^0.8.0",
-    "@types/mdx": "^2.0.5",
-    "@types/node": "20.4.5",
-    "@types/react": "^18.2.0",
-    "@types/react-dom": "^18.2.0",
-    "@types/react-transition-group": "^4.4.6",
     "algoliasearch": "4",
     "autoprefixer": "10.4.14",
     "clsx": "^2.0.0",
     "docs-ui": "*",
-    "eslint-config-docs": "*",
     "jsdom": "^22.1.0",
     "json-schema": "^0.4.0",
     "json-stringify-pretty-compact": "^4.0.0",
-    "next": "^14.2.14",
-    "next-mdx-remote": "^4.4.1",
+    "next": "15.0.1",
+    "next-mdx-remote": "5.0.0",
     "openapi-sampler": "^1.3.1",
     "openapi-types": "^12.1.3",
     "pluralize": "^8.0.0",
     "postcss": "8.4.27",
-    "prism-react-renderer": "2.3.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-intersection-observer": "^9.5.3",
-    "react-tooltip": "^5.19.0",
+    "prism-react-renderer": "2.4.0",
+    "react": "rc",
+    "react-dom": "rc",
+    "react-intersection-observer": "^9.13.1",
+    "react-tooltip": "^5.28.0",
     "react-transition-group": "^4.4.5",
-    "rehype-mdx-code-props": "^2.0.0",
+    "rehype-mdx-code-props": "^3.0.1",
     "rehype-slug": "^6.0.0",
     "slugify": "^1.6.6",
     "swr": "^2.2.0",
@@ -56,12 +49,24 @@
     "yaml": "^2.3.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^14.2.14",
+    "@next/bundle-analyzer": "15.0.1",
     "@types/jsdom": "^21.1.1",
+    "@types/mapbox__rehype-prism": "^0.8.0",
+    "@types/mdx": "^2.0.13",
+    "@types/node": "20.4.5",
     "@types/pluralize": "^0.0.33",
+    "@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",
     "types": "*"
   },
   "engines": {
     "node": ">=20"
+  },
+  "overrides": {
+    "@types/react": "npm:types-react@rc",
+    "@types/react-dom": "npm:types-react-dom@rc"
   }
 }

www/apps/api-reference/types/global.d.ts

@@ -1,4 +1,4 @@
-export declare global {
+declare global {
   interface Window {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     analytics?: any