feat: replace antd with mui

.babelrc

@@ -2,11 +2,49 @@
   "presets": ["next/babel"],
   "env": {
     "development": {
-      "plugins": [["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]],
+      "plugins": [
+        [
+          "babel-plugin-import",
+          {
+            "libraryName": "@mui/material",
+            "libraryDirectory": "",
+            "camel2DashComponentName": false
+          },
+          "core"
+        ],
+        [
+          "babel-plugin-import",
+          {
+            "libraryName": "@mui/icons-material",
+            "libraryDirectory": "",
+            "camel2DashComponentName": false
+          },
+          "icons"
+        ]
+      ],
       "presets": ["next/babel"]
     },
     "production": {
-      "plugins": [["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]],
+      "plugins": [
+        [
+          "babel-plugin-import",
+          {
+            "libraryName": "@mui/material",
+            "libraryDirectory": "",
+            "camel2DashComponentName": false
+          },
+          "core"
+        ],
+        [
+          "babel-plugin-import",
+          {
+            "libraryName": "@mui/icons-material",
+            "libraryDirectory": "",
+            "camel2DashComponentName": false
+          },
+          "icons"
+        ]
+      ],
       "presets": [
         [
           "next/babel",
@@ -21,5 +59,24 @@
       ]
     }
   },
-  "plugins": [["babel-plugin-styled-components", { "ssr": true, "displayName": true, "preprocess": false }]]
+  "plugins": [
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "core"
+    ],
+    [
+      "babel-plugin-import",
+      {
+        "libraryName": "@mui/icons-material",
+        "libraryDirectory": "",
+        "camel2DashComponentName": false
+      },
+      "icons"
+    ]
+  ]
 }

.eslintrc.js

@@ -10,14 +10,22 @@ module.exports = {
     'jest/globals': true
   },
   extends: ['eslint:recommended', 'prettier', 'plugin:import/recommended', 'next'],
-  plugins: ['prettier', 'jest'],
+  plugins: ['prettier', 'jest', '@emotion'],
   rules: {
     'prettier/prettier': ['error', prettierOptions],
     'import/no-webpack-loader-syntax': 0,
     'react/display-name': 0,
     'react/react-in-jsx-scope': 'off',
     curly: ['error', 'all'],
-    'no-console': ['error', { allow: ['error'] }]
+    'no-console': ['error', { allow: ['error'] }],
+    'no-restricted-imports': [
+      'error',
+      {
+        patterns: ['@mui/*/*/*']
+      }
+    ],
+    '@emotion/jsx-import': 'error',
+    '@emotion/pkg-renaming': 'error'
   },
   globals: {
     GLOBAL: false,

.stylelintrc

@@ -1,7 +1,12 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
-  "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+  "extends": ["stylelint-config-recommended"],
+  "overrides": [
+    {
+      "files": ["**/*.js"],
+      "customSyntax": "@stylelint/postcss-css-in-js",
+      "rules": {
+        "string-quotes": "single"
+      }
+    }
   ]
 }

README.md

@@ -40,7 +40,7 @@ An enterprise Next.js template application showcasing - Testing strategies, Glob
 - Side Effects using `redux-saga`
 - API calls using `api-sauce`
 - Styling using emotion
-- Reusing components from Ant design
+- Reusing components from Material UI
 - Translations using `react-intl`
 - Custom enviornments using `emv-cmd`
 - Image loading using `next-images`
@@ -91,9 +91,9 @@ An enterprise Next.js template application showcasing - Testing strategies, Glob
   - [pages/index.js](pages/index.js)
   - [pages/\_document.js](pages/_document.js)
 
-## Using antd as the component library
+## Using Material UI as the component library
 
-- Reusing components from [Ant design](https://ant.design)
+- Reusing components from [Material UI](https://mui.com)
 
   Take a look at the following files
 

app/components/ErrorState/index.js

@@ -11,6 +11,7 @@ import PropTypes from 'prop-types';
 import { injectIntl } from 'react-intl';
 import T from '@components/Text';
 import { CustomCard } from '../styled/repos';
+import { CardHeader } from '@mui/material';
 
 const ErrorState = (props) => {
   const { intl, reposError, loading, reposData } = props;
@@ -26,11 +27,12 @@ const ErrorState = (props) => {
   return (
     !loading &&
     repoError && (
-      <CustomCard
-        color={reposError ? 'red' : 'grey'}
-        title={intl.formatMessage({ id: 'repo_list' })}
-        data-testid="error-state"
-      >
+      <CustomCard color={reposError ? 'red' : 'grey'} data-testid="error-state">
+        <CardHeader
+          title={intl.formatMessage({ id: 'repo_list' })}
+          titleTypographyProps={{ fontSize: '1.25rem' }}
+          sx={{ padding: '1.25rem' }}
+        />
         <T id={repoError} />
       </CustomCard>
     )
@@ -40,13 +42,11 @@ const ErrorState = (props) => {
 ErrorState.propTypes = {
   intl: PropTypes.any,
   loading: PropTypes.bool.isRequired,
-  reposData: PropTypes.arrayOf(
-    PropTypes.shape({
-      totalCount: PropTypes.number,
-      incompleteResults: PropTypes.bool,
-      items: PropTypes.array
-    })
-  ),
+  reposData: PropTypes.shape({
+    totalCount: PropTypes.number,
+    incompleteResults: PropTypes.bool,
+    items: PropTypes.array
+  }),
   reposError: PropTypes.object,
   repoName: PropTypes.string,
   recommendations: PropTypes.arrayOf(

app/components/ErrorState/tests/__snapshots__/index.test.js.snap

@@ -1,46 +1,83 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ErrorState /> should render and match the snapshot 1`] = `
+.emotion-0 {
+  background-color: #fff;
+  color: rgba(0, 0, 0, 0.87);
+  -webkit-transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 4px;
+  box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12);
+  overflow: hidden;
+}
+
 .emotion-0.emotion-0 {
-  margin: 20px 0;
+  margin: 1rem 0;
+  padding: 1rem;
   color: grey;
   color: grey;
 }
 
 .emotion-1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 16px;
+  padding: 1.25rem;
+}
+
+.emotion-2 {
+  -webkit-flex: 1 1 auto;
+  -ms-flex: 1 1 auto;
+  flex: 1 1 auto;
+}
+
+.emotion-3 {
+  margin: 0;
+  font-family: "Roboto","Helvetica","Arial",sans-serif;
+  font-weight: 400;
+  font-size: 1.5rem;
+  line-height: 1.334;
+  letter-spacing: 0em;
+  display: block;
+  font-size: 1.25rem;
+}
+
+.emotion-4 {
   white-space: pre-line;
 }
 
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered emotion-0"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root emotion-0"
       color="grey"
       data-testid="error-state"
     >
       <div
-        class="ant-card-head"
+        class="MuiCardHeader-root emotion-1"
       >
         <div
-          class="ant-card-head-wrapper"
+          class="MuiCardHeader-content emotion-2"
         >
-          <div
-            class="ant-card-head-title"
+          <span
+            class="MuiTypography-root MuiTypography-h5 MuiCardHeader-title emotion-3"
           >
             Repository List
-          </div>
+          </span>
         </div>
       </div>
-      <div
-        class="ant-card-body"
+      <span
+        class="emotion-4"
+        data-testid="text"
       >
-        <span
-          class="emotion-1"
-          data-testid="text"
-        >
-          Search for a repository by entering it's name in the search box
-        </span>
-      </div>
+        Search for a repository by entering it's name in the search box
+      </span>
     </div>
   </div>
 </body>

app/components/Recommended/index.js

@@ -5,22 +5,22 @@
  */
 
 import React from 'react';
-import { Row, Col } from 'antd';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { ClickableTags } from '../styled/repos';
+import { Box } from '@mui/material';
 
 const Recommended = (props) => {
   const { recommendations } = props;
   const router = useRouter();
   return (
-    <Row data-testid="recommended">
+    <Box sx={{ display: 'flex', gap: '10px' }} data-testid="recommended">
       {recommendations.map(({ id, name }) => (
-        <Col key={id} onClick={() => router.push(`/info/${name}`)}>
-          <ClickableTags>{name}</ClickableTags>
-        </Col>
+        <div key={id} onClick={() => router.push(`/info/${name}`)}>
+          <ClickableTags label={name} size="small" clickable />
+        </div>
       ))}
-    </Row>
+    </Box>
   );
 };