Upgrade Docusaurus to v3.7.0

docs/.eslintrc.json

@@ -2,8 +2,7 @@
     "extends": "@comet/eslint-config/react",
     "ignorePatterns": [".docusaurus", "build"],
     "rules": {
-        "@calm/react-intl/missing-formatted-message": "off",
-        "no-restricted-imports": "off"
+        "@calm/react-intl/missing-formatted-message": "off"
     },
     "env": {
         "node": true

docs/docs/1-getting-started/3-packages-tools.md

@@ -13,6 +13,12 @@ A COMET DXP application, at a minimum, consists of the following packages:
 
 ---
 
+## API {#apiPackage}
+
+### @comet/cms-api
+
+Used to integrate Comet DPX into a NestJS application.
+
 ## Admin {#adminPackage}
 
 The Admin's user interface is built using [MUI](https://mui.com/), [react-final-form](https://final-form.org/react), [react-router](https://reactrouter.com/), and the `@comet/admin` library, which provides commonly used components and tools for creating forms, UI, and data visualization.
@@ -53,3 +59,9 @@ Provides components for selecting date and time or a range or combination of dat
 #### @comet/admin-color-picker
 
 Provides a component for selecting colors in forms, built with react-final-form.
+
+## Site {#sitePackage}
+
+### @comet/cms-site
+
+Used to integrate Comet DPX into a Next.js application.

docs/docs/2-core-concepts/2-blocks/1-your-first-block.mdx

@@ -316,8 +316,7 @@ import { BlockCategory, BlocksFinalForm, createCompositeBlock, createCompositeSe
 import { createRichTextBlock } from "@comet/cms-admin";
 import { MenuItem } from "@material-ui/core";
 import { HeadlineBlockData } from "@src/blocks.generated";
-import { LinkBlock } from "@src/common/blocks/LinkBlock";
-import * as React from "react";\n
+import { LinkBlock } from "@src/common/blocks/LinkBlock";\n
 const RichTextBlock = createRichTextBlock({
     link: LinkBlock,
     rte: {
@@ -441,7 +440,6 @@ The complete code for our Headline site block (including all necessary imports)
         <CodeBlock language="tsx">
             {`import { PropsWithData, withPreview } from "@comet/cms-site";
 import { HeadlineBlockData } from "@src/blocks.generated";
-import * as React from "react";
 import { Renderers } from "redraft";\n
 import { RichTextBlock } from "./RichTextBlock";\n
 const headlineTags: { [key: string]: React.ElementType } = {
@@ -491,6 +489,6 @@ Now you should be ready to create additional blocks! Maybe even a Dog Ear block?
 
 :::info
 
-We've only covered the basic concepts of COMET DXP blocks in this guide. To get a full picture, please review the [blocks](../Blocks/) section in our documentation.
+We've only covered the basic concepts of COMET DXP blocks in this guide. To get a full picture, please review the [blocks](/docs/core-concepts/blocks/) section in our documentation.
 
 :::

docs/docs/4-guides/1-how-to-build-a-custom-client/index.md

@@ -457,7 +457,7 @@ export interface HeadlineBlockData {
 Having the block data in place, we can now render the blocks. The rendering logic for each block type is recommended to be implemented in a separate component. Here as an example the [HeadlineBlock from Comet Demo](https://github.com/vivid-planet/comet/blob/a737ccc2f0826b236b49d63129a6a49e7f790993/demo/site/src/blocks/HeadlineBlock.tsx#L36) component.
 
 Having all the block components implemented, we can now start to render the page content.
-Typically a page consists of a list of blocks, those `BlocksBlock` can be rendered with a component [BlocksBlock](/docs/core-concepts/blocks/factories#site-blocksblock). from the `@comet/cms-site` package.
+Typically a page consists of a list of blocks, those `BlocksBlock` can be rendered with a component [BlocksBlock](/docs/core-concepts/blocks/factories#site). from the `@comet/cms-site` package.
 
 ```typescript
 import { BlocksBlock, PropsWithData, SupportedBlocks } from "@comet/cms-site";

docs/docusaurus.config.js

@@ -1,6 +1,8 @@
 // @ts-check
-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 = {
@@ -88,6 +90,7 @@ const config = {
                         block: { start: "removal-start", end: "removal-end" },
                     },
                 ],
+                additionalLanguages: ["bash", "diff", "json"],
             },
             announcementBar: {
                 id: "work-in-progress",

docs/package.json

@@ -38,49 +38,51 @@
         "@comet/admin-icons": "workspace:*",
         "@comet/admin-rte": "workspace:*",
         "@comet/admin-theme": "workspace:*",
-        "@docusaurus/core": "2.4.3",
-        "@docusaurus/preset-classic": "2.4.3",
-        "@docusaurus/theme-common": "2.4.3",
-        "@docusaurus/theme-live-codeblock": "2.4.3",
-        "@docusaurus/theme-mermaid": "2.4.3",
+        "@docusaurus/core": "^3.7.0",
+        "@docusaurus/preset-classic": "^3.7.0",
+        "@docusaurus/theme-common": "^3.7.0",
+        "@docusaurus/theme-live-codeblock": "^3.7.0",
+        "@docusaurus/theme-mermaid": "^3.7.0",
         "@emotion/react": "^11.5.0",
         "@emotion/styled": "^11.3.0",
         "@fontsource/roboto": "^4.2.3",
-        "@mdx-js/react": "^1.6.22",
+        "@mdx-js/react": "^3.1.0",
         "@mui/material": "^6.3.0",
         "@mui/system": "^6.3.0",
         "@mui/x-data-grid": "^7.23.5",
         "draft-js": "^0.11.7",
         "final-form": "^4.20.10",
         "graphql": "^15.0.0",
         "history": "^4.10.1",
-        "prism-react-renderer": "^1.3.5",
+        "prism-react-renderer": "^2.4.1",
         "raw-loader": "^4.0.2",
-        "react": "^17.0.2",
+        "react": "^18.3.1",
         "react-dnd": "^16.0.0",
         "react-dnd-html5-backend": "^16.0.0",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "react-final-form": "^6.5.9",
         "react-intl": "^6.0.0",
-        "react-live": "^2.4.1",
+        "react-live": "^4.1.8",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
-        "react-select": "^3.2.0",
         "search-insights": "^2.7.0"
     },
     "devDependencies": {
         "@babel/core": "^7.22.8",
         "@comet/eslint-config": "workspace:*",
-        "@docusaurus/module-type-aliases": "2.4.3",
-        "@docusaurus/types": "2.4.3",
-        "@tsconfig/docusaurus": "^1.0.7",
-        "@types/react": "^17.0.48",
-        "@types/react-dom": "^17.0.17",
+        "@docusaurus/module-type-aliases": "^3.7.0",
+        "@docusaurus/tsconfig": "^3.7.0",
+        "@docusaurus/types": "^3.7.0",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
         "cspell": "^8.17.2",
         "npm-run-all": "^4.1.5",
         "prettier": "^2.6.2",
         "sucrase": "^3.32.0",
-        "typescript": "^4.7.4",
+        "typescript": "5.1.6",
         "webpack": "^5.88.1"
+    },
+    "engines": {
+        "node": ">=18.0"
     }
 }

docs/src/components/Story.tsx

@@ -2,7 +2,7 @@ import { createCometTheme } from "@comet/admin-theme";
 import BrowserOnly from "@docusaurus/BrowserOnly";
 import CodeBlock from "@theme/CodeBlock";
 import type { Props as PlaygroundProps } from "@theme/Playground";
-import React from "react";
+import { useEffect, useState } from "react";
 import { IntlProvider } from "react-intl";
 import { transform } from "sucrase";
 
@@ -17,9 +17,9 @@ const importStory = async (name: string) => {
 
 export const Story = ({ path, ...props }: StoryProps) => {
     const theme = createCometTheme();
-    const [code, setCode] = React.useState("");
+    const [code, setCode] = useState("");
 
-    React.useEffect(() => {
+    useEffect(() => {
         importStory(path).then(setCode);
     }, [path]);
 

docs/src/pages/index.tsx

@@ -1,7 +1,6 @@
 import { Redirect } from "@docusaurus/router";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 export default function Home(): JSX.Element {
+    /* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */
     return <Redirect to="/docs" />;
 }

docs/src/stories/FieldSet.tsx

@@ -1,28 +1,31 @@
 import { FieldSet } from "@comet/admin";
 import { Info } from "@comet/admin-icons";
 import { Chip, IconButton, Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     return (
         <>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="h4">Collapsible FieldSet initially collapsed</Typography>
             <FieldSet
                 title={
                     <>
                         TITLE WITH ICON
+                        {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                         <IconButton>
+                            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                             <Info />
                         </IconButton>
                     </>
                 }
                 supportText="Support text"
+                /* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */
                 endAdornment={<Chip color="default" label="Chip text" />}
                 initiallyExpanded={false}
             >
                 <div>Content goes here ...</div>
             </FieldSet>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="h4">Non-collapsible FieldSet with disabled padding</Typography>
             <FieldSet title="TITLE" supportText="Support text" endAdornment="Info text" collapsible={false} disablePadding>
                 <div>Full-Width-Content goes here ...</div>

docs/src/stories/Typography.tsx

@@ -1,20 +1,30 @@
 import { Box, Typography } from "@mui/material";
 // eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     return (
+        /* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */
         <Box>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography>You can add unordered lists:</Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="list">
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">A</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">B</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">C</Typography>
             </Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography>Or ordered lists:</Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="list" component="ol">
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">One</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">Two</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="listItem">Three</Typography>
             </Typography>
         </Box>

docs/src/stories/customization-and-styling/OverridingStylesOfAComponentGlobally.tsx

@@ -1,8 +1,6 @@
 import { ContentOverflow, MuiThemeProvider } from "@comet/admin";
 import { createCometTheme } from "@comet/admin-theme";
 import { Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     const theme = createCometTheme({
@@ -24,7 +22,9 @@ function Story() {
     return (
         <MuiThemeProvider theme={theme}>
             <ContentOverflow>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="h2">Title</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography>
                     Lorem ipsum etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam
                     quis risus eget urna mollis ornare vel eu leo.

docs/src/stories/customization-and-styling/OverridingThePropsOfASlot.tsx

@@ -1,7 +1,5 @@
 import { ContentOverflow } from "@comet/admin";
 import { Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     return (
@@ -12,7 +10,9 @@ function Story() {
                 },
             }}
         >
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="h2">Title</Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography>
                 Lorem ipsum etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis
                 risus eget urna mollis ornare vel eu leo.

docs/src/stories/customization-and-styling/SettingDefaultPropsOfAComponent.tsx

@@ -2,15 +2,14 @@ import { ContentOverflow, MuiThemeProvider } from "@comet/admin";
 import { Preview } from "@comet/admin-icons";
 import { createCometTheme } from "@comet/admin-theme";
 import { Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     const theme = createCometTheme({
         components: {
             CometAdminContentOverflow: {
                 defaultProps: {
                     iconMapping: {
+                        /* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */
                         openDialog: <Preview fontSize="large" />,
                     },
                 },
@@ -21,7 +20,9 @@ function Story() {
     return (
         <MuiThemeProvider theme={theme}>
             <ContentOverflow>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography variant="h2">Title</Typography>
+                {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
                 <Typography>
                     Lorem ipsum etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam
                     quis risus eget urna mollis ornare vel eu leo.

docs/src/stories/customization-and-styling/StylingAComponentsRootElement.tsx

@@ -1,12 +1,12 @@
 import { ContentOverflow } from "@comet/admin";
 import { Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     return (
         <ContentOverflow sx={{ backgroundColor: "lime" }}>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="h2">Title</Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography>
                 Lorem ipsum etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis
                 risus eget urna mollis ornare vel eu leo.

docs/src/stories/customization-and-styling/StylingASlot.tsx

@@ -1,7 +1,5 @@
 import { ContentOverflow } from "@comet/admin";
 import { Typography } from "@mui/material";
-// eslint-disable-next-line @typescript-eslint/no-unused-vars, unused-imports/no-unused-imports
-import * as React from "react";
 
 function Story() {
     return (
@@ -15,7 +13,9 @@ function Story() {
                 },
             }}
         >
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography variant="h2">Title</Typography>
+            {/* @ts-expect-error type mismatch between React 17 and 18, will be fixed by updating the admin packages */}
             <Typography>
                 Lorem ipsum etiam porta sem malesuada magna mollis euismod. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis
                 risus eget urna mollis ornare vel eu leo.

docs/src/theme/Playground/Button.tsx

@@ -1,5 +1,3 @@
-import React from "react";
-
 import styles from "./button.module.css";
 
 interface ButtonProps extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {

docs/src/theme/Playground/index.tsx

@@ -4,13 +4,13 @@ import type { ThemeConfig } from "@docusaurus/theme-live-codeblock";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useIsBrowser from "@docusaurus/useIsBrowser";
 import type { Props } from "@theme/Playground";
-import React from "react";
+import { ReactNode, useState } from "react";
 import { LiveEditor, LiveError, LivePreview, LiveProvider } from "react-live";
 
 import { Button } from "./Button";
 import styles from "./styles.module.css";
 
-function Header({ children }: { children: React.ReactNode }) {
+function Header({ children }: { children: ReactNode }) {
     return <div className={styles.playgroundHeader}>{children}</div>;
 }
 
@@ -50,7 +50,7 @@ function ThemedLiveEditor({ isOpen = false }) {
 }
 
 function EditorWithHeader() {
-    const [isEditorOpen, setIsEditorOpen] = React.useState(false);
+    const [isEditorOpen, setIsEditorOpen] = useState(false);
 
     return (
         <>

docs/src/theme/ReactLiveScope/index.js

@@ -1,4 +1,5 @@
 import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";
+// eslint-disable-next-line no-restricted-imports
 import React from "react";
 
 // Add react-live imports you need here

docs/tsconfig.json

@@ -1,5 +1,5 @@
 {
-    "extends": "@tsconfig/docusaurus/tsconfig.json",
+    "extends": "@docusaurus/tsconfig",
     "compilerOptions": {
         "baseUrl": "."
     }