[WIP] UI rinse

.env.development

@@ -3,4 +3,4 @@ AUTH0_CLIENTID=kp6gHVX1pySEYNpvktwciU5Mm1j0C52D
 AUTH0_CALLBACK=http://localhost:8000/callback/
 AUTH0_AUDIENCE=https://api.gatsbyjs.com/
 GATSBY_API=https://us-central1-gatsby-core.cloudfunctions.net/graphql
-SHOPIFY_ACCESS_TOKEN=9aa73c089d34741f36edbe4d7314373a
+SHOPIFY_ACCESS_TOKEN=9aa73c089d34741f36edbe4d7314373a

.eslintrc.json

@@ -3,14 +3,13 @@
   "extends": [
     "google",
     "eslint:recommended",
-    "plugin:flowtype/recommended",
+    "plugin:jsx-a11y/recommended",
     "plugin:react/recommended",
-    "prettier",
-    "prettier/flowtype",
-    "prettier/react"
+    "prettier"
   ],
-  "plugins": ["flowtype", "react"],
+  "plugins": ["react", "jsx-a11y"],
   "parserOptions": {
+    "experimentalObjectRestSpread": true,
     "ecmaVersion": 2016,
     "sourceType": "module",
     "ecmaFeatures": {
@@ -20,11 +19,10 @@
   "env": {
     "browser": true,
     "es6": true,
-    "node": true,
-    "jest": true
+    "node": true
   },
   "globals": {
-    "spyOn": true
+    "graphql": true
   },
   "rules": {
     "no-console": "off",
@@ -51,26 +49,13 @@
         "functions": "ignore"
       }
     ],
-    "react/prop-types": [
-      "error",
-      {
-        "ignore": ["children"]
-      }
-    ]
+    "react/prop-types": 0,
+    "react/displayName": 0,
+    "no-invalid-this": 0
   },
-  "overrides": [
-    {
-      "files": [
-        "packages/**/gatsby-browser.js",
-        "packages/gatsby/cache-dir/**/*"
-      ],
-      "env": {
-        "browser": true
-      },
-      "globals": {
-        "___loader": false,
-        "___emitter": false
-      }
+  "settings": {
+    "react": {
+      "version": "detect"
     }
-  ]
+  }
 }

.prettierignore

@@ -0,0 +1,6 @@
+.cache
+public
+static
+node_modules
+.vscode
+.idea

.prettierrc

@@ -1,3 +1,5 @@
 {
-  "singleQuote": true
+  "singleQuote": false,
+  "semi": false,
+  "trailingComma": "all"
 }

README.md

@@ -6,6 +6,20 @@
 <h1 align="center">
   Gatsby <a href="https://store.gatsbyjs.org">Swag Store</a>
 </h1>
+<p align="center">
+  <a href="https://github.com/gatsbyjs/store.gatsbyjs.org/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="Gatsby is released under the MIT license." />
+  </a>
+  <a href="https://circleci.com/gh/gatsbyjs/store.gatsbyjs.org">
+    <img src="https://circleci.com/gh/gatsbyjs/store.gatsbyjs.org.svg?style=shield" alt="Current CircleCI build status." />
+  </a>
+  <a href="https://gatsbyjs.com/contributing/how-to-contribute/">
+    <img src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg" alt="PRs welcome!" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=gatsbyjs">
+    <img src="https://img.shields.io/twitter/follow/gatsbyjs.svg?label=Follow%20@gatsbyjs" alt="Follow @GatsbyJS" />
+  </a>
+</p>
 
 This is the Gatsby store, where we make swag, stickers, and other Gatsby goodies available to contributors and Gatsby enthusiasts. 💪💜
 
@@ -24,13 +38,13 @@ This store is built with data from:
 - The [Shopify JavaScript Buy SDK](https://shopify.github.io/js-buy-sdk/)
 - [Auth0](https://auth0.com/)
 
-We’re using [Gatsby V2](https://github.com/gatsbyjs/gatsby) and [Emotion](https://emotion.sh/) to get the data on screen.
+We’re using [Gatsby v3](https://github.com/gatsbyjs/gatsby) and [Emotion](https://emotion.sh/) to get the data on screen.
 
 The store is statically rendered using the Shopify source plugin, and the maintainer dashboard is a dynamic app (e.g. client-only routes) protected by Auth0.
 
 ## Free Swag for Contributors
 
-If you're a contributor to Gatsby, that means you can get one free item from our store! Log in using your GitHub account and we'll give you a discount code good for a t-shirt or socks. With five or more contributions, You can claim your **level two** swag!
+If you're a contributor to Gatsby, that means you can get one free item from our store! Log in using your GitHub account and we'll give you a discount code good for a t-shirt or socks. With five or more contributions, you can claim your **level two** swag!
 
 See [the docs for claiming contributor swag](https://www.gatsbyjs.com/contributing/contributor-swag/) for additional details.
 

gatsby-browser.js

@@ -1,35 +1,35 @@
-import React from 'react';
-import { ApolloProvider } from 'react-apollo';
-import { client } from './src/context/ApolloContext';
-import { silentAuth } from './src/utils/auth';
+import React from "react"
+import { ApolloProvider } from "react-apollo"
+import { client } from "./src/context/ApolloContext"
+import { silentAuth } from "./src/utils/auth"
 
 class SessionCheck extends React.Component {
   constructor(props) {
-    super(props);
+    super(props)
     this.state = {
-      loading: true
-    };
+      loading: true,
+    }
   }
 
   handleCheckSession = () => {
-    this.setState({ loading: false });
-  };
+    this.setState({ loading: false })
+  }
 
   componentDidMount() {
-    silentAuth(this.handleCheckSession);
+    silentAuth(this.handleCheckSession)
   }
 
   render() {
     return (
       this.state.loading === false && (
         <React.Fragment>{this.props.children}</React.Fragment>
       )
-    );
+    )
   }
 }
 
 export const wrapRootElement = ({ element }) => (
   <SessionCheck>
     <ApolloProvider client={client}>{element}</ApolloProvider>
   </SessionCheck>
-);
+)

gatsby-config.js

@@ -1,53 +1,52 @@
-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-plugin-image',
-    'gatsby-plugin-sharp',
-    'gatsby-transformer-sharp',
+    "gatsby-plugin-image",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
     {
-      resolve: 'gatsby-source-shopify',
+      resolve: "gatsby-source-shopify",
       options: {
-        apiKey: process.env.SHOPIFY_ADMIN_API_KEY,
         password: process.env.SHOPIFY_ADMIN_PASSWORD,
-        storeUrl: process.env.SHOPIFY_SHOP_ADDRESS
-      }
+        storeUrl: process.env.SHOPIFY_SHOP_ADDRESS,
+      },
     },
-    '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(`
     {
@@ -15,48 +15,48 @@ exports.createPages = async ({
         }
       }
     }
-  `);
+  `)
 
-  pages.data.allShopifyProduct.edges.forEach(edge => {
+  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
-    };
-    createRedirect({ fromPath: `/product/${oldSlug}`, ...config });
-    createRedirect({ fromPath: `/product/${oldSlug}/`, ...config });
-  });
-};
+      redirectInBrowser: true,
+    }
+    createRedirect({ fromPath: `/product/${oldSlug}`, ...config })
+    createRedirect({ fromPath: `/product/${oldSlug}/`, ...config })
+  })
+}
 
 exports.onCreatePage = async ({ page, actions: { createPage } }) => {
   /*
@@ -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);
+    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(),
+          },
+        ],
+      },
+    })
   }
-};
+}