Upgraded to Docusaurus v3 (#205)

@stellar/design-system-website/docusaurus.config.js

@@ -1,8 +1,9 @@
 // @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 lightCodeTheme = themes.github;
+const darkCodeTheme = themes.dracula;
 
 /** @type {import('@docusaurus/types').Config} */
 const config = {

@stellar/design-system-website/package.json

@@ -18,25 +18,25 @@
     "git-info": "rm -rf src/generated/ && mkdir src/generated/ && echo export default \"{\\\"commitHash\\\": \\\"$(git rev-parse --short HEAD)\\\"};\" > src/generated/gitInfo.ts"
   },
   "dependencies": {
-    "@docusaurus/core": "2.4.1",
-    "@docusaurus/preset-classic": "2.4.1",
-    "@docusaurus/remark-plugin-npm2yarn": "^2.4.3",
-    "@docusaurus/theme-live-codeblock": "^2.4.1",
-    "@mdx-js/react": "^1.6.22",
+    "@docusaurus/core": "3.1.0",
+    "@docusaurus/preset-classic": "3.1.0",
+    "@docusaurus/remark-plugin-npm2yarn": "^3.1.0",
+    "@docusaurus/theme-live-codeblock": "^3.1.0",
+    "@mdx-js/react": "^3.0.0",
     "@stellar/design-system": "^1.1.2",
-    "clsx": "^1.2.1",
-    "prism-react-renderer": "^1.3.5",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "clsx": "^2.1.0",
+    "prism-react-renderer": "^2.3.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-element-to-jsx-string": "^15.0.0",
-    "rehype-parse": "^8.0.4",
-    "rehype-react": "^7.2.0",
-    "rehype-sanitize": "^5.0.1",
-    "unified": "^10.1.2"
+    "rehype-parse": "^9.0.0",
+    "rehype-react": "^8.0.0",
+    "rehype-sanitize": "^6.0.0",
+    "unified": "^11.0.4"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "2.4.1",
-    "@tsconfig/docusaurus": "^1.0.5",
+    "@docusaurus/module-type-aliases": "3.1.0",
+    "@tsconfig/docusaurus": "^2.0.2",
     "eslint": "^8.44.0",
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-import": "^2.27.5",
@@ -45,7 +45,7 @@
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^4.0.1",
-    "typescript": "^4.7.4"
+    "typescript": "^5.3.3"
   },
   "browserslist": {
     "production": [

@stellar/design-system-website/src/components/Element.tsx

@@ -1,9 +1,10 @@
-import React, { Fragment, createElement } from "react";
+import React from "react";
 import Link from "@docusaurus/Link";
 import rehypeParse from "rehype-parse";
 import rehypeReact from "rehype-react";
 import rehypeSanitize from "rehype-sanitize";
 import { unified } from "unified";
+import * as prod from "react/jsx-runtime";
 
 export type ElementKind = "text" | "code" | "inline-tag";
 
@@ -13,6 +14,9 @@ export interface ElementProps {
   tag?: string;
 }
 
+// @ts-expect-error: the react types are missing.
+const production = { Fragment: prod.Fragment, jsx: prod.jsx, jsxs: prod.jsxs };
+
 export const Element = ({ text, kind, tag }: ElementProps) => {
   switch (kind) {
     case "code":
@@ -48,7 +52,7 @@ const parseMarkdownString = (text: string): React.ReactElement => {
   const file = unified()
     .use(rehypeSanitize)
     .use(rehypeParse, { fragment: true })
-    .use(rehypeReact, { createElement, Fragment })
+    .use(rehypeReact, production)
     .processSync(text);
 
   return file.result;

@stellar/design-system/package.json

@@ -67,8 +67,8 @@
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "sass": "^1.69.5",
-    "typedoc": "^0.24.8",
-    "typescript": "^4.9.5"
+    "typedoc": "^0.25.7",
+    "typescript": "^5.3.3"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.3",