Migrate to emotion react

README.md

@@ -7,14 +7,14 @@ You are welcome to use or reuse this project for your purposes, if you reference
 Development:
 
 ```
-  npm start
+  yarn && start
 ```
 
 Production:
 
 ```
-  npm build
-  npm run serve
+  yarn && yarn build
+  yarn serve
 ```
 
 ### Core

package.json

@@ -6,31 +6,30 @@
     "build": "gatsby build",
     "develop": "gatsby clean && gatsby develop",
     "format": "prettier --write src/**/*.{js,jsx}",
-    "start": "npm run develop",
+    "start": "yarn develop",
     "serve": "gatsby serve",
     "lint": "eslint . --fix --ext js,jsx,ts,tsx",
     "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\"",
     "prepare": "husky install"
   },
   "dependencies": {
-    "@emotion/css": "^11.1.3",
     "@emotion/react": "^11.1.5",
     "emotion-theming": "^11.0.0",
-    "gatsby": "^3.2.1",
-    "gatsby-plugin-catch-links": "^3.2.0",
-    "gatsby-plugin-emotion": "^6.2.0",
-    "gatsby-plugin-gdpr-cookies": "^1.0.14",
-    "gatsby-plugin-manifest": "^3.2.0",
-    "gatsby-plugin-nprogress": "^3.2.0",
-    "gatsby-plugin-offline": "^4.2.0",
-    "gatsby-plugin-react-helmet": "^4.2.0",
-    "gatsby-plugin-react-svg": "^3.0.0",
-    "gatsby-plugin-sharp": "^3.2.0",
-    "gatsby-remark-copy-linked-files": "^3.2.0",
-    "gatsby-remark-images": "^4.2.0",
-    "gatsby-source-filesystem": "^3.2.0",
-    "gatsby-transformer-remark": "^3.2.0",
-    "gatsby-transformer-sharp": "^3.2.0",
+    "gatsby": "^3.3.0",
+    "gatsby-plugin-catch-links": "^3.3.0",
+    "gatsby-plugin-emotion": "^6.3.0",
+    "gatsby-plugin-gdpr-cookies": "^2.0.0",
+    "gatsby-plugin-manifest": "^3.3.0",
+    "gatsby-plugin-nprogress": "^3.3.0",
+    "gatsby-plugin-offline": "^4.3.0",
+    "gatsby-plugin-react-helmet": "^4.3.0",
+    "gatsby-plugin-react-svg": "^3.0.1",
+    "gatsby-plugin-sharp": "^3.3.0",
+    "gatsby-remark-copy-linked-files": "^4.0.0",
+    "gatsby-remark-images": "^5.0.0",
+    "gatsby-source-filesystem": "^3.3.0",
+    "gatsby-transformer-remark": "^4.0.0",
+    "gatsby-transformer-sharp": "^3.3.0",
     "lodash.clamp": "^4.0.3",
     "lodash.throttle": "^4.1.1",
     "mdi-react": "^7.5.0",
@@ -40,20 +39,20 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-responsive-carousel": "^3.2.18",
-    "react-spring": "^9.0.0-rc.3",
-    "react-use": "^17.2.1",
+    "react-spring": "^9.1.1",
+    "react-use": "^17.2.3",
     "react-use-gesture": "^9.1.3"
   },
   "devDependencies": {
-    "eslint": "^7.23.0",
-    "eslint-config-prettier": "^8.1.0",
+    "eslint": "^7.24.0",
+    "eslint-config-prettier": "^8.2.0",
     "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-react": "^7.23.1",
+    "eslint-plugin-react": "^7.23.2",
     "eslint-plugin-react-hooks": "^4.2.0",
-    "gatsby-plugin-gatsby-cloud": "^2.2.0",
+    "gatsby-plugin-gatsby-cloud": "^2.3.0",
     "husky": "^6.0.0",
     "lint-staged": "10.5.4",
-    "postcss": "^8.2.9",
+    "postcss": "^8.2.10",
     "prettier": "2.2.1"
   },
   "repository": {

src/components/common/BurgerMenu.jsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useEffect, memo } from 'react';
-import { css } from '@emotion/css';
+import { css } from '@emotion/react';
 import MenuIcon from 'mdi-react/MenuIcon';
 import CloseIcon from 'mdi-react/CloseIcon';
 import { useSpring, animated } from 'react-spring';
@@ -192,11 +192,11 @@ const BurgerMenu = memo(() => {
         </Helmet>
       ) : null}
       <animated.div
-        className={styles.buttonWrapper}
+        css={styles.buttonWrapper}
         style={burgerMenuButtonAnimation}
       >
         <Reference
-          className={styles.button}
+          css={styles.button}
           role="button"
           href="#"
           onClick={onIconClick}
@@ -205,71 +205,67 @@ const BurgerMenu = memo(() => {
         </Reference>
       </animated.div>
       <animated.div
-        className={styles.overlay}
+        css={styles.overlay}
         style={overlayAnimation}
         onClick={onIconClick}
         // fix for scrolling on iphone
         onTouchStart={(e) => e.preventDefault()}
       />
       <animated.div
-        className={styles.panelWrapper}
+        css={styles.panelWrapper}
         onMouseEnter={handleMouseEnter}
         onMouseLeave={handleMouseLeave}
         style={expandAnimation}
       >
         <Flex
-          className={styles.logoContainer}
+          css={styles.logoContainer}
           justifyContent="center"
           alignItems="center"
         >
           <Logo width="65px" height="32.5px" />
         </Flex>
         <Flex
-          className={styles.panel}
+          css={styles.panel}
           style={expandContentPanelAnimation}
           direction="column"
           justifyContent="space-between"
           flexWrap="nowrap"
         >
           <Flex
-            className={styles.projectSection}
+            css={styles.projectSection}
             direction="column"
             justifyContent="flex-start"
           >
-            <h4 className={styles.marginless}>Projects</h4>
-            <Link className={styles.transparentLink} to="/aurelins-website">
-              <SubHeader className={styles.marginless}>
-                Aurelins Website
-              </SubHeader>
+            <h4 css={styles.marginless}>Projects</h4>
+            <Link css={styles.transparentLink} to="/aurelins-website">
+              <SubHeader css={styles.marginless}>Aurelins Website</SubHeader>
             </Link>
-            <Link className={styles.transparentLink} to="/redshape">
-              <SubHeader className={styles.marginless}>Redshape</SubHeader>
+            <Link css={styles.transparentLink} to="/redshape">
+              <SubHeader css={styles.marginless}>Redshape</SubHeader>
             </Link>
-            <Link className={styles.transparentLink} to="/starbot">
-              <SubHeader className={styles.marginless}>Starbot</SubHeader>
+            <Link css={styles.transparentLink} to="/starbot">
+              <SubHeader css={styles.marginless}>Starbot</SubHeader>
             </Link>
-            <Link className={styles.transparentLink} to="/twitch-auto-points">
-              <SubHeader className={styles.marginless}>
-                Twitch Auto Points
-              </SubHeader>
+            <Link css={styles.transparentLink} to="/twitch-auto-points">
+              <SubHeader css={styles.marginless}>Twitch Auto Points</SubHeader>
             </Link>
-            <Link className={styles.transparentLink} to="/website">
-              <SubHeader className={styles.marginless}>Website</SubHeader>
+            <Link css={styles.transparentLink} to="/website">
+              <SubHeader css={styles.marginless}>Website</SubHeader>
             </Link>
           </Flex>
           <Flex
-            className={styles.utilitySection}
+            css={styles.utilitySection}
             direction="column"
             justifyContent="center"
           >
             <CookieManager />
             <Flex
-              className={styles.utilitySection}
+              css={styles.utilitySection}
               justifyContent="space-between"
               alignItems="center"
             >
-              <Link className={styles.transparentLink} to="/cv">
-                <h4 className={styles.marginless}>CV Page</h4>
+              <Link css={styles.transparentLink} to="/cv">
+                <h4 css={styles.marginless}>CV Page</h4>
               </Link>
               <SocialButtons size={24} onlyImportant />
             </Flex>

src/components/common/Decorations.jsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/react';
 import { animated } from 'react-spring';
 
 const styles = {
@@ -45,7 +45,8 @@ const styles = {
 const Decorations = memo(({ className, children, style, ...rest }) => {
   return (
     <animated.div
-      className={cx(styles.decorations(rest), className)}
+      className={className}
+      css={styles.decorations(rest)}
       style={style}
     >
       {children}
@@ -65,7 +66,8 @@ Decorations.displayName = 'Decorations';
 const GeometricObject = memo(({ className, style, ...rest }) => {
   return (
     <animated.div
-      className={cx(styles.geometricObject(rest), className)}
+      className={className}
+      css={styles.geometricObject(rest)}
       style={style}
     />
   );
@@ -78,19 +80,27 @@ GeometricObject.defaultProps = {
 GeometricObject.displayName = 'GeometricObject';
 
 const Rectangle = ({ className, radius, ...rest }) => {
-  const rectangleStyles = css`
-    border-radius: ${radius || '15px'};
-  `;
   return (
-    <GeometricObject {...rest} className={cx(rectangleStyles, className)} />
+    <GeometricObject
+      {...rest}
+      className={className}
+      css={css`
+        border-radius: ${radius || '15px'};
+      `}
+    />
   );
 };
 
 const Circle = ({ className, radius, ...rest }) => {
-  const circleStyles = css`
-    border-radius: ${radius || '50%'};
-  `;
-  return <GeometricObject {...rest} className={cx(circleStyles, className)} />;
+  return (
+    <GeometricObject
+      {...rest}
+      className={className}
+      css={css`
+        border-radius: ${radius || '50%'};
+      `}
+    />
+  );
 };
 
 export { Decorations, Rectangle, Circle };

src/components/common/Flex.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/react';
 import { animated } from 'react-spring';
 
 const styles = ({
@@ -36,7 +36,7 @@ const styles = ({
 };
 
 const Flex = ({ children, id, className, style, ...rest }) => (
-  <animated.div id={id} className={cx(styles(rest), className)} style={style}>
+  <animated.div id={id} className={className} css={styles(rest)} style={style}>
     {children}
   </animated.div>
 );

src/components/common/Headers.jsx

@@ -1,5 +1,5 @@
 import React, { memo } from 'react';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/react';
 
 const styles = {
   header: css`
@@ -28,7 +28,7 @@ const styles = {
 
 const Header = memo(({ children, className }) => {
   return (
-    <h1 className={cx(styles.header, className)} css={styles.header}>
+    <h1 className={className} css={styles.header}>
       {children}
     </h1>
   );
@@ -38,7 +38,7 @@ Header.displayName = 'Header';
 
 const SubHeader = memo(({ children, className }) => {
   return (
-    <h2 className={cx(styles.subheader, className)} css={styles.subheader}>
+    <h2 className={className} css={styles.subheader}>
       {children}
     </h2>
   );

src/components/common/ImageCarousel.jsx

@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/react';
 import { Carousel } from 'react-responsive-carousel';
 import { useImagePreview } from '../../context/ImagePreviewContext';
 import { LazyImage } from './LazyImage';
@@ -57,9 +57,9 @@ const ImageCarousel = ({ className, images }) => {
   if (images.length === 1) {
     const image = images[0];
     return (
-      <div className={cx(styles.singleImage, className)} ref={containerRef}>
+      <div className={className} css={styles.singleImage} ref={containerRef}>
         <LazyImage
-          className={cx(styles.slide, styles.singleImage)}
+          css={[styles.slide, styles.singleImage]}
           key={image.name}
           alt={image.name}
           src={image.src}
@@ -73,9 +73,9 @@ const ImageCarousel = ({ className, images }) => {
   }
 
   return (
-    <div className={cx(styles.container, className)} ref={containerRef}>
+    <div className={className} css={styles.container} ref={containerRef}>
       <Carousel
-        className={styles.carousel}
+        css={styles.carousel}
         showStatus={false}
         showIndicators={false}
         showThumbs={false}
@@ -88,7 +88,7 @@ const ImageCarousel = ({ className, images }) => {
       >
         {images.map((image) => (
           <LazyImage
-            className={styles.slide}
+            css={styles.slide}
             key={image.name}
             intersectionTriggerRef={containerRef}
             alt={image.name}