Emotion v10

.eslintrc.json

@@ -3,13 +3,11 @@
   "extends": [
     "google",
     "eslint:recommended",
-    "plugin:flowtype/recommended",
     "plugin:react/recommended",
     "prettier",
-    "prettier/flowtype",
     "prettier/react"
   ],
-  "plugins": ["flowtype", "react"],
+  "plugins": ["react", "emotion"],
   "parserOptions": {
     "ecmaVersion": 2016,
     "sourceType": "module",
@@ -26,6 +24,12 @@
   "globals": {
     "spyOn": true
   },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    }
+  },
   "rules": {
     "no-console": "off",
     "no-inner-declarations": "off",
@@ -39,7 +43,7 @@
       { "requireReturnForObjectLiteral": true }
     ],
     "jsx-quotes": ["error", "prefer-double"],
-    "semi": ["error", "never"],
+    "semi": ["error", "always"],
     "object-curly-spacing": ["error", "always"],
     "comma-dangle": [
       "error",
@@ -56,7 +60,11 @@
       {
         "ignore": ["children"]
       }
-    ]
+    ],
+    "emotion/jsx-import": "error",
+    "emotion/no-vanilla": "error",
+    "emotion/import-from-emotion": "error",
+    "emotion/styled-import": "error"
   },
   "overrides": [
     {

gatsby-browser.js

@@ -1,7 +1,12 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { ApolloProvider } from 'react-apollo';
 import { client } from './src/context/ApolloContext';
 
 export const wrapRootElement = ({ element }) => (
   <ApolloProvider client={client}>{element}</ApolloProvider>
 );
+
+wrapRootElement.propTypes = {
+  element: PropTypes.object,
+};

gatsby-config.js

@@ -1,50 +1,50 @@
-require('dotenv').config({
-  path: `.env.${process.env.NODE_ENV}`
+require(`dotenv`).config({
+  path: `.env.${process.env.NODE_ENV}`,
 });
 
 module.exports = {
   siteMetadata: {
-    siteUrl: 'https://store.gatsbyjs.org',
-    title: 'Holy buckets! Get your Gatsby swag here!',
+    siteUrl: `https://store.gatsbyjs.org`,
+    title: `Holy buckets! Get your Gatsby swag here!`,
     description:
-      'Do you like spaced-out socks? All purple everything? Hitting #maximumcomf with JAMstack Jammies? Oh boy have we got the swag store for you!'
+      `Do you like spaced-out socks? All purple everything? Hitting #maximumcomf with JAMstack Jammies? Oh boy have we got the swag store for you!`,
   },
   plugins: [
     {
       resolve: `gatsby-plugin-layout`,
       options: {
-        component: require.resolve(`./src/components/Layout/`)
-      }
+        component: require.resolve(`./src/components/Layout/`),
+      },
     },
-    'gatsby-transformer-sharp',
+    `gatsby-transformer-sharp`,
     {
-      resolve: 'gatsby-source-shopify',
+      resolve: `gatsby-source-shopify`,
       options: {
-        shopName: 'gatsby-swag',
-        accessToken: process.env.SHOPIFY_ACCESS_TOKEN
-      }
+        shopName: `gatsby-swag`,
+        accessToken: process.env.SHOPIFY_ACCESS_TOKEN,
+      },
     },
-    'gatsby-plugin-react-helmet',
-    'gatsby-plugin-emotion',
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-emotion`,
     {
-      resolve: 'gatsby-plugin-manifest',
+      resolve: `gatsby-plugin-manifest`,
       options: {
-        name: 'Gatsby Store',
-        short_name: 'Gatsby Store',
-        start_url: '/',
-        background_color: '#ffffff',
-        theme_color: '#663399',
-        display: 'minimal-ui',
-        icon: 'static/android-chrome-512x512.png'
-      }
+        name: `Gatsby Store`,
+        short_name: `Gatsby Store`,
+        start_url: `/`,
+        background_color: `#ffffff`,
+        theme_color: `#663399`,
+        display: `minimal-ui`,
+        icon: `static/android-chrome-512x512.png`,
+      },
     },
-    'gatsby-plugin-offline',
+    `gatsby-plugin-offline`,
     {
-      resolve: 'gatsby-plugin-google-analytics',
+      resolve: `gatsby-plugin-google-analytics`,
       options: {
-        trackingId: 'UA-93349937-6',
-        respectDNT: true
-      }
-    }
-  ]
+        trackingId: `UA-93349937-6`,
+        respectDNT: true,
+      },
+    },
+  ],
 };

gatsby-node.js

@@ -1,8 +1,8 @@
-const path = require('path');
+const path = require(`path`);
 
 exports.createPages = async ({
   graphql,
-  actions: { createPage, createRedirect }
+  actions: { createPage, createRedirect },
 }) => {
   const pages = await graphql(`
     {
@@ -20,38 +20,38 @@ exports.createPages = async ({
   pages.data.allShopifyProduct.edges.forEach(edge => {
     createPage({
       path: `/product/${edge.node.handle}`,
-      component: path.resolve('./src/templates/ProductPageTemplate.js'),
+      component: path.resolve(`./src/templates/ProductPageTemplate.js`),
       context: {
         id: edge.node.id,
-        handle: edge.node.handle
-      }
+        handle: edge.node.handle,
+      },
     });
   });
 
   // Redirects for old product slugs.
   [
     {
-      oldSlug: 'purple-logo-tee-w-natural-process-print',
-      newSlug: 'vintage-purple-tee'
+      oldSlug: `purple-logo-tee-w-natural-process-print`,
+      newSlug: `vintage-purple-tee`,
     },
     {
-      oldSlug: 'copy-of-gatsby-full-zip-sweatshirt-horizontal-logo',
-      newSlug: 'all-purple-everything-hoodie'
+      oldSlug: `copy-of-gatsby-full-zip-sweatshirt-horizontal-logo`,
+      newSlug: `all-purple-everything-hoodie`,
     },
     {
-      oldSlug: 'gatsby-full-zip-sweatshirt',
-      newSlug: 'all-purple-everything-hoodie-vertical'
+      oldSlug: `gatsby-full-zip-sweatshirt`,
+      newSlug: `all-purple-everything-hoodie-vertical`,
     },
-    { oldSlug: 'black-socks', newSlug: 'space-socks' },
-    { oldSlug: 'dark-deploy-t-shirt', newSlug: 'dark-deploy-tee' },
-    { oldSlug: 'gatsby-trucker-hat', newSlug: 'monogram-trucker-hat' },
-    { oldSlug: 'gatsby-water-bottle', newSlug: '12oz-travel-mug' },
-    { oldSlug: 'purple-gatsby-hat', newSlug: 'blazig-purple-hat' }
+    { oldSlug: `black-socks`, newSlug: `space-socks` },
+    { oldSlug: `dark-deploy-t-shirt`, newSlug: `dark-deploy-tee` },
+    { oldSlug: `gatsby-trucker-hat`, newSlug: `monogram-trucker-hat` },
+    { oldSlug: `gatsby-water-bottle`, newSlug: `12oz-travel-mug` },
+    { oldSlug: `purple-gatsby-hat`, newSlug: `blazig-purple-hat` },
   ].map(({ oldSlug, newSlug }) => {
     const config = {
       toPath: `/product/${newSlug}`,
       isPermanent: true,
-      redirectInBrowser: true
+      redirectInBrowser: true,
     };
     createRedirect({ fromPath: `/product/${oldSlug}`, ...config });
     createRedirect({ fromPath: `/product/${oldSlug}/`, ...config });
@@ -69,14 +69,14 @@ exports.onCreatePage = async ({ page, actions: { createPage } }) => {
    * Take a look at `src/pages/account.js` for more details.
    */
   if (page.path.match(/^\/account/)) {
-    page.matchPath = '/account/*';
+    page.matchPath = `/account/*`;
 
     createPage(page);
   }
 };
 
 exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
-  if (stage === 'build-html') {
+  if (stage === `build-html`) {
     /*
      * During the build step, `auth0-js` will break because it relies on
      * browser-specific APIs. Fortunately, we don’t need it during the build.
@@ -89,10 +89,10 @@ exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
         rules: [
           {
             test: /auth0-js/,
-            use: loaders.null()
-          }
-        ]
-      }
+            use: loaders.null(),
+          },
+        ],
+      },
     });
   }
 };

package.json

@@ -1,35 +1,37 @@
 {
   "name": "gatsby-store",
   "description": "Gatsby store for swag and other Gatsby goodies.",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "author": "Jason Lengstorf <[email protected]>",
   "dependencies": {
-    "apollo-boost": "^0.1.16",
-    "auth0-js": "^9.6.1",
+    "@emotion/core": "^10.0.9",
+    "@emotion/styled": "^10.0.9",
+    "apollo-boost": "^0.3.1",
+    "auth0-js": "^9.10.0",
     "axios": "^0.18.0",
-    "emotion": "^9.1.3",
-    "emotion-server": "^9.1.3",
-    "gatsby": "^2.0.18",
-    "gatsby-image": "^2.0.29",
-    "gatsby-plugin-emotion": "^2.0.5",
-    "gatsby-plugin-google-analytics": "^2.0.9",
-    "gatsby-plugin-layout": "^1.0.10",
+    "emotion": "^10.0.9",
+    "emotion-server": "^10.0.9",
+    "gatsby": "^2.1.31",
+    "gatsby-image": "^2.0.33",
+    "gatsby-plugin-emotion": "^4.0.6",
+    "gatsby-plugin-google-analytics": "^2.0.17",
+    "gatsby-plugin-layout": "^1.0.13",
     "gatsby-plugin-manifest": "^2.0.7",
-    "gatsby-plugin-offline": "^2.0.20",
-    "gatsby-plugin-react-helmet": "^3.0.0",
-    "gatsby-plugin-sharp": "^2.0.6",
-    "gatsby-source-shopify": "^2.0.5",
-    "gatsby-transformer-sharp": "^2.1.3",
-    "react": "^16.8.0-alpha.0",
-    "react-apollo": "^2.2.4",
-    "react-dom": "^16.8.0-alpha.0",
+    "gatsby-plugin-offline": "^2.0.25",
+    "gatsby-plugin-react-helmet": "^3.0.9",
+    "gatsby-plugin-sharp": "^2.0.28",
+    "gatsby-source-shopify": "^2.0.18",
+    "gatsby-transformer-sharp": "^2.1.17",
+    "react": "^16.8.4",
+    "react-apollo": "^2.5.2",
+    "react-dom": "^16.8.4",
     "react-emotion": "^9.1.3",
     "react-helmet": "^5.2.0",
-    "react-icons": "^3.1.0",
-    "react-onclickoutside": "^6.7.1",
+    "react-icons": "^3.5.0",
+    "react-onclickoutside": "^6.8.0",
     "react-router-dom": "^4.3.1",
     "recompose": "^0.30.0",
-    "shopify-buy": "^2.0.0"
+    "shopify-buy": "^2.1.1"
   },
   "keywords": [
     "gatsby"
@@ -40,17 +42,24 @@
     "serve": "gatsby serve",
     "develop": "gatsby develop",
     "format": "prettier --write src/**/*.js",
-    "lint": "echo \"Error: no linter specified\" && exit 0",
+    "lint": "eslint .",
     "start": "npm run develop",
     "test": "echo \"Error: no test specified\" && exit 0",
     "stylelint": "stylelint './src/**/*.js'"
   },
   "devDependencies": {
-    "prettier": "^1.12.0",
-    "stylelint": "^9.9.0",
+    "babel-plugin-emotion": "10.0.9",
+    "eslint": "5.15.1",
+    "eslint-config-google": "0.12.0",
+    "eslint-config-prettier": "^4.1.0",
+    "eslint-plugin-emotion": "10.0.7",
+    "eslint-plugin-react": "^7.12.4",
+    "prettier": "^1.16.4",
+    "prop-types": "15.7.2",
+    "stylelint": "^9.10.1",
     "stylelint-config-standard": "^18.2.0",
     "stylelint-config-styled-components": "^0.1.1",
-    "stylelint-order": "^2.0.0",
+    "stylelint-order": "^2.1.0",
     "stylelint-processor-styled-components": "^1.5.1"
   }
 }

src/assets/Butler.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { colors } from '../utils/styles';
 
-export default () => (
+const Butler = () => (
   <svg width="34" height="48" viewBox="0 0 34 48" fill="none">
     <path
       fillRule="evenodd"
@@ -162,3 +162,5 @@ export default () => (
     />
   </svg>
 );
+
+export default Butler;

src/assets/ButlerHand.js

@@ -1,7 +1,8 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import { colors } from '../utils/styles';
 
-export default ({ purple }) => {
+const ButlerHand = ({ purple }) => {
   const strokeColor = purple || colors.brand;
 
   return (
@@ -92,3 +93,9 @@ export default ({ purple }) => {
     </svg>
   );
 };
+
+ButlerHand.propTypes = {
+  purple: PropTypes.any,
+};
+
+export default ButlerHand;