Upgrade from Material UI v5 to v6 (#1049)

* chore: npm update to mui 6 * perf: prevent dark-mode SSR flickering using CSS variables * refactor: remove color choice, make it automatically * refactor: npx @mui/codemod@latest v6.0.0/system-props * fix: RandomButton
jy95 · Nov 28, 2024 · de94719 · de94719
1 parent 3f1f0f8
commit de94719
Show file tree

Hide file tree

Showing 11 changed files with 437 additions and 743 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -18,10 +18,10 @@
   "dependencies": {
     "@emotion/react": "^11.13.5",
     "@emotion/styled": "^11.13.5",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.16.7",
+    "@mui/icons-material": "^6.1.9",
+    "@mui/material": "^6.1.9",
     "@mui/x-charts": "^8.0.0-alpha.1",
-    "@mui/x-data-grid": "^7.22.3",
+    "@mui/x-data-grid": "^8.0.0-alpha.1",
     "@reduxjs/toolkit": "^2.3.0",
     "@types/node": "^22.10.0",
     "@types/react": "npm:types-react@rc",

diff --git a/src/app/[locale]/error.tsx b/src/app/[locale]/error.tsx
@@ -26,12 +26,13 @@ export default function Error({
 
     return (
         <Box
-            display="flex"
-            flexDirection="column"
-            alignItems="center"
-            justifyContent="center"
-            height="80vh"
-        >
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "80vh"
+            }}>
             <Typography variant="h4" gutterBottom>{t('title')}</Typography>
             <Button variant="contained" color="primary" onClick={reset}>{t('retry')}</Button>
         </Box>

diff --git a/src/app/[locale]/not-found.tsx b/src/app/[locale]/not-found.tsx
@@ -20,18 +20,19 @@ export default function NotFoundPage() {
 
     return (
         <Box
-            display="flex"
-            flexDirection="column"
-            alignItems="center"
-            justifyContent="center"
-            height="80vh"
-        >
+            sx={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+                height: "80vh"
+            }}>
             <Typography variant="h4" gutterBottom>{t('title')}</Typography>
             <Link href="/">
                 <Button variant="contained" color="primary">
                     {t('goGome')}
                 </Button>
             </Link>
         </Box>
-    )
+    );
 }
diff --git a/src/app/[locale]/planning/page.tsx b/src/app/[locale]/planning/page.tsx
@@ -78,15 +78,23 @@ export default function PlanningViewer() {
                 { 
                     value: "RECORDED", 
                     label: (
-                        <Box display="flex" alignItems="center">
+                        <Box
+                            sx={{
+                                display: "flex",
+                                alignItems: "center"
+                            }}>
                             <CheckCircleIcon />
                         </Box>
                     ) 
                 },
                 { 
                     value: 'PENDING', 
                     label: (
-                        <Box display="flex" alignItems="center">
+                        <Box
+                            sx={{
+                                display: "flex",
+                                alignItems: "center"
+                            }}>
                             <HourglassEmptyIcon />
                         </Box>
                     )

diff --git a/src/components/GamesView/RandomButton.tsx b/src/components/GamesView/RandomButton.tsx
@@ -39,7 +39,7 @@ export default function RandomButton() {
 
     return (
         <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', marginTop: '10px' }}>
-            <Fab variant="extended" onClick={fetchRandomGame}>
+            <Fab color="primary" variant="extended" onClick={fetchRandomGame}>
                 <CasinoIcon sx={{ mr: 1 }} />
                 { t("randomButtonLabel") }
             </Fab>

diff --git a/src/components/Menu/Header.tsx b/src/components/Menu/Header.tsx
@@ -11,13 +11,8 @@ import {useTranslations} from 'next-intl';
 import {CssBaseline, IconButton, Toolbar} from "@mui/material";
 import MuiAppBar from '@mui/material/AppBar';
 import MenuIcon from '@mui/icons-material/Menu';
-import Switch from '@mui/material/Switch';
 import { styled } from '@mui/material/styles';
 
-// Icons for switch
-import Brightness5Icon from '@mui/icons-material/Brightness5'; // sun
-import Brightness4Icon from '@mui/icons-material/Brightness4'; // moon
-
 // Icons for languages
 import SvgIcon from '@mui/material/SvgIcon';
 import Tooltip from '@mui/material/Tooltip';
@@ -27,7 +22,6 @@ import languages_with_icons from "./HeaderLanguages";
 
 // Redux
 import { drawerOpen } from "@/redux/features/miscellaneousSlice";
-import { themeColor } from "@/redux/features/themeColorSlice";
 
 // styled AppBar
 const drawerWidth = 240;
@@ -58,17 +52,11 @@ function Header() {
     const pathname = usePathname()
     const dispatch = useAppDispatch();
     const isdrawerOpen = useAppSelector((state) => state.miscellaneous.drawerOpen);
-    const currentColor = useAppSelector((state) => state.themeColor.currentColor);
 
     const handleDrawerOpen = () => {
         dispatch(drawerOpen(true));
     };
 
-    const handleDarkMode = (event : any) => {
-        const color = (event.target.checked) ? "dark" : "light";
-        dispatch(themeColor({color, mode: "manual"}));
-    }
-
     return (
         <>
             <CssBaseline />
@@ -90,14 +78,6 @@ function Header() {
                     >
                         <MenuIcon/>
                     </IconButton>
-                    <Switch 
-                        checked={currentColor === "dark"}
-                        onChange={handleDarkMode}
-                        checkedIcon={<Brightness4Icon color="action" />}
-                        icon={<Brightness5Icon style={{ color: '#ffeb3b' }}/>}
-                        inputProps={{ 'aria-label': 'Mode' }}
-                        color="default"
-                    />
                     <div style={{flexGrow: 1}}/>
                     <div>
                         {

diff --git a/src/components/filters/platformsFilters.tsx b/src/components/filters/platformsFilters.tsx
@@ -14,7 +14,11 @@ type Props = {
 function RenderEntry(props: Props) {
     const {idx} = props;
     return (
-        <Box display="flex" alignItems="center">
+        <Box
+            sx={{
+                display: "flex",
+                alignItems: "center"
+            }}>
             <RenderPlatformIcon identifier={idx} />
         </Box>
     );

diff --git a/src/providers/ThemeProvider.tsx b/src/providers/ThemeProvider.tsx
@@ -2,34 +2,12 @@
 
 import { createTheme, ThemeProvider as MUIThemeProvider } from '@mui/material/styles';
 
-import { useAppDispatch, useAppSelector } from '@/redux/hooks';
-import { selectCurrentColor, selectCurrentSystemColor, themeColor } from '@/redux/features/themeColorSlice';
-import { useMediaQuery } from '@mui/material';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 import { useAsyncMemo } from '@/hooks/useAsyncMemo';
 
 
 export function ThemeProvider({ children, lng }: { children: React.ReactNode, lng : string }) {
 
-    // for theme Color
-    const dispatch = useAppDispatch();
-    const currentColor = useAppSelector((state) => selectCurrentColor(state));
-    const currentSystemColor = useAppSelector((state) => selectCurrentSystemColor(state));
-    const prefersDarkMode = useMediaQuery('(prefers-color-scheme: dark)');
-    const systemColor = prefersDarkMode ? "dark" : "light";
-
-    // Two case handled here :
-    // 1) When user comes to the site and have different color that default
-    // 2) When user changes on the fly its preferred system color
-    useEffect(() => {
-        if (currentSystemColor !== systemColor) {
-            dispatch(themeColor({color: systemColor, mode: "auto"}));
-        }
-    },
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        [currentSystemColor, currentColor]
-    );
-
     // Prepare theme for possible darkmode
     const muiLanguage = useAsyncMemo(async () => {
         switch(lng) {
@@ -45,11 +23,10 @@ export function ThemeProvider({ children, lng }: { children: React.ReactNode, ln
     const theme = useMemo(
         () =>
             createTheme({
-                palette: {
-                    mode: currentColor,
-                },
+                colorSchemes: { dark: true },
+                cssVariables: true
             }, muiLanguage),
-        [muiLanguage, currentColor],
+        [muiLanguage],
     );
 
     return (

diff --git a/src/redux/Store.tsx b/src/redux/Store.tsx
@@ -1,7 +1,6 @@
 import { configureStore } from "@reduxjs/toolkit";
 
 import games from "./features/gamesSlice";
-import themeColor from "./features/themeColorSlice";
 import miscellaneous from "./features/miscellaneousSlice";
 import { gamesAPI } from "./services/gamesAPI";
 import { planningAPI } from "./services/planningAPI";
@@ -18,7 +17,6 @@ const store = configureStore({
     reducer: {
         // common reducers
         games,
-        themeColor,
         miscellaneous,
         // API calls
         [gamesAPI.reducerPath]: gamesAPI.reducer,

diff --git a/src/redux/features/themeColorSlice.tsx b/src/redux/features/themeColorSlice.tsx