Merge pull request #104 from jxom/create-script-for-checks-in-ci

Added fbjs eslint config, fixed lint errors and warnings

Author: bvaughn

.eslintrc

@@ -1,13 +1,16 @@
 {
   "extends": [
-    "eslint:recommended",
-    "plugin:react/recommended"
+    "fbjs"
   ],
   "plugins": [
     "prettier",
     "react"
   ],
   "parser": "babel-eslint",
+  "rules": {
+    "relay/graphql-naming": 0,
+    "max-len": 0
+  },
   "env": {
     "node": true,
     "browser": true

package.json

@@ -16,10 +16,14 @@
     "array-from": "^2.1.1",
     "babel-eslint": "^8.0.1",
     "eslint": "^4.8.0",
+    "eslint-config-fbjs": "^2.0.0",
     "eslint-config-react": "^1.1.7",
-    "eslint-plugin-flowtype": "^2.37.0",
+    "eslint-plugin-babel": "^4.1.2",
+    "eslint-plugin-flowtype": "^2.39.1",
+    "eslint-plugin-jsx-a11y": "^6.0.2",
     "eslint-plugin-prettier": "^2.3.1",
     "eslint-plugin-react": "^7.4.0",
+    "eslint-plugin-relay": "^0.0.19",
     "flow-bin": "^0.56.0",
     "gatsby": "^1.9.9",
     "gatsby-link": "^1.6.9",

src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js

@@ -147,7 +147,9 @@ class StickyResponsiveSidebar extends Component {
             boxShadow: '0 0 20px rgba(0, 0, 0, 0.3)',
             [media.lessThan('small')]: smallScreenBottomBarStyles,
           }}
-          onClick={this._openNavMenu}>
+          onClick={this._openNavMenu}
+          role="button"
+          tabIndex={0}>
           <Container>
             <div
               css={{

src/html.js

@@ -16,7 +16,7 @@ if (process.env.NODE_ENV === `production`) {
   try {
     stylesStr = require(`!raw-loader!../public/styles.css`);
   } catch (e) {
-    console.log(e);
+    console.error(e);
   }
 }
 

src/templates/components/MetaTitle/index.js

@@ -12,18 +12,10 @@
 import React from 'react';
 import {colors} from 'theme';
 
-const MetaTitle = ({
-  children,
-  title,
-  cssProps = {},
-  onClick,
-  onDark = false,
-}) => (
+const MetaTitle = ({children, title, cssProps = {}, onDark = false}) => (
   <div
-    onClick={onClick}
     css={{
       color: onDark ? colors.subtleOnDark : colors.subtle,
-      cursor: onClick ? 'pointer' : null,
       fontSize: 14,
       fontWeight: 700,
       lineHeight: 3,

src/templates/components/Sidebar/Section.js

@@ -9,6 +9,7 @@
 
 'use strict';
 
+import React from 'react';
 import {colors, media} from 'theme';
 import isItemActive from 'utils/isItemActive';
 import MetaTitle from '../MetaTitle';
@@ -25,32 +26,35 @@ const Section = ({
   section,
 }) => (
   <div>
-    <MetaTitle
-      onClick={onSectionTitleClick}
-      cssProps={{
-        marginTop: 10,
+    <button
+      css={{cursor: 'pointer', backgroundColor: 'transparent', border: 0}}
+      onClick={onSectionTitleClick}>
+      <MetaTitle
+        cssProps={{
+          marginTop: 10,
 
-        [media.greaterThan('small')]: {
-          color: isActive ? colors.text : colors.subtle,
+          [media.greaterThan('small')]: {
+            color: isActive ? colors.text : colors.subtle,
 
-          ':hover': {
-            color: colors.text,
+            ':hover': {
+              color: colors.text,
+            },
           },
-        },
-      }}>
-      {section.title}
-      <ChevronSvg
-        cssProps={{
-          marginLeft: 7,
-          transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
-          transition: 'transform 0.2s ease',
+        }}>
+        {section.title}
+        <ChevronSvg
+          cssProps={{
+            marginLeft: 7,
+            transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
+            transition: 'transform 0.2s ease',
 
-          [media.lessThan('small')]: {
-            display: 'none',
-          },
-        }}
-      />
-    </MetaTitle>
+            [media.lessThan('small')]: {
+              display: 'none',
+            },
+          }}
+        />
+      </MetaTitle>
+    </button>
     <ul
       css={{
         marginBottom: 10,

src/utils/isItemActive.js

@@ -26,10 +26,9 @@ const isItemActive = (location, item) => {
     }
   } else if (item.id.includes('html')) {
     return location.pathname.includes(item.id);
-  } else {
-    const slugId = location.pathname.split('/').slice(-1)[0];
-    return slugId === slugify(item.id);
   }
+  const slugId = location.pathname.split('/').slice(-1)[0];
+  return slugId === slugify(item.id);
 };
 
 export default isItemActive;