Migrate to Spotify web scripts for eslint and prettier (#173)

* Added packages from spotify/web-scripts

* Run prettier

* Eslint clean up

* Run eslint on test instead of using eslint.spec.js

* Fix componentdocs file

* Rebuild docs

* Fix tests

.eslintignore

@@ -0,0 +1,9 @@
+# Ignore charts that are still experimental
+/src/AreaHeatmap.js
+/src/KernelDensityEstimation.js
+
+# Ignore shallowEqual
+/src/utils/shallowEqual.js
+
+# Ignore lessons
+/docs/src/lessons

.eslintrc.json

@@ -1,4 +1,21 @@
 {
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  },
   "parser": "babel-eslint",
-  "extends": ["plugin:prettier/recommended"]
+  "extends": [
+    "@spotify/eslint-config-react",
+    "@spotify/eslint-config-base",
+    "prettier"
+  ],
+  "plugins": ["jest"],
+  "rules": {
+    "consistent-return": "off",
+    "no-nested-ternary": "off",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "jsx-a11y/click-events-have-key-events": "off",
+    "jsx-a11y/no-noninteractive-element-interactions": "off"
+  }
 }

docs/build/index.html

@@ -31,5 +31,5 @@
     </div>
 
     <div class="container-fluid" id="container">Loading...</div>
-<script type="text/javascript" src="bundle.55cc64af099498182a80.js"></script></body>
+<script type="text/javascript" src="bundle.26d3f9623326f0ce1e06.js"></script></body>
 </html>

docs/src/App.js

@@ -1,110 +1,110 @@
-import React from "react";
-import { HashRouter as Router, Link, Route } from "react-router-dom";
-import _ from "lodash";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { HashRouter as Router, Link, Route } from 'react-router-dom';
+import _ from 'lodash';
 
-import * as Docs from "./docs";
-import * as Lessons from "./lessons";
-import Playground from "./Playground";
+import * as Docs from './docs';
+import * as Lessons from './lessons';
 
 const lessons = [
   {
-    name: "Quick Start",
-    path: "/quick-start",
-    Component: Lessons.QuickStartLesson
+    name: 'Quick Start',
+    path: '/quick-start',
+    Component: Lessons.QuickStartLesson,
   },
-  { name: "XY Plots", path: "/xy-plots", Component: Lessons.XYPlotsLesson }
+  { name: 'XY Plots', path: '/xy-plots', Component: Lessons.XYPlotsLesson },
   // {name: "Getters & Accessors", path: '/getters-and-accessors', Component: Lessons.GettersAndAccessorsLesson},
   // {name: "Interaction", path: '/interaction', Component: Lessons.InteractionLesson},
 ];
 
 const mainComponents = [
-  { name: "XYPlot", path: "/xy-plot", Component: Docs.XYPlotDocs },
+  { name: 'XYPlot', path: '/xy-plot', Component: Docs.XYPlotDocs },
   {
-    name: "ZoomContainer",
-    path: "/zoom-container",
-    Component: Docs.ZoomContainerDocs
-  }
+    name: 'ZoomContainer',
+    path: '/zoom-container',
+    Component: Docs.ZoomContainerDocs,
+  },
 ];
 
 const xyChartComponents = [
   {
-    name: "AreaBarChart",
-    path: "/area-bar-chart",
-    Component: Docs.AreaBarChartDocs
+    name: 'AreaBarChart',
+    path: '/area-bar-chart',
+    Component: Docs.AreaBarChartDocs,
   },
-  { name: "AreaChart", path: "/area-chart", Component: Docs.AreaChartDocs },
+  { name: 'AreaChart', path: '/area-chart', Component: Docs.AreaChartDocs },
   {
-    name: "AreaHeatmap",
-    path: "/area-heatmap",
-    Component: Docs.AreaHeatmapDocs
+    name: 'AreaHeatmap',
+    path: '/area-heatmap',
+    Component: Docs.AreaHeatmapDocs,
   },
-  { name: "BarChart", path: "/bar-chart", Component: Docs.BarChartDocs },
+  { name: 'BarChart', path: '/bar-chart', Component: Docs.BarChartDocs },
   {
-    name: "ColorHeatmap",
-    path: "/color-heatmap",
-    Component: Docs.ColorHeatmapDocs
+    name: 'ColorHeatmap',
+    path: '/color-heatmap',
+    Component: Docs.ColorHeatmapDocs,
   },
   {
-    name: "FunnelChart",
-    path: "/funnel-chart",
-    Component: Docs.FunnelChartDocs
+    name: 'FunnelChart',
+    path: '/funnel-chart',
+    Component: Docs.FunnelChartDocs,
   },
-  { name: "Histogram", path: "/histogram", Component: Docs.HistogramDocs },
+  { name: 'Histogram', path: '/histogram', Component: Docs.HistogramDocs },
   {
-    name: "KernelDensityEstimation",
-    path: "/kernel-density-estimation",
-    Component: Docs.KernelDensityEstimationDocs
+    name: 'KernelDensityEstimation',
+    path: '/kernel-density-estimation',
+    Component: Docs.KernelDensityEstimationDocs,
   },
-  { name: "LineChart", path: "/line-chart", Component: Docs.LineChartDocs },
+  { name: 'LineChart', path: '/line-chart', Component: Docs.LineChartDocs },
   {
-    name: "MarkerLineChart",
-    path: "/marker-line-chart",
-    Component: Docs.MarkerLineChartDocs
+    name: 'MarkerLineChart',
+    path: '/marker-line-chart',
+    Component: Docs.MarkerLineChartDocs,
   },
   {
-    name: "RangeBarChart",
-    path: "/range-bar-chart",
-    Component: Docs.RangeBarChartDocs
+    name: 'RangeBarChart',
+    path: '/range-bar-chart',
+    Component: Docs.RangeBarChartDocs,
   },
   {
-    name: "ScatterPlot",
-    path: "/scatter-plot",
-    Component: Docs.ScatterPlotDocs
-  }
+    name: 'ScatterPlot',
+    path: '/scatter-plot',
+    Component: Docs.ScatterPlotDocs,
+  },
 ];
 
 const standaloneChartComponents = [
-  { name: "PieChart", path: "/pie-chart", Component: Docs.PieChartDocs },
-  { name: "SankeyDiagram", path: "/sankey", Component: Docs.SankeyDiagramDocs },
-  { name: "TreeMap", path: "/tree-map", Component: Docs.TreeMapDocs }
+  { name: 'PieChart', path: '/pie-chart', Component: Docs.PieChartDocs },
+  { name: 'SankeyDiagram', path: '/sankey', Component: Docs.SankeyDiagramDocs },
+  { name: 'TreeMap', path: '/tree-map', Component: Docs.TreeMapDocs },
 ];
 
 const dataMarkComponents = [
-  { name: "Bar", path: "/bar", Component: Docs.BarDocs },
-  { name: "RangeRect", path: "/range-rect", Component: Docs.RangeRectDocs },
-  { name: "XLine", path: "/x-line", Component: Docs.XLineDocs },
-  { name: "YLine", path: "/y-line", Component: Docs.YLineDocs }
+  { name: 'Bar', path: '/bar', Component: Docs.BarDocs },
+  { name: 'RangeRect', path: '/range-rect', Component: Docs.RangeRectDocs },
+  { name: 'XLine', path: '/x-line', Component: Docs.XLineDocs },
+  { name: 'YLine', path: '/y-line', Component: Docs.YLineDocs },
 ];
 
 const axisComponents = [
-  { name: "XAxis", path: "/x-axis", Component: Docs.XAxisDocs },
+  { name: 'XAxis', path: '/x-axis', Component: Docs.XAxisDocs },
   {
-    name: "XAxisLabels",
-    path: "/x-axis-labels",
-    Component: Docs.XAxisLabelsDocs
+    name: 'XAxisLabels',
+    path: '/x-axis-labels',
+    Component: Docs.XAxisLabelsDocs,
   },
-  { name: "XAxisTitle", path: "/x-axis-title", Component: Docs.XAxisTitleDocs },
-  { name: "XGrid", path: "/x-grid", Component: Docs.XGridDocs },
-  { name: "XTicks", path: "/x-ticks", Component: Docs.XTicksDocs },
-  { name: "YAxis", path: "/y-axis", Component: Docs.YAxisDocs },
+  { name: 'XAxisTitle', path: '/x-axis-title', Component: Docs.XAxisTitleDocs },
+  { name: 'XGrid', path: '/x-grid', Component: Docs.XGridDocs },
+  { name: 'XTicks', path: '/x-ticks', Component: Docs.XTicksDocs },
+  { name: 'YAxis', path: '/y-axis', Component: Docs.YAxisDocs },
   {
-    name: "YAxisLabels",
-    path: "/y-axis-labels",
-    Component: Docs.YAxisLabelsDocs
+    name: 'YAxisLabels',
+    path: '/y-axis-labels',
+    Component: Docs.YAxisLabelsDocs,
   },
-  { name: "YAxisTitle", path: "/y-axis-title", Component: Docs.YAxisTitleDocs },
-  { name: "YGrid", path: "/y-grid", Component: Docs.YGridDocs },
-  { name: "YTicks", path: "/y-ticks", Component: Docs.YTicksDocs }
+  { name: 'YAxisTitle', path: '/y-axis-title', Component: Docs.YAxisTitleDocs },
+  { name: 'YGrid', path: '/y-grid', Component: Docs.YGridDocs },
+  { name: 'YTicks', path: '/y-ticks', Component: Docs.YTicksDocs },
 ];
 
 const allComponents = lessons
@@ -118,21 +118,26 @@ const NavLink = ({ label, to }) => {
   return (
     <Route
       path={to}
-      exact={true}
+      exact
       children={({ match }) => (
-        <li className={`example-link ${match ? "active" : ""}`}>
+        <li className={`example-link ${match ? 'active' : ''}`}>
           <Link to={to}>{label}</Link>
         </li>
       )}
     />
   );
 };
 
+NavLink.propTypes = {
+  label: PropTypes.string,
+  to: PropTypes.string,
+};
+
 const Nav = () => {
   return (
     <div
       className="sidebar-nav col-md-2"
-      style={{ backgroundColor: "#2E2F33" }}
+      style={{ backgroundColor: '#2E2F33' }}
     >
       <h3>Lessons</h3>
       <ul className="nav-inverse nav-tabs nav-stacked">
@@ -211,7 +216,7 @@ const Nav = () => {
   );
 };
 
-export const Home = props => (
+export const Home = () => (
   <div className="docs-home">
     <p>
       Reactochart is a library of React components for creating charts and
@@ -222,14 +227,12 @@ export const Home = props => (
   </div>
 );
 
-export const App = props => (
+export const App = () => (
   <Router>
     <div className="row docs-home">
       <Nav />
       <div className="col-md-10">
-        <Route exact path={"/"} component={Home} />
-        <Route exact path={"/playground"} component={Playground} />
-
+        <Route exact path={'/'} component={Home} />
         {allComponents.map((c, i) => (
           <Route path={c.path} component={c.Component} key={i} />
         ))}
@@ -238,7 +241,7 @@ export const App = props => (
   </Router>
 );
 
-import * as Reactochart from "../../src";
+import * as Reactochart from '../../src';
 const {
   XYPlot,
   XAxis,
@@ -249,7 +252,7 @@ const {
   BarChart,
   MarkerLineChart,
   ColorHeatmap,
-  AreaHeatmap
+  AreaHeatmap,
 } = Reactochart;
 
 class MultipleXYExample extends React.Component {
@@ -270,7 +273,7 @@ class MultipleXYExample extends React.Component {
             y={d => Math.sin(d * 3) * 0.7 + 1.2}
             yEnd={d => Math.sin(d * 3) * Math.cos(d * 3) * 0.7 + 1.2}
             barThickness={2}
-            barStyle={{ fill: "#3690c0" }}
+            barStyle={{ fill: '#3690c0' }}
           />
 
           <LineChart
@@ -279,10 +282,10 @@ class MultipleXYExample extends React.Component {
             y={d =>
               Math.pow(
                 Math.abs(Math.sin(d * 5)),
-                Math.abs(Math.sin(d * 0.25))
+                Math.abs(Math.sin(d * 0.25)),
               ) * 1.8
             }
-            lineStyle={{ stroke: "#02818a", strokeWidth: 3 }}
+            lineStyle={{ stroke: '#02818a', strokeWidth: 3 }}
           />
 
           <ScatterPlot
@@ -297,39 +300,47 @@ class MultipleXYExample extends React.Component {
             x={d => d}
             y={d => -Math.abs(Math.sin(d * 4) * Math.cos(d * 3))}
             barThickness={3}
-            barStyle={{ fill: "#67a9cf" }}
+            barStyle={{ fill: '#67a9cf' }}
           />
 
           <MarkerLineChart
             data={_.range(0, 1.5, 0.1)}
             x={d => d}
             y={d => Math.cos(d)}
-            lineStyle={{ stroke: "#ec7014", strokeWidth: 3 }}
+            lineStyle={{ stroke: '#ec7014', strokeWidth: 3 }}
           />
 
           <ColorHeatmap
             data={_.flatten(
-              _.range(-2, 0, 0.1).map(i => _.range(-2, 0, 0.1).map(j => [i, j]))
+              _.range(-2, 0, 0.1).map(i =>
+                _.range(-2, 0, 0.1).map(j => [i, j]),
+              ),
             )}
             value={([i, j]) => Math.sin(i * j * 5)}
+            /* eslint-disable */
             x={([i, j]) => i}
             xEnd={([i, j]) => i + 0.1}
             y={([i, j]) => j}
             yEnd={([i, j]) => j + 0.1}
-            colors={["#d0d1e6", "#016450"]}
-            interpolator={"lab"}
+            /* eslint-enable */
+            colors={['#d0d1e6', '#016450']}
+            interpolator={'lab'}
           />
 
           <AreaHeatmap
             data={_.flatten(
-              _.range(0, 2, 0.1).map(i => _.range(-2, -1, 0.1).map(j => [i, j]))
+              _.range(0, 2, 0.1).map(i =>
+                _.range(-2, -1, 0.1).map(j => [i, j]),
+              ),
             )}
             area={([i, j]) => -Math.sin(i * j * 5)}
+            /* eslint-disable no-unused-vars */
             x={([i, j]) => i}
             xEnd={([i, j]) => i + 0.1}
             y={([i, j]) => j}
             yEnd={([i, j]) => j + 0.1}
-            rectStyle={{ fill: "#016450" }}
+            /* eslint-enable no-unused-vars */
+            rectStyle={{ fill: '#016450' }}
           />
         </XYPlot>
       </div>