perf(mui): updated examples & code to mui v5

BREAKING CHANGE: the lib now uses mui v5 as the main one. Use the `legacy` prop for compatibility.
Quernest · Dec 6, 2021 · 54a90c8 · 54a90c8
1 parent e65c362
commit 54a90c8
Show file tree

Hide file tree

Showing 13 changed files with 213 additions and 321 deletions.
diff --git a/README.md b/README.md
@@ -19,12 +19,12 @@ npm install mui-modal-provider # or yarn add mui-modal-provider
 import React from 'react';
 import ReactDOM from 'react-dom';
 import ModalProvider, { useModal } from 'mui-modal-provider';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import Button from '@mui/material/Button';
 
 type Props = DialogProps & {
-  title: string;
+  title: string,
 };
 
 // ✔️ create the dialog you want to use
@@ -58,9 +58,13 @@ ReactDOM.render(
 );
 ```
 
-For [Material-UI v5](https://next.material-ui.com/) use `beta={true}` prop on the ModalProvider.
+## Compatibility
 
-### See more examples in [example](https://github.com/Quernest/mui-modal-provider/tree/master/example) folder
+For [Material-UI v4](https://v4.mui.com/) use `legacy` prop on the ModalProvider.
+
+## Examples
+
+See more examples in [example](https://github.com/Quernest/mui-modal-provider/tree/master/example) folder
 
 ## Developing & linking locally
 

diff --git a/example/package.json b/example/package.json
@@ -8,10 +8,9 @@
     "build": "parcel build ./src/index.html"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
-    "@material-ui/core": "^5.0.0-beta.1",
-    "@material-ui/styles": "^4.11.4",
+    "@emotion/react": "^11.7.0",
+    "@emotion/styled": "^11.6.0",
+    "@mui/material": "^5.2.3",
     "react-app-polyfill": "^1.0.0"
   },
   "alias": {

diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import MuiButton from '@material-ui/core/Button';
-import { withStyles } from '@material-ui/styles';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+
 import { useModal } from '../../src';
 
 import {
@@ -11,12 +12,6 @@ import {
   TransitionModal,
 } from './components';
 
-const Button = withStyles(theme => ({
-  root: {
-    margin: theme.spacing(1),
-  },
-}))(MuiButton);
-
 const App = () => {
   const { showModal } = useModal();
 
@@ -54,46 +49,56 @@ const App = () => {
   };
 
   return (
-    <React.Fragment>
-      <Button
-        variant="contained"
-        onClick={() => showModal(SimpleDialog)}
-        color="primary"
-      >
-        simple dialog
-      </Button>
-      <Button
-        variant="contained"
-        onClick={() => showModal(NestedDialog)}
-        color="primary"
-      >
-        nested dialog
-      </Button>
-      <Button
-        variant="contained"
-        onClick={handleOpenConfirmationDialog}
-        color="primary"
-      >
-        confirmation dialog
-      </Button>
-      <Button
-        variant="contained"
-        // @see https://github.com/Quernest/mui-modal-provider/issues/14
-        onClick={() =>
-          showModal(SimpleModal, undefined, { destroyOnClose: true })
-        }
-        color="primary"
-      >
-        simple modal
-      </Button>
-      <Button
-        variant="contained"
-        onClick={() => showModal(TransitionModal)}
-        color="primary"
-      >
-        transition modal
-      </Button>
-    </React.Fragment>
+    <Grid container spacing={2}>
+      <Grid item>
+        <Button
+          variant="contained"
+          onClick={() => showModal(SimpleDialog)}
+          color="primary"
+        >
+          simple dialog
+        </Button>
+      </Grid>
+      <Grid item>
+        <Button
+          variant="contained"
+          onClick={() => showModal(NestedDialog)}
+          color="primary"
+        >
+          nested dialog
+        </Button>
+      </Grid>
+      <Grid item>
+        <Button
+          variant="contained"
+          onClick={handleOpenConfirmationDialog}
+          color="primary"
+        >
+          confirmation dialog
+        </Button>
+      </Grid>
+      <Grid item>
+        <Button
+          variant="contained"
+          // @see https://github.com/Quernest/mui-modal-provider/issues/14
+          onClick={() =>
+            showModal(SimpleModal, undefined, { destroyOnClose: true })
+          }
+          color="primary"
+        >
+          simple modal
+        </Button>
+      </Grid>
+      <Grid item>
+        <Button
+          variant="contained"
+          onClick={() => showModal(TransitionModal)}
+          color="primary"
+        >
+          transition modal
+        </Button>
+      </Grid>
+    </Grid>
   );
 };
 

diff --git a/example/src/components/Dialogs/ConfirmationDialog.tsx b/example/src/components/Dialogs/ConfirmationDialog.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import DialogContentText from '@material-ui/core/DialogContentText';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import Button from '@material-ui/core/Button';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContentText from '@mui/material/DialogContentText';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import Button from '@mui/material/Button';
 
 type Props = DialogProps & {
   title: string;

diff --git a/example/src/components/Dialogs/NestedDialog.tsx b/example/src/components/Dialogs/NestedDialog.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
-import DialogContent from '@material-ui/core/DialogContent';
-import DialogActions from '@material-ui/core/DialogActions';
-import Button from '@material-ui/core/Button';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
+import DialogContent from '@mui/material/DialogContent';
+import DialogActions from '@mui/material/DialogActions';
+import Button from '@mui/material/Button';
 import { useModal } from '../../../../src';
 
 type Props = DialogProps & {

diff --git a/example/src/components/Dialogs/SimpleDialog.tsx b/example/src/components/Dialogs/SimpleDialog.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Dialog, { DialogProps } from '@material-ui/core/Dialog';
-import DialogTitle from '@material-ui/core/DialogTitle';
+import Dialog, { DialogProps } from '@mui/material/Dialog';
+import DialogTitle from '@mui/material/DialogTitle';
 
 const SimpleDialog: React.FC<DialogProps> = props => (
   <Dialog {...props}>

diff --git a/example/src/components/Modals/SimpleModal.tsx b/example/src/components/Modals/SimpleModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import Box from '@material-ui/core/Box';
-import Modal, { ModalProps } from '@material-ui/core/Modal';
+import Box from '@mui/material/Box';
+import Modal, { ModalProps } from '@mui/material/Modal';
 
 const style = {
   position: 'absolute',
@@ -18,7 +18,7 @@ type Props = Omit<ModalProps, 'children'> & {};
 const SimpleModal: React.FC<Props> = props => (
   <Modal {...props}>
     <Box sx={style}>
-      <h2>Simple Modalsss</h2>
+      <h2>Simple Modal</h2>
     </Box>
   </Modal>
 );

diff --git a/example/src/components/Modals/TransitionModal.tsx b/example/src/components/Modals/TransitionModal.tsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import Modal, { ModalProps } from '@material-ui/core/Modal';
-import Backdrop from '@material-ui/core/Backdrop';
-import Fade from '@material-ui/core/Fade';
-import Box from '@material-ui/core/Box';
-import Typography from '@material-ui/core/Typography';
-import { TransitionProps } from '@material-ui/core/transitions';
+import Modal, { ModalProps } from '@mui/material/Modal';
+import Backdrop from '@mui/material/Backdrop';
+import Fade from '@mui/material/Fade';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { TransitionProps } from '@mui/material/transitions';
 
 const style = {
   position: 'absolute',

diff --git a/example/src/index.tsx b/example/src/index.tsx
@@ -1,10 +1,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import { StyledEngineProvider, createTheme } from '@material-ui/core/styles';
+import {
+  StyledEngineProvider,
+  ThemeProvider,
+  createTheme,
+} from '@mui/material/styles';
 
 import ModalProvider from '../../src';
 import App from './App';
-import { ThemeProvider } from '@material-ui/styles';
 
 const theme = createTheme();