Update Material UI from v4 -> v5 (#74)

* Update Material UI from v4 -> v5 - Get rid of the material-ui dependencies - Install @mui/* and @emotion/* packages that are needed for v5 - Adapt entire codebase to v5 * Adapt global component styling to mui5 standards
5monkeys · Feb 9, 2022 · a7b7a59 · a7b7a59
1 parent 5c64fe2
commit a7b7a59
Show file tree

Hide file tree

Showing 49 changed files with 27,016 additions and 638 deletions.
diff --git a/app/src/Gravatar.js b/app/src/Gravatar.js
@@ -1,4 +1,4 @@
-import { Avatar } from "@material-ui/core";
+import { Avatar } from "@mui/material";
 import { useAdmin } from "django-bananas";
 import gravatar from "gravatar";
 import React from "react";

diff --git a/app/src/components/CustomAutoField.js b/app/src/components/CustomAutoField.js
@@ -1,4 +1,4 @@
-import { InputAdornment, TextField } from "@material-ui/core";
+import { InputAdornment, TextField } from "@mui/material";
 import { AutoField } from "django-bananas/forms";
 import React from "react";
 

diff --git a/app/src/index.js b/app/src/index.js
@@ -1,15 +1,11 @@
-/* eslint-disable no-unused-vars */
-import Badge from "@material-ui/core/Badge";
-import { blue } from "@material-ui/core/colors";
-import AppleIcon from "@material-ui/icons/ColorLens";
-import DashboardIcon from "@material-ui/icons/Dashboard";
-import FaceIcon from "@material-ui/icons/Face";
-import EmotIcon from "@material-ui/icons/InsertEmoticon";
-import MailIcon from "@material-ui/icons/Mail";
-import PeopleIcon from "@material-ui/icons/People";
-import SettingsIcon from "@material-ui/icons/Settings";
+import AppleIcon from "@mui/icons-material/ColorLens";
+import FaceIcon from "@mui/icons-material/Face";
+import MailIcon from "@mui/icons-material/Mail";
+import PeopleIcon from "@mui/icons-material/People";
+import Badge from "@mui/material/Badge";
+// import { blue } from "@mui/material/colors";
 import Bananas from "django-bananas";
-import { django } from "django-bananas/colors";
+// import { django } from "django-bananas/colors";
 import themes from "django-bananas/themes";
 import React from "react";
 import ReactDOM from "react-dom";
@@ -23,61 +19,68 @@ const exampleAppTheme = themes.default.extend({
       // main: blue[500],
     },
   },
-  overrides: {
+  components: {
     BananasMenuItem: {
-      avatar: {
-        overflow: "visible",
+      styleOverrides: {
+        avatar: {
+          overflow: "visible",
+        },
       },
     },
     BananasNavBar: {
-      header: {
-        /* Example: Change NavBar header color */
-        //   background: "#181818",
-        /* Example: Make NavBar header striped */
-        //   backgroundColor: django[700],
-        //   background: "repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 10px, transparent 10px, transparent 20px)",
-      },
-      drawer: {
-        /* Example: Change drawer width */
-        //   width: 350,
+      styleOverrides: {
+        header: {
+          /* Example: Change NavBar header color */
+          //   background: "#181818",
+          /* Example: Make NavBar header striped */
+          //   backgroundColor: django[700],
+          //   background: "repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0.12) 10px, transparent 10px, transparent 20px)",
+        },
+        drawer: {
+          /* Example: Change drawer width */
+          //   width: 350,
+        },
       },
     },
     BananasTitleBar: {
-      colorPrimary: {
-        /* Example: Change primary colored TitleBar's */
-        //   background: blue[500],
-      },
-    },
-    /*
-    BananasContainer: {
-      root: {
-        // Example: Center components using the Container
-        maxWidth: 900,
-        margin: "0 auto",
-        width: "100%",
+      styleOverrides: {
+        colorPrimary: {
+          /* Example: Change primary colored TitleBar's */
+          //   background: blue[500],
+        },
       },
     },
-    */
-  },
-});
 
-/*
-const examplePageTheme = exampleAppTheme.extend({
-  palette: {
-    primary: {
-      main: "#ff5500",
-      dark: "#993300",
-    },
-  },
-  overrides: {
-    MuiButton: {
-      outlined: {
-        textTransform: "none",
-      },
-    },
+    // BananasContainer: {
+    //   styleOverrides: {
+    //     root: {
+    //       // Example: Center components using the Container
+    //       maxWidth: 900,
+    //       margin: "0 auto",
+    //       width: "100%",
+    //     },
+    //   },
+    // },
   },
 });
-*/
+
+// const examplePageTheme = exampleAppTheme.extend({
+//   palette: {
+//     primary: {
+//       main: "#ff5500",
+//       dark: "#993300",
+//     },
+//   },
+//   components: {
+//     MuiButton: {
+//       styleOverrides: {
+//         contained: {
+//           textTransform: "none",
+//         },
+//       },
+//     },
+//   },
+// });
 
 const CustomIconComponent = () => {
   return (
@@ -87,8 +90,6 @@ const CustomIconComponent = () => {
   );
 };
 
-const CustomLoginForm = () => <form>This is a custom login form</form>;
-
 ReactDOM.render(
   <Bananas.App
     pages={route => import(`./pages/${route}`)}

diff --git a/app/src/pages/example/user/create.js b/app/src/pages/example/user/create.js
@@ -5,7 +5,7 @@ import {
   makeStyles,
   Tooltip,
   Typography,
-} from "@material-ui/core";
+} from "@mui/material";
 import { Content, TitleBar, ToolBar, Tools } from "django-bananas";
 import { Form } from "django-bananas/forms";
 import React from "react";
@@ -16,8 +16,8 @@ import AutoField from "../../../components/CustomAutoField";
 const useStyles = makeStyles(
   createStyles(theme => ({
     paper: {
-      margin: theme.spacing(2),
-      padding: theme.spacing(2),
+      margin: theme.gap(2),
+      padding: theme.gap(2),
     },
     formRoot: {
       display: "flex",

diff --git a/app/src/pages/example/user/form.read.js b/app/src/pages/example/user/form.read.js
@@ -1,5 +1,5 @@
-import { Button } from "@material-ui/core";
-import { createStyles, makeStyles } from "@material-ui/core/styles";
+import { Button } from "@mui/material";
+import { createStyles, makeStyles } from "@mui/styles";
 import { Content, TitleBar, ToolBar, Tools } from "django-bananas";
 import { AutoField, Form } from "django-bananas/forms";
 import PropTypes from "prop-types";
@@ -8,8 +8,8 @@ import React from "react";
 const useStyles = makeStyles(
   createStyles(theme => ({
     paper: {
-      margin: theme.spacing(2),
-      padding: theme.spacing(2),
+      margin: theme.gap(2),
+      padding: theme.gap(2),
     },
     formRoot: {
       display: "flex",

diff --git a/app/src/pages/example/user/list.js b/app/src/pages/example/user/list.js
@@ -1,3 +1,6 @@
+import FilterListIcon from "@mui/icons-material/FilterList";
+import NotificationsIcon from "@mui/icons-material/Notifications";
+import PersonAddIcon from "@mui/icons-material/PersonAdd";
 import {
   Badge,
   Box,
@@ -15,10 +18,7 @@ import {
   TableHead,
   TableRow,
   Typography,
-} from "@material-ui/core";
-import FilterListIcon from "@material-ui/icons/FilterList";
-import NotificationsIcon from "@material-ui/icons/Notifications";
-import PersonAddIcon from "@material-ui/icons/PersonAdd";
+} from "@mui/material";
 import {
   AdminContext,
   Content,
@@ -37,13 +37,13 @@ const useStyles = makeStyles(
     },
     addButton: {
       boxShadow: "none",
-      paddingRight: theme.spacing(2),
+      paddingRight: theme.gap(2),
     },
     addIcon: {
-      marginRight: theme.spacing(1),
+      marginRight: theme.gap(1),
     },
     users: {
-      marginTop: theme.spacing(3),
+      marginTop: theme.gap(3),
     },
     userHover: {
       cursor: "pointer",
@@ -55,7 +55,7 @@ const useStyles = makeStyles(
     },
     spacedContent: {
       "& > *": {
-        margin: theme.spacing(0.5),
+        margin: theme.gap(0.5),
       },
     },
   }))

diff --git a/app/src/pages/example/user/read.js b/app/src/pages/example/user/read.js
@@ -1,9 +1,5 @@
-import {
-  Button,
-  createStyles,
-  makeStyles,
-  Typography,
-} from "@material-ui/core";
+import { Button, Typography } from "@mui/material";
+import { createStyles, makeStyles } from "@mui/styles";
 import { Content, TitleBar, ToolBar, Tools } from "django-bananas";
 import { AutoField, Form } from "django-bananas/forms";
 import PropTypes from "prop-types";
@@ -12,8 +8,8 @@ import React from "react";
 const useStyles = makeStyles(
   createStyles(theme => ({
     paper: {
-      margin: theme.spacing(2),
-      padding: theme.spacing(2),
+      margin: theme.gap(2),
+      padding: theme.gap(2),
     },
     formRoot: {
       display: "flex",

diff --git a/app/src/pages/fruit/apple/granny_smith.js b/app/src/pages/fruit/apple/granny_smith.js
@@ -1,4 +1,4 @@
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 import { Content } from "django-bananas";
 import React from "react";
 

diff --git a/app/src/pages/fruit/apple/list.js b/app/src/pages/fruit/apple/list.js
@@ -1,4 +1,4 @@
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 import { Content } from "django-bananas";
 import React from "react";
 

diff --git a/app/src/pages/fruit/apple/red_delicious.js b/app/src/pages/fruit/apple/red_delicious.js
@@ -1,4 +1,4 @@
-import { Typography } from "@material-ui/core";
+import { Typography } from "@mui/material";
 import { Content } from "django-bananas";
 import React from "react";
 

diff --git a/app/src/pages/index.js b/app/src/pages/index.js
@@ -1,5 +1,6 @@
-import { createStyles, makeStyles, Typography } from "@material-ui/core";
-import Button from "@material-ui/core/Button";
+import { Typography } from "@mui/material";
+import Button from "@mui/material/Button";
+import { createStyles, makeStyles } from "@mui/styles";
 import { Link, useAdmin } from "django-bananas";
 import React from "react";
 
@@ -13,7 +14,7 @@ const useStyles = makeStyles(
       flexDirection: "column",
     },
     button: {
-      margin: theme.spacing(1),
+      margin: theme.gap(1),
     },
   }))
 );