WIP

morewings · Apr 20, 2020 · 7d8e8bf · 7d8e8bf
1 parent 1a68e22
commit 7d8e8bf
Show file tree

Hide file tree

Showing 14 changed files with 611 additions and 78 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,78 @@
+module.exports = {
+  globals: {
+    __PATH_PREFIX__: true,
+  },
+  extends: [
+    "airbnb",
+    "react-app",
+    "prettier",
+    "prettier/flowtype",
+    "prettier/react"
+  ],
+  "rules": {
+    // Allow jsx tags inside .js files.
+    "react/jsx-filename-extension": [1, {"extensions": [".js", ".jsx"]}],
+    // Disable props spreading (<App {...props} />) warning.
+    "react/jsx-props-no-spreading": 0,
+    // Throw warning instead of error when using array index as a key.
+    "react/no-array-index-key": 1,
+    // Allow modules with named exports only.
+    "import/prefer-default-export": 0,
+    // Force {foo: 'bar'} object literal syntax.
+    "object-curly-spacing": ["error", "never"],
+    // Throw warning instead of error. Feel free to choose your favorite option https://eslint.org/docs/rules/arrow-body-style
+    "arrow-body-style": ["warn", "as-needed"],
+    // Make prettier code formatting suggestions more verbose.
+    "prettier/prettier": ["warn"],
+    // Throw warning when <a href="#"> or <a href="javascript:void(0)"> are used. Use <button> instead.
+    "jsx-a11y/anchor-is-valid": ["warn", {"aspects": ["invalidHref"]}],
+    // Allow using (props) => <Component /> and ({propName}) => <Component /> syntax.
+    "react/destructuring-assignment": "off",
+    // Disable <Fragment> => <> replacement. Feel free to change
+    "react/jsx-fragments": "off",
+    // Below is the set of functional rules to warn developer about accidental mutations, which may cause error in reducers etc.
+    // No delete operator.
+    "fp/no-delete": "warn",
+    // Warning when Object.assign(a, b) used, since it mutates first argument. Object.assign({}, a, b) is ok.
+    "fp/no-mutating-assign": "warn",
+    // Warning when mutating method (pop, push, reverse, shift, sort, splice, unshift, etc) is used. Ramda and lodash/fp are allowed (_.pop, R.push)
+    "fp/no-mutating-methods": [
+      "warn",
+      {
+        "allowedObjects": ["_", "R"]
+      }
+    ],
+    // Warning when mutating operators (++, --, etc) are used, object = {} also. `Component.propTypes`, `Component.defaultProps`, common.js (`module.exports`) and `ref.current` are ok.
+    "fp/no-mutation": [
+      "warn",
+      {
+        "commonjs": true,
+        "allowThis": true,
+        "exceptions": [{"property": "propTypes"}, {"property": "defaultProps"}, {"property": "current"}]
+      }
+    ]
+  },
+  "plugins": ["prettier", "fp"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "moduleDirectory": ["node_modules", "./src"]
+      }
+    }
+  },
+  "overrides": [
+    {
+      "files": [ "./*.js"],
+      "rules": {
+        "import/no-extraneous-dependencies": ["error", {"devDependencies": true, "optionalDependencies": false, "peerDependencies": false}],
+        "global-require": 0
+      }
+    },
+    {
+      "files": ["**/*.spec.js"],
+      "rules": {
+        "react/prop-types": "off"
+      }
+    }
+  ]
+}
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,9 @@
 {
-  "arrowParens": "avoid",
-  "semi": false
+  "semi": true,
+  "singleQuote": true,
+  "jsxSingleQuote": false,
+  "trailingComma": "es5",
+  "bracketSpacing": false,
+  "jsxBracketSameLine": true,
+  "arrowParens": "avoid"
 }
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -27,6 +27,12 @@ module.exports = {
         icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
       },
     },
+    {
+      resolve: `gatsby-plugin-postcss`,
+      options: {
+        postCssPlugins: [require(`postcss-preset-env`)({ stage: 0 })],
+      },
+    },
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

diff --git a/package.json b/package.json
@@ -19,7 +19,19 @@
     "react-helmet": "^6.0.0"
   },
   "devDependencies": {
-    "prettier": "2.0.4"
+    "eslint": "^6.8.0",
+    "eslint-config-airbnb": "^18.1.0",
+    "eslint-config-prettier": "^6.10.1",
+    "eslint-config-react-app": "^5.2.1",
+    "eslint-plugin-fp": "^2.3.0",
+    "eslint-plugin-import": "^2.20.1",
+    "eslint-plugin-jsx-a11y": "^6.2.3",
+    "eslint-plugin-prettier": "^3.1.3",
+    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react-hooks": "^2.5.0",
+    "gatsby-plugin-postcss": "^2.2.3",
+    "postcss-preset-env": "^6.7.0",
+    "prettier": "^2.0.4"
   },
   "keywords": [
     "gatsby"
@@ -32,7 +44,9 @@
     "start": "npm run develop",
     "serve": "gatsby serve",
     "clean": "gatsby clean",
-    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1"
+    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing\" && exit 1",
+    "fix:js": "npx eslint --fix ./src/",
+    "lint:js": "npx eslint ./src/"
   },
   "repository": {
     "type": "git",

diff --git a/src/components/Test/Test.js b/src/components/Test/Test.js
diff --git a/src/components/Test/index.js b/src/components/Test/index.js
diff --git a/src/components/header.js b/src/components/header.js
@@ -1,42 +1,39 @@
-import { Link } from "gatsby"
-import PropTypes from "prop-types"
-import React from "react"
+import {Link} from 'gatsby';
+import PropTypes from 'prop-types';
+import React from 'react';
 
-const Header = ({ siteTitle }) => (
+const Header = ({siteTitle}) => (
   <header
     style={{
       background: `rebeccapurple`,
       marginBottom: `1.45rem`,
-    }}
-  >
+    }}>
     <div
       style={{
         margin: `0 auto`,
         maxWidth: 960,
         padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
+      }}>
+      <h1 style={{margin: 0}}>
         <Link
           to="/"
           style={{
             color: `white`,
             textDecoration: `none`,
-          }}
-        >
+          }}>
           {siteTitle}
         </Link>
       </h1>
     </div>
   </header>
-)
+);
 
 Header.propTypes = {
   siteTitle: PropTypes.string,
-}
+};
 
 Header.defaultProps = {
   siteTitle: ``,
-}
+};
 
-export default Header
+export default Header;
diff --git a/src/components/image.js b/src/components/image.js
@@ -1,6 +1,6 @@
-import React from "react"
-import { useStaticQuery, graphql } from "gatsby"
-import Img from "gatsby-image"
+import React from 'react';
+import {useStaticQuery, graphql} from 'gatsby';
+import Img from 'gatsby-image';
 
 /*
  * This component is built using `gatsby-image` to automatically serve optimized
@@ -16,17 +16,17 @@ import Img from "gatsby-image"
 const Image = () => {
   const data = useStaticQuery(graphql`
     query {
-      placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
+      placeholderImage: file(relativePath: {eq: "gatsby-astronaut.png"}) {
         childImageSharp {
           fluid(maxWidth: 300) {
             ...GatsbyImageSharpFluid
           }
         }
       }
     }
-  `)
+  `);
 
-  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />
-}
+  return <Img fluid={data.placeholderImage.childImageSharp.fluid} />;
+};
 
-export default Image
+export default Image;
diff --git a/src/components/layout.js b/src/components/layout.js
@@ -5,14 +5,14 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-import { useStaticQuery, graphql } from "gatsby"
+import React from 'react';
+import PropTypes from 'prop-types';
+import {useStaticQuery, graphql} from 'gatsby';
 
-import Header from "./header"
-import "./layout.css"
+import Header from './header';
+import './layout.css';
 
-const Layout = ({ children }) => {
+const Layout = ({children}) => {
   const data = useStaticQuery(graphql`
     query SiteTitleQuery {
       site {
@@ -21,7 +21,7 @@ const Layout = ({ children }) => {
         }
       }
     }
-  `)
+  `);
 
   return (
     <>
@@ -31,8 +31,7 @@ const Layout = ({ children }) => {
           margin: `0 auto`,
           maxWidth: 960,
           padding: `0 1.0875rem 1.45rem`,
-        }}
-      >
+        }}>
         <main>{children}</main>
         <footer>
           © {new Date().getFullYear()}, Built with
@@ -41,11 +40,11 @@ const Layout = ({ children }) => {
         </footer>
       </div>
     </>
-  )
-}
+  );
+};
 
 Layout.propTypes = {
   children: PropTypes.node.isRequired,
-}
+};
 
-export default Layout
+export default Layout;
diff --git a/src/components/seo.js b/src/components/seo.js
@@ -5,13 +5,13 @@
  * See: https://www.gatsbyjs.org/docs/use-static-query/
  */
 
-import React from "react"
-import PropTypes from "prop-types"
-import { Helmet } from "react-helmet"
-import { useStaticQuery, graphql } from "gatsby"
+import React from 'react';
+import PropTypes from 'prop-types';
+import {Helmet} from 'react-helmet';
+import {useStaticQuery, graphql} from 'gatsby';
 
-function SEO({ description, lang, meta, title }) {
-  const { site } = useStaticQuery(
+function SEO({description, lang, meta, title}) {
+  const {site} = useStaticQuery(
     graphql`
       query {
         site {
@@ -23,9 +23,9 @@ function SEO({ description, lang, meta, title }) {
         }
       }
     `
-  )
+  );
 
-  const metaDescription = description || site.siteMetadata.description
+  const metaDescription = description || site.siteMetadata.description;
 
   return (
     <Helmet
@@ -69,20 +69,20 @@ function SEO({ description, lang, meta, title }) {
         },
       ].concat(meta)}
     />
-  )
+  );
 }
 
 SEO.defaultProps = {
   lang: `en`,
   meta: [],
   description: ``,
-}
+};
 
 SEO.propTypes = {
   description: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   title: PropTypes.string.isRequired,
-}
+};
 
-export default SEO
+export default SEO;
diff --git a/src/pages/404.js b/src/pages/404.js
@@ -1,14 +1,14 @@
-import React from "react"
+import React from 'react';
 
-import Layout from "../components/layout"
-import SEO from "../components/seo"
+import Layout from '../components/layout';
+import SEO from '../components/seo';
 
 const NotFoundPage = () => (
   <Layout>
     <SEO title="404: Not found" />
     <h1>NOT FOUND</h1>
     <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
   </Layout>
-)
+);
 
-export default NotFoundPage
+export default NotFoundPage;
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,21 +1,21 @@
-import React from "react"
-import { Link } from "gatsby"
+import React from 'react';
+import {Link} from 'gatsby';
 
-import Layout from "../components/layout"
-import Image from "../components/image"
-import SEO from "../components/seo"
+import Layout from '../components/layout';
+import Image from '../components/image';
+import SEO from '../components/seo';
 
 const IndexPage = () => (
   <Layout>
     <SEO title="Home" />
     <h1>Hi people</h1>
     <p>Welcome to your new Gatsby site.</p>
     <p>Now go build something great.</p>
-    <div style={{ maxWidth: `300px`, marginBottom: `1.45rem` }}>
+    <div style={{maxWidth: `300px`, marginBottom: `1.45rem`}}>
       <Image />
     </div>
     <Link to="/page-2/">Go to page 2</Link>
   </Layout>
-)
+);
 
-export default IndexPage
+export default IndexPage;