Skip to content

Commit 08e95a0

Browse files
praveenkumar1798Praveen Kumar
praveenkumar1798
and
Praveen Kumar
authored
feat: replace styled-components with emotion (#177)
Co-authored-by: Praveen Kumar <praveenkumar@Praveens-MacBook-Pro.local>
1 parent c982244 commit 08e95a0

30 files changed

Lines changed: 219 additions & 307 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,9 @@ An enterprise react template application showcasing - Testing strategies, Global
9191
- [app/services/repoApi.js](app/services/repoApi.js)
9292
- [app/containers/HomeContainer/saga.js](app/containers/HomeContainer/saga.js)
9393

94-
## Styling using styled-components
94+
## Styling using emotion
9595

96-
- Styling components using [Styled Components](https://styled-components.com)
96+
- Styling components using [Emotion](https://emotion.sh/)
9797

9898
Take a look at the following files
9999

‎app/components/Clickable/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import React from 'react';
88
import PropTypes from 'prop-types';
9-
import styled from 'styled-components';
9+
import styled from '@emotion/styled';
1010
import T from '@components/T';
1111

1212
const StyledClickable = styled.div`

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,11 @@ exports[`<Clickable /> component tests should render and match the snapshot 1`]
44
<body>
55
<div>
66
<div
7-
class="Clickable__StyledClickable-sc-19lp5om-0 gXlmQJ"
7+
class="css-8v742f e17o1jny0"
88
data-testid="clickable"
99
>
1010
<p
11-
class="T__StyledText-gjlic1-0 jOByUY"
11+
class="css-lh9t18 egtqi0h0"
1212
data-testid="t"
1313
>
1414
Repository List

‎app/components/For/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import React from 'react';
88
import Proptypes from 'prop-types';
9-
import styled from 'styled-components';
9+
import styled from '@emotion/styled';
1010

1111
const FlexContainer = styled.div`
1212
display: flex;

‎app/components/Header/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import React from 'react';
88
import { AppBar } from '@mui/material';
9-
import styled from 'styled-components';
9+
import styled from '@emotion/styled';
1010
import { injectIntl } from 'react-intl';
1111
import { fonts, colors } from '@themes';
1212
import T from '@components/T';

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,19 +4,19 @@ exports[`<Header /> should render and match the snapshot 1`] = `
44
<body>
55
<div>
66
<header
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"
7+
class="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionRelative esmlbx62 css-h0ut63-MuiPaper-root-MuiAppBar-root"
88
data-testid="header"
99
intl="[object Object]"
1010
>
1111
<img
1212
alt="logo"
13-
class="Header__Logo-wp2jxc-1 kLDLQt"
13+
class="css-1725ugr esmlbx61"
1414
height="5rem"
1515
src="IMAGE_MOCK"
1616
width="auto"
1717
/>
1818
<p
19-
class="T__StyledText-gjlic1-0 guBozt Header__Title-wp2jxc-2 OSRax"
19+
class="esmlbx60 css-2fgy85 egtqi0h0"
2020
data-testid="t"
2121
>
2222
Wednesday Solutions

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,31 +4,31 @@ exports[`<ProtectedRoute /> should render and match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="HomeContainer__Container-l0s8pp-1 iQEnjC"
7+
class="css-6azwsi e666d1v3"
88
>
99
<div
10-
class="HomeContainer__RightContent-l0s8pp-2 iWJscD"
10+
class="css-1cnh6jp e666d1v2"
1111
>
1212
<p
13-
class="T__StyledText-gjlic1-0 jOByUY HomeContainer__StyledT-l0s8pp-3 iOEXgS"
13+
class="e666d1v1 css-gnuwwn egtqi0h0"
1414
data-testid="redirect"
1515
>
1616
Go to Storybook
1717
</p>
1818
</div>
1919
<div
20-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root HomeContainer__CustomCard-l0s8pp-0 bhbYIx css-bhp9pd-MuiPaper-root-MuiCard-root"
20+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v4 css-1azwflu-MuiPaper-root-MuiCard-root"
2121
maxwidth="500"
2222
title="Repository Search"
2323
>
2424
<p
25-
class="T__StyledText-gjlic1-0 gGweRc"
25+
class="css-darbe1 egtqi0h0"
2626
data-testid="t"
2727
>
2828
Get details of repositories
2929
</p>
3030
<div
31-
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-adornedEnd HomeContainer__StyledOutlinedInput-l0s8pp-4 huJjiR css-154xyx0-MuiInputBase-root-MuiOutlinedInput-root"
31+
class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-adornedEnd e666d1v0 css-16qisbh-MuiInputBase-root-MuiOutlinedInput-root"
3232
>
3333
<input
3434
class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedEnd css-nxo287-MuiInputBase-input-MuiOutlinedInput-input"
@@ -79,12 +79,12 @@ exports[`<ProtectedRoute /> should render and match the snapshot 1`] = `
7979
</div>
8080
</div>
8181
<div
82-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root HomeContainer__CustomCard-l0s8pp-0 dqPlQv css-bhp9pd-MuiPaper-root-MuiCard-root"
82+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e666d1v4 css-ckxzvw-MuiPaper-root-MuiCard-root"
8383
color="grey"
8484
title="Repository List"
8585
>
8686
<p
87-
class="T__StyledText-gjlic1-0 jOByUY"
87+
class="css-lh9t18 egtqi0h0"
8888
data-testid="default-message"
8989
>
9090
Search for a repository by entering it's name in the search box

‎app/components/RepoCard/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66

77
import React from 'react';
88
import PropTypes from 'prop-types';
9-
import styled from 'styled-components';
9+
import styled from '@emotion/styled';
1010
import { Card } from '@mui/material';
1111
import T from '@components/T';
1212
import If from '@components/If';

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@ exports[`<RepoCard /> should render and match the snapshot 1`] = `
44
<body>
55
<div>
66
<div
7-
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root RepoCard__CustomCard-sc-3wf6pv-0 edIplS css-bhp9pd-MuiPaper-root-MuiCard-root"
7+
class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 MuiCard-root e6pkn6t0 css-16zkfrb-MuiPaper-root-MuiCard-root"
88
data-testid="repo-card"
99
>
1010
<p
11-
class="T__StyledText-gjlic1-0 jOByUY"
11+
class="css-lh9t18 egtqi0h0"
1212
data-testid="name-unavailable"
1313
>
1414
Repository name is unavailable
1515
</p>
1616
<p
17-
class="T__StyledText-gjlic1-0 jOByUY"
17+
class="css-lh9t18 egtqi0h0"
1818
data-testid="fullName-unavailable"
1919
>
2020
Repository full name unavaiable
2121
</p>
2222
<p
23-
class="T__StyledText-gjlic1-0 jOByUY"
23+
class="css-lh9t18 egtqi0h0"
2424
data-testid="stargazers-unavaiable"
2525
>
2626
Repository stars are unavaiable

‎app/components/T/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
*/
66

77
import React, { memo } from 'react';
8-
import styled from 'styled-components';
8+
import styled from '@emotion/styled';
99
import { FormattedMessage } from 'react-intl';
1010
import { PropTypes } from 'prop-types';
1111
import If from '@components/If';

0 commit comments

Comments
 (0)