#16 Update material version to integrate theme

MetaCell · Jul 29, 2022 · 7f18fb3 · 7f18fb3
1 parent 162f501
commit 7f18fb3
Show file tree

Hide file tree

Showing 6 changed files with 17 additions and 14 deletions.
diff --git a/example/components/widgets/CustomNodeWidget.tsx b/example/components/widgets/CustomNodeWidget.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import {DiagramEngine} from "@projectstorm/react-diagrams";
 import {MetaNodeModel} from "../../../.";
-import {Box, Typography} from "@material-ui/core";
+import {Box, Typography} from "@mui/material";
 import NodeSelection from "./NodeSelection";
 
 export interface CustomNodeWidgetProps {

diff --git a/example/components/widgets/NodeSelection.tsx b/example/components/widgets/NodeSelection.tsx
@@ -1,4 +1,4 @@
-import { Box, Button } from "@material-ui/core";
+import { Box, Button } from "@mui/material";
 import { DiagramEngine, PortWidget } from "@projectstorm/react-diagrams";
 import * as React from "react";
 import PortWigetComp from "./PortWidgetComp";

diff --git a/example/components/widgets/PortWidgetComp.tsx b/example/components/widgets/PortWidgetComp.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Box } from "@material-ui/core";
+import { Box } from "@mui/material";
 import { PortWidget } from "@projectstorm/react-diagrams";
 
 const PortWigetComp = (props) => {

diff --git a/example/index.tsx b/example/index.tsx
@@ -3,12 +3,11 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import MetaDiagram, {MetaNode, Position, ComponentsMap, MetaLink} from "./..";
 import {CustomNodeWidget} from "./components/widgets/CustomNodeWidget";
-import {makeStyles} from "@material-ui/core";
+import { makeStyles } from "@mui/styles";
 import CustomLinkWidget from "./components/widgets/CustomLinkWidget";
 import BG from "./components/assets/svg/bg-dotted.svg";
-import { nodeIcons } from "./components/assets/styles/constants";
-import { ThemeProvider } from '@material-ui/core/styles';
-import CssBaseline from '@material-ui/core/CssBaseline';
+import { ThemeProvider } from '@mui/material';
+import CssBaseline from '@mui/material/CssBaseline';
 import theme from './theme';
 
 const useStyles = makeStyles(_ => ({
@@ -38,7 +37,7 @@ const App = () => {
         new Map(Object.entries({'default': CustomNodeWidget})),
         new Map(Object.entries({'default': CustomLinkWidget}))
     )
-      console.log(theme)
+
     return (
       <ThemeProvider theme={theme}>
         <CssBaseline />

diff --git a/example/package.json b/example/package.json
@@ -8,11 +8,15 @@
     "build": "parcel build index.html"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "react": "^16.8.0 || ^17.0.0",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
+    "@mui/icons-material": "^5.8.4",
+    "@mui/material": "^5.8.4",
+    "@mui/styles": "^5.8.4",
     "react-app-polyfill": "^1.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "react-is": "^18.2.0"
+    "react-is": "^18.2.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
   },
   "alias": {
     "react": "../node_modules/react",

diff --git a/example/theme.ts b/example/theme.ts
@@ -1,5 +1,5 @@
 import vars from './components/assets/styles/variables';
-import { createTheme } from '@material-ui/core/styles';
+import { createTheme } from '@mui/material/styles';
 
 const {
   nodeRedBackgroundColor,
@@ -15,7 +15,7 @@ const {
   nodeGrayBorderColor,
   nodeGrayTextColor,
 } = vars;
-declare module '@material-ui/core/styles' {
+declare module '@mui/styles' {
   interface Theme {
     components: {
       MuiCssBaseline: any;