Updates MUI to v6 with Pigment CSS

frontend/package.json

@@ -14,10 +14,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@emotion/react": "^11.11.4",
-    "@emotion/styled": "^11.11.5",
-    "@mui/icons-material": "5.15.21",
-    "@mui/material": "^5.15.21",
+    "@mui/icons-material": "^6.0.2",
+    "@mui/material": "^6.0.2",
+    "@mui/material-pigment-css": "^6.0.2",
     "axios": "^1.7.4",
     "classnames": "^2.5.1",
     "dayjs": "^1.11.11",
@@ -37,6 +36,7 @@
     "zustand": "^4.5.4"
   },
   "devDependencies": {
+    "@pigment-css/vite-plugin": "^0.0.22",
     "@types/classnames": "^2.3.1",
     "@types/node": "^20.14.9",
     "@types/qs": "^6.9.15",

frontend/src/app/components/accordion/Accordion.tsx

@@ -1,8 +1,5 @@
-import {
-  AccordionProps,
-  Accordion as MuiAccordion,
-  styled,
-} from "@mui/material";
+import { AccordionProps, Accordion as MuiAccordion } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiAccordion = styled(MuiAccordion)({

frontend/src/app/components/accordionSummary/AccordionSummary.tsx

@@ -2,8 +2,8 @@ import CaretIcon from "@icons/CaretIcon";
 import {
   AccordionSummaryProps,
   AccordionSummary as MuiAccordionSummary,
-  styled,
 } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiAccordionSummary = styled(MuiAccordionSummary)({

frontend/src/app/components/button/Button.tsx

@@ -1,4 +1,5 @@
-import { ButtonProps, Button as MuiButton, styled } from "@mui/material";
+import { ButtonProps, Button as MuiButton } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiButton = styled(MuiButton)({

frontend/src/app/components/dialog/Dialog.tsx

@@ -1,5 +1,6 @@
 import Slide from "@components/slide/Slide";
-import { DialogProps, Dialog as MuiDialog, styled } from "@mui/material";
+import { DialogProps, Dialog as MuiDialog } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiDialog = styled(MuiDialog)({

frontend/src/app/components/link/Link.tsx

@@ -1,5 +1,6 @@
 import ExternalLinkOutlined from "@icons/ExternalLinkOutlined";
-import { LinkProps, Link as MuiLink, styled } from "@mui/material";
+import { LinkProps, Link as MuiLink } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiLink = styled(MuiLink)({

frontend/src/app/components/switch/Switch.tsx

@@ -1,4 +1,5 @@
-import { Switch as MuiSwitch, styled, SwitchProps } from "@mui/material";
+import { Switch as MuiSwitch, SwitchProps } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 const StyledMuiSwitch = styled(MuiSwitch)({

frontend/src/app/components/tableRow/TableRow.tsx

@@ -1,9 +1,9 @@
 import {
   TableRow as MuiTableRow,
-  styled,
   TableCell,
   TableRowProps,
 } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 
 interface ITableRow extends TableRowProps {

frontend/src/app/components/textField/TextField.tsx

@@ -1,8 +1,5 @@
-import {
-  TextField as MuiTextField,
-  TextFieldProps,
-  styled,
-} from "@mui/material";
+import { TextField as MuiTextField, TextFieldProps } from "@mui/material";
+import { styled } from "@mui/material-pigment-css";
 import style from "@styles/style.module.scss";
 import { ChangeEvent } from "react";
 

frontend/src/app/components/uikit/uikitColor/UikitColor.tsx

@@ -1,4 +1,6 @@
-import { Grid, Palette, PaletteColor, useTheme } from "@mui/material";
+import { Palette, PaletteColor } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { useTheme } from "@mui/material-pigment-css";
 import { useCallback, useMemo } from "react";
 
 interface IUikitColor {
@@ -15,9 +17,8 @@ export default function UikitColor({ color }: IUikitColor) {
   const colorItem = useCallback((bgColor: string, label: string) => {
     return (
       <Grid
-        item
         className="flex align-center justify-center"
-        xs
+        // xs
         height={50}
         bgcolor={bgColor}
       >

frontend/src/app/pages/uikit/UiKit.tsx

@@ -8,7 +8,8 @@ import Typography from "@components/typography/Typography";
 import UikitBlock from "@components/uikit/uikitBlock/UikitBlock";
 import UikitColor from "@components/uikit/uikitColor/UikitColor";
 import UikitNav, { INavItem } from "@components/uikit/uikitNav/UikitNav";
-import { Grid, TextField } from "@mui/material";
+import Grid from "@mui/material/Grid2";
+import { TextField } from "@mui/material";
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { ValidationError } from "yup";

frontend/src/app/shared/theme.tsx → frontend/src/app/shared/theme.ts

@@ -1,9 +1,13 @@
 import { createTheme } from "@mui/material";
-import style from "@styles/style.module.scss";
+// import style from "@/styles/style.module.scss";
 
-const parseMedia = (media: string) => parseInt(media.replace("px", ""));
+// const parseMedia = (media: string) => parseInt(media.replace("px", ""));
 
-const theme = createTheme({
+const theme = createTheme(
+  {
+    cssVariables: true,
+  },
+  /* {
   breakpoints: {
     values: {
       xs: parseMedia(style["media-xs"]),
@@ -31,6 +35,7 @@ const theme = createTheme({
       contrastText: style["basic-brightest"],
     },
   },
-});
+} */
+);
 
 export default theme;

frontend/src/main.tsx

@@ -1,18 +1,16 @@
-import { ThemeProvider } from "@emotion/react";
 import { StrictMode } from "react";
 import * as ReactDOM from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import App from "./App";
-import theme from "./app/shared/theme";
+
+import "@mui/material-pigment-css/styles.css";
 
 ReactDOM.createRoot(
   document.getElementById("root") as ReactDOM.Container,
 ).render(
   <StrictMode>
     <HelmetProvider>
-      <ThemeProvider theme={theme}>
-        <App />
-      </ThemeProvider>
+      <App />
     </HelmetProvider>
   </StrictMode>,
 );

frontend/src/material-ui-pigment-css.d.ts

@@ -0,0 +1,19 @@
+import { Theme, SxProps } from "@mui/material/styles";
+import {} from "@mui/material/themeCssVarsAugmentation";
+
+declare module "@mui/material-pigment-css" {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}
+
+declare global {
+  namespace React {
+    interface HTMLAttributes {
+      sx?: SxProps<Theme>;
+    }
+    interface SVGProps {
+      sx?: SxProps<Theme>;
+    }
+  }
+}

frontend/tsconfig.node.json

@@ -9,5 +9,5 @@
     "strict": true,
     "noEmit": true
   },
-  "include": ["vite.config.ts"]
+  "include": ["vite.config.ts", "src/app/shared/theme.ts"]
 }

frontend/vite.config.ts

@@ -1,12 +1,19 @@
 import { defineConfig, loadEnv } from "vite";
 import react from "@vitejs/plugin-react";
+import { pigment } from "@pigment-css/vite-plugin";
+import theme from "./src/app/shared/theme";
 import path from "path";
 
+const pigmentConfig = {
+  theme,
+  transformLibraries: ["@mui/material"],
+};
+
 export default ({ mode }: { mode: string }) => {
   process.env = { ...process.env, ...loadEnv(mode, process.cwd()) };
 
   return defineConfig({
-    plugins: [react()],
+    plugins: [react(), pigment(pigmentConfig)],
     build: {
       sourcemap: process.env.VITE_GENERATE_SOURCEMAP === "true",
     },