Merge pull request #141 from mathiazom/mui-6

Upgrade Material UI To V6
mathiazom · Dec 24, 2024 · 8a3d6d5 · 8a3d6d5
2 parents 6dc0133 + 9d7aa38
commit 8a3d6d5
Show file tree

Hide file tree

Showing 36 changed files with 1,925 additions and 976 deletions.
diff --git a/.nvmrc b/.nvmrc
@@ -0,0 +1 @@
+v22
diff --git a/package.json b/package.json
@@ -18,14 +18,14 @@
     },
     "dependencies": {
         "@auth0/nextjs-auth0": "^3.5.0",
-        "@emotion/react": "^11.11.4",
-        "@emotion/styled": "^11.11.5",
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.0",
         "@khmyznikov/pwa-install": "^0.3.7",
-        "@mui/icons-material": "^5.15.15",
-        "@mui/lab": "^5.0.0-alpha.170",
-        "@mui/material": "^5.15.15",
-        "@mui/x-date-pickers": "^7.18.0",
-        "@serwist/next": "^9.0.1",
+        "@mui/icons-material": "^6.2.1",
+        "@mui/lab": "^6.0.0-beta.20",
+        "@mui/material": "^6.2.1",
+        "@mui/x-date-pickers": "^7.23.3",
+        "@serwist/next": "^9.0.11",
         "js-cookie": "^3.0.5",
         "luxon": "^3.4.4",
         "next": "14.2.2",
@@ -43,22 +43,22 @@
     "devDependencies": {
         "@types/js-cookie": "^3.0.6",
         "@types/luxon": "^3.4.2",
-        "@types/node": "^20.12.7",
+        "@types/node": "^22.10.2",
         "@types/react": "^18.2.79",
         "@types/react-dom": "^18.2.25",
         "@types/react-swipeable-views": "^0.13.5",
-        "@typescript-eslint/eslint-plugin": "^7.7.1",
-        "@typescript-eslint/parser": "^7.7.1",
-        "eslint": "^8.56.0",
+        "@typescript-eslint/eslint-plugin": "^8.18.1",
+        "@typescript-eslint/parser": "^8.18.1",
+        "eslint": "^8.57.1",
         "eslint-config-next": "^14.2.2",
         "eslint-config-prettier": "^9.1.0",
-        "eslint-import-resolver-typescript": "^3.6.1",
-        "eslint-plugin-deprecation": "^2.0.0",
-        "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-no-relative-import-paths": "^1.5.4",
+        "eslint-import-resolver-typescript": "^3.7.0",
+        "eslint-plugin-deprecation": "^3.0.0",
+        "eslint-plugin-import": "^2.31.0",
+        "eslint-plugin-no-relative-import-paths": "^1.5.5",
         "npm-run-all": "^4.1.5",
-        "prettier": "^3.2.5",
-        "serwist": "^9.0.0",
-        "typescript": "^5.4.5"
+        "prettier": "^3.4.2",
+        "serwist": "^9.0.11",
+        "typescript": "^5.7.2"
     }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 "use client";
 import { UserProvider } from "@auth0/nextjs-auth0/client";
-import { CssBaseline, Experimental_CssVarsProvider as CssVarsProvider, getInitColorSchemeScript } from "@mui/material";
+import { CssBaseline, ThemeProvider } from "@mui/material";
+import InitColorSchemeScript from "@mui/system/InitColorSchemeScript";
 import { Roboto } from "next/font/google";
 import React from "react";
 
@@ -15,14 +16,14 @@ const roboto = Roboto({
 export default function RootLayout({ children }: { children: React.ReactNode }) {
     return (
         <html lang="no" className={roboto.className}>
-            {getInitColorSchemeScript()}
+            <InitColorSchemeScript />
 
-            <CssVarsProvider theme={theme} defaultMode={"system"}>
+            <ThemeProvider theme={theme} defaultMode={"system"}>
                 <CssBaseline enableColorScheme />
                 <UserProvider>
                     <body>{children}</body>
                 </UserProvider>
-            </CssVarsProvider>
+            </ThemeProvider>
         </html>
     );
 }
diff --git a/src/components/configuration/ConfigBar.tsx b/src/components/configuration/ConfigBar.tsx
@@ -82,7 +82,11 @@ function ConfigBar({
                         {isConfigError ? (
                             !isLoadingConfig &&
                             isUserUpserted && (
-                                <Box mr={1.5}>
+                                <Box
+                                    sx={{
+                                        mr: 1.5,
+                                    }}
+                                >
                                     <Tooltip title={"Feilet"}>
                                         <Badge
                                             overlap={"circular"}

diff --git a/src/components/modals/Agenda/Agenda.tsx b/src/components/modals/Agenda/Agenda.tsx
@@ -40,12 +40,19 @@ function AgendaDays({ dayMap }: { dayMap: Record<string, BaseUserSession[]> }) {
                             color: theme.palette.grey[600],
                             fontSize: 15,
                         }}
-                        mb={0.5}
+                        sx={{
+                            mb: 0.5,
+                        }}
                     >
                         {prettyDate}
                     </Typography>
                     {dayMap[prettyDate]!.map((userSession) => (
-                        <Box key={userSession.classData.id} py={0.5}>
+                        <Box
+                            key={userSession.classData.id}
+                            sx={{
+                                py: 0.5,
+                            }}
+                        >
                             <AgendaEntry userSession={userSession} chain={userSession.chain} />
                         </Box>
                     ))}
@@ -119,12 +126,20 @@ export default function Agenda({
                 boxShadow: 24,
                 p: 4,
                 backgroundColor: "white",
-                '[data-mui-color-scheme="dark"] &': {
+                '[data-color-scheme="dark"] &': {
                     backgroundColor: "#181818",
                 },
             }}
         >
-            <Box display={"flex"} alignItems={"center"} justifyContent={"center"} gap={1} paddingBottom={2}>
+            <Box
+                sx={{
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    gap: 1,
+                    paddingBottom: 2,
+                }}
+            >
                 {userSessions.length > 0 ? <CalendarMonth /> : <CalendarToday />}
                 <Typography variant="h6" component="h2">
                     Min timeplan
@@ -235,7 +250,17 @@ export default function Agenda({
                         </Alert>
                     )}
                     <AgendaDays dayMap={plannedSessionsDayMap} />
-                    <Stack direction={"row"} alignItems={"center"} mt={4} mb={2} pl={1} pr={3} gap={2}>
+                    <Stack
+                        direction={"row"}
+                        sx={{
+                            alignItems: "center",
+                            mt: 4,
+                            mb: 2,
+                            pl: 1,
+                            pr: 3,
+                            gap: 2,
+                        }}
+                    >
                         <InfoOutlined sx={{ color: theme.palette.grey[500] }} />
                         <Typography
                             variant="body2"

diff --git a/src/components/modals/Agenda/AgendaSession.tsx b/src/components/modals/Agenda/AgendaSession.tsx
@@ -84,7 +84,7 @@ export default function AgendaSession({
                     position: "relative",
                     borderLeft: `0.4rem solid ${classColorRGB(false)}`,
                     backgroundColor: "white",
-                    '[data-mui-color-scheme="dark"] &': {
+                    '[data-color-scheme="dark"] &': {
                         borderLeft: `0.4rem solid ${classColorRGB(true)}`,
                         backgroundColor: "#111",
                     },
@@ -99,28 +99,41 @@ export default function AgendaSession({
                 }}
             >
                 <Box
-                    sx={{
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "space-between",
-                        background:
-                            userSession === undefined
-                                ? `repeating-linear-gradient(
-                            -55deg,
-                            ${theme.palette.background.default},
-                            ${theme.palette.background.default} 10px,
-                            ${theme.palette.background.paper} 10px,
-                            ${theme.palette.background.paper} 20px)`
-                                : undefined,
-                    }}
+                    sx={[
+                        {
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                        },
+                        userSession === undefined
+                            ? {
+                                  background: `repeating-linear-gradient(
+                -55deg,
+                ${theme.palette.background.default},
+                ${theme.palette.background.default} 10px,
+                ${theme.palette.background.paper} 10px,
+                ${theme.palette.background.paper} 20px)`,
+                              }
+                            : {
+                                  background: null,
+                              },
+                    ]}
                 >
                     <CardContent
                         className={"unselectable"}
-                        sx={{
-                            paddingBottom: 2,
-                            flexGrow: 1,
-                            cursor: userSession?.classData === undefined ? "auto" : "pointer",
-                        }}
+                        sx={[
+                            {
+                                paddingBottom: 2,
+                                flexGrow: 1,
+                            },
+                            userSession?.classData === undefined
+                                ? {
+                                      cursor: "auto",
+                                  }
+                                : {
+                                      cursor: "pointer",
+                                  },
+                        ]}
                     >
                         <Box
                             sx={{
@@ -133,16 +146,34 @@ export default function AgendaSession({
                                 <Box sx={{ display: "flex", gap: 1 }}>
                                     <Typography sx={{ fontSize: "1.05rem" }}>{displayName} </Typography>
                                 </Box>
-                                <Typography sx={{ fontSize: "0.85rem" }} variant="body2" color="text.secondary">
+                                <Typography
+                                    variant="body2"
+                                    sx={{
+                                        color: "text.secondary",
+                                        fontSize: "0.85rem",
+                                    }}
+                                >
                                     {`${timeFrom}${timeTo ? ` - ${timeTo}` : ""}`}
                                 </Typography>
                                 {userSession?.classData && (
-                                    <Typography sx={{ fontSize: "0.85rem" }} variant="body2" color="text.secondary">
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            color: "text.secondary",
+                                            fontSize: "0.85rem",
+                                        }}
+                                    >
                                         {userSession?.classData.location.studio}
                                     </Typography>
                                 )}
                                 {userSession?.classData && (
-                                    <Typography sx={{ fontSize: "0.85rem" }} variant="body2" color="text.secondary">
+                                    <Typography
+                                        variant="body2"
+                                        sx={{
+                                            color: "text.secondary",
+                                            fontSize: "0.85rem",
+                                        }}
+                                    >
                                         {userSession?.classData.instructors.map((i) => i.name).join(", ")}
                                     </Typography>
                                 )}
@@ -237,7 +268,7 @@ export default function AgendaSession({
                         width: "100%",
                         zIndex: -1,
                         backgroundColor: "white",
-                        '[data-mui-color-scheme="dark"] &': {
+                        '[data-color-scheme="dark"] &': {
                             backgroundColor: "#111",
                         },
                     }}

diff --git a/src/components/modals/ClassInfo/ClassInfo.tsx b/src/components/modals/ClassInfo/ClassInfo.tsx
@@ -52,7 +52,7 @@ export default function ClassInfo({
 }) {
     const { user } = useUser();
     const { userConfig, userConfigLoading, userConfigError, allConfigsIndex } = useUserConfig(chain);
-    const configUsers = allConfigsIndex ? allConfigsIndex[classRecurrentId(_class)] ?? [] : [];
+    const configUsers = allConfigsIndex ? (allConfigsIndex[classRecurrentId(_class)] ?? []) : [];
     const { userSessionsIndex, userSessionsIndexLoading, userSessionsIndexError, mutateSessionsIndex } =
         useUserSessionsIndex(chain);
     const { mutateUserSessions } = useUserSessions();
@@ -110,19 +110,26 @@ export default function ClassInfo({
                 boxShadow: 24,
                 p: 4,
                 backgroundColor: "white",
-                '[data-mui-color-scheme="dark"] &': {
+                '[data-color-scheme="dark"] &': {
                     backgroundColor: "#181818",
                 },
             }}
         >
-            <Stack direction={"row"} gap={1} alignItems={"center"} paddingBottom={1}>
+            <Stack
+                direction={"row"}
+                sx={{
+                    gap: 1,
+                    alignItems: "center",
+                    paddingBottom: 1,
+                }}
+            >
                 <Box
                     sx={{
                         borderRadius: "50%",
                         height: "1.5rem",
                         width: "1.5rem",
                         backgroundColor: color(false),
-                        '[data-mui-color-scheme="dark"] &': {
+                        '[data-color-scheme="dark"] &': {
                             backgroundColor: color(true),
                         },
                     }}
@@ -252,7 +259,11 @@ export default function ClassInfo({
                 </Alert>
             )}
             {_class.activity.image && (
-                <Box pt={2}>
+                <Box
+                    sx={{
+                        pt: 2,
+                    }}
+                >
                     <Image
                         src={_class.activity.image}
                         alt={_class.activity.name}
@@ -272,7 +283,13 @@ export default function ClassInfo({
                     ></Image>
                 </Box>
             )}
-            <Typography pt={2}>{_class.activity.description}</Typography>
+            <Typography
+                sx={{
+                    pt: 2,
+                }}
+            >
+                {_class.activity.description}
+            </Typography>
             {user &&
                 userConfig != undefined &&
                 !userConfigLoading &&

diff --git a/src/components/modals/ClassInfo/ClassInfoEntry.tsx b/src/components/modals/ClassInfo/ClassInfoEntry.tsx
@@ -4,16 +4,29 @@ import React, { ReactNode } from "react";
 function ClassInfoEntry({ icon, label, cancelled }: { icon: ReactNode; label: string; cancelled: boolean }) {
     return (
         <Box
-            sx={{
-                display: "flex",
-                paddingTop: 1,
-                gap: 1,
-                alignItems: "center",
-                opacity: cancelled ? 0.5 : 1,
-            }}
+            sx={[
+                {
+                    display: "flex",
+                    paddingTop: 1,
+                    gap: 1,
+                    alignItems: "center",
+                },
+                cancelled
+                    ? {
+                          opacity: 0.5,
+                      }
+                    : {
+                          opacity: 1,
+                      },
+            ]}
         >
             {icon}
-            <Typography variant="body2" color="text.secondary">
+            <Typography
+                variant="body2"
+                sx={{
+                    color: "text.secondary",
+                }}
+            >
                 {label}
             </Typography>
         </Box>