feat(mui): Actualiza de material-ui v4 a mui v5

package.json

@@ -33,8 +33,11 @@
     "link-parser": "rm -rf node_modules/@laboratoria/curriculum-parser && ln -s ../../../curriculum-parser-next node_modules/@laboratoria/curriculum-parser"
   },
   "dependencies": {
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/icons": "^4.11.3",
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/icons-material": "^5.11.0",
+    "@mui/material": "^5.11.3",
+    "@mui/styles": "^5.11.2",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^13.2.1",
@@ -91,4 +94,4 @@
       "<rootDir>/src/lib/theme.js"
     ]
   }
-}
+}

src/components/App/App.spec.js

@@ -1,5 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
-import { createTheme, ThemeProvider } from '@material-ui/core/styles';
+import { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';
 import themeConfig from '../../lib/theme';
 import app from '../../lib/app';
 import App from '.';
@@ -22,9 +22,11 @@ describe('App', () => {
       auth: { user: null },
     }));
     render(
-      <ThemeProvider theme={createTheme(themeConfig)}>
-        <App />
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={createTheme(adaptV4Theme(themeConfig))}>
+          <App />
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
     await waitFor(() => screen.getByText('Desarrollo Web'));
   });
@@ -36,9 +38,11 @@ describe('App', () => {
       auth: { user: null },
     }));
     render(
-      <ThemeProvider theme={createTheme(themeConfig)}>
-        <App />
-      </ThemeProvider>
+      <StyledEngineProvider injectFirst>
+        <ThemeProvider theme={createTheme(adaptV4Theme(themeConfig))}>
+          <App />
+        </ThemeProvider>
+      </StyledEngineProvider>
     );
     await waitFor(() => screen.getByText('Desenvolvimento Web'));
     spy.mockRestore();

src/components/Breadcrumbs/index.jsx

@@ -1,6 +1,6 @@
 import { useParams, Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import { makeStyles } from '@material-ui/core/styles';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles(theme => ({
   root: {

src/components/Exercise/TestResults/Suite.jsx

@@ -1,5 +1,5 @@
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import Test from './Test';
 
 const Suite = ({ suite }) => (

src/components/Exercise/TestResults/Summary.jsx

@@ -1,5 +1,5 @@
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
 import { FormattedMessage } from 'react-intl';
 
 const Summary = ({ stats }) => (

src/components/Exercise/TestResults/Test.jsx

@@ -1,11 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import Avatar from '@material-ui/core/Avatar';
-import DoneIcon from '@material-ui/icons/Done';
-import ErrorIcon from '@material-ui/icons/Error';
-import red from '@material-ui/core/colors/red';
-import green from '@material-ui/core/colors/green';
+import makeStyles from '@mui/styles/makeStyles';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import Avatar from '@mui/material/Avatar';
+import DoneIcon from '@mui/icons-material/Done';
+import ErrorIcon from '@mui/icons-material/Error';
+import { red, green } from '@mui/material/colors';
 
 const useStyles = makeStyles((theme) => ({
   success: {

src/components/Exercise/TestResults/index.jsx

@@ -1,12 +1,12 @@
-import { makeStyles } from '@material-ui/core/styles';
-import Avatar from '@material-ui/core/Avatar';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemText from '@material-ui/core/ListItemText';
-import ErrorIcon from '@material-ui/icons/Error';
-import red from '@material-ui/core/colors/red';
+import makeStyles from '@mui/styles/makeStyles';
+import Avatar from '@mui/material/Avatar';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ErrorIcon from '@mui/icons-material/Error';
 import Suite from './Suite';
 import Summary from './Summary';
+import { red } from '@mui/material/colors';
 
 const useStyles = makeStyles((theme) => ({
   failure: {

src/components/Exercise/index.jsx

@@ -1,8 +1,8 @@
 import { useState, useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import Button from '@material-ui/core/Button';
-import Typography from '@material-ui/core/Typography';
+import Button from '@mui/material/Button';
+import Typography from '@mui/material/Typography';
 import AceEditor from 'react-ace';
 import Breadcrumbs from '../Breadcrumbs';
 import Content from '../Content';

src/components/Home/index.jsx

@@ -1,5 +1,6 @@
 import { Link, useParams } from 'react-router-dom';
-import { makeStyles, useTheme } from '@material-ui/core/styles';
+import { useTheme } from '@mui/material/styles';
+import makeStyles from '@mui/styles/makeStyles';
 import { FormattedMessage } from 'react-intl';
 
 const useStyles = makeStyles(theme => ({

src/components/Loading/index.jsx

@@ -1,6 +1,6 @@
-import Backdrop from '@material-ui/core/Backdrop';
-import CircularProgress from '@material-ui/core/CircularProgress';
-import { makeStyles } from '@material-ui/core/styles';
+import Backdrop from '@mui/material/Backdrop';
+import CircularProgress from '@mui/material/CircularProgress';
+import makeStyles from '@mui/styles/makeStyles';
 
 const useStyles = makeStyles((theme) => ({
   backdrop: {

src/components/Part/index.jsx

@@ -1,5 +1,5 @@
 import { useParams } from 'react-router-dom';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import Breadcrumbs from '../Breadcrumbs';
 import Content from '../Content';
 import ExercisesList from './ExercisesList';

src/components/Project/index.jsx

@@ -1,8 +1,8 @@
 import { useEffect, useState } from 'react';
 import { Link, useParams } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
 import Breadcrumbs from '../Breadcrumbs';
 import Loading from '../Loading';
 import data from '../../lib/data';

src/components/Quiz/Question.jsx

@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles';
-import FormControlLabel from '@material-ui/core/FormControlLabel';
-import FormGroup from '@material-ui/core/FormGroup';
-import Typography from '@material-ui/core/Typography';
+import makeStyles from '@mui/styles/makeStyles';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import Typography from '@mui/material/Typography';
 import Content from '../Content';
 
 const useStyles = makeStyles(theme => ({

src/components/Quiz/index.jsx

@@ -1,9 +1,9 @@
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Paper from '@material-ui/core/Paper';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import Paper from '@mui/material/Paper';
 import Question from './Question';
 
 const useStyles = makeStyles(theme => ({

src/components/SignIn/index.jsx

@@ -1,10 +1,10 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import Button from '@material-ui/core/Button';
-import Container from '@material-ui/core/Container';
-import Grid from '@material-ui/core/Grid';
-import TextField from '@material-ui/core/TextField';
+import makeStyles from '@mui/styles/makeStyles';
+import Button from '@mui/material/Button';
+import Container from '@mui/material/Container';
+import Grid from '@mui/material/Grid';
+import TextField from '@mui/material/TextField';
 import Loading from '../Loading';
 import { useApp } from '../../lib/app';
 

src/components/TopBar/DrawerMenu.jsx

@@ -1,16 +1,16 @@
 import { Link } from 'react-router-dom';
 import { FormattedMessage } from 'react-intl';
-import { makeStyles } from '@material-ui/core/styles';
-import Divider from '@material-ui/core/Divider';
-import Drawer from '@material-ui/core/Drawer';
-import List from '@material-ui/core/List';
-import ListItem from '@material-ui/core/ListItem';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import ListItemText from '@material-ui/core/ListItemText';
-import HomeIcon from '@material-ui/icons/Home';
-import DeveloperModeIcon from '@material-ui/icons/DeveloperMode';
-import GitHubIcon from '@material-ui/icons/GitHub';
-import PeopleIcon from '@material-ui/icons/People';
+import makeStyles from '@mui/styles/makeStyles';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import ListItemText from '@mui/material/ListItemText';
+import HomeIcon from '@mui/icons-material/Home';
+import DeveloperModeIcon from '@mui/icons-material/DeveloperMode';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import PeopleIcon from '@mui/icons-material/People';
 
 const version = process.env.REACT_APP_VERSION;
 

src/components/TopBar/UserMenu.jsx

@@ -1,12 +1,12 @@
 import { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import Button from '@material-ui/core/Button';
-import IconButton from '@material-ui/core/IconButton';
-import ListItemIcon from '@material-ui/core/ListItemIcon';
-import Menu from '@material-ui/core/Menu';
-import MenuItem from '@material-ui/core/MenuItem';
-import AccountCircleIcon from '@material-ui/icons/AccountCircle';
-import LockOpenIcon from '@material-ui/icons/LockOpen';
+import Button from '@mui/material/Button';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import AccountCircleIcon from '@mui/icons-material/AccountCircle';
+import LockOpenIcon from '@mui/icons-material/LockOpen';
 
 
 const UserMenu = ({ lang, auth, history }) => {
@@ -30,9 +30,7 @@ const UserMenu = ({ lang, auth, history }) => {
 
   return (
     <div>
-      <IconButton
-        onClick={handleMenu}
-      >
+      <IconButton onClick={handleMenu} size="large">
         <AccountCircleIcon />
       </IconButton>
       <Menu

src/components/TopBar/index.jsx

@@ -1,14 +1,14 @@
 import { Fragment, useState } from 'react';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
-import { makeStyles } from '@material-ui/core/styles';
-import AppBar from '@material-ui/core/AppBar';
-import FormControl from '@material-ui/core/FormControl';
-import IconButton from '@material-ui/core/IconButton';
-import MenuItem from '@material-ui/core/MenuItem';
-import Select from '@material-ui/core/Select';
-import Toolbar from '@material-ui/core/Toolbar';
-import Typography from '@material-ui/core/Typography';
-import MenuIcon from '@material-ui/icons/Menu';
+import makeStyles from '@mui/styles/makeStyles';
+import AppBar from '@mui/material/AppBar';
+import FormControl from '@mui/material/FormControl';
+import IconButton from '@mui/material/IconButton';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+import MenuIcon from '@mui/icons-material/Menu';
 // import { useApp } from '../../lib/app';
 import DrawerMenu from './DrawerMenu';
 // import UserMenu from './UserMenu';
@@ -43,7 +43,7 @@ const useStyles = makeStyles((theme) => ({
   hideWhenSmall: {
     display: 'flex',
     alignItems: 'center',
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       display: 'none',
     },
   },
@@ -68,7 +68,7 @@ const TopBar = () => {
             className={classes.menuButton}
             color="inherit"
             aria-label="menu"
-          >
+            size="large">
             <MenuIcon />
           </IconButton>
           <Typography variant="subtitle1" className={classes.title}>

src/components/Topic/index.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { Link, Route, Routes, useParams } from 'react-router-dom';
-import Container from '@material-ui/core/Container';
-import Typography from '@material-ui/core/Typography';
+import Container from '@mui/material/Container';
+import Typography from '@mui/material/Typography';
 import Loading from '../Loading';
 import Breadcrumbs from '../Breadcrumbs';
 import Exercise from '../Exercise';

src/components/Track/Gym.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
-import Typography from '@material-ui/core/Typography';
+import Typography from '@mui/material/Typography';
 import data from '../../lib/data';
 import ExercisesList from '../Part/ExercisesList';
 

src/components/Track/Projects.jsx

@@ -1,14 +1,14 @@
 import { Link, useParams } from 'react-router-dom';
 import { FormattedMessage, useIntl } from 'react-intl';
-import { makeStyles } from '@material-ui/core/styles';
-import Card from '@material-ui/core/Card';
-import CardHeader from '@material-ui/core/CardHeader';
-import CardContent from '@material-ui/core/CardContent';
-import CardMedia from '@material-ui/core/CardMedia';
-import Grid from '@material-ui/core/Grid';
-import IconButton from '@material-ui/core/IconButton';
-import Typography from '@material-ui/core/Typography';
-import ArrowForward from '@material-ui/icons/ArrowForward';
+import makeStyles from '@mui/styles/makeStyles';
+import Card from '@mui/material/Card';
+import CardHeader from '@mui/material/CardHeader';
+import CardContent from '@mui/material/CardContent';
+import CardMedia from '@mui/material/CardMedia';
+import Grid from '@mui/material/Grid';
+import IconButton from '@mui/material/IconButton';
+import Typography from '@mui/material/Typography';
+import ArrowForward from '@mui/icons-material/ArrowForward';
 import { useLocale } from '../../intl/IntlProvider';
 import { learningObjectiveToIcon } from '../../lib/learning-objectives';
 
@@ -46,7 +46,7 @@ const Project = ({ project }) => {
         className={classes.cardHeader}
         titleTypographyProps={{ style: { fontSize: '1.3em', marginTop: 0 } }}
         action={
-          <IconButton component={Link} to={`/${lang}/projects/${project.slug}`}>
+          <IconButton component={Link} to={`/${lang}/projects/${project.slug}`} size="large">
             <ArrowForward />
           </IconButton>
         }