wednesday-solutions · amartya-ws · Feb 22, 2023 · Feb 24, 2023 · Mar 4, 2023 · Mar 4, 2023
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,9 +101,9 @@ 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
 
@@ -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
@@ -4,11 +4,11 @@ exports[`<Clickable /> component tests should render and match the snapshot 1`]
 <body>
   <div>
     <div
-      class="Clickable__StyledClickable-p3uplw-0 kLCJiB"
+      class="css-8v742f erdo1t50"
       data-testid="clickable"
     >
       <p
-        class="T__StyledText-gcrjip-0 gIxZML"
+        class="css-1irx5r2 e17qkzd60"
         data-testid="t"
       >
         List of launches

diff --git a/app/components/ErrorHandler/index.tsx b/app/components/ErrorHandler/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Card } from 'antd';
 import { T, If } from '@components';
 

diff --git a/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap b/app/components/ErrorHandler/tests/__snapshots__/index.test.js.snap
@@ -4,14 +4,14 @@ exports[`<ErrorHandler /> should render and match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered ErrorHandler__CustomCard-lh5a37-0 fOqTqj"
+      class="ant-card ant-card-bordered css-1cd7yd0 ep6oj70"
       data-testid="error-card"
     >
       <div
         class="ant-card-body"
       >
         <p
-          class="T__StyledText-gcrjip-0 gIxZML"
+          class="css-1irx5r2 e17qkzd60"
           data-testid="error-message"
         >
           something_went_wrong

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
@@ -5,24 +5,30 @@
  */
 import React from 'react';
 import { Layout } from 'antd';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
+import { Link } from 'react-router-dom';
 import { fonts, colors, media } from '@themes/index';
 import T from '@components/T';
 import logo from '@images/icon-512x512.png';
-import { Link } from 'react-router-dom';
+import { HEADER_HEIGHT, MIN_SIDEBAR_WIDTH } from '@app/utils/constants';
+
+export const theme = {
+  headerHeight: HEADER_HEIGHT,
+  sidebarWidth: MIN_SIDEBAR_WIDTH
+};
 
 const StyledHeader = styled(Layout.Header)`
   && {
     &.ant-layout-header {
       padding: 0 1rem;
-      height: ${(props) => props.theme.headerHeight};
+      height: ${theme.headerHeight};
       align-items: center;
       justify-content: center;
       background-color: ${colors.primary};
       gap: 1rem;
-      ${media.lessThan('mobile')`
-      padding-left: ${(props) => props.theme.sidebarWidth}
-      `}
+      @media (min-width: ${media.tablet}) {
+        padding-left: ${theme.sidebarWidth};
+      }
     }
     display: flex;
   }
@@ -32,9 +38,9 @@ const Logo = styled.img`
   height: 5rem;
   width: auto;
   object-fit: contain;
-  ${media.lessThan('tablet')`
+  @media (min-width: ${media.tablet}) {
     height: 4rem;
-  `}
+  }
 `;
 
 const Title = styled(T)`

diff --git a/app/components/Header/tests/__snapshots__/index.test.tsx.snap b/app/components/Header/tests/__snapshots__/index.test.tsx.snap
@@ -4,20 +4,20 @@ exports[`<Header /> should render and match the snapshot 1`] = `
 <body>
   <div>
     <header
-      class="ant-layout-header Header__StyledHeader-a7tfu0-0 hCGNY"
+      class="ant-layout-header css-afors1 e1x0oejn2"
       data-testid="header"
     >
       <a
         href="/"
       >
         <img
           alt="logo"
-          class="Header__Logo-a7tfu0-1 hbWjcY"
+          class="css-gwc5j9 e1x0oejn1"
           src="IMAGE_MOCK"
         />
       </a>
       <p
-        class="T__StyledText-gcrjip-0 emthK Header__Title-a7tfu0-2 elUMIm"
+        class="e1x0oejn0 css-6k35l8 e17qkzd60"
         data-testid="t"
       >
         Wednesday Solutions

diff --git a/app/components/LaunchDetails/index.tsx b/app/components/LaunchDetails/index.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled, { css } from 'styled-components';
+import styled from '@emotion/styled';
+import { css } from '@emotion/react';
 import { If, T, For } from '@components';
 import isEmpty from 'lodash-es/isEmpty';
 import { colors, media } from '@app/themes';
@@ -15,13 +16,12 @@ const LaunchDetailsCard = styled(Card)`
       flex-direction: column;
       justify-content: space-between;
       color: ${(props) => props.color};
-
-      ${media.greaterThan('tablet')`
-        flex-direction: row;
-        gap: 1rem;
-      `}
     }
     margin: 1.5rem;
+    @media (min-width: ${media.tablet}) {
+      flex-direction: row;
+      gap: 1rem;
+    }
     background-color: ${colors.cardBg};
   }
 `;
@@ -30,10 +30,11 @@ const CustomImage = styled.img`
   && {
     width: 100%;
     height: auto;
-    ${media.greaterThan('tablet')`
+    @media (min-width: ${media.tablet}) {
       width: 50%;
       max-height: 698px;
-      object-fit: cover;`}
+      object-fit: cover;
+    }
   }
 `;
 
@@ -44,9 +45,9 @@ const DetailsCard = styled.div`
     justify-content: center;
     gap: 1rem;
     margin: 3rem 0;
-    ${media.greaterThan('tablet')`
+    @media (min-width: ${media.tablet}) {
       width: 50%;
-   `}
+    }
   }
 `;
 

diff --git a/app/components/LaunchDetails/tests/__snapshots__/index.test.tsx.snap b/app/components/LaunchDetails/tests/__snapshots__/index.test.tsx.snap
@@ -4,94 +4,94 @@ exports[`<LaundDetails> tests should render and match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered LaunchDetails__LaunchDetailsCard-ytnak2-0 jEXwRD"
+      class="ant-card ant-card-bordered css-2exjiz e1uve3jx7"
       data-testid="launch-details"
     >
       <div
         class="ant-card-body"
       >
         <img
-          class="LaunchDetails__CustomImage-ytnak2-1 iXORvU"
+          class="css-vu4s2r e1uve3jx6"
           src="https://farm9.staticflickr.com/8617/16789019815_f99a165dc5_o.jpg"
         />
         <div
-          class="LaunchDetails__DetailsCard-ytnak2-2 hkMZdw"
+          class="css-e0xypg e1uve3jx5"
         >
           <p
-            class="T__StyledText-gcrjip-0 irGVum LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+            class="e1uve3jx3 css-1cewy1q e17qkzd60"
             data-testid="mission-name"
           >
             CRS-21
           </p>
           <p
-            class="T__StyledText-gcrjip-0 gIxZML LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+            class="e1uve3jx3 css-139w90b e17qkzd60"
             data-testid="details"
           >
             <b
-              class="LaunchDetails__LaunchLabel-ytnak2-5 ibUuTD"
+              class="css-1mq3jm7 e1uve3jx2"
             >
               Details
             </b>
              SpaceX's 21st ISS resupply mission.
           </p>
           <p
-            class="T__StyledText-gcrjip-0 cTCPAw LaunchDetails__LaunchLabelT-ytnak2-6 jcSOHI"
+            class="e1uve3jx1 css-rz7hlo e17qkzd60"
             data-testid="t"
           >
             Rocket 
           </p>
           <div
-            class="LaunchDetails__RocketBox-ytnak2-3 jQCsNq"
+            class="css-1pbbfrk e1uve3jx4"
           >
             <p
-              class="T__StyledText-gcrjip-0 gIxZML LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+              class="e1uve3jx3 css-139w90b e17qkzd60"
               data-testid="rocket-name"
             >
               <b
-                class="LaunchDetails__LaunchLabel-ytnak2-5 ibUuTD"
+                class="css-1mq3jm7 e1uve3jx2"
               >
                 Name
               </b>
                Falcon 9
             </p>
             <p
-              class="T__StyledText-gcrjip-0 gIxZML LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+              class="e1uve3jx3 css-139w90b e17qkzd60"
               data-testid="rocket-type"
             >
               <b
-                class="LaunchDetails__LaunchLabel-ytnak2-5 ibUuTD"
+                class="css-1mq3jm7 e1uve3jx2"
               >
                 Type
               </b>
                FT
             </p>
           </div>
           <p
-            class="T__StyledText-gcrjip-0 cTCPAw LaunchDetails__LaunchLabelT-ytnak2-6 jcSOHI"
+            class="e1uve3jx1 css-rz7hlo e17qkzd60"
             data-testid="t"
           >
             Ships 
           </p>
           <div
-            class="LaunchDetails__ShipContainer-ytnak2-7 ImOjY"
+            class="css-wt1l7g e1uve3jx0"
           >
             <p
-              class="T__StyledText-gcrjip-0 gIxZML LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+              class="e1uve3jx3 css-139w90b e17qkzd60"
               data-testid="ship-name"
             >
               <b
-                class="LaunchDetails__LaunchLabel-ytnak2-5 ibUuTD"
+                class="css-1mq3jm7 e1uve3jx2"
               >
                 Name
               </b>
                Ship 1
             </p>
             <p
-              class="T__StyledText-gcrjip-0 gIxZML LaunchDetails__CustomT-ytnak2-4 dKPFxL"
+              class="e1uve3jx3 css-139w90b e17qkzd60"
               data-testid="ship-type"
             >
               <b
-                class="LaunchDetails__LaunchLabel-ytnak2-5 ibUuTD"
+                class="css-1mq3jm7 e1uve3jx2"
               >
                 Type
               </b>

diff --git a/app/components/LaunchItem/index.tsx b/app/components/LaunchItem/index.tsx
@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { Launch } from '@app/containers/HomeContainer/types';
 import { Button, Card } from 'antd';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import If from '@components/If';
 import { T } from '@components/T';
 import isEmpty from 'lodash-es/isEmpty';

diff --git a/app/components/LaunchItem/tests/__snapshots__/index.test.tsx.snap b/app/components/LaunchItem/tests/__snapshots__/index.test.tsx.snap
@@ -4,26 +4,26 @@ exports[`<LaunchItem /> should render and match the snapshot 1`] = `
 <body>
   <div>
     <div
-      class="ant-card ant-card-bordered LaunchItem__LaunchCard-tig4gy-0 gCObRf"
+      class="ant-card ant-card-bordered css-1kqrwf7 e1lhyjmf1"
       data-testid="launch-item"
     >
       <div
         class="ant-card-body"
       >
         <p
-          class="T__StyledText-gcrjip-0 izlutd"
+          class="css-1u7m6xy e17qkzd60"
           data-testid="mission-name"
         >
           Thaicom 6
         </p>
         <p
-          class="T__StyledText-gcrjip-0 gIxZML"
+          class="css-1irx5r2 e17qkzd60"
           data-testid="t"
         >
           Mon, 6th January 2014, 06:06 PM
         </p>
         <a
-          class="ant-btn ant-btn-link LaunchItem__WikiLink-tig4gy-1 cfMXJX"
+          class="ant-btn ant-btn-link css-5kqj3c e1lhyjmf0"
           data-testid="wiki-link"
           href="https://en.wikipedia.org/wiki/Thaicom_6"
           rel="noreferrer"

diff --git a/app/components/LaunchList/index.tsx b/app/components/LaunchList/index.tsx
@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
 import PropTypes from 'prop-types';
-import styled from 'styled-components';
+import styled from '@emotion/styled';
 import { Launch } from '@containers/HomeContainer/types';
 import { get, isEmpty } from 'lodash-es';
 import { Card, Skeleton } from 'antd';