Migrate MUI to version 5.beta5

Author: ionut-becheru

package-lock.json

@@ -5,6 +5,8 @@
   "version": "1.0.0",
   "private": false,
   "scripts": {
+    "eslint": "eslint ./src",
+    "eslint-fix": "eslint --fix ./src",
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
@@ -26,32 +28,28 @@
     ]
   },
   "dependencies": {
-    "@emotion/react": "^11.1.5",
-    "@emotion/styled": "^11.1.5",
-    "@material-ui/core": "^5.0.0-alpha.28",
-    "@material-ui/icons": "^5.0.0-alpha.28",
-    "@material-ui/styles": "^4.10.0",
-    "chart.js": "^2.9.4",
-    "clsx": "^1.1.1",
+    "@emotion/react": "^11.4.1",
+    "@emotion/styled": "^11.3.0",
+    "@material-ui/core": "^5.0.0-beta.5",
+    "@material-ui/icons": "^5.0.0-beta.5",
+    "@material-ui/styles": "^5.0.0-beta.5",
+    "chart.js": "^3.5.1",
     "formik": "^2.1.5",
     "history": "^5.0.0",
-    "install": "^0.13.0",
-    "lodash": "^4.17.19",
     "moment": "^2.27.0",
-    "npm": "^7.7.4",
     "nprogress": "^0.2.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
-    "react-chartjs-2": "^2.10.0",
+    "react-chartjs-2": "^3.0.4",
     "react-dom": "^17.0.2",
     "react-feather": "^2.0.8",
     "react-helmet": "^6.1.0",
     "react-perfect-scrollbar": "^1.5.8",
     "react-router": "^6.0.0-beta.0",
     "react-router-dom": "^6.0.0-beta.0",
-    "react-scripts": "^4.0.0",
+    "react-scripts": "^4.0.3",
     "uuid": "^8.3.0",
-    "yup": "^0.29.3"
+    "yup": "^0.32.9"
   },
   "devDependencies": {
     "eslint-config-airbnb": "^18.2.1"

package.json

@@ -1,19 +1,20 @@
 import 'react-perfect-scrollbar/dist/css/styles.css';
 import { useRoutes } from 'react-router-dom';
-import { ThemeProvider } from '@material-ui/core';
-import GlobalStyles from 'src/components/GlobalStyles';
-import 'src/mixins/chartjs';
-import theme from 'src/theme';
-import routes from 'src/routes';
+import { ThemeProvider, StyledEngineProvider } from '@material-ui/core';
+import GlobalStyles from './components/GlobalStyles';
+import theme from './theme';
+import routes from './routes';
 
 const App = () => {
-  const routing = useRoutes(routes);
+  const content = useRoutes(routes);
 
   return (
-    <ThemeProvider theme={theme}>
-      <GlobalStyles />
-      {routing}
-    </ThemeProvider>
+    <StyledEngineProvider injectFirst>
+      <ThemeProvider theme={theme}>
+        <GlobalStyles />
+        {content}
+      </ThemeProvider>
+    </StyledEngineProvider>
   );
 };
 

src/App.js

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { Outlet } from 'react-router-dom';
-import { experimentalStyled } from '@material-ui/core';
+import { styled } from '@material-ui/core/styles';
 import DashboardNavbar from './DashboardNavbar';
 import DashboardSidebar from './DashboardSidebar';
 
-const DashboardLayoutRoot = experimentalStyled('div')(
+const DashboardLayoutRoot = styled('div')(
   ({ theme }) => ({
     backgroundColor: theme.palette.background.default,
     display: 'flex',
@@ -14,7 +14,7 @@ const DashboardLayoutRoot = experimentalStyled('div')(
   })
 );
 
-const DashboardLayoutWrapper = experimentalStyled('div')(
+const DashboardLayoutWrapper = styled('div')(
   ({ theme }) => ({
     display: 'flex',
     flex: '1 1 auto',
@@ -26,13 +26,13 @@ const DashboardLayoutWrapper = experimentalStyled('div')(
   })
 );
 
-const DashboardLayoutContainer = experimentalStyled('div')({
+const DashboardLayoutContainer = styled('div')({
   display: 'flex',
   flex: '1 1 auto',
   overflow: 'hidden'
 });
 
-const DashboardLayoutContent = experimentalStyled('div')({
+const DashboardLayoutContent = styled('div')({
   flex: '1 1 auto',
   height: '100%',
   overflow: 'auto'

src/components/DashboardLayout.js

@@ -27,8 +27,8 @@ const DashboardNavbar = ({ onMobileNavOpen, ...rest }) => {
           <Logo />
         </RouterLink>
         <Box sx={{ flexGrow: 1 }} />
-        <Hidden lgDown>
-          <IconButton color="inherit">
+        <Hidden xlDown>
+          <IconButton color="inherit" size="large">
             <Badge
               badgeContent={notifications.length}
               color="primary"
@@ -37,15 +37,12 @@ const DashboardNavbar = ({ onMobileNavOpen, ...rest }) => {
               <NotificationsIcon />
             </Badge>
           </IconButton>
-          <IconButton color="inherit">
+          <IconButton color="inherit" size="large">
             <InputIcon />
           </IconButton>
         </Hidden>
         <Hidden lgUp>
-          <IconButton
-            color="inherit"
-            onClick={onMobileNavOpen}
-          >
+          <IconButton color="inherit" onClick={onMobileNavOpen} size="large">
             <MenuIcon />
           </IconButton>
         </Hidden>

src/components/DashboardNavbar.js

@@ -191,7 +191,7 @@ const DashboardSidebar = ({ onMobileClose, openMobile }) => {
           {content}
         </Drawer>
       </Hidden>
-      <Hidden lgDown>
+      <Hidden xlDown>
         <Drawer
           anchor="left"
           open
@@ -217,7 +217,8 @@ DashboardSidebar.propTypes = {
 };
 
 DashboardSidebar.defaultProps = {
-  onMobileClose: () => { },
+  onMobileClose: () => {
+  },
   openMobile: false
 };
 

src/components/DashboardSidebar.js

@@ -1,4 +1,5 @@
-import { createStyles, makeStyles } from '@material-ui/core';
+import createStyles from '@material-ui/styles/createStyles';
+import makeStyles from '@material-ui/styles/makeStyles';
 
 const useStyles = makeStyles(() => createStyles({
   '@global': {

src/components/GlobalStyles.js

@@ -1,8 +1,8 @@
 import { Outlet } from 'react-router-dom';
-import { experimentalStyled } from '@material-ui/core';
+import { styled } from '@material-ui/core/styles';
 import MainNavbar from './MainNavbar';
 
-const MainLayoutRoot = experimentalStyled('div')(
+const MainLayoutRoot = styled('div')(
   ({ theme }) => ({
     backgroundColor: theme.palette.background.paper,
     display: 'flex',
@@ -12,20 +12,20 @@ const MainLayoutRoot = experimentalStyled('div')(
   })
 );
 
-const MainLayoutWrapper = experimentalStyled('div')({
+const MainLayoutWrapper = styled('div')({
   display: 'flex',
   flex: '1 1 auto',
   overflow: 'hidden',
   paddingTop: 64
 });
 
-const MainLayoutContainer = experimentalStyled('div')({
+const MainLayoutContainer = styled('div')({
   display: 'flex',
   flex: '1 1 auto',
   overflow: 'hidden'
 });
 
-const MainLayoutContent = experimentalStyled('div')({
+const MainLayoutContent = styled('div')({
   flex: '1 1 auto',
   height: '100%',
   overflow: 'auto'

src/components/MainLayout.js

@@ -15,7 +15,7 @@ import {
   TableRow,
   Typography
 } from '@material-ui/core';
-import getInitials from 'src/utils/getInitials';
+import getInitials from '../../utils/getInitials';
 
 const CustomerListResults = ({ customers, ...rest }) => {
   const [selectedCustomerIds, setSelectedCustomerIds] = useState([]);

src/components/customer/CustomerListResults.js

@@ -19,13 +19,23 @@ const Sales = (props) => {
     datasets: [
       {
         backgroundColor: colors.indigo[500],
+        barPercentage: 0.5,
+        barThickness: 12,
+        borderRadius: 4,
+        categoryPercentage: 0.5,
         data: [18, 5, 19, 27, 29, 19, 20],
-        label: 'This year'
+        label: 'This year',
+        maxBarThickness: 10
       },
       {
         backgroundColor: colors.grey[200],
+        barPercentage: 0.5,
+        barThickness: 12,
+        borderRadius: 4,
+        categoryPercentage: 0.5,
         data: [11, 20, 12, 29, 30, 25, 13],
-        label: 'Last year'
+        label: 'Last year',
+        maxBarThickness: 10
       }
     ],
     labels: ['1 Aug', '2 Aug', '3 Aug', '4 Aug', '5 Aug', '6 Aug']
@@ -41,10 +51,6 @@ const Sales = (props) => {
     scales: {
       xAxes: [
         {
-          barThickness: 12,
-          maxBarThickness: 10,
-          barPercentage: 0.5,
-          categoryPercentage: 0.5,
           ticks: {
             fontColor: theme.palette.text.secondary
           },