Skip to content

Commit a25c247

Browse files
Spring3Spring3
authored
Merge pull request #15 from Spring3/refactor/migrate-to-emotion-react
Migrate to emotion react
2 parents 894d7e6 + c6b9b34 commit a25c247

37 files changed

+14731
-50329
lines changed

‎README.md‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,14 @@ You are welcome to use or reuse this project for your purposes, if you reference
77
Development:
88

99
```
10-
npm start
10+
yarn && start
1111
```
1212

1313
Production:
1414

1515
```
16-
npm build
17-
npm run serve
16+
yarn && yarn build
17+
yarn serve
1818
```
1919

2020
### Core

‎package-lock.json‎

Lines changed: 0 additions & 50031 deletions
This file was deleted.

‎package.json‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,30 @@
66
"build": "gatsby build",
77
"develop": "gatsby clean && gatsby develop",
88
"format": "prettier --write src/**/*.{js,jsx}",
9-
"start": "npm run develop",
9+
"start": "yarn develop",
1010
"serve": "gatsby serve",
1111
"lint": "eslint . --fix --ext js,jsx,ts,tsx",
1212
"test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
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",
19-
"gatsby": "^3.2.1",
20-
"gatsby-plugin-catch-links": "^3.2.0",
21-
"gatsby-plugin-emotion": "^6.2.0",
22-
"gatsby-plugin-gdpr-cookies": "^1.0.14",
23-
"gatsby-plugin-manifest": "^3.2.0",
24-
"gatsby-plugin-nprogress": "^3.2.0",
25-
"gatsby-plugin-offline": "^4.2.0",
26-
"gatsby-plugin-react-helmet": "^4.2.0",
27-
"gatsby-plugin-react-svg": "^3.0.0",
28-
"gatsby-plugin-sharp": "^3.2.0",
29-
"gatsby-remark-copy-linked-files": "^3.2.0",
30-
"gatsby-remark-images": "^4.2.0",
31-
"gatsby-source-filesystem": "^3.2.0",
32-
"gatsby-transformer-remark": "^3.2.0",
33-
"gatsby-transformer-sharp": "^3.2.0",
18+
"gatsby": "^3.3.0",
19+
"gatsby-plugin-catch-links": "^3.3.0",
20+
"gatsby-plugin-emotion": "^6.3.0",
21+
"gatsby-plugin-gdpr-cookies": "^2.0.0",
22+
"gatsby-plugin-manifest": "^3.3.0",
23+
"gatsby-plugin-nprogress": "^3.3.0",
24+
"gatsby-plugin-offline": "^4.3.0",
25+
"gatsby-plugin-react-helmet": "^4.3.0",
26+
"gatsby-plugin-react-svg": "^3.0.1",
27+
"gatsby-plugin-sharp": "^3.3.0",
28+
"gatsby-remark-copy-linked-files": "^4.0.0",
29+
"gatsby-remark-images": "^5.0.0",
30+
"gatsby-source-filesystem": "^3.3.0",
31+
"gatsby-transformer-remark": "^4.0.0",
32+
"gatsby-transformer-sharp": "^3.3.0",
3433
"lodash.clamp": "^4.0.3",
3534
"lodash.throttle": "^4.1.1",
3635
"mdi-react": "^7.5.0",
@@ -40,20 +39,20 @@
4039
"react-dom": "^17.0.2",
4140
"react-helmet": "^6.1.0",
4241
"react-responsive-carousel": "^3.2.18",
43-
"react-spring": "^9.0.0-rc.3",
44-
"react-use": "^17.2.1",
42+
"react-spring": "^9.1.1",
43+
"react-use": "^17.2.3",
4544
"react-use-gesture": "^9.1.3"
4645
},
4746
"devDependencies": {
48-
"eslint": "^7.23.0",
49-
"eslint-config-prettier": "^8.1.0",
47+
"eslint": "^7.24.0",
48+
"eslint-config-prettier": "^8.2.0",
5049
"eslint-plugin-import": "^2.22.1",
51-
"eslint-plugin-react": "^7.23.1",
50+
"eslint-plugin-react": "^7.23.2",
5251
"eslint-plugin-react-hooks": "^4.2.0",
53-
"gatsby-plugin-gatsby-cloud": "^2.2.0",
52+
"gatsby-plugin-gatsby-cloud": "^2.3.0",
5453
"husky": "^6.0.0",
5554
"lint-staged": "10.5.4",
56-
"postcss": "^8.2.9",
55+
"postcss": "^8.2.10",
5756
"prettier": "2.2.1"
5857
},
5958
"repository": {

‎src/components/common/BurgerMenu.jsx‎

Lines changed: 23 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useCallback, useState, useEffect, memo } from 'react';
2-
import { css } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import MenuIcon from 'mdi-react/MenuIcon';
44
import CloseIcon from 'mdi-react/CloseIcon';
55
import { useSpring, animated } from 'react-spring';
@@ -192,11 +192,11 @@ const BurgerMenu = memo(() => {
192192
</Helmet>
193193
) : null}
194194
<animated.div
195-
className={styles.buttonWrapper}
195+
css={styles.buttonWrapper}
196196
style={burgerMenuButtonAnimation}
197197
>
198198
<Reference
199-
className={styles.button}
199+
css={styles.button}
200200
role="button"
201201
href="#"
202202
onClick={onIconClick}
@@ -205,71 +205,67 @@ const BurgerMenu = memo(() => {
205205
</Reference>
206206
</animated.div>
207207
<animated.div
208-
className={styles.overlay}
208+
css={styles.overlay}
209209
style={overlayAnimation}
210210
onClick={onIconClick}
211211
// fix for scrolling on iphone
212212
onTouchStart={(e) => e.preventDefault()}
213213
/>
214214
<animated.div
215-
className={styles.panelWrapper}
215+
css={styles.panelWrapper}
216216
onMouseEnter={handleMouseEnter}
217217
onMouseLeave={handleMouseLeave}
218218
style={expandAnimation}
219219
>
220220
<Flex
221-
className={styles.logoContainer}
221+
css={styles.logoContainer}
222222
justifyContent="center"
223223
alignItems="center"
224224
>
225225
<Logo width="65px" height="32.5px" />
226226
</Flex>
227227
<Flex
228-
className={styles.panel}
228+
css={styles.panel}
229229
style={expandContentPanelAnimation}
230230
direction="column"
231231
justifyContent="space-between"
232232
flexWrap="nowrap"
233233
>
234234
<Flex
235-
className={styles.projectSection}
235+
css={styles.projectSection}
236236
direction="column"
237237
justifyContent="flex-start"
238238
>
239-
<h4 className={styles.marginless}>Projects</h4>
240-
<Link className={styles.transparentLink} to="/aurelins-website">
241-
<SubHeader className={styles.marginless}>
242-
Aurelins Website
243-
</SubHeader>
239+
<h4 css={styles.marginless}>Projects</h4>
240+
<Link css={styles.transparentLink} to="/aurelins-website">
241+
<SubHeader css={styles.marginless}>Aurelins Website</SubHeader>
244242
</Link>
245-
<Link className={styles.transparentLink} to="/redshape">
246-
<SubHeader className={styles.marginless}>Redshape</SubHeader>
243+
<Link css={styles.transparentLink} to="/redshape">
244+
<SubHeader css={styles.marginless}>Redshape</SubHeader>
247245
</Link>
248-
<Link className={styles.transparentLink} to="/starbot">
249-
<SubHeader className={styles.marginless}>Starbot</SubHeader>
246+
<Link css={styles.transparentLink} to="/starbot">
247+
<SubHeader css={styles.marginless}>Starbot</SubHeader>
250248
</Link>
251-
<Link className={styles.transparentLink} to="/twitch-auto-points">
252-
<SubHeader className={styles.marginless}>
253-
Twitch Auto Points
254-
</SubHeader>
249+
<Link css={styles.transparentLink} to="/twitch-auto-points">
250+
<SubHeader css={styles.marginless}>Twitch Auto Points</SubHeader>
255251
</Link>
256-
<Link className={styles.transparentLink} to="/website">
257-
<SubHeader className={styles.marginless}>Website</SubHeader>
252+
<Link css={styles.transparentLink} to="/website">
253+
<SubHeader css={styles.marginless}>Website</SubHeader>
258254
</Link>
259255
</Flex>
260256
<Flex
261-
className={styles.utilitySection}
257+
css={styles.utilitySection}
262258
direction="column"
263259
justifyContent="center"
264260
>
265261
<CookieManager />
266262
<Flex
267-
className={styles.utilitySection}
263+
css={styles.utilitySection}
268264
justifyContent="space-between"
269265
alignItems="center"
270266
>
271-
<Link className={styles.transparentLink} to="/cv">
272-
<h4 className={styles.marginless}>CV Page</h4>
267+
<Link css={styles.transparentLink} to="/cv">
268+
<h4 css={styles.marginless}>CV Page</h4>
273269
</Link>
274270
<SocialButtons size={24} onlyImportant />
275271
</Flex>

‎src/components/common/Decorations.jsx‎

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

55
const styles = {
@@ -45,7 +45,8 @@ const styles = {
4545
const Decorations = memo(({ className, children, style, ...rest }) => {
4646
return (
4747
<animated.div
48-
className={cx(styles.decorations(rest), className)}
48+
className={className}
49+
css={styles.decorations(rest)}
4950
style={style}
5051
>
5152
{children}
@@ -65,7 +66,8 @@ Decorations.displayName = 'Decorations';
6566
const GeometricObject = memo(({ className, style, ...rest }) => {
6667
return (
6768
<animated.div
68-
className={cx(styles.geometricObject(rest), className)}
69+
className={className}
70+
css={styles.geometricObject(rest)}
6971
style={style}
7072
/>
7173
);
@@ -78,19 +80,27 @@ GeometricObject.defaultProps = {
7880
GeometricObject.displayName = 'GeometricObject';
7981

8082
const Rectangle = ({ className, radius, ...rest }) => {
81-
const rectangleStyles = css`
82-
border-radius: ${radius || '15px'};
83-
`;
8483
return (
85-
<GeometricObject {...rest} className={cx(rectangleStyles, className)} />
84+
<GeometricObject
85+
{...rest}
86+
className={className}
87+
css={css`
88+
border-radius: ${radius || '15px'};
89+
`}
90+
/>
8691
);
8792
};
8893

8994
const Circle = ({ className, radius, ...rest }) => {
90-
const circleStyles = css`
91-
border-radius: ${radius || '50%'};
92-
`;
93-
return <GeometricObject {...rest} className={cx(circleStyles, className)} />;
95+
return (
96+
<GeometricObject
97+
{...rest}
98+
className={className}
99+
css={css`
100+
border-radius: ${radius || '50%'};
101+
`}
102+
/>
103+
);
94104
};
95105

96106
export { Decorations, Rectangle, Circle };

‎src/components/common/Flex.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React from 'react';
22
import PropTypes from 'prop-types';
3-
import { css, cx } from '@emotion/css';
3+
import { css } from '@emotion/react';
44
import { animated } from 'react-spring';
55

66
const styles = ({
@@ -36,7 +36,7 @@ const styles = ({
3636
};
3737

3838
const Flex = ({ children, id, className, style, ...rest }) => (
39-
<animated.div id={id} className={cx(styles(rest), className)} style={style}>
39+
<animated.div id={id} className={className} css={styles(rest)} style={style}>
4040
{children}
4141
</animated.div>
4242
);

‎src/components/common/Headers.jsx‎

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

44
const styles = {
55
header: css`
@@ -28,7 +28,7 @@ const styles = {
2828

2929
const Header = memo(({ children, className }) => {
3030
return (
31-
<h1 className={cx(styles.header, className)} css={styles.header}>
31+
<h1 className={className} css={styles.header}>
3232
{children}
3333
</h1>
3434
);
@@ -38,7 +38,7 @@ Header.displayName = 'Header';
3838

3939
const SubHeader = memo(({ children, className }) => {
4040
return (
41-
<h2 className={cx(styles.subheader, className)} css={styles.subheader}>
41+
<h2 className={className} css={styles.subheader}>
4242
{children}
4343
</h2>
4444
);

‎src/components/common/ImageCarousel.jsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { useRef } from 'react';
2-
import { css, cx } from '@emotion/css';
2+
import { css } from '@emotion/react';
33
import { Carousel } from 'react-responsive-carousel';
44
import { useImagePreview } from '../../context/ImagePreviewContext';
55
import { LazyImage } from './LazyImage';
@@ -57,9 +57,9 @@ const ImageCarousel = ({ className, images }) => {
5757
if (images.length === 1) {
5858
const image = images[0];
5959
return (
60-
<div className={cx(styles.singleImage, className)} ref={containerRef}>
60+
<div className={className} css={styles.singleImage} ref={containerRef}>
6161
<LazyImage
62-
className={cx(styles.slide, styles.singleImage)}
62+
css={[styles.slide, styles.singleImage]}
6363
key={image.name}
6464
alt={image.name}
6565
src={image.src}
@@ -73,9 +73,9 @@ const ImageCarousel = ({ className, images }) => {
7373
}
7474

7575
return (
76-
<div className={cx(styles.container, className)} ref={containerRef}>
76+
<div className={className} css={styles.container} ref={containerRef}>
7777
<Carousel
78-
className={styles.carousel}
78+
css={styles.carousel}
7979
showStatus={false}
8080
showIndicators={false}
8181
showThumbs={false}
@@ -88,7 +88,7 @@ const ImageCarousel = ({ className, images }) => {
8888
>
8989
{images.map((image) => (
9090
<LazyImage
91-
className={styles.slide}
91+
css={styles.slide}
9292
key={image.name}
9393
intersectionTriggerRef={containerRef}
9494
alt={image.name}

0 commit comments

Comments
 (0)