Skip to content

Commit c6b9b34

Browse files
Spring3Spring3
committed
refactor: migrate to @emotion/react interation-2
1 parent 568fc4d commit c6b9b34

File tree

16 files changed

+79
-114
lines changed

16 files changed

+79
-114
lines changed

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
"prepare": "husky install"
1414
},
1515
"dependencies": {
16-
"@emotion/css": "^11.1.3",
1716
"@emotion/react": "^11.1.5",
1817
"emotion-theming": "^11.0.0",
1918
"gatsby": "^3.3.0",

‎src/components/common/Menus.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,14 +123,14 @@ const AnchorListMenu = ({ nodes, onClick }) => {
123123

124124
return (
125125
<Flex
126-
className={styles.menuContainer}
126+
css={styles.menuContainer}
127127
direction={windowSize.isSmall ? 'column' : 'row'}
128128
gap={windowSize.isSmall ? '1rem' : '0rem'}
129129
margined
130130
justifyContent="center"
131131
alignItems="center"
132132
>
133-
<small className={styles.small}>Projects:&nbsp;</small>
133+
<small css={styles.small}>Projects:&nbsp;</small>
134134
{menuItems}
135135
</Flex>
136136
);

‎src/components/cv/CVSection.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useState, useRef, useEffect } from 'react';
2-
import { cx, css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { animated, useSpring } from 'react-spring';
44
import { useIntersection } from 'react-use';
55

@@ -44,7 +44,7 @@ const CVSection = ({ id, children, span }) => {
4444

4545
return (
4646
<animated.section
47-
className={cx(styles({ span }))}
47+
css={styles({ span })}
4848
id={id}
4949
style={sectionAnimation}
5050
ref={ref}

‎src/components/cv/DownloadFooter.jsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { cx, css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33

44
const styles = css`
55
position: fixed;
@@ -19,7 +19,11 @@ const styles = css`
1919
`;
2020

2121
const DownloadFooter = ({ className, children }) => {
22-
return <footer className={cx(styles, className)}>{children}</footer>;
22+
return (
23+
<footer className={className} css={styles}>
24+
{children}
25+
</footer>
26+
);
2327
};
2428

2529
export { DownloadFooter };

‎src/components/index/AboutSection.jsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { animated, useChain, useSpring, useSpringRef } from 'react-spring';
44

55
import { Header } from '../common/Headers';
@@ -55,11 +55,7 @@ const AboutSection = ({ children }) => {
5555
useChain([headerAnimationRef, bodyAnimationRef], [0.2, 0.4]);
5656

5757
return (
58-
<Flex
59-
className={styles.contentPanel}
60-
direction="column"
61-
justifyContent="center"
62-
>
58+
<Flex css={styles.contentPanel} direction="column" justifyContent="center">
6359
<Decorations layer="back">
6460
<Flickering duration={1}>
6561
<Rectangle
@@ -114,7 +110,7 @@ const AboutSection = ({ children }) => {
114110
</Flickering>
115111
</Decorations>
116112
<animated.div style={headerAnimation}>
117-
<Header className={styles.hugeHeader}>Hello and Welcome!</Header>
113+
<Header css={styles.hugeHeader}>Hello and Welcome!</Header>
118114
</animated.div>
119115
<animated.div style={springAnimation}>
120116
{children}

‎src/components/index/Footer.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { Flex } from '../common/Flex';
44
import { MARKERS } from '../../theme';
55
import { Reference } from '../common/Reference';
@@ -33,9 +33,9 @@ const Footer = () => {
3333
const theme = useTheme();
3434

3535
return (
36-
<Flex className={styles.footer} justifyContent="center" alignItems="center">
36+
<Flex css={styles.footer} justifyContent="center" alignItems="center">
3737
<Reference
38-
className={styles.url(theme)}
38+
css={styles.url(theme)}
3939
role="button"
4040
bold
4141
href="#"

‎src/components/index/Project.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import React, {
55
useState,
66
useEffect,
77
} from 'react';
8-
import { css } from '@emotion/css';
8+
import { css } from '@emotion/react';
99

1010
import { animated, useSpring } from 'react-spring';
1111
import { useIntersection, usePrevious } from 'react-use';
@@ -97,9 +97,9 @@ const Project = ({ node, index }) => {
9797
const [wasRevealed, setRevealed] = useState(false);
9898
const anchor = slugToAnchor(node.fields.slug);
9999

100+
const theme = useTheme();
100101
const projectRef = useRef();
101102
const windowSize = useWindowSizeDef();
102-
const theme = useTheme();
103103
const id = anchor.substring(1);
104104

105105
const wasSmallScreen = usePrevious(windowSize.isMedium);
@@ -174,7 +174,7 @@ const Project = ({ node, index }) => {
174174

175175
return (
176176
<Decorations
177-
className={styles.decorations}
177+
css={styles.decorations}
178178
key={key}
179179
layer={key}
180180
{...props}
@@ -205,34 +205,34 @@ const Project = ({ node, index }) => {
205205
}, [renderLayer]);
206206

207207
return (
208-
<div className={styles.projectRowWrapper} ref={projectRef}>
208+
<div css={styles.projectRowWrapper} ref={projectRef}>
209209
<Flex
210-
className={styles.projectRow}
210+
css={styles.projectRow}
211211
id={id}
212212
style={revealAnimation}
213213
justifyContent="space-between"
214214
>
215-
<animated.div className={styles.infoWrapper}>
216-
<animated.div className={styles.projectInfo} index={index}>
217-
<SubHeader className={styles.projectTitle}>
215+
<animated.div css={styles.infoWrapper}>
216+
<animated.div css={styles.projectInfo} index={index}>
217+
<SubHeader css={styles.projectTitle}>
218218
<Link to={node.fields.slug} marker={node.frontmatter.marker} bold>
219219
{node.frontmatter.title}
220220
</Link>
221221
</SubHeader>
222222
<ImageCarousel
223-
className={styles.imageCarousel}
223+
css={styles.imageCarousel}
224224
key={`carousel-${id}`}
225225
images={images}
226226
/>
227227
<MarkdownContent
228-
className={styles.projectMarkdownContent(theme)}
228+
css={styles.projectMarkdownContent(theme)}
229229
marker={node.frontmatter.marker}
230230
dangerouslySetInnerHTML={{ __html: node.html }}
231231
/>
232232
<Tags style={tagAnimation} tags={node.frontmatter.technologies} />
233233
</animated.div>
234234
</animated.div>
235-
<animated.div className={styles.imageWrapper}>
235+
<animated.div css={styles.imageWrapper}>
236236
<FixedImageSet containerRef={projectRef} images={images} />
237237
</animated.div>
238238
{decorationLayers}

‎src/components/index/ProjectsSection.jsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React from 'react';
2-
import { ThemeProvider } from '@emotion/react';
3-
import { css } from '@emotion/css';
2+
import { ThemeProvider, css } from '@emotion/react';
43
import { Header } from '../common/Headers';
54
import { Project } from './Project';
65
import { Flex } from '../common/Flex';
@@ -47,8 +46,8 @@ const styles = {
4746
const ProjectsSection = ({ nodes }) => (
4847
<div direction="column">
4948
<div>
50-
<Header className={styles.stickyTitle}>Projects</Header>
51-
<Flex className={styles.projectsWrapper} direction="column" gap="5rem">
49+
<Header css={styles.stickyTitle}>Projects</Header>
50+
<Flex css={styles.projectsWrapper} direction="column" gap="5rem">
5251
{nodes.map((node, i) => {
5352
const theme = { marker: node.frontmatter.marker };
5453
return (

‎src/components/project/FixedImageSet.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Fragment } from 'react';
2-
import { css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { useWindowSize } from 'react-use';
44
import { useImagePreview } from '../../context/ImagePreviewContext';
55
import { LazyImage } from '../common/LazyImage';
@@ -55,7 +55,7 @@ const FixedImageSet = ({ images, containerRef }) => {
5555
const scaledHeight = Number(imageAreaWidth / image.aspectRatio).toFixed(2);
5656
return (
5757
<LazyImage
58-
className={styles.normalImage({ src: image.src, scaledHeight })}
58+
css={styles.normalImage({ src: image.src, scaledHeight })}
5959
intersectionTriggerRef={containerRef}
6060
Component={'div'}
6161
src={image.src}
@@ -84,7 +84,7 @@ const FixedImageSet = ({ images, containerRef }) => {
8484
return (
8585
<Fragment key={image.name}>
8686
<LazyImage
87-
className={styles.fixedStyles}
87+
css={styles.fixedStyles}
8888
style={style}
8989
intersectionTriggerRef={containerRef}
9090
Component={'div'}
@@ -94,7 +94,7 @@ const FixedImageSet = ({ images, containerRef }) => {
9494
onClick={() => showImagePreview(images, i)}
9595
/>
9696
<div
97-
className={styles.fixedStyles}
97+
css={styles.fixedStyles}
9898
style={placeholderStyle}
9999
id={image.name}
100100
/>

‎src/components/project/Header.jsx‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React from 'react';
2-
import { cx, css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { useTheme } from '@emotion/react';
44

55
const styles = {
@@ -27,7 +27,7 @@ const styles = {
2727
const Header = ({ className, children, marker }) => {
2828
const theme = useTheme();
2929
return (
30-
<h1 className={cx(styles.header(marker || theme.marker), className)}>
30+
<h1 className={className} css={styles.header(marker || theme.marker)}>
3131
{children}
3232
</h1>
3333
);
@@ -37,11 +37,8 @@ const Subheading = ({ className, children, marker }) => {
3737
const theme = useTheme();
3838
return (
3939
<h2
40-
className={cx(
41-
styles.header(marker || theme.marker),
42-
styles.subheading,
43-
className
44-
)}
40+
className={className}
41+
css={[styles.header(marker || theme.marker), styles.subheading]}
4542
>
4643
{children}
4744
</h2>

0 commit comments

Comments
 (0)