From e588aefa011f4a72d3c59e4e87f8032e5b1696f3 Mon Sep 17 00:00:00 2001 From: ct-jahidhasan Date: Wed, 25 Sep 2024 19:52:47 +0600 Subject: [PATCH 1/7] Task 12255: MUI v6 Implementation --- package.json | 23 +- src/components/@extended/Avatar.jsx | 6 +- src/components/@extended/Breadcrumbs.jsx | 9 +- src/components/MainCard.jsx | 1 - .../cards/statistics/AnalyticEcommerce.jsx | 6 +- .../Dashboard/Drawer/DrawerHeader/index.jsx | 7 +- .../Header/HeaderContent/Profile/index.jsx | 6 +- src/pages/authentication/AuthWrapper.jsx | 35 +- .../authentication/auth-forms/AuthLogin.jsx | 18 +- .../auth-forms/AuthRegister.jsx | 22 +- src/pages/authentication/login.jsx | 6 +- src/pages/authentication/register.jsx | 6 +- .../component-overview/ComponentSkeleton.jsx | 22 +- src/pages/component-overview/color.jsx | 41 +- src/pages/component-overview/shadows.jsx | 84 +- src/pages/component-overview/typography.jsx | 6 +- src/pages/dashboard/SaleReportCard.jsx | 6 +- src/pages/dashboard/UniqueVisitorCard.jsx | 6 +- src/pages/dashboard/index.jsx | 50 +- yarn.lock | 3109 +++++++++-------- 20 files changed, 1735 insertions(+), 1734 deletions(-) diff --git a/package.json b/package.json index 9a3b338b7..6e51bcc44 100644 --- a/package.json +++ b/package.json @@ -19,17 +19,17 @@ "dependencies": { "@ant-design/colors": "^7.0.2", "@ant-design/icons": "^5.3.1", - "@emotion/cache": "^11.11.0", - "@emotion/react": "^11.11.4", - "@emotion/styled": "^11.11.0", + "@emotion/cache": "^11.13.1", + "@emotion/react": "^11.13.3", + "@emotion/styled": "^11.13.0", "@fontsource/inter": "^5.0.17", "@fontsource/poppins": "^5.0.12", "@fontsource/public-sans": "^5.0.17", "@fontsource/roboto": "^5.0.12", - "@mui/base": "^5.0.0-beta.38", - "@mui/lab": "^5.0.0-alpha.167", - "@mui/material": "^5.15.12", - "@mui/system": "^5.15.12", + "@mui/base": "^5.0.0-beta.58", + "@mui/lab": "^6.0.0-beta.9", + "@mui/material": "^6.1.1", + "@mui/system": "^6.1.1", "@svgr/webpack": "^8.1.0", "@vitejs/plugin-react": "^4.2.1", "apexcharts": "^3.49.0", @@ -79,17 +79,18 @@ ] }, "devDependencies": { - "@babel/core": "^7.24.0", - "@babel/eslint-parser": "^7.23.10", + "@babel/core": "^7.24.4", + "@babel/eslint-parser": "^7.24.1", + "@babel/preset-react": "^7.24.7", "@babel/plugin-proposal-private-property-in-object": "^7.21.11", - "eslint": "^8.56.0", + "eslint": "^8.57.0", "eslint-config-prettier": "^9.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.8.0", "eslint-plugin-prettier": "^5.1.3", - "eslint-plugin-react": "^7.34.0", + "eslint-plugin-react": "^7.34.1", "eslint-plugin-react-hooks": "^4.6.0", "prettier": "^3.2.5", "react-error-overlay": "6.0.11" diff --git a/src/components/@extended/Avatar.jsx b/src/components/@extended/Avatar.jsx index 07891572a..a36d7a196 100644 --- a/src/components/@extended/Avatar.jsx +++ b/src/components/@extended/Avatar.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; // material-ui -import { styled, useTheme } from '@mui/material/styles'; +import { styled } from '@mui/material/styles'; import MuiAvatar from '@mui/material/Avatar'; // project import @@ -95,10 +95,8 @@ const AvatarStyle = styled(MuiAvatar, { shouldForwardProp: (prop) => prop !== 'c ); export default function Avatar({ children, color = 'primary', type, size = 'md', ...others }) { - const theme = useTheme(); - return ( - + {children} ); diff --git a/src/components/@extended/Breadcrumbs.jsx b/src/components/@extended/Breadcrumbs.jsx index 24588d947..e98d8f7e1 100644 --- a/src/components/@extended/Breadcrumbs.jsx +++ b/src/components/@extended/Breadcrumbs.jsx @@ -3,7 +3,7 @@ import { useEffect, useState } from 'react'; import { Link, useLocation } from 'react-router-dom'; // material-ui -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Typography from '@mui/material/Typography'; import MuiBreadcrumbs from '@mui/material/Breadcrumbs'; @@ -74,7 +74,7 @@ export default function Breadcrumbs({ navigation, title, ...others }) { breadcrumbContent = ( - + Home @@ -84,7 +84,7 @@ export default function Breadcrumbs({ navigation, title, ...others }) { {title && ( - + {item.title} )} @@ -111,5 +111,6 @@ Breadcrumbs.propTypes = { title: PropTypes.bool, titleBottom: PropTypes.bool, sx: PropTypes.any, - others: PropTypes.any + others: PropTypes.any, + navigation: PropTypes.object }; diff --git a/src/components/MainCard.jsx b/src/components/MainCard.jsx index 274d0781f..46c647aa2 100644 --- a/src/components/MainCard.jsx +++ b/src/components/MainCard.jsx @@ -6,7 +6,6 @@ import { useTheme } from '@mui/material/styles'; import Card from '@mui/material/Card'; import CardContent from '@mui/material/CardContent'; import CardHeader from '@mui/material/CardHeader'; -import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; // header style diff --git a/src/components/cards/statistics/AnalyticEcommerce.jsx b/src/components/cards/statistics/AnalyticEcommerce.jsx index a129c70d3..f9ccdcb15 100644 --- a/src/components/cards/statistics/AnalyticEcommerce.jsx +++ b/src/components/cards/statistics/AnalyticEcommerce.jsx @@ -2,7 +2,7 @@ import PropTypes from 'prop-types'; // material-ui import Chip from '@mui/material/Chip'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Stack from '@mui/material/Stack'; import Typography from '@mui/material/Typography'; import Box from '@mui/material/Box'; @@ -24,13 +24,13 @@ export default function AnalyticEcommerce({ color = 'primary', title, count, per {title} - + {count} {percentage && ( - + + ); diff --git a/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx b/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx index 97e6b2a25..2006b0098 100644 --- a/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx +++ b/src/layout/Dashboard/Header/HeaderContent/Profile/index.jsx @@ -6,7 +6,7 @@ import { useTheme } from '@mui/material/styles'; import ButtonBase from '@mui/material/ButtonBase'; import CardContent from '@mui/material/CardContent'; import ClickAwayListener from '@mui/material/ClickAwayListener'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Paper from '@mui/material/Paper'; import IconButton from '@mui/material/IconButton'; import Popper from '@mui/material/Popper'; @@ -120,7 +120,7 @@ export default function Profile() { - + @@ -131,7 +131,7 @@ export default function Profile() { - + diff --git a/src/pages/authentication/AuthWrapper.jsx b/src/pages/authentication/AuthWrapper.jsx index 1264a0333..acd048301 100644 --- a/src/pages/authentication/AuthWrapper.jsx +++ b/src/pages/authentication/AuthWrapper.jsx @@ -1,7 +1,7 @@ import PropTypes from 'prop-types'; // material-ui -import Grid from '@mui/material/Grid'; +import Stack from '@mui/material/Stack'; import Box from '@mui/material/Box'; // project import @@ -18,28 +18,21 @@ export default function AuthWrapper({ children }) { return ( - - + + - - - - - {children} - - - - + + + {children} + + - - + + ); } diff --git a/src/pages/authentication/auth-forms/AuthLogin.jsx b/src/pages/authentication/auth-forms/AuthLogin.jsx index 9c26ebea5..e2d3078fa 100644 --- a/src/pages/authentication/auth-forms/AuthLogin.jsx +++ b/src/pages/authentication/auth-forms/AuthLogin.jsx @@ -8,7 +8,7 @@ import Checkbox from '@mui/material/Checkbox'; import Divider from '@mui/material/Divider'; import FormControlLabel from '@mui/material/FormControlLabel'; import FormHelperText from '@mui/material/FormHelperText'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Link from '@mui/material/Link'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; @@ -31,7 +31,7 @@ import FirebaseSocial from './FirebaseSocial'; // ============================|| JWT - LOGIN ||============================ // -export default function AuthLogin({ isDemo = false }) { +export default function AuthLogin() { const [checked, setChecked] = React.useState(false); const [showPassword, setShowPassword] = React.useState(false); @@ -59,7 +59,7 @@ export default function AuthLogin({ isDemo = false }) { {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => (
- + Email Address )} - + Password - + {errors.submit && ( - + {errors.submit} )} - + - + Login with - + diff --git a/src/pages/authentication/auth-forms/AuthRegister.jsx b/src/pages/authentication/auth-forms/AuthRegister.jsx index 89efc62af..b3afb5191 100644 --- a/src/pages/authentication/auth-forms/AuthRegister.jsx +++ b/src/pages/authentication/auth-forms/AuthRegister.jsx @@ -5,7 +5,7 @@ import { Link as RouterLink } from 'react-router-dom'; import Button from '@mui/material/Button'; import FormControl from '@mui/material/FormControl'; import FormHelperText from '@mui/material/FormHelperText'; -import Grid from '@mui/material/Grid'; +import Grid from '@mui/material/Grid2'; import Link from '@mui/material/Link'; import InputAdornment from '@mui/material/InputAdornment'; import IconButton from '@mui/material/IconButton'; @@ -70,7 +70,7 @@ export default function AuthRegister() { {({ errors, handleBlur, handleChange, handleSubmit, isSubmitting, touched, values }) => ( - + First Name* )} - + Last Name* )} - + Company )} - + Email Address* )} - + Password - + - + {level?.label} @@ -206,7 +206,7 @@ export default function AuthRegister() { - + By Signing up, you agree to our   @@ -219,11 +219,11 @@ export default function AuthRegister() { {errors.submit && ( - + {errors.submit} )} - +