feat: add support for react 19 (#726)

Author: prevwong

.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"
   }
 }