add bnb linting

ezy · ezy · commit 387f895534b2 · 2018-08-22T11:31:59.000+12:00
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,17 @@
+{
+    "env": {
+        "node": true,
+        "browser": true,
+        "es6": true
+    },
+    "parser": "babel-eslint",
+    "extends": "airbnb",
+    "rules": {
+        "no-console": 0,
+        "no-param-reassign": 0,
+        "no-use-before-define": 0,
+        "react/jsx-filename-extension": 0,
+        "react/prop-types": 0,
+        "react/destructuring-assignment": 0
+    }
+}
diff --git a/package.json b/package.json
@@ -28,13 +28,14 @@
     "d3-time-format": "^2.1.1",
     "dotenv": "4.0.0",
     "dotenv-expand": "4.2.0",
-    "eslint": "4.10.0",
+    "eslint": "5.3.0",
+    "eslint-config-airbnb": "^17.1.0",
     "eslint-config-react-app": "^2.1.0",
     "eslint-loader": "1.9.0",
     "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
+    "eslint-plugin-import": "2.14",
+    "eslint-plugin-jsx-a11y": "6.1.1",
+    "eslint-plugin-react": "7.11",
     "extract-text-webpack-plugin": "3.0.2",
     "file-loader": "1.1.5",
     "fs-extra": "3.0.1",
diff --git a/src/components/DonutChart.js b/src/components/DonutChart.js
@@ -1,49 +1,59 @@
+/* eslint-disable react/destructuring-assignment */
+
 import React, { Component } from 'react';
 import { Pie } from '@vx/shape';
 import { Group } from '@vx/group';
 
-class DonutChart extends Component {
+class DonutChart extends Component { // eslint-disable-line
   render() {
-    const selectName = this.props.selectName;
+    const { selectName } = this.props;
     const dataStatementTotal = this.props.data ? this.props.data.total[selectName] : { pct: 0 };
     const remainder = 100 - dataStatementTotal.pct;
-    const pctData = [{pct: dataStatementTotal.pct, rem: remainder}];
-    const chartData = Object.keys(pctData[0])
-      .map(k => ({usage: pctData[0][k] }));
-    const width = parseInt((document.documentElement.offsetWidth/4-10).toFixed(0), 10);
-    const height = parseInt((width/1.4).toFixed(0), 10);
+    const pctData = [
+      {
+        pct: dataStatementTotal.pct,
+        rem: remainder,
+      },
+    ];
+    const chartData = Object.keys(pctData[0]).map(k => ({ usage: pctData[0][k] }));
+    const width = parseInt((document.documentElement.offsetWidth / 4 - 10).toFixed(0), 10);
+    const height = parseInt((width / 1.4).toFixed(0), 10);
     if (width < 10) return null;
     const fills = ['#55CA01', '#F0FFE4'];
-    const radius = Math.min(width, height)/2;
+    const radius = Math.min(width, height) / 2;
     return (
       <svg width={width} height={height}>
-        <Group top={height/2.5} left={width/2}>
+        <Group top={height / 2.5} left={width / 2}>
           <Pie
             data={chartData}
             pieValue={d => d.usage}
-            outerRadius={radius - (radius/3)}
-            innerRadius={radius - (radius/2)}
+            outerRadius={radius - (radius / 3)}
+            innerRadius={radius - (radius / 2)}
             fill={d => fills[d.index]}
             padAngle={0}
             pieSort={(a, b) => a.index - b.index}
           />
           <text
-            dy={".33em"}
+            dy=".33em"
             fontSize={52}
             fontWeight={800}
-            textAnchor={"middle"}
-            style={{ pointerEvents: "none" }}
+            textAnchor="middle"
+            style={{
+              pointerEvents: 'none',
+            }}
             fill="#fff"
           >
             {dataStatementTotal.pct.toFixed(0)}
           </text>
           <text
-            dy={width/2.8}
+            dy={width / 2.8}
             fontSize={24}
             fontWeight={200}
-            textAnchor={"middle"}
-            style={{ pointerEvents: "none" }}
-            fill={"#80CCFF"}
+            textAnchor="middle"
+            style={{
+              pointerEvents: 'none',
+            }}
+            fill="#80CCFF"
           >
             {selectName.toUpperCase()}
           </text>
diff --git a/src/components/LineChart.js b/src/components/LineChart.js
@@ -11,20 +11,22 @@ const ySelector = d => d.value;
 
 class LineChart extends Component {
   state = {
-    position: null
+    position: null,
   };
+
   render() {
     let statementTotals;
-    if (this.props.data) {
-      statementTotals = `${this.props.data.total.statements.total} TOTAL STATEMENTS`;
+    const { data } = this.props;
+    if (data) {
+      statementTotals = `${this.props.data.total.statements.total} TOTAL STATEMENTS`; // eslint-disable-line react/destructuring-assignment
     }
     const { position } = this.state;
     // calculate graph width based on window minus padding
-    const width = document.documentElement.offsetWidth-40;
+    const width = document.documentElement.offsetWidth - 40;
     const height = 270;
     const margin = {
       top: 60,
-      bottom: 30
+      bottom: 30,
     };
     const yMax = height - margin.top - margin.bottom;
 
@@ -86,12 +88,12 @@ class LineChart extends Component {
           data={sTotal}
         />
         <text
-          dy={"1.5em"}
-          dx={".5em"}
+          dy="1.5em"
+          dx=".5em"
           fontSize={14}
           fontWeight={200}
-          textAnchor={"left"}
-          style={{ pointerEvents: "none" }}
+          textAnchor="left"
+          style={{ pointerEvents: 'none' }}
           fill="#60BFFF"
         >
           {statementTotals}
@@ -101,10 +103,10 @@ class LineChart extends Component {
           top={yMax + margin.top}
           stroke="#094c9b"
           tickStroke="transparent"
-          tickLabelProps={(value, index) => ({
+          tickLabelProps={(value, index) => ({ // eslint-disable-line no-unused-vars
             fill: '#9A9A9A',
             fontSize: 11,
-            textAnchor: 'middle'
+            textAnchor: 'middle',
           })}
         />
       </svg>
diff --git a/src/components/StackChart.js b/src/components/StackChart.js
@@ -1,54 +1,53 @@
 import React, { Component } from 'react';
-import {BarStackHorizontal} from '@vx/shape';
-import {Group} from '@vx/group';
-import {scaleBand, scaleLinear, scaleOrdinal} from '@vx/scale';
+import { BarStackHorizontal } from '@vx/shape';
+import { Group } from '@vx/group';
+import { scaleBand, scaleLinear, scaleOrdinal } from '@vx/scale';
 
 class StackChart extends Component {
   render() {
-    // const dataTotals = require('../data/coverage-summary.json');
-    const fileSet = this.props.fileSet;
+    const { fileSet } = this.props;
     // If props exist for data reurn them, otherwise return defaults
     const totalData = () => {
-      if (this.props.data) {
-        return this.props.data;
+      if (this.props.data) { // eslint-disable-line react/destructuring-assignment
+        return this.props.data; // eslint-disable-line react/destructuring-assignment
       }
-      let dataObj = {};
-      dataObj[fileSet] = {statements: {total: 1, covered: 0, skipped: 0, pct: 0}};
+      const dataObj = {};
+      dataObj[fileSet] = {
+        statements: {
+          total: 1, covered: 0, skipped: 0, pct: 0,
+        },
+      };
       return dataObj;
     };
-    let dataTotals = totalData();
+    const dataTotals = totalData();
     // Filter the target file groups and return 'statements' for our metric
     const dataSet = Object.keys(dataTotals)
-      .filter((d) => {
-        return d.includes(fileSet);
-      })
-      .map((d) => {
-        return dataTotals[d]['statements'];
-      });
+      .filter(d => d.includes(fileSet))
+      .map(d => dataTotals[d].statements);
     // Sum the statement values for one or many items
     const sumValues = (obj, key) => Object.values(obj).reduce((a, b) => {
       if (!b) {
         return a[key];
       }
       return typeof a === 'object' ? a[key] + b[key] : a + b[key];
     });
-    let sTotal = dataSet.length >= 2 ? sumValues(dataSet, 'total') : dataSet[0].total;
-    let sCovered = dataSet.length >= 2 ? sumValues(dataSet, 'covered') : dataSet[0].covered;
+    const sTotal = dataSet.length >= 2 ? sumValues(dataSet, 'total') : dataSet[0].total;
+    const sCovered = dataSet.length >= 2 ? sumValues(dataSet, 'covered') : dataSet[0].covered;
     // Work out precentage from totaled values
-    let sPct = sCovered/sTotal*100;
+    const sPct = sCovered / sTotal * 100;
     // Set the data
     const data = [{
       pct: sPct,
-      diff: 100 - sPct
+      diff: 100 - sPct,
     }];
     const keys = Object.keys(data[0]).map(d => d);
-    const width = parseInt((document.documentElement.offsetWidth/8-5).toFixed(0), 10);
+    const width = parseInt((document.documentElement.offsetWidth / 8 - 5).toFixed(0), 10);
     const height = 80;
     const margin = {
       top: 40,
       left: 0,
       right: 20,
-      bottom: 20
+      bottom: 20,
     };
     if (width < 10) return null;
 
@@ -60,16 +59,16 @@ class StackChart extends Component {
     const xScale = scaleLinear({
       rangeRound: [0, xMax],
       domain: [0, 100],
-      nice: true
+      nice: true,
     });
     const yScale = scaleBand({
       rangeRound: [40, 0],
       domain: 1,
-      padding: 0.4
+      padding: 0.4,
     });
     const zScale = scaleOrdinal({
       domain: keys,
-      range: ['#55CA01', '#F0FFE4']
+      range: ['#55CA01', '#F0FFE4'],
     });
 
     return (
@@ -87,23 +86,23 @@ class StackChart extends Component {
               zScale={zScale}
             />
             <text
-              dy={"-.7em"}
+              dy="-.7em"
               fontSize={16}
               fontWeight={200}
-              textAnchor={"left"}
-              style={{ pointerEvents: "none" }}
-              fill={"#F2F2F2"}
+              textAnchor="left"
+              style={{ pointerEvents: 'none' }}
+              fill="#F2F2F2"
             >
               {fileSet}
             </text>
             <text
-              dy={"1.1em"}
-              dx={".3em"}
+              dy="1.1em"
+              dx=".3em"
               fontSize={16}
               fontWeight={200}
-              textAnchor={"left"}
-              style={{ pointerEvents: "none" }}
-              fill={"#001E40"}
+              textAnchor="left"
+              style={{ pointerEvents: 'none' }}
+              fill="#001E40"
             >
               {sPct.toFixed()}
             </text>
diff --git a/src/registerServiceWorker.js b/src/registerServiceWorker.js
@@ -9,13 +9,13 @@
 // This link also includes instructions on opting out of this behavior.
 
 const isLocalhost = Boolean(
-  window.location.hostname === 'localhost' ||
+  window.location.hostname === 'localhost'
     // [::1] is the IPv6 localhost address.
-    window.location.hostname === '[::1]' ||
+    || window.location.hostname === '[::1]'
     // 127.0.0.1/8 is considered localhost for IPv4.
-    window.location.hostname.match(
-      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-    )
+    || window.location.hostname.match(
+      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/,
+    ),
 );
 
 export default function register() {
@@ -40,8 +40,8 @@ export default function register() {
         // service worker/PWA documentation.
         navigator.serviceWorker.ready.then(() => {
           console.log(
-            'This web app is being served cache-first by a service ' +
-              'worker. To learn more, visit https://goo.gl/SC7cgQ'
+            'This web app is being served cache-first by a service '
+              + 'worker. To learn more, visit https://goo.gl/SC7cgQ',
           );
         });
       } else {
@@ -55,7 +55,7 @@ export default function register() {
 function registerValidSW(swUrl) {
   navigator.serviceWorker
     .register(swUrl)
-    .then(registration => {
+    .then((registration) => {
       registration.onupdatefound = () => {
         const installingWorker = registration.installing;
         installingWorker.onstatechange = () => {
@@ -76,22 +76,22 @@ function registerValidSW(swUrl) {
         };
       };
     })
-    .catch(error => {
+    .catch((error) => {
       console.error('Error during service worker registration:', error);
     });
 }
 
 function checkValidServiceWorker(swUrl) {
   // Check if the service worker can be found. If it can't reload the page.
   fetch(swUrl)
-    .then(response => {
+    .then((response) => {
       // Ensure service worker exists, and that we really are getting a JS file.
       if (
-        response.status === 404 ||
-        response.headers.get('content-type').indexOf('javascript') === -1
+        response.status === 404
+        || response.headers.get('content-type').indexOf('javascript') === -1
       ) {
         // No service worker found. Probably a different app. Reload the page.
-        navigator.serviceWorker.ready.then(registration => {
+        navigator.serviceWorker.ready.then((registration) => {
           registration.unregister().then(() => {
             window.location.reload();
           });
@@ -103,14 +103,14 @@ function checkValidServiceWorker(swUrl) {
     })
     .catch(() => {
       console.log(
-        'No internet connection found. App is running in offline mode.'
+        'No internet connection found. App is running in offline mode.',
       );
     });
 }
 
 export function unregister() {
   if ('serviceWorker' in navigator) {
-    navigator.serviceWorker.ready.then(registration => {
+    navigator.serviceWorker.ready.then((registration) => {
       registration.unregister();
     });
   }
diff --git a/src/templates/App.js b/src/templates/App.js
diff --git a/yarn.lock b/yarn.lock
