Skip to content

Commit abea1ac

Browse files
karpolankarpolan
authored
Merge pull request #3 from karpolan/upadte-to-MUI-5.x
Update to MUI 5.x
2 parents 0001b60 + 4b12d4e commit abea1ac

33 files changed

+3723
-19491
lines changed

‎package-lock.json‎

Lines changed: 0 additions & 16153 deletions
This file was deleted.

‎package.json‎

Lines changed: 23 additions & 21 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",
25-
"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"
22+
"@emotion/react": "latest",
23+
"@emotion/styled": "latest",
24+
"@mui/icons-material": "latest",
25+
"@mui/material": "latest",
26+
"@mui/styles": "latest",
27+
"date-fns": "latest",
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.test.tsx‎

Lines changed: 26 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { render, screen } from '@testing-library/react';
22
import AppButton from './AppButton';
33
import { ColorName } from '../../utils/style';
4+
import { AppThemeProvider } from '../../theme';
45

56
/**
67
* Test specific color for AppButton
@@ -11,7 +12,11 @@ import { ColorName } from '../../utils/style';
1112
function testButtonColor(colorName: string, expectedClassName = colorName, ignoreClassName = false) {
1213
it(`supports "${colorName}" color`, async () => {
1314
let text = `${colorName} button`;
14-
await render(<AppButton color={colorName as ColorName}>{text}</AppButton>);
15+
await render(
16+
<AppThemeProvider>
17+
<AppButton color={colorName as ColorName}>{text}</AppButton>
18+
</AppThemeProvider>
19+
);
1520

1621
let span = await screen.getByText(text); // <span> with specific text
1722
expect(span).toBeDefined();
@@ -30,7 +35,11 @@ describe('AppButton component', () => {
3035

3136
it('renders itself', async () => {
3237
let text = 'sample button';
33-
await render(<AppButton>{text}</AppButton>);
38+
await render(
39+
<AppThemeProvider>
40+
<AppButton>{text}</AppButton>
41+
</AppThemeProvider>
42+
);
3443
let span = await screen.getByText(text);
3544
expect(span).toBeDefined();
3645
expect(span).toHaveTextContent(text);
@@ -54,7 +63,11 @@ describe('AppButton component', () => {
5463
it('supports className property', async () => {
5564
let text = 'button with specific class';
5665
let className = 'someClassName';
57-
await render(<AppButton className={className}>{text}</AppButton>);
66+
await render(
67+
<AppThemeProvider>
68+
<AppButton className={className}>{text}</AppButton>
69+
</AppThemeProvider>
70+
);
5871
let span = await screen.getByText(text);
5972
expect(span).toBeDefined();
6073
let button = await span.closest('button'); // parent <button> element
@@ -64,7 +77,11 @@ describe('AppButton component', () => {
6477

6578
it('supports label property', async () => {
6679
let text = 'button with label';
67-
await render(<AppButton label={text} />);
80+
await render(
81+
<AppThemeProvider>
82+
<AppButton label={text} />
83+
</AppThemeProvider>
84+
);
6885
let span = await screen.getByText(text);
6986
expect(span).toBeDefined();
7087
let button = await span.closest('button'); // parent <button> element
@@ -73,7 +90,11 @@ describe('AppButton component', () => {
7390

7491
it('supports text property', async () => {
7592
let text = 'button with text';
76-
await render(<AppButton text={text} />);
93+
await render(
94+
<AppThemeProvider>
95+
<AppButton text={text} />
96+
</AppThemeProvider>
97+
);
7798
let span = await screen.getByText(text);
7899
expect(span).toBeDefined();
79100
let button = await span.closest('button'); // parent <button> element

‎src/components/AppButton/AppButton.tsx‎

Lines changed: 6 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 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
/**
@@ -55,13 +56,14 @@ const AppButton: React.FC<Props> = ({
5556
mr = APP_BUTTON_MARGIN,
5657
text,
5758
underline = 'none',
59+
variant = APP_BUTTON_VARIANT,
5860
...restOfProps
5961
}) => {
6062
const classes = useStyles();
6163
const classButton = clsx(classes[color as ColorName], className);
6264
return (
6365
<Box {...{ m, mt, mb, ml, mr }} className={classes.box}>
64-
<Button className={classButton} variant={APP_BUTTON_VARIANT} {...{ ...restOfProps, underline }}>
66+
<Button className={classButton} variant={variant} {...{ ...restOfProps, underline }}>
6567
{children || label || text}
6668
</Button>
6769
</Box>

‎src/components/AppForm/AppForm.tsx‎

Lines changed: 4 additions & 5 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 { Box, 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) => ({
@@ -21,9 +22,7 @@ const AppForm: React.FC<Props> = ({ children, ...resOfProps }) => {
2122
return (
2223
<form {...resOfProps}>
2324
<Grid container direction="column" alignItems="center">
24-
<Grid item className={classes.formBody}>
25-
{children}
26-
</Grid>
25+
<Box className={classes.formBody}>{children}</Box>
2726
</Grid>
2827
</form>
2928
);

‎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: 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 { 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

‎src/components/AppLink/AppLink.tsx‎

Lines changed: 2 additions & 2 deletions
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
@@ -26,7 +26,7 @@ const AppLink = forwardRef<any, Props>(
2626
children,
2727
color = DEFAULT_APP_LINK_COLOR,
2828
underline = DEFAULT_APP_LINK_UNDERLINE,
29-
to,
29+
to = '',
3030
href,
3131
openInNewTab = Boolean(href), // Open external links in new Tab by default
3232
...restOfProps

‎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
});

0 commit comments

Comments
 (0)