docs: update to Docusaurus v3

.nvmrc

@@ -1 +1 @@
-16.20.2
+18

www/docusaurus.config.js

@@ -1,10 +1,12 @@
 // @ts-check
 // Note: type annotations allow type checking and IDEs autocompletion
 
-const lightCodeTheme = require('prism-react-renderer/themes/github');
-const darkCodeTheme = require('prism-react-renderer/themes/dracula');
+const { themes } = require('prism-react-renderer');
 const rbVersion = require('../package.json').version;
 
+const lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
+
 /** @type {import('@docusaurus/types').Config} */
 const config = {
   title: 'React Bootstrap',
@@ -166,6 +168,7 @@ const config = {
       prism: {
         theme: lightCodeTheme,
         darkTheme: darkCodeTheme,
+        additionalLanguages: ['bash', 'diff', 'json'],
       },
       algolia: {
         // The application ID provided by Algolia

www/package.json

@@ -15,33 +15,33 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^2.4.0",
-    "@docusaurus/preset-classic": "^2.4.0",
-    "@docusaurus/theme-common": "^2.4.0",
-    "@docusaurus/theme-live-codeblock": "^2.4.0",
-    "@mdx-js/react": "^1.6.22",
-    "@restart/hooks": "^0.4.9",
+    "@docusaurus/core": "^3.1.0",
+    "@docusaurus/preset-classic": "^3.1.0",
+    "@docusaurus/theme-common": "^3.1.0",
+    "@docusaurus/theme-live-codeblock": "^3.1.0",
+    "@mdx-js/react": "^3.0.0",
+    "@restart/hooks": "^0.4.15",
     "ast-types": "^0.14.2",
-    "bootstrap": "^5.3.0",
-    "clsx": "^1.2.1",
-    "docusaurus-plugin-sass": "^0.2.3",
+    "bootstrap": "^5.3.2",
+    "clsx": "^2.1.0",
+    "docusaurus-plugin-sass": "^0.2.5",
     "dom-helpers": "^5.2.1",
-    "formik": "^2.2.9",
+    "formik": "^2.4.5",
     "holderjs": "^2.9.9",
     "lodash.camelcase": "^4.3.0",
-    "markdown-to-jsx": "^7.2.0",
-    "prism-react-renderer": "^1.3.5",
+    "markdown-to-jsx": "^7.4.0",
+    "prism-react-renderer": "^2.1.0",
     "raw-loader": "^4.0.2",
-    "react": "^17.0.2",
-    "react-docgen": "^5.4.3",
-    "react-dom": "^17.0.2",
+    "react": "^18.2.0",
+    "react-docgen": "^7.0.3",
+    "react-dom": "^18.2.0",
     "react-live": "^2.4.1",
-    "sass": "^1.62.0",
-    "yup": "^1.0.2"
+    "sass": "^1.69.7",
+    "yup": "^1.3.3"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^2.4.3",
-    "@tsconfig/docusaurus": "^2.0.2",
+    "@docusaurus/module-type-aliases": "^3.1.0",
+    "@docusaurus/tsconfig": "^3.1.0",
     "cross-env": "^7.0.3",
     "typescript": "^5.3.3"
   },
@@ -58,6 +58,6 @@
     ]
   },
   "engines": {
-    "node": ">=16.14"
+    "node": ">=18.0"
   }
 }

www/plugins/react-docgen-plugin/index.js

@@ -29,7 +29,8 @@ module.exports = () => ({
         const filePath = path.join(srcPath, file);
         const buffer = await fs.readFile(filePath);
 
-        const output = reactDocgen.parse(buffer, resolveHocComponents, null, {
+        const output = reactDocgen.parse(buffer, {
+          resolver: resolveHocComponents,
           filename: filePath,
         });
 

www/plugins/react-docgen-plugin/resolveHocComponents.js

@@ -1,15 +1,10 @@
 const camelCase = require('lodash.camelcase');
 const { resolver, utils } = require('react-docgen');
 const { namedTypes: types, visit } = require('ast-types');
-const buildParser = require('react-docgen/dist/babelParser').default;
+const { parse } = require('react-docgen');
 
 const upperFirst = (str) => str[0].toUpperCase() + str.slice(1);
 
-const parser = buildParser({
-  // Avoid babel complaining about requiring a filename.
-  filename: 'dummy.ts',
-});
-
 module.exports = (ast) => {
   let components = resolver.findAllComponentDefinitions(ast);
 
@@ -76,7 +71,7 @@ export default class ${upperFirst(
 }
         `;
 
-      let comp = parser.parse(src);
+      let comp = parse(src);
       comp.__src = src;
       components = components.concat(
         resolver.findExportedComponentDefinition(comp),

www/src/components/Markdown.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import BaseMarkdown from 'markdown-to-jsx';
-import MDXHead from '@theme-original/MDXComponents/Head';
+import Head from '@docusaurus/Head';
 import MDXCode from '@theme-original/MDXComponents/Code';
 import MDXA from '@theme-original/MDXComponents/A';
 import MDXPre from '@theme-original/MDXComponents/Pre';
@@ -11,7 +11,7 @@ import MDXImg from '@theme-original/MDXComponents/Img';
 
 const MARKDOWN_OPTIONS = {
   overrides: {
-    head: MDXHead,
+    head: Head,
     code: MDXCode,
     a: MDXA,
     pre: MDXPre,