feat: upgrade to mui 6

kevinpastor · Aug 29, 2024 · 4d7a115 · 4d7a115
1 parent 580982d
commit 4d7a115
Show file tree

Hide file tree

Showing 8 changed files with 154 additions and 123 deletions.
diff --git a/package.json b/package.json
@@ -31,10 +31,10 @@
         "@emotion/styled": "^11.13.0",
         "@hcaptcha/react-hcaptcha": "^1.11.0",
         "@hookform/resolvers": "^3.9.0",
-        "@mui/icons-material": "^5.16.7",
-        "@mui/lab": "5.0.0-alpha.172",
-        "@mui/material": "^5.16.7",
-        "@mui/material-nextjs": "^5.16.6",
+        "@mui/icons-material": "^6.0.0",
+        "@mui/lab": "6.0.0-beta.8",
+        "@mui/material": "^6.0.0",
+        "@mui/material-nextjs": "^6.0.0",
         "@next/env": "^14.2.7",
         "@vercel/analytics": "^1.3.1",
         "@vercel/speed-insights": "^1.0.12",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/app/(app)/_components/layout/content.tsx b/src/app/(app)/_components/layout/content.tsx
@@ -1,4 +1,4 @@
-import { Container, Unstable_Grid2 as Grid, Stack } from "@mui/material";
+import { Container, Grid2 as Grid, Stack } from "@mui/material";
 import { type PropsWithChildren, type ReactNode } from "react";
 
 import { ErrorBoundary } from "./error-boundary";
@@ -13,14 +13,16 @@ export const Content = ({ children }: PropsWithChildren): ReactNode => (
             spacing={2}
             py={2}
         >
-            <Grid xs>
+            <Grid size="grow">
                 <ErrorBoundary fallback={<UnexpectedError />}>
                     {children}
                 </ErrorBoundary>
             </Grid>
             <Grid
-                xs={12}
-                md={4}
+                size={{
+                    xs: 12,
+                    md: 4
+                }}
             >
                 <Stack
                     spacing={{

diff --git a/src/app/(app)/_components/layout/footer.tsx b/src/app/(app)/_components/layout/footer.tsx
@@ -44,7 +44,7 @@ export const Footer = (): ReactNode => (
             align="center"
             variant="subtitle2"
         >
-            &copy; 2023 Lexique Québécois
+            &copy; 2024 Lexique Québécois
         </Typography>
     </Stack>
 );
diff --git a/src/app/(app)/mots/_components/letter-section.tsx b/src/app/(app)/mots/_components/letter-section.tsx
@@ -1,4 +1,4 @@
-import { Unstable_Grid2 as Grid, Typography } from "@mui/material";
+import { Grid2 as Grid, Typography } from "@mui/material";
 import { type ReactNode } from "react";
 
 import { WordLink } from "./word-link";

diff --git a/src/app/(app)/mots/_components/word-link.tsx b/src/app/(app)/mots/_components/word-link.tsx
@@ -1,4 +1,4 @@
-import { Unstable_Grid2 as Grid, Link } from "@mui/material";
+import { Grid2 as Grid, Link } from "@mui/material";
 import NextLink from "next/link";
 import { type ReactNode } from "react";
 
@@ -15,9 +15,11 @@ export const WordLink = ({ word, isLast = false }: Props): ReactNode => {
     return (
         <Grid
             key={slug}
-            xs={12}
-            sm={6}
-            md={4}
+            size={{
+                xs: 12,
+                sm: 6,
+                md: 4
+            }}
             paddingY={0.5}
         >
             <Link

diff --git a/src/app/_components/providers/theme-provider/index.tsx b/src/app/_components/providers/theme-provider/index.tsx
@@ -1,25 +1,22 @@
 import { CssBaseline } from "@mui/material";
-import { Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript } from "@mui/material/styles";
+import InitColorSchemeScript from "@mui/material/InitColorSchemeScript";
+import { ThemeProvider as MuiThemeProvider } from "@mui/material/styles";
 import { AppRouterCacheProvider, type AppRouterCacheProviderProps } from "@mui/material-nextjs/v13-appRouter";
 import { type PropsWithChildren, type ReactNode } from "react";
 
-import { type ThemeMode } from "~/hooks/use-theme-mode";
-
-import { theme } from "./theme";
+import { colorSchemeSelector, theme } from "./theme";
 
 const options: AppRouterCacheProviderProps["options"] = { key: "css" };
-const defaultMode: ThemeMode = "system";
 
 export const ThemeProvider = ({ children }: PropsWithChildren): ReactNode => (
     <AppRouterCacheProvider options={options}>
-        {getInitColorSchemeScript({ defaultMode })}
-        <CssVarsProvider
+        <InitColorSchemeScript attribute={colorSchemeSelector} />
+        <MuiThemeProvider
             theme={theme}
-            defaultMode={defaultMode}
             disableTransitionOnChange
         >
             <CssBaseline enableColorScheme />
             {children}
-        </CssVarsProvider>
+        </MuiThemeProvider>
     </AppRouterCacheProvider>
 );
diff --git a/src/app/_components/providers/theme-provider/theme.ts b/src/app/_components/providers/theme-provider/theme.ts
@@ -2,7 +2,7 @@ import type { } from "@mui/lab/themeAugmentation";
 import { Slide } from "@mui/material";
 import { common } from "@mui/material/colors";
 import { outlinedInputClasses } from "@mui/material/OutlinedInput";
-import { type CSSInterpolation, type CssVarsTheme, type Theme, alpha, experimental_extendTheme as extendTheme, lighten } from "@mui/material/styles";
+import { type CSSInterpolation, type CssVarsTheme, type Theme, alpha, createTheme, lighten } from "@mui/material/styles";
 
 import { font } from "./font";
 
@@ -47,7 +47,12 @@ const darkElevationOverlay = {
     [24]: 0.16
 } as const satisfies Record<DefinedElevations, number>;
 
-export const theme = extendTheme({
+export const colorSchemeSelector: string = "class";
+
+export const theme = createTheme({
+    cssVariables: {
+        colorSchemeSelector
+    },
     colorSchemes: {
         light: {
             palette: {
@@ -390,9 +395,6 @@ export const theme = extendTheme({
                 }
             },
             styleOverrides: {
-                root: ({ theme: { vars: { palette } } }) => ({
-                    color: palette.common.onBackground
-                }),
                 gutterBottom: {
                     marginBottom: "0.5em"
                 },