Skip to content

Commit e525638

Browse files
karpolankarpolan
committed
refactor: CodeMod from MUI 4.x to 5.x
update: Todos and notes
1 parent b21e96e commit e525638

File tree

30 files changed

+12188
-109
lines changed

30 files changed

+12188
-109
lines changed

‎package.json‎

Lines changed: 22 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-typescript-material",
3-
"version": "1.1.5",
3+
"version": "1.2.7",
44
"description": "React + Material UI + Auth starter using TypeScript",
55
"author": {
66
"name": "Anton Karpenko",
@@ -19,28 +19,30 @@
1919
"url": "https://github.com/karpolan/react-typescript-material-ui-with-auth-starter.git"
2020
},
2121
"dependencies": {
22-
"@material-ui/core": "^4.12.3",
23-
"@material-ui/icons": "^4.11.2",
24-
"@material-ui/lab": "^4.0.0-alpha.60",
22+
"@emotion/react": "^11.4.1",
23+
"@emotion/styled": "^11.3.0",
24+
"@mui/icons-material": "^5.0.1",
25+
"@mui/material": "^5.0.2",
26+
"@mui/styles": "^5.0.1",
2527
"date-fns": "^2.23.0",
26-
"react": "^17.0.2",
27-
"react-dom": "^17.0.2",
28-
"react-router-dom": "^5.2.0",
29-
"react-scripts": "4.0.3",
30-
"typescript": "^4.3.5",
31-
"validate.js": "^0.13.1",
32-
"web-vitals": "^1.1.2"
28+
"react": "latest",
29+
"react-dom": "latest",
30+
"react-router-dom": "latest",
31+
"react-scripts": "latest",
32+
"typescript": "latest",
33+
"validate.js": "latest",
34+
"web-vitals": "latest"
3335
},
3436
"devDependencies": {
35-
"@testing-library/jest-dom": "^5.14.1",
36-
"@testing-library/react": "^11.2.7",
37-
"@testing-library/user-event": "^12.1.10",
38-
"@types/jest": "^26.0.24",
39-
"@types/node": "^12.20.19",
40-
"@types/react": "^17.0.19",
41-
"@types/react-dom": "^17.0.9",
42-
"@types/react-router-dom": "^5.1.8",
43-
"prettier": "^2.3.2"
37+
"@testing-library/jest-dom": "latest",
38+
"@testing-library/react": "latest",
39+
"@testing-library/user-event": "latest",
40+
"@types/jest": "latest",
41+
"@types/node": "latest",
42+
"@types/react": "latest",
43+
"@types/react-dom": "latest",
44+
"@types/react-router-dom": "latest",
45+
"prettier": "latest"
4446
},
4547
"scripts": {
4648
"start": "react-scripts start",

‎src/components/AppAlert/AppAlert.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import clsx from 'clsx';
2-
import { Theme, makeStyles } from '@material-ui/core/styles';
3-
import MuiAlert, { AlertProps as MuiAlertProps } from '@material-ui/lab/Alert';
2+
import { Theme } from '@mui/material/styles';
3+
import makeStyles from '@mui/styles/makeStyles';
4+
import MuiAlert, { AlertProps as MuiAlertProps } from '@mui/material/Alert';
45

56
/**
67
* Note: You can change these const to control default appearance of the AppAlert component

‎src/components/AppButton/AppButton.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import clsx from 'clsx';
2-
import { Theme, makeStyles } from '@material-ui/core/styles';
3-
import Box from '@material-ui/core/Box';
4-
import Button, { ButtonProps } from '@material-ui/core/Button';
2+
import { Theme } from '@mui/material/styles';
3+
import makeStyles from '@mui/styles/makeStyles';
4+
import Box from '@mui/material/Box';
5+
import Button, { ButtonProps } from '@mui/material/Button';
56
import { buttonStylesByNames, ColorName } from '../../utils/style';
67

78
/**

‎src/components/AppForm/AppForm.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ReactNode, FormHTMLAttributes } from 'react';
2-
import { Grid } from '@material-ui/core';
3-
import { Theme, makeStyles } from '@material-ui/core/styles';
2+
import { Grid } from '@mui/material';
3+
import { Theme } from '@mui/material/styles';
4+
import makeStyles from '@mui/styles/makeStyles';
45
import { formStyle } from '../../utils/style';
56

67
export const useStyles = makeStyles((theme: Theme) => ({

‎src/components/AppIcon/AppIcon.tsx‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
1-
import { SvgIcon } from '@material-ui/core';
1+
import { SvgIcon } from '@mui/material';
22
// SVG assets
33
import { ReactComponent as LogoIcon } from './logo.svg';
44
// Material Icons
5-
import DefaultIcon from '@material-ui/icons/MoreHoriz';
6-
import SettingsIcon from '@material-ui/icons/Settings';
7-
import VisibilityIcon from '@material-ui/icons/Visibility';
8-
import VisibilityOffIcon from '@material-ui/icons/VisibilityOff';
9-
import MenuIcon from '@material-ui/icons/Menu';
10-
import CloseIcon from '@material-ui/icons/Close';
11-
import DayNightIcon from '@material-ui/icons/Brightness4';
12-
import NightIcon from '@material-ui/icons/Brightness3';
13-
import DayIcon from '@material-ui/icons/Brightness5';
14-
import SearchIcon from '@material-ui/icons/Search';
15-
import InfoIcon from '@material-ui/icons/Info';
16-
import HomeIcon from '@material-ui/icons/Home';
17-
import AccountCircle from '@material-ui/icons/AccountCircle';
18-
import PersonAddIcon from '@material-ui/icons/PersonAdd';
19-
import PersonIcon from '@material-ui/icons/Person';
20-
import ExitToAppIcon from '@material-ui/icons/ExitToApp';
21-
import NotificationsIcon from '@material-ui/icons/NotificationsOutlined';
5+
import DefaultIcon from '@mui/icons-material/MoreHoriz';
6+
import SettingsIcon from '@mui/icons-material/Settings';
7+
import VisibilityIcon from '@mui/icons-material/Visibility';
8+
import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
9+
import MenuIcon from '@mui/icons-material/Menu';
10+
import CloseIcon from '@mui/icons-material/Close';
11+
import DayNightIcon from '@mui/icons-material/Brightness4';
12+
import NightIcon from '@mui/icons-material/Brightness3';
13+
import DayIcon from '@mui/icons-material/Brightness5';
14+
import SearchIcon from '@mui/icons-material/Search';
15+
import InfoIcon from '@mui/icons-material/Info';
16+
import HomeIcon from '@mui/icons-material/Home';
17+
import AccountCircle from '@mui/icons-material/AccountCircle';
18+
import PersonAddIcon from '@mui/icons-material/PersonAdd';
19+
import PersonIcon from '@mui/icons-material/Person';
20+
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
21+
import NotificationsIcon from '@mui/icons-material/NotificationsOutlined';
2222

2323
/**
2424
* How to use:

‎src/components/AppIconButton/AppIconButton.tsx‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import clsx from 'clsx';
2-
import { Theme, makeStyles } from '@material-ui/core/styles';
3-
import { PropTypes, Tooltip } from '@material-ui/core';
4-
import IconButton, { IconButtonProps } from '@material-ui/core/IconButton';
2+
import { Theme } from '@mui/material/styles';
3+
import makeStyles from '@mui/styles/makeStyles';
4+
import { PropTypes, Tooltip } from '@mui/material';
5+
import IconButton, { IconButtonProps } from '@mui/material/IconButton';
56
import { ColorName, buttonStylesByNames } from '../../utils/style';
67
import AppIcon from '../AppIcon';
78

@@ -36,12 +37,20 @@ const AppIconButton: React.FC<Props> = ({ color, className, children, disabled,
3637
const colorButton = getValidMuiColor(color);
3738

3839
const renderIcon = () => (
39-
<IconButton className={classButton} color={colorButton} disabled={disabled} {...restOfProps}>
40+
<IconButton
41+
className={classButton}
42+
color={colorButton}
43+
disabled={disabled}
44+
{...restOfProps}
45+
// size="large" TODO: was added by CodeMod, do we need it?
46+
>
4047
<AppIcon icon={icon} />
4148
{children}
4249
</IconButton>
4350
);
4451

52+
// TODO: in MUI 5.x Tooltips are now interactive by default. We can optimize the rendering mess :)
53+
4554
// When title is set, wrap te IconButton with Tooltip.
4655
// Note: when IconButton is disabled the Tooltip is not working, so we don't need it
4756
if (title && !disabled) {

‎src/components/AppLink/AppLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { forwardRef, ReactNode } from 'react';
22
import { Link as RouterLink } from 'react-router-dom';
3-
import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
3+
import MuiLink, { LinkProps as MuiLinkProps } from '@mui/material/Link';
44

55
const DEFAULT_APP_LINK_COLOR = 'textSecondary'; // 'primary' // 'secondary'
66
const DEFAULT_APP_LINK_UNDERLINE = 'hover'; // 'always

‎src/components/SideBar/SideBar.tsx‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import { useCallback } from 'react';
22
import clsx from 'clsx';
3-
import Divider from '@material-ui/core/Divider';
4-
import Drawer, { DrawerProps } from '@material-ui/core/Drawer';
5-
import FormControlLabel from '@material-ui/core/FormControlLabel';
6-
import Switch from '@material-ui/core/Switch';
7-
import Tooltip from '@material-ui/core/Tooltip';
8-
import { Theme, makeStyles } from '@material-ui/core/styles';
3+
import Divider from '@mui/material/Divider';
4+
import Drawer, { DrawerProps } from '@mui/material/Drawer';
5+
import FormControlLabel from '@mui/material/FormControlLabel';
6+
import Switch from '@mui/material/Switch';
7+
import Tooltip from '@mui/material/Tooltip';
8+
import { Theme } from '@mui/material/styles';
9+
import makeStyles from '@mui/styles/makeStyles';
910
import { useAppStore } from '../../store/AppStore';
1011
import { AppIconButton } from '../../components';
1112
import UserInfo from '../UserInfo/UserInfo';
@@ -60,7 +61,7 @@ const SideBar: React.FC<Props> = ({ anchor, className, open, variant, items, onC
6061

6162
const handleSwitchDarkMode = useCallback(() => {
6263
dispatch({
63-
type: 'SET_DARK_MODE',
64+
type: 'DARK_MODE',
6465
darkMode: !state.darkMode,
6566
payload: !state.darkMode,
6667
});

‎src/components/SideBar/SideBarLink.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import { forwardRef } from 'react';
22
import clsx from 'clsx';
33
import { NavLink, NavLinkProps } from 'react-router-dom';
4-
import { Theme, makeStyles } from '@material-ui/core/styles';
4+
import { Theme } from '@mui/material/styles';
5+
6+
import makeStyles from '@mui/styles/makeStyles';
57

68
const useStyles = makeStyles((theme: Theme) => ({
79
root: {

‎src/components/SideBar/SideBarNavigation.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
import clsx from 'clsx';
2-
import Button from '@material-ui/core/Button';
3-
import List from '@material-ui/core/List';
4-
import ListItem from '@material-ui/core/ListItem';
5-
import { Theme, makeStyles } from '@material-ui/core/styles';
2+
import Button from '@mui/material/Button';
3+
import List from '@mui/material/List';
4+
import ListItem from '@mui/material/ListItem';
5+
import { Theme } from '@mui/material/styles';
6+
import makeStyles from '@mui/styles/makeStyles';
67
import AppIcon from '../AppIcon';
78
import SideBarLink from './SideBarLink';
89
import { LinkToPage } from '../../utils/type';

0 commit comments

Comments
 (0)