wednesday-solutions · amartya-ws · Feb 22, 2023 · Feb 24, 2023 · Mar 4, 2023 · Mar 4, 2023
diff --git a/.env b/.env
@@ -1 +1 @@
-SPACEX_URL=https://spacex-production.up.railway.app/
+SPACEX_URL=https://spacex-production.up.railway.app/
diff --git a/.env.development b/.env.development
@@ -1 +1,2 @@
 SPACEX_URL=https://spacex-production.up.railway.app/
+
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -8,7 +8,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [18.x]
 
     steps:
       - uses: actions/checkout@v2

diff --git a/.stylelintrc b/.stylelintrc
@@ -1,7 +1,16 @@
 {
-  "processors": ["stylelint-processor-styled-components"],
   "extends": [
-    "stylelint-config-recommended",
-    "stylelint-config-styled-components"
+    "stylelint-config-recommended"
+  ],
+  "overrides": [
+    {
+      "files": [
+        "**/*.js"
+      ],
+      "customSyntax": "@stylelint/postcss-css-in-js",
+      "rules": {
+        "string-quotes": "single"
+      }
+    }
   ]
 }
diff --git a/README.md b/README.md
@@ -101,18 +101,18 @@ An enterprise react template application showcasing - Testing strategies, Global
   - [app/utils/graphqlUtils.ts](app/utils/graphqlUtils.ts)
   - [app/containers/HomeContainer/saga.ts](app/containers/HomeContainer/saga.ts)
 
-## Styling using styled-components
+## Styling using emotion
 
-- Styling components using [Styled Components](https://styled-components.com)
+- Styling components using [Emotion](https://emotion.sh/)
 
   Take a look at the following files
 
   - [app/components/T/index.tsx](app/components/T/index.tsx)
   - [app/containers/HomeContainer/index.tsx](app/containers/HomeContainer/index.tsx)
 
-## 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
 
@@ -201,7 +201,6 @@ An enterprise react template application showcasing - Testing strategies, Global
   - [app/services/tests/repoApi.test.ts](app/services/tests/repoApi.test.ts)
   - [app/components/T/tests/index.test.tsx](app/components/T/tests/index.test.tsx)
 
-
 ## Misc
 
 ### Aliasing

diff --git a/app/components/Clickable/index.tsx b/app/components/Clickable/index.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import T from '@components/T';
 
 const StyledClickable = styled.div`

diff --git a/app/components/Clickable/tests/__snapshots__/index.test.tsx.snap b/app/components/Clickable/tests/__snapshots__/index.test.tsx.snap
@@ -1,14 +1,27 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Clickable /> component tests should render and match the snapshot 1`] = `
+.emotion-0 {
+  color: #1890ff;
+}
+
+.emotion-0:hover {
+  cursor: pointer;
+}
+
+.emotion-2.emotion-2 {
+  font-size: 1rem;
+  font-weight: normal;
+}
+
 <body>
   <div>
     <div
-      class="Clickable__StyledClickable-sc-1vn3tbu-0 mgTtM"
+      class="emotion-0 emotion-1"
       data-testid="clickable"
     >
       <p
-        class="T__StyledText-znbtqz-0 TmgHn"
+        class="emotion-2 emotion-3"
         data-testid="t"
       >
         List of launches

diff --git a/app/components/ErrorHandler/index.tsx b/app/components/ErrorHandler/index.tsx
@@ -1,12 +1,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { Card } from 'antd';
+import styled from '@emotion/styled';
+import { Card } from '@mui/material';
 import { T, If } from '@components';
 
 const CustomCard = styled(Card)`
   && {
     margin: 20px 0;
+    padding: 20px;
+    padding-top: 0;
     color: ${(props) => props.color};
   }
 `;
@@ -20,7 +22,7 @@ export function ErrorHandler({ loading, launchListError }: ErrorHandlerTypes) {
   if (!loading) {
     return (
       <If condition={launchListError} otherwise={<T data-testid="default-message" id={launchListError} />}>
-        <CustomCard data-testid="error-card">
+        <CustomCard data-testid="error-card" variant="outlined">
           <T data-testid="error-message" text={launchListError} />
         </CustomCard>
       </If>

diff --git a/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap b/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap
@@ -1,22 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<ErrorHandler /> should render and match the snapshot 1`] = `
+.emotion-1 {
+  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;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  overflow: hidden;
+}
+
+.emotion-1.emotion-1 {
+  margin: 20px 0;
+  padding: 20px;
+  padding-top: 0;
+}
+
+.emotion-2.emotion-2 {
+  font-size: 1rem;
+  font-weight: normal;
+}
+
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered ErrorHandler__CustomCard-sc-1rh55w4-0 eOLbNC"
+      class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded MuiCard-root emotion-0 emotion-1"
       data-testid="error-card"
     >
-      <div
-        class="ant-card-body"
+      <p
+        class="emotion-2 emotion-3"
+        data-testid="error-message"
       >
-        <p
-          class="T__StyledText-znbtqz-0 TmgHn"
-          data-testid="error-message"
-        >
-          something_went_wrong
-        </p>
-      </div>
+        something_went_wrong
+      </p>
     </div>
   </div>
 </body>

diff --git a/app/components/For/index.tsx b/app/components/For/index.tsx
@@ -6,7 +6,7 @@
 
 import React, { PropsWithChildren } from 'react';
 import Proptypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Property } from 'csstype';
 
 type FlexContainerProps = {

diff --git a/app/components/Header/index.tsx b/app/components/Header/index.tsx
@@ -4,26 +4,24 @@
  *
  */
 import React from 'react';
-import { Layout } from 'antd';
-import styled from 'styled-components';
-import { fonts, colors, media } from '@themes/index';
+import styled from '@emotion/styled';
+import { AppBar, Toolbar } from '@mui/material';
+import { Link } from 'react-router-dom';
+import { fonts, colors } from '@themes/index';
 import T from '@components/T';
 import logo from '@images/icon-512x512.png';
-import { Link } from 'react-router-dom';
 
-const StyledHeader = styled(Layout.Header)`
+const StyledHeader = styled(AppBar)`
   && {
-    &.ant-layout-header {
-      padding: 0 1rem;
-      height: ${(props) => props.theme.headerHeight};
-      align-items: center;
-      justify-content: center;
-      background-color: ${colors.primary};
-      gap: 1rem;
-      ${media.lessThan('mobile')`
-      padding-left: ${(props) => props.theme.sidebarWidth}
-      `}
-    }
+    padding: 0 1rem;
+    height: ${({ theme }: any) => theme.baseLayout.headerHeight};
+    align-items: center;
+    justify-content: center;
+    background-color: ${colors.primary};
+    gap: 1rem;
+    ${({ theme }: any) => `${theme.breakpoints.down('sm')} {
+      padding-left: ${({ theme }: any) => theme.baseLayout.sidebarWidth};
+    }`};
     display: flex;
   }
 `;
@@ -32,14 +30,14 @@ const Logo = styled.img`
   height: 5rem;
   width: auto;
   object-fit: contain;
-  ${media.lessThan('tablet')`
+  ${({ theme }: any) => `${theme.breakpoints.down('sm')} {
     height: 4rem;
-  `}
+  }`};
 `;
 
 const Title = styled(T)`
   && {
-    margin-bottom: 0;
+    margin: 0;
     ${fonts.dynamicFontSize(fonts.size.xRegular, 1, 0.5)};
     display: flex;
     align-self: center;
@@ -49,11 +47,13 @@ const Title = styled(T)`
 
 const Header: React.FC = () => {
   return (
-    <StyledHeader data-testid="header">
-      <Link to="/">
-        <Logo alt="logo" src={logo} />
-      </Link>
-      <Title type="heading" id="wednesday_solutions" />
+    <StyledHeader data-testid="header" position="static">
+      <Toolbar sx={{ display: 'flex', gap: '1rem' }}>
+        <Link to="/">
+          <Logo alt="logo" src={logo} />
+        </Link>
+        <Title type="heading" id="wednesday_solutions" />
+      </Toolbar>
     </StyledHeader>
   );
 };