feat: add support for react 19 (#726)

.changeset/angry-panthers-type.md

@@ -0,0 +1,7 @@
+---
+'@craftjs/layers': patch
+'@craftjs/utils': patch
+'@craftjs/core': patch
+---
+
+Add support for react 19

examples/basic/components/Header.js

@@ -2,9 +2,9 @@ import { useEditor } from '@craftjs/core';
 import {
   Box,
   Typography,
-  Grid,
+  Grid2 as Grid,
   Button as MaterialButton,
-} from '@material-ui/core';
+} from '@mui/material';
 import React from 'react';
 
 import { Button } from './user/Button';

examples/basic/components/SettingsPanel.js

@@ -5,7 +5,7 @@ import {
   Grid,
   Typography,
   Button as MaterialButton,
-} from '@material-ui/core';
+} from '@mui/material';
 import React from 'react';
 
 export const SettingsPanel = () => {

examples/basic/components/Toolbox.js

@@ -1,10 +1,5 @@
 import { useEditor, Element } from '@craftjs/core';
-import {
-  Box,
-  Typography,
-  Grid,
-  Button as MaterialButton,
-} from '@material-ui/core';
+import { Box, Typography, Grid, Button as MaterialButton } from '@mui/material';
 import React from 'react';
 
 import { Button } from './user/Button';

examples/basic/components/Topbar.js

@@ -11,7 +11,7 @@ import {
   DialogActions,
   TextField,
   Snackbar,
-} from '@material-ui/core';
+} from '@mui/material';
 import copy from 'copy-to-clipboard';
 import lz from 'lzutf8';
 import React, { useState } from 'react';

examples/basic/components/user/Button.js

@@ -6,7 +6,7 @@ import {
   RadioGroup,
   Radio,
   FormControlLabel,
-} from '@material-ui/core';
+} from '@mui/material';
 import React from 'react';
 
 export const Button = ({ size, variant, color, text, ...props }) => {

examples/basic/components/user/Container.js

@@ -1,8 +1,7 @@
 import { useNode } from '@craftjs/core';
-import { Slider } from '@material-ui/core';
-import { Paper, FormControl, FormLabel } from '@material-ui/core';
-import ColorPicker from 'material-ui-color-picker';
+import { Slider, Paper, FormControl, FormLabel } from '@mui/material';
 import React from 'react';
+import { HexColorPicker } from 'react-colorful';
 
 export const Container = ({ background, padding, children, ...props }) => {
   const {
@@ -33,9 +32,9 @@ export const ContainerSettings = () => {
     <div>
       <FormControl fullWidth={true} margin="normal" component="fieldset">
         <FormLabel component="legend">Background</FormLabel>
-        <ColorPicker
+        <HexColorPicker
           name="background-color"
-          value={background}
+          color={background}
           onChange={(color) => {
             setProp((props) => (props.background = color), 500);
           }}

examples/basic/components/user/Text.js

@@ -1,5 +1,5 @@
 import { useNode } from '@craftjs/core';
-import { Slider, FormControl, FormLabel } from '@material-ui/core';
+import { Slider, FormControl, FormLabel } from '@mui/material';
 import React, { useState, useEffect } from 'react';
 import ContentEditable from 'react-contenteditable';
 

examples/basic/next.config.js

@@ -1,3 +1,4 @@
 module.exports = {
+  output: 'export',
   assetPrefix: process.env.NODE_ENV === 'production' ? '/examples/basic' : '/',
 };

examples/basic/package.json

@@ -4,24 +4,27 @@
   "private": true,
   "dependencies": {
     "@craftjs/core": "workspace:*",
-    "@material-ui/core": "4.5.2",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.0",
+    "@mui/material": "^6.4.3",
     "clsx": "latest",
     "copy-to-clipboard": "3.2.0",
     "lzutf8": "0.5.5",
-    "material-ui-color-picker": "3.2.0",
-    "next": "13.1.6",
+    "next": "15.1.6",
     "prop-types": "latest",
-    "react": "18.2.0",
+    "react": "19.0.0",
+    "react-colorful": "^5.6.1",
     "react-contenteditable": "3.3.3",
-    "react-dom": "18.2.0"
+    "react-dom": "19.0.0"
   },
   "scripts": {
     "start": "next dev -p 3002",
     "build": "next build",
-    "export": "next export",
     "clean": "rimraf lib .next out dist"
   },
   "devDependencies": {
+    "@types/react": "19.0.8",
+    "@types/react-dom": "19.0.3",
     "cross-env": "6.0.3"
   }
 }

examples/basic/pages/_app.js

@@ -1,5 +1,5 @@
-import CssBaseline from '@material-ui/core/CssBaseline';
-import { ThemeProvider } from '@material-ui/core/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { ThemeProvider } from '@mui/material/styles';
 import App from 'next/app';
 import Head from 'next/head';
 import React from 'react';

examples/basic/pages/_document.js

@@ -1,10 +1,36 @@
-import { ServerStyleSheets } from '@material-ui/core/styles';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
 import React from 'react';
+import { ServerStyleSheet } from 'styled-components';
 
 import theme from '../src/theme';
 
 export default class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const sheet = new ServerStyleSheet();
+    const originalRenderPage = ctx.renderPage;
+
+    try {
+      ctx.renderPage = () =>
+        originalRenderPage({
+          enhanceApp: (App) => (props) =>
+            sheet.collectStyles(<App {...props} />),
+        });
+
+      const initialProps = await Document.getInitialProps(ctx);
+      return {
+        ...initialProps,
+        styles: (
+          <>
+            {initialProps.styles}
+            {sheet.getStyleElement()}
+          </>
+        ),
+      };
+    } finally {
+      sheet.seal();
+    }
+  }
+
   render() {
     return (
       <Html lang="en">
@@ -29,47 +55,3 @@ export default class MyDocument extends Document {
     );
   }
 }
-
-MyDocument.getInitialProps = async (ctx) => {
-  // Resolution order
-  //
-  // On the server:
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. document.getInitialProps
-  // 4. app.render
-  // 5. page.render
-  // 6. document.render
-  //
-  // On the server with error:
-  // 1. document.getInitialProps
-  // 2. app.render
-  // 3. page.render
-  // 4. document.render
-  //
-  // On the client
-  // 1. app.getInitialProps
-  // 2. page.getInitialProps
-  // 3. app.render
-  // 4. page.render
-
-  // Render app and page and get the context of the page with collected side effects.
-  const sheets = new ServerStyleSheets();
-  const originalRenderPage = ctx.renderPage;
-
-  ctx.renderPage = () =>
-    originalRenderPage({
-      enhanceApp: (App) => (props) => sheets.collect(<App {...props} />),
-    });
-
-  const initialProps = await Document.getInitialProps(ctx);
-
-  return {
-    ...initialProps,
-    // Styles fragment is rendered after the app and page rendering finish.
-    styles: [
-      ...React.Children.toArray(initialProps.styles),
-      sheets.getStyleElement(),
-    ],
-  };
-};

examples/basic/pages/index.js

@@ -1,5 +1,5 @@
 import { Editor, Frame, Element } from '@craftjs/core';
-import { Typography, Paper, Grid, makeStyles } from '@material-ui/core';
+import { Typography, Paper, Grid2 as Grid } from '@mui/material';
 import React from 'react';
 
 import { SettingsPanel } from '../components/SettingsPanel';
@@ -10,15 +10,7 @@ import { Card, CardBottom, CardTop } from '../components/user/Card';
 import { Container } from '../components/user/Container';
 import { Text } from '../components/user/Text';
 
-const useStyles = makeStyles(() => ({
-  root: {
-    padding: 0,
-    background: 'rgb(252, 253, 253)',
-  },
-}));
 export default function App() {
-  const classes = useStyles();
-
   return (
     <div style={{ margin: '0 auto', width: '800px' }}>
       <Typography style={{ margin: '20px 0' }} variant="h5" align="center">
@@ -36,7 +28,7 @@ export default function App() {
       >
         <Topbar />
         <Grid container spacing={5} style={{ paddingTop: '10px' }}>
-          <Grid item xs>
+          <Grid size={8}>
             <Frame>
               <Element
                 canvas
@@ -64,8 +56,13 @@ export default function App() {
               </Element>
             </Frame>
           </Grid>
-          <Grid item xs={4}>
-            <Paper className={classes.root}>
+          <Grid item size={4}>
+            <Paper
+              sx={{
+                padding: 0,
+                background: 'rgb(252, 253, 253)',
+              }}
+            >
               <Toolbox />
               <SettingsPanel />
             </Paper>

examples/basic/src/Link.js

@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/anchor-has-content */
-import MuiLink from '@material-ui/core/Link';
+import { Link as MuiLink } from '@mui/material';
 import clsx from 'clsx';
 import NextLink from 'next/link';
 import { useRouter } from 'next/router';

examples/basic/src/theme.js

@@ -1,18 +1,14 @@
-import { red } from '@material-ui/core/colors';
-import { createMuiTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
 // Create a theme instance.
-const theme = createMuiTheme({
+const theme = createTheme({
   palette: {
     primary: {
       main: '#556cd6',
     },
     secondary: {
       main: '#19857b',
     },
-    error: {
-      main: red.A400,
-    },
     background: {
       default: '#fff',
     },