Upgrade to React 18 (#3231)

.changeset/four-cobras-mate.md

@@ -0,0 +1,5 @@
+---
+"@comet/blocks-admin": major
+---
+
+Remove `BindBlockAdminComponent` from public API

.changeset/thirty-moles-invite.md

@@ -0,0 +1,13 @@
+---
+"@comet/admin-babel-preset": minor
+"@comet/admin-color-picker": minor
+"@comet/admin-date-time": minor
+"@comet/admin-icons": minor
+"@comet/admin-rte": minor
+"@comet/admin-theme": minor
+"@comet/admin": minor
+"@comet/blocks-admin": minor
+"@comet/cms-admin": minor
+---
+
+Add support for React 18

demo/admin/package.json

@@ -24,15 +24,14 @@
     },
     "dependencies": {
         "@apollo/client": "^3.7.0",
-        "@babel/core": "^7.26.7",
         "@comet/admin": "workspace:*",
         "@comet/admin-date-time": "workspace:*",
         "@comet/admin-icons": "workspace:*",
         "@comet/admin-theme": "workspace:*",
         "@comet/blocks-admin": "workspace:*",
         "@comet/cms-admin": "workspace:*",
-        "@emotion/react": "^11.9.3",
-        "@emotion/styled": "^11.9.3",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "@fontsource-variable/roboto-flex": "^5.1.1",
         "@mui/material": "^6.3.0",
         "@mui/system": "^6.3.0",
@@ -45,11 +44,11 @@
         "graphql-tag": "^2.0.0",
         "lodash.isequal": "^4.5.0",
         "rdndmb-html5-to-touch": "^8.0.3",
-        "react": "^17.0.2",
+        "react": "^18.3.1",
         "react-app-polyfill": "^1.0.6",
         "react-dnd": "^16.0.1",
         "react-dnd-multi-backend": "^8.0.3",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "react-final-form": "^6.5.9",
         "react-intl": "^6.8.9",
         "react-router": "^5.3.4",
@@ -72,8 +71,8 @@
         "@swc/plugin-emotion": "^2.5.124",
         "@types/lodash.isequal": "^4.5.8",
         "@types/node": "^22.10.7",
-        "@types/react": "^17.0.83",
-        "@types/react-dom": "^17.0.26",
+        "@types/react": "^18.3.18",
+        "@types/react-dom": "^18.3.5",
         "@types/react-router": "^5.1.20",
         "@types/react-router-dom": "^5.0.0",
         "@vitejs/plugin-react-swc": "^3.6.0",

demo/admin/src/loader.ts

@@ -1,13 +1,14 @@
 import { createElement } from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 
 import { App } from "./App";
 
 const loadHtml = () => {
     const rootElement = document.querySelector<HTMLElement>("#root");
     if (!rootElement) return false;
 
-    render(createElement(App), rootElement);
+    const root = createRoot(rootElement);
+    root.render(createElement(App));
 };
 
 if (["interactive", "complete"].includes(document.readyState)) {

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

@@ -317,8 +317,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: {
@@ -442,7 +441,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 } = {
@@ -492,6 +490,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/docs/7-migration-guide/migration-from-v7-to-v8.md

@@ -232,6 +232,48 @@ npx @comet/upgrade v8/nest-peer-dependencies.ts
 
 ## Admin
 
+### Upgrade peer dependencies
+
+#### Recommended: React 18
+
+Support for React 18 has been added.
+While optional, it is recommended to upgrade to React 18 in the project.
+
+1. Upgrade all your dependencies:
+
+    ```diff title=admin/package.json
+    {
+        "dependencies": {
+    -       "react": "^17.0.2",
+    -       "react-dom": "^17.0.2",
+    +       "react": "^18.3.1",
+    +       "react-dom": "^18.3.1"
+        },
+        "devDependencies": {
+    -       "@types/react": "^17.0.83",
+    -       "@types/react-dom": "^17.0.26",
+    +       "@types/react": "^18.3.18",
+    +       "@types/react-dom": "^18.3.5"
+        }
+    }
+    ```
+
+    :::note Codemod available
+
+    ```sh
+    npx @comet/upgrade v8/update-react-dependencies.ts
+    ```
+
+    :::
+
+2. Follow the official [migration guide](https://react.dev/blog/2022/03/08/react-18-upgrade-guide) to upgrade.
+
+    :::tip
+
+    Use [types-react-codemod](https://github.com/eps1lon/types-react-codemod) to fix potential TypeScript compile errors when upgrading to `@types/react@^18.0.0`.
+
+    :::
+
 ### Stay on same page after changing scope
 
 The Admin now stays on the same page per default when changing scopes.

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,48 +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",
-        "@emotion/react": "^11.5.0",
-        "@emotion/styled": "^11.3.0",
+        "@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.14.0",
+        "@emotion/styled": "^11.14.0",
         "@fontsource/roboto": "^4.5.8",
-        "@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.6",
         "draft-js": "^0.11.7",
         "final-form": "^4.20.10",
         "graphql": "^15.10.1",
         "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.1",
         "react-dnd-html5-backend": "^16.0.1",
-        "react-dom": "^17.0.2",
+        "react-dom": "^18.3.1",
         "react-final-form": "^6.5.9",
         "react-intl": "^6.8.9",
-        "react-live": "^2.4.1",
+        "react-live": "^4.1.8",
         "react-router": "^5.3.4",
         "react-router-dom": "^5.3.4",
         "search-insights": "^2.7.0"
     },
     "devDependencies": {
         "@babel/core": "^7.26.7",
         "@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.83",
-        "@types/react-dom": "^17.0.26",
+        "@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-all2": "^5.0.2",
         "prettier": "^3.4.2",
         "sucrase": "^3.32.0",
-        "typescript": "^4.7.4",
+        "typescript": "5.1.6",
         "webpack": "^5.97.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]);
 
@@ -35,6 +35,7 @@ export const Story = ({ path, ...props }: StoryProps) => {
                         <MuiThemeProvider theme={theme}>
                             <CodeBlock
                                 language="tsx"
+                                // @ts-expect-error live prop is missing in the types
                                 live
                                 transformCode={(code) => {
                                     const compiledCode = transform(code, {

docs/src/pages/index.tsx

@@ -1,6 +1,4 @@
 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 {
     return <Redirect to="/docs" />;

docs/src/stories/FieldSet.tsx

@@ -1,8 +1,6 @@
 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 (

docs/src/stories/Typography.tsx

@@ -1,6 +1,5 @@
 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 (

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({

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 (

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

@@ -2,8 +2,6 @@ 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({

docs/src/stories/customization-and-styling/StylingAComponentsRootElement.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 (

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 (

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> {