Skip to content

Commit fa6c197

Browse files
praveenkumar1798Praveen Kumar
praveenkumar1798
and
Praveen Kumar
authored
feat: replace Ant Design with Material UI library (#174)
* feat: replace Ant Design with Material UI library * chore: move mui imports to the top Co-authored-by: Praveen Kumar <praveenkumar@Praveens-MacBook-Pro.local>
1 parent 2486b6a commit fa6c197

17 files changed

Lines changed: 696 additions & 945 deletions

File tree

‎.eslintrc.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,13 @@ module.exports = {
2121
curly: ['error', 'all'],
2222
'no-console': ['error', { allow: ['error'] }],
2323
'max-lines': ['error', { max: 300, skipBlankLines: true, skipComments: true }],
24-
'prettier/prettier': ['error', prettierOptions]
24+
'prettier/prettier': ['error', prettierOptions],
25+
'no-restricted-imports': [
26+
'error',
27+
{
28+
patterns: ['@mui/*/*/*']
29+
}
30+
]
2531
},
2632
globals: {
2733
GLOBAL: false,

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -100,9 +100,9 @@ An enterprise react template application showcasing - Testing strategies, Global
100100
- [app/components/T/index.js](app/components/T/index.js)
101101
- [app/containers/HomeContainer/index.js](app/containers/HomeContainer/index.js)
102102

103-
## Using antd as the component library
103+
## Using Material UI as the component library
104104

105-
- Reusing components from [Ant design](https://ant.design)
105+
- Reusing components from [Material UI](https://mui.com)
106106

107107
Take a look at the following files
108108

‎app/components/Header/index.js‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,21 +5,20 @@
55
*/
66

77
import React from 'react';
8-
import { Layout } from 'antd';
8+
import { AppBar } from '@mui/material';
99
import styled from 'styled-components';
1010
import { injectIntl } from 'react-intl';
1111
import { fonts, colors } from '@themes';
1212
import T from '@components/T';
1313
import logo from '@images/icon-512x512.png';
14-
const StyledHeader = styled(Layout.Header)`
14+
const StyledHeader = styled(AppBar)`
1515
&& {
16-
&.ant-layout-header {
17-
padding: 0 1rem;
18-
height: 7rem;
19-
}
16+
padding: 0 1rem;
17+
height: 7rem;
2018
display: flex;
2119
justify-content: center;
2220
background-color: ${colors.primary};
21+
flex-direction: row;
2322
}
2423
`;
2524
const Logo = styled.img`
@@ -37,7 +36,7 @@ const Title = styled(T)`
3736
`;
3837
function Header(props) {
3938
return (
40-
<StyledHeader {...props} data-testid="header">
39+
<StyledHeader position="relative" {...props} data-testid="header">
4140
<Logo alt="logo" src={logo} width="auto" height="5rem" />
4241
<Title type="heading" id="wednesday_solutions" />
4342
</StyledHeader>

‎app/components/Header/tests/__snapshots__/index.test.js.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ exports[`<Header /> should render and match the snapshot 1`] = `
44
<body>
55
<div>
66
<header
7-
class="ant-layout-header Header__StyledHeader-wp2jxc-0 kCacbk"
7+
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionRelative Header__StyledHeader-wp2jxc-0 bCCjYc css-1vazdj7-MuiPaper-root-MuiAppBar-root"
88
data-testid="header"
99
intl="[object Object]"
1010
>

‎app/components/ProtectedRoute/tests/__snapshots__/index.test.js.snap‎

Lines changed: 53 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -17,102 +17,78 @@ exports[`<ProtectedRoute /> should render and match the snapshot 1`] = `
1717
</p>
1818
</div>
1919
<div
20-
class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 liNnZz css-dev-only-do-not-override-k83k30"
20+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root HomeContainer__CustomCard-l0s8pp-0 bhbYIx css-bhp9pd-MuiPaper-root-MuiCard-root"
2121
maxwidth="500"
22+
title="Repository Search"
2223
>
24+
<p
25+
class="T__StyledText-gjlic1-0 gGweRc"
26+
data-testid="t"
27+
>
28+
Get details of repositories
29+
</p>
2330
<div
24-
class="ant-card-head"
31+
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-adornedEnd HomeContainer__StyledOutlinedInput-l0s8pp-4 huJjiR css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
2532
>
33+
<input
34+
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
35+
data-testid="search-bar"
36+
type="text"
37+
value=""
38+
/>
2639
<div
27-
class="ant-card-head-wrapper"
40+
class="MuiInputAdornment-root MuiInputAdornment-positionEnd css-1laqsz7-MuiInputAdornment-root"
2841
>
29-
<div
30-
class="ant-card-head-title"
42+
<button
43+
aria-label="search repos"
44+
class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
45+
data-testid="search-icon"
46+
tabindex="0"
47+
type="button"
3148
>
32-
Repository Search
33-
</div>
49+
<svg
50+
aria-hidden="true"
51+
class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-i4bv87-MuiSvgIcon-root"
52+
data-testid="SearchIcon"
53+
focusable="false"
54+
viewBox="0 0 24 24"
55+
>
56+
<path
57+
d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
58+
/>
59+
</svg>
60+
<span
61+
class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
62+
/>
63+
</button>
3464
</div>
35-
</div>
36-
<div
37-
class="ant-card-body"
38-
>
39-
<p
40-
class="T__StyledText-gjlic1-0 gGweRc"
41-
data-testid="t"
65+
<fieldset
66+
aria-hidden="true"
67+
class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
4268
>
43-
Get details of repositories
44-
</p>
45-
<span
46-
class="ant-input-group-wrapper ant-input-search css-dev-only-do-not-override-k83k30"
47-
>
48-
<span
49-
class="ant-input-wrapper ant-input-group css-dev-only-do-not-override-k83k30"
69+
<legend
70+
class="css-ihdtdm"
5071
>
51-
<input
52-
class="ant-input css-dev-only-do-not-override-k83k30"
53-
data-testid="search-bar"
54-
type="text"
55-
value=""
56-
/>
5772
<span
58-
class="ant-input-group-addon"
73+
class="notranslate"
5974
>
60-
<button
61-
class="ant-btn css-dev-only-do-not-override-k83k30 ant-btn-default ant-btn-icon-only ant-input-search-button"
62-
type="button"
63-
>
64-
<span
65-
aria-label="search"
66-
class="anticon anticon-search"
67-
role="img"
68-
>
69-
<svg
70-
aria-hidden="true"
71-
data-icon="search"
72-
fill="currentColor"
73-
focusable="false"
74-
height="1em"
75-
viewBox="64 64 896 896"
76-
width="1em"
77-
>
78-
<path
79-
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
80-
/>
81-
</svg>
82-
</span>
83-
</button>
75+
​
8476
</span>
85-
</span>
86-
</span>
77+
</legend>
78+
</fieldset>
8779
</div>
8880
</div>
8981
<div
90-
class="ant-card ant-card-bordered HomeContainer__CustomCard-l0s8pp-0 fCikHd css-dev-only-do-not-override-k83k30"
82+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root HomeContainer__CustomCard-l0s8pp-0 dqPlQv css-bhp9pd-MuiPaper-root-MuiCard-root"
9183
color="grey"
84+
title="Repository List"
9285
>
93-
<div
94-
class="ant-card-head"
95-
>
96-
<div
97-
class="ant-card-head-wrapper"
98-
>
99-
<div
100-
class="ant-card-head-title"
101-
>
102-
Repository List
103-
</div>
104-
</div>
105-
</div>
106-
<div
107-
class="ant-card-body"
86+
<p
87+
class="T__StyledText-gjlic1-0 jOByUY"
88+
data-testid="default-message"
10889
>
109-
<p
110-
class="T__StyledText-gjlic1-0 jOByUY"
111-
data-testid="default-message"
112-
>
113-
Search for a repository by entering it's name in the search box
114-
</p>
115-
</div>
90+
Search for a repository by entering it's name in the search box
91+
</p>
11692
</div>
11793
</div>
11894
</div>

‎app/components/RepoCard/index.js‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,15 @@
77
import React from 'react';
88
import PropTypes from 'prop-types';
99
import styled from 'styled-components';
10-
import { Card } from 'antd';
10+
import { Card } from '@mui/material';
1111
import T from '@components/T';
1212
import If from '@components/If';
1313
import isEmpty from 'lodash/isEmpty';
1414

1515
const CustomCard = styled(Card)`
1616
&& {
17-
margin: 20px 0;
17+
margin: 1rem 0;
18+
padding: 1rem;
1819
}
1920
`;
2021

‎app/components/RepoCard/tests/__snapshots__/index.test.js.snap‎

Lines changed: 18 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,27 @@ exports[`<RepoCard /> should render and match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="ant-card ant-card-bordered RepoCard__CustomCard-sc-3wf6pv-0 hBtxvU css-dev-only-do-not-override-k83k30"
7+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root RepoCard__CustomCard-sc-3wf6pv-0 edIplS css-bhp9pd-MuiPaper-root-MuiCard-root"
88
data-testid="repo-card"
99
>
10-
<div
11-
class="ant-card-body"
10+
<p
11+
class="T__StyledText-gjlic1-0 jOByUY"
12+
data-testid="name-unavailable"
1213
>
13-
<p
14-
class="T__StyledText-gjlic1-0 jOByUY"
15-
data-testid="name-unavailable"
16-
>
17-
Repository name is unavailable
18-
</p>
19-
<p
20-
class="T__StyledText-gjlic1-0 jOByUY"
21-
data-testid="fullName-unavailable"
22-
>
23-
Repository full name unavaiable
24-
</p>
25-
<p
26-
class="T__StyledText-gjlic1-0 jOByUY"
27-
data-testid="stargazers-unavaiable"
28-
>
29-
Repository stars are unavaiable
30-
</p>
31-
</div>
14+
Repository name is unavailable
15+
</p>
16+
<p
17+
class="T__StyledText-gjlic1-0 jOByUY"
18+
data-testid="fullName-unavailable"
19+
>
20+
Repository full name unavaiable
21+
</p>
22+
<p
23+
class="T__StyledText-gjlic1-0 jOByUY"
24+
data-testid="stargazers-unavaiable"
25+
>
26+
Repository stars are unavaiable
27+
</p>
3228
</div>
3329
</div>
3430
</body>

‎app/containers/App/index.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ import { Switch, Route } from 'react-router-dom';
1212
import PropTypes from 'prop-types';
1313
import { Router } from 'react-router';
1414
import map from 'lodash/map';
15-
import { Layout } from 'antd';
1615
import { PersistGate } from 'redux-persist/integration/react';
16+
import { CssBaseline, Container } from '@mui/material';
17+
import { ThemeProvider as MUIThemeProvider, createTheme, StyledEngineProvider } from '@mui/material/styles';
1718
import { routeConfig } from '@app/routeConfig';
18-
import { ThemeProvider } from 'styled-components';
1919
import GlobalStyle from '@app/global-styles';
2020
import { colors } from '@themes';
2121
import Header from '@components/Header';
@@ -29,10 +29,16 @@ import history from '@utils/history';
2929
import configureStore from '@app/configureStore';
3030
import If from '@app/components/If/index';
3131

32-
const theme = {
33-
fg: colors.primary,
34-
bg: colors.secondary
35-
};
32+
const theme = createTheme({
33+
palette: {
34+
primary: {
35+
main: colors.primary
36+
},
37+
secondary: {
38+
main: colors.secondary
39+
}
40+
}
41+
});
3642

3743
export function App() {
3844
const [store, setStore] = useState(null);
@@ -57,33 +63,36 @@ export function App() {
5763
<ErrorBoundary>
5864
<Provider store={store}>
5965
<LanguageProvider messages={translationMessages}>
60-
<ThemeProvider theme={theme}>
61-
<Header />
62-
<Layout.Content>
63-
<For
64-
ParentComponent={(props) => <Switch {...props} />}
65-
of={map(Object.keys(routeConfig))}
66-
renderItem={(routeKey, index) => {
67-
const Component = routeConfig[routeKey].component;
68-
return (
69-
<Route
70-
exact={routeConfig[routeKey].exact}
71-
key={index}
72-
path={routeConfig[routeKey].route}
73-
render={(props) => {
74-
const updatedProps = {
75-
...props,
76-
...routeConfig[routeKey].props
77-
};
78-
return <Component {...updatedProps} />;
79-
}}
80-
/>
81-
);
82-
}}
83-
/>
66+
<StyledEngineProvider injectFirst>
67+
<MUIThemeProvider theme={theme}>
68+
<CssBaseline />
8469
<GlobalStyle />
85-
</Layout.Content>
86-
</ThemeProvider>
70+
<Header />
71+
<Container>
72+
<For
73+
ParentComponent={(props) => <Switch {...props} />}
74+
of={map(Object.keys(routeConfig))}
75+
renderItem={(routeKey, index) => {
76+
const Component = routeConfig[routeKey].component;
77+
return (
78+
<Route
79+
exact={routeConfig[routeKey].exact}
80+
key={index}
81+
path={routeConfig[routeKey].route}
82+
render={(props) => {
83+
const updatedProps = {
84+
...props,
85+
...routeConfig[routeKey].props
86+
};
87+
return <Component {...updatedProps} />;
88+
}}
89+
/>
90+
);
91+
}}
92+
/>
93+
</Container>
94+
</MUIThemeProvider>
95+
</StyledEngineProvider>
8796
</LanguageProvider>
8897
</Provider>
8998
</ErrorBoundary>

0 commit comments

Comments
 (0)