chore: migrate mui to v6 and replace emotion with pigment css

client/package.json

@@ -14,13 +14,13 @@
   "dependencies": {
     "@codemirror/lang-cpp": "^6.0.3",
     "@codemirror/lang-javascript": "^6.2.5",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@fortawesome/fontawesome-svg-core": "^6.4.0",
     "@fortawesome/free-solid-svg-icons": "^6.4.0",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mui/icons-material": "^5.16.6",
-    "@mui/material": "^5.15.20",
+    "@mui/icons-material": "^6.5.0",
+    "@mui/material": "^6.5.0",
+    "@mui/material-pigment-css": "^6.5.0",
+    "@pigment-css/react": "^0.0.29",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-checkbox": "^1.3.3",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -70,6 +70,7 @@
     "@eslint/compat": "^2.0.5",
     "@eslint/eslintrc": "^3.3.5",
     "@eslint/js": "^9.39.4",
+    "@pigment-css/vite-plugin": "^0.0.30",
     "@types/d3": "^7.4.3",
     "@types/lodash": "^4.17.24",
     "@types/node": "^22.0.0",
@@ -95,6 +96,7 @@
     "vite-tsconfig-paths": "^4.0.0"
   },
   "overrides": {
+    "react-is": "^18.3.1",
     "react-json-view": {
       "react": "^18.2.0",
       "react-dom": "^18.2.0"

client/src/App.tsx

@@ -1,4 +1,5 @@
-import { ThemeProvider, Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import { ThemeProvider } from '@mui/material/styles';
 import { AnimatePresence } from 'framer-motion';
 import { Route, Routes } from 'react-router-dom';
 import Feedback from '@/Feedback';

client/src/Feedback.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
 import PageLayout from '@/components/PageLayout';
 import Container from '@mui/material/Container';
 

client/src/HomePage.tsx

@@ -1,4 +1,7 @@
-import { Container, Theme, Typography, Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
+import type { Theme } from '@mui/material/styles';
 import { useTheme, styled } from '@mui/material/styles';
 import Topics from '@/components/Topics';
 import Features from '@/components/Features';

client/src/Page404.tsx

@@ -1,4 +1,5 @@
-import { Container, Typography } from '@mui/material';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
 import TopNavbar from '@/components/Navbars/TopNavbar';
 import { motion } from 'framer-motion';

client/src/VisualiserPage.tsx

@@ -6,7 +6,7 @@ import '@/visualiser-src/linked-list-visualiser/styles/visualiser.css';
 import { TopNavbar } from '@/components/Navbars';
 import { LineLoader } from '@/components/Loader';
 import Visualiser from '@/components/Visualiser';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 
 const containerVariants = {
   hidden: {

client/src/components/Features/Features.tsx

@@ -1,7 +1,13 @@
 import { useEffect } from 'react';
 import { motion, useAnimation } from 'framer-motion';
 import { useInView } from 'react-intersection-observer';
-import { Box, Grid, Link, List, ListItem, ListItemIcon, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import BulletIcon from '@mui/icons-material/ArrowForwardIos';
 import VisualiserIcon from '@mui/icons-material/AutoFixHigh';

client/src/components/FloatingWindow/FloatingWindow.tsx

@@ -1,5 +1,7 @@
 import { ReactNode } from 'react';
-import { Box, Collapse, useTheme } from '@mui/material';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import { useTheme } from '@mui/material/styles';
 import ChevronLeft from '@mui/icons-material/ChevronLeft';
 import ChevronRight from '@mui/icons-material/ChevronRight';
 

client/src/components/Footer/Footer.tsx

@@ -1,4 +1,8 @@
-import { Box, Container, Grid, Typography, Link } from '@mui/material';
+import Box from '@mui/material/Box';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { Link as RouterLink } from 'react-router-dom';
 import structsLogo from '../../assets/img/structs.png';

client/src/components/Frame/LaptopFrame.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import laptopImg from '@/assets/img/laptop-frame.png';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import styles from './LaptopFrame.module.scss';
 
 interface Props {
@@ -10,7 +10,11 @@ interface Props {
 const LaptopFrame: React.FC<Props> = ({ imageUrl }) => (
   <Box className={styles.computer}>
     <img src={laptopImg} alt="MacBook Computer Apple" />
-    <Box className={styles.screen} sx={{ background: `url(${imageUrl})` }} />
+    <Box
+      className={styles.screen}
+      sx={{ backgroundSize: 'cover', backgroundPosition: 'center' }}
+      style={{ backgroundImage: `url(${imageUrl})` }}
+    />
   </Box>
 );
 

client/src/components/Login/Login.tsx

@@ -1,5 +1,6 @@
 import { FC, KeyboardEvent, useState } from 'react';
-import { Button, Input } from '@mui/material';
+import Button from '@mui/material/Button';
+import Input from '@mui/material/Input';
 import { styled } from '@mui/material/styles';
 import axios from 'axios';
 import { SERVER_URL } from '@/utils/constants';

client/src/components/Navbars/DevelopmentModeNavbar.tsx

@@ -6,7 +6,7 @@ import Dialog, { DialogTitle, DialogDescription } from '@/components/Dialog/Dial
 import AboutText from '@/visualiser-debugger/Component/FileTree/AboutText';
 import BookIcon from '@mui/icons-material/Book';
 import classNames from 'classnames';
-import { Tooltip } from '@mui/material';
+import Tooltip from '@mui/material/Tooltip';
 import { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import DarkModeIcon from '@mui/icons-material/DarkMode';

client/src/components/Navbars/TopNavbar.tsx

@@ -1,18 +1,15 @@
 import { FC, MouseEvent, useState } from 'react';
-import { styled } from '@mui/material/styles';
-import {
-  AppBar,
-  Box,
-  Grid,
-  Menu,
-  MenuItem,
-  Toolbar,
-  Typography,
-  ListItemText,
-  Button,
-  ListItemIcon,
-  useTheme,
-} from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
+import AppBar from '@mui/material/AppBar';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Grid from '@mui/material/Grid';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
 import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import CheckIcon from '@mui/icons-material/Check';
 import logo from '@/assets/img/logo.png';
@@ -22,6 +19,7 @@ import { getTopics } from '../../visualiser-src/common/helpers';
 
 const LogoText = styled(Typography)({
   textTransform: 'none',
+  fontFamily: 'CodeText, monospace',
 });
 
 const StyledCheckIcon = styled(CheckIcon)(({ theme }) => ({

client/src/components/PageLayout/PageLayout.tsx

@@ -1,5 +1,6 @@
 import { FC, ReactNode, useEffect } from 'react';
-import { Box, Theme } from '@mui/material';
+import Box from '@mui/material/Box';
+import type { Theme } from '@mui/material/styles';
 import { useTheme } from '@mui/material/styles';
 import { motion } from 'framer-motion';
 import { TopNavbar } from '@/components/Navbars';

client/src/components/TabResize/DynamicTab.tsx

@@ -1,14 +1,16 @@
-// DynamicBox.tsx
+// DynamicTab.tsx
 import React, { ReactNode } from 'react';
 import Box from '@mui/material/Box';
 
 interface DynamicTabProps {
   children: ReactNode;
-  sx?: object;
+  style?: React.CSSProperties;
 }
 
-const DynamicTab: React.FC<DynamicTabProps> = ({ children, sx }) => (
-  <Box sx={{ border: '1px solid black', padding: '8px', ...sx }}>{children}</Box>
+const DynamicTab: React.FC<DynamicTabProps> = ({ children, style }) => (
+  <Box sx={{ border: '1px solid black', padding: '8px' }} style={style}>
+    {children}
+  </Box>
 );
 
 export default DynamicTab;

client/src/components/TabResize/DynamicTabs.tsx

@@ -89,7 +89,7 @@ const DynamicTabs: React.FC<DynamicTabsProps> = (props) => {
       {React.Children.map(children, (child, index) => (
         <React.Fragment key={index}>
           <DynamicTab
-            sx={{
+            style={{
               flexGrow: ratios[index],
               flexBasis: 0,
               display: 'flex',

client/src/components/Tags/TagList.tsx

@@ -1,5 +1,5 @@
-/** @jsxImportSource @emotion/react */
-import { Chip, Stack } from '@mui/material';
+import Chip from '@mui/material/Chip';
+import Stack from '@mui/material/Stack';
 import React, { Fragment, useCallback } from 'react';
 
 interface TagListProps {

client/src/components/Tags/TagSelector.tsx

@@ -1,4 +1,3 @@
-/** @jsxImportSource @emotion/react */
 import { FC } from 'react';
 import { TagList } from './TagList';
 

client/src/components/Timeline/Slider.tsx

@@ -1,4 +1,5 @@
-import { Slider, styled } from '@mui/material';
+import Slider from '@mui/material/Slider';
+import { styled } from '@mui/material/styles';
 import { useMemo } from 'react';
 
 import clsx from 'clsx';

client/src/components/Topics/TopicCard.tsx

@@ -1,4 +1,5 @@
-import { Button, Box } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
 import { FC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { titleToUrl } from '@/utils/url';

client/src/components/Topics/Topics.tsx

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { LineLoader } from '@/components/Loader';
 import { getTopics } from '@/visualiser-src/common/helpers';
 import TopicCard from './TopicCard';

client/src/components/Visualiser/VisualiserCanvas.tsx

@@ -1,5 +1,5 @@
 import React, { PointerEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { Box } from '@mui/material';
+import Box from '@mui/material/Box';
 import { styled } from '@mui/material/styles';
 import { mat3, vec2 } from 'gl-matrix';
 

client/src/components/Visualiser/VisualiserInterface/Controls.tsx

@@ -1,16 +1,13 @@
 import { MouseEvent, useCallback, useContext, useState } from 'react';
-import {
-  Box,
-  IconButton,
-  Typography,
-  useTheme,
-  Button,
-  Menu,
-  MenuItem,
-  ListItemIcon,
-  ListItemText,
-} from '@mui/material';
-import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Typography from '@mui/material/Typography';
+import { styled, useTheme } from '@mui/material/styles';
 import TimeIcon from '@mui/icons-material/AccessTime';
 import PauseIcon from '@mui/icons-material/PauseCircleOutline';
 import PlayIcon from '@mui/icons-material/PlayCircleOutline';

client/src/components/Visualiser/VisualiserInterface/CreateLink.tsx

@@ -1,4 +1,9 @@
-import { Typography, Button, TextField, Alert, Snackbar, Collapse } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import Snackbar from '@mui/material/Snackbar';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import { useEffect, useContext, useState, useRef, useCallback } from 'react';
 import { useLocation } from 'react-router-dom';

client/src/components/Visualiser/VisualiserInterface/CreateMenu.tsx

@@ -1,4 +1,6 @@
-import { Box, Typography, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 import React, { useCallback, useContext } from 'react';
 import VisualiserContext from './VisualiserContext';

client/src/components/Visualiser/VisualiserInterface/LoadOptions.tsx

@@ -1,5 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
-import { Box, Typography, Button } from '@mui/material';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import { styled } from '@mui/material/styles';
 
 interface Props {

client/src/components/Visualiser/VisualiserInterface/OperationDetails.tsx

@@ -1,5 +1,9 @@
 import { ChangeEvent, FC, useContext, useState } from 'react';
-import { Box, Collapse, ListItem, Theme, Typography } from '@mui/material';
+import Box from '@mui/material/Box';
+import Collapse from '@mui/material/Collapse';
+import ListItem from '@mui/material/ListItem';
+import Typography from '@mui/material/Typography';
+import type { Theme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import TextField from '@mui/material/TextField';
 import { styled, useTheme } from '@mui/material/styles';

client/src/components/Visualiser/VisualiserInterface/Saving.tsx

@@ -1,6 +1,12 @@
 /* eslint-disable */
 // TODO: Proper rework on this file => we want to re-design this anyway. I can't fix lint now because it will potentially change functioanlity of the file
-import { Box, Typography, Button, Alert, Snackbar, Collapse, TextField } from '@mui/material';
+import Alert from '@mui/material/Alert';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Collapse from '@mui/material/Collapse';
+import Snackbar from '@mui/material/Snackbar';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles';
 import React, {
   useContext,

client/src/components/Visualiser/VisualiserInterface/VisualiserInterface.tsx

@@ -1,7 +1,8 @@
 import { FC, useCallback, useEffect, useMemo, useState } from 'react';
 import { Documentation } from '@/visualiser-src/common/typedefs';
 import VisualiserController from '@/visualiser-src/controller/VisualiserController';
-import { Box, List } from '@mui/material';
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
 import FloatingWindow from '@/components/FloatingWindow';
 import VisualiserContext from './VisualiserContext';
 import Controls from './Controls';

client/src/main.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
+import '@mui/material-pigment-css/styles.css';
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>

client/src/mui-pigment.d.ts

@@ -0,0 +1,7 @@
+import type { Theme } from '@mui/material/styles';
+
+declare module '@mui/material-pigment-css' {
+  interface ThemeArgs {
+    theme: Theme;
+  }
+}

client/src/structsThemes.ts

@@ -1,4 +1,4 @@
-import { ThemeOptions } from '@mui/material';
+import type { ThemeOptions } from '@mui/material/styles';
 import { createTheme } from '@mui/material/styles';
 
 const baseOptions: ThemeOptions = {
@@ -33,6 +33,7 @@ const MUI_THEME_COLORS = {
 };
 
 export const structsTheme = createTheme({
+  cssVariables: true,
   typography: {
     ...baseOptions.typography,
   },
@@ -54,6 +55,7 @@ export const createDebuggerTheme = (darkMode: boolean) => {
   const colors = darkMode ? MUI_THEME_COLORS.dark : MUI_THEME_COLORS.light;
 
   return createTheme({
+    cssVariables: true,
     typography: {
       ...baseOptions.typography,
     },

client/src/visualiser-debugger/Component/Control/Controls.tsx

@@ -4,7 +4,7 @@ import UndoIcon from '@mui/icons-material/Undo';
 import RedoIcon from '@mui/icons-material/Redo';
 import CircularProgress from '@mui/material/CircularProgress';
 import { useEffect, useRef, useState } from 'react';
-import { Fade } from '@mui/material';
+import Fade from '@mui/material/Fade';
 import { handleCompileClicked } from '@/visualiser-debugger/Store/onboardingStore';
 import { useSocketCommunication } from '@/Services/useSocketCommunication';
 import { useFrontendStateStore } from '@/visualiser-debugger/Store/frontendStateStore';