feat: add support for React@18 (#409)

Closes #408
char0n · May 2, 2022 · 9013604 · 9013604
1 parent 0bdd92e
commit 9013604
Show file tree

Hide file tree

Showing 12 changed files with 5,950 additions and 7,399 deletions.
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -4,16 +4,16 @@
   "private": true,
   "homepage": ".",
   "dependencies": {
-    "@material-ui/core": "^4.12.3",
-    "@material-ui/icons": "^4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.60",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.79",
+    "@mui/material": "^5.6.3",
+    "@mui/styles": "^5.6.2",
     "@testing-library/jest-dom": "^5.11.9",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
     "ramda": "^0.27.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-redux": "^7.2.6",
     "swagger-adjust": "file:../",
     "web-vitals": "^2.1.2"
   },

diff --git a/demo/src/index.js b/demo/src/index.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import { System, SystemContext, useSystemComponent } from 'swagger-adjust';
 import { Provider } from 'react-redux';
 
@@ -22,15 +22,17 @@ const App = () => {
   return <TodoListLayout />;
 };
 
-ReactDOM.render(
+const container = document.getElementById('root');
+const root = ReactDOM.createRoot(container);
+
+root.render(
   <React.StrictMode>
     <Provider store={store}>
       <SystemContext.Provider value={system.getSystem}>
         <App />
       </SystemContext.Provider>
     </Provider>
-  </React.StrictMode>,
-  document.getElementById('root')
+  </React.StrictMode>
 );
 
 // If you want to start measuring performance in your app, pass a function

diff --git a/demo/src/todo-list-enhancer/components/TodoListBatchOperations.js b/demo/src/todo-list-enhancer/components/TodoListBatchOperations.js
@@ -1,6 +1,6 @@
-import ButtonGroup from '@material-ui/core/ButtonGroup';
-import Button from '@material-ui/core/Button';
-import { makeStyles } from '@material-ui/core/styles';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import { makeStyles } from '@mui/styles';
 import { useSystemActionCreatorBound } from 'swagger-adjust';
 
 const useStyles = makeStyles((theme) => ({

diff --git a/demo/src/todo-list-enhancer/components/TodoListItem.js b/demo/src/todo-list-enhancer/components/TodoListItem.js
@@ -1,11 +1,11 @@
 import React from 'react';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Checkbox from '@material-ui/core/Checkbox';
-import ListItemText from '@material-ui/core/ListItemText';
-import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
-import IconButton from '@material-ui/core/IconButton';
-import DeleteIcon from '@material-ui/icons/Delete';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Checkbox from '@mui/material/Checkbox';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemSecondaryAction from '@mui/material/ListItemSecondaryAction';
+import IconButton from '@mui/material/IconButton';
+import DeleteIcon from '@mui/icons-material/Delete';
 
 import { useSystemFn, useSystemActionCreatorBound } from 'swagger-adjust';
 

diff --git a/demo/src/todo-list/components/TodoList.js b/demo/src/todo-list/components/TodoList.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import List from '@material-ui/core/List';
-import Divider from '@material-ui/core/Divider';
-import { makeStyles } from '@material-ui/core/styles';
+import List from '@mui/material/List';
+import Divider from '@mui/material/Divider';
+import { makeStyles } from '@mui/styles';
 import { useSystemComponent, useSystemSelector } from 'swagger-adjust';
 
 const useStyles = makeStyles(() => ({

diff --git a/demo/src/todo-list/components/TodoListAppBar.js b/demo/src/todo-list/components/TodoListAppBar.js
@@ -1,7 +1,7 @@
 import React from 'react';
-import MUIAppBar from '@material-ui/core/AppBar';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
+import MUIAppBar from '@mui/material/AppBar';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 
 const TodoListAppBar = () => {
   return (

diff --git a/demo/src/todo-list/components/TodoListInput.js b/demo/src/todo-list/components/TodoListInput.js
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import TextField from '@material-ui/core/TextField';
-import { makeStyles } from '@material-ui/core/styles';
+import TextField from '@mui/material/TextField';
+import { makeStyles } from '@mui/styles';
 import { useSystemActionCreatorBound } from 'swagger-adjust';
 
 const useStyles = makeStyles(() => ({

diff --git a/demo/src/todo-list/components/TodoListItem.js b/demo/src/todo-list/components/TodoListItem.js
@@ -1,6 +1,6 @@
 import React from 'react';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 
 const TodoListItem = ({ item }) => (
   <ListItem>

diff --git a/demo/src/todo-list/components/TodoListLayout.js b/demo/src/todo-list/components/TodoListLayout.js
@@ -1,12 +1,9 @@
-import CssBaseline from '@material-ui/core/CssBaseline';
-import Paper from '@material-ui/core/Paper';
-import {
-  ThemeProvider,
-  unstable_createMuiStrictModeTheme, // eslint-disable-line
-} from '@material-ui/core/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import Paper from '@mui/material/Paper';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import { useSystemComponent } from 'swagger-adjust';
 
-const themeInstance = unstable_createMuiStrictModeTheme();
+const themeInstance = createTheme();
 
 const TodoListLayout = () => {
   const TodoListAppBar = useSystemComponent('TodoListAppBar');