Merge pull request #139 from uber/eslint-updates

Added eslint rules and fixed code.

.eslintignore

@@ -0,0 +1,4 @@
+node_modules/*
+dist/*
+flow-typed/*
+coverage/*

.eslintrc

@@ -6,16 +6,57 @@
     "codeFrame": false
   },
   "plugins": [
-    "flowtype"
+    "flowtype",
+    "jest"
   ],
   "env": {
-    "browser": true
+    "browser": true,
+    "jest/globals": true,
+    "node": true
+  },
+  "extends": ["plugin:prettier/recommended", "eslint-config-fusion"],
+  "rules": {
+    "prettier/prettier": [
+      "error",
+      {
+        "bracketSpacing": true,
+        "singleQuote": true,
+        "trailingComma": "es5",
+        "jsxBracketSameLine": false
+      }
+    ],
+    "react/no-deprecated": ["warn"],
+    "flowtype/space-after-type-colon": ["off"],
+    "curly": ["error", "all"],
+    "no-var": "error",
+    "prefer-const": "error",
+    "no-use-before-define": "error",
+    "object-curly-spacing": ["error", "always"],
+    "space-before-blocks": "error",
+    "no-console": ["error", { "allow": ["warn", "error"]}],
+    "padding-line-between-statements": [
+      "error",
+      { "blankLine": "always", "prev": "*", "next": "return" },
+      { "blankLine": "always", "prev": ["const", "let", "var"], "next": "*" },
+      {
+        "blankLine": "any",
+        "prev": ["const", "let", "var"],
+        "next": ["const", "let", "var"]
+      },
+      { "blankLine": "always", "prev": "directive", "next": "*" },
+      { "blankLine": "any", "prev": "directive", "next": "directive" },
+      { "blankLine": "always", "prev": "*", "next": "if" },
+      { "blankLine": "always", "prev": "if", "next": "*" },
+      { "blankLine": "always", "prev": "*", "next": "function" }
+    ],
+    "no-useless-constructor": "error"
   },
-  "extends": [],
-  "rules": {},
   "settings": {
     "flowtype": {
       "onlyFilesWithFlowAnnotation": true
+    },
+    "react": {
+      "version": "detect"
     }
   }
 }

.huskyrc

@@ -0,0 +1,5 @@
+{
+  "hooks": {
+    "pre-commit": "lint-staged"
+  }
+}

.lintstagedrc

@@ -0,0 +1,13 @@
+{
+  "linters": {
+    "src/**/*.js": [
+      "eslint --fix",
+      "git add"
+    ],
+    "*.json": [
+      "prettier --write",
+      "git add"
+    ]
+  },
+  "ignore": []
+}

package.json

@@ -60,17 +60,24 @@
     "enzyme": "3.8.0",
     "enzyme-adapter-react-16": "^1.10.0",
     "eslint": "^5.2.0",
-    "eslint-config-airbnb": "^17.0.0",
+    "eslint-config-fusion": "^6.0.0",
+    "eslint-config-prettier": "^4.3.0",
     "eslint-loader": "^2.1.0",
+    "eslint-plugin-cup": "^2.0.1",
     "eslint-plugin-es6-recommended": "^0.1.2",
     "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-import": "^2.14.0",
     "eslint-plugin-import-order": "^2.1.4",
+    "eslint-plugin-jest": "^22.6.4",
     "eslint-plugin-jsx-a11y": "^6.1.1",
+    "eslint-plugin-prettier": "^3.1.0",
     "eslint-plugin-react": "^7.5.1",
+    "eslint-plugin-react-hooks": "^1.6.0",
     "flow-bin": "^0.86.0",
+    "husky": "^2.4.0",
     "jest": "^22.4.3",
     "jsdom": "^11.12.0",
+    "lint-staged": "^8.2.0",
     "live-server": "^1.2.0",
     "node-sass": "^4.9.2",
     "npm-run-all": "^4.1.3",
@@ -106,7 +113,8 @@
     "live-server": "live-server ./dist --entry-file=./index.html",
     "live-serve": "npm-run-all --parallel watch live-server",
     "lint": "eslint src",
-    "precommit": "npm run lint -s && npm run test",
+    "lint-fix": "eslint --fix src",
+    "precommit": "lint-staged && npm run test",
     "prefast-test": "npm run prepublish",
     "prepublish": "npm run package",
     "serve": "npm run live-serve",

src/components/arrowhead-marker.js

@@ -18,16 +18,17 @@
 import * as React from 'react';
 
 type IArrowheadMarkerProps = {
-  edgeArrowSize?: number;
+  edgeArrowSize?: number,
 };
 
 class ArrowheadMarker extends React.Component<IArrowheadMarkerProps> {
   static defaultProps = {
-    edgeArrowSize: 8
+    edgeArrowSize: 8,
   };
 
   render() {
     const { edgeArrowSize } = this.props;
+
     if (!edgeArrowSize && edgeArrowSize !== 0) {
       return null;
     }
@@ -44,7 +45,8 @@ class ArrowheadMarker extends React.Component<IArrowheadMarkerProps> {
       >
         <path
           className="arrow"
-          d={`M0,-${(edgeArrowSize) / 2}L${edgeArrowSize},0L0,${(edgeArrowSize) / 2}`}
+          d={`M0,-${edgeArrowSize / 2}L${edgeArrowSize},0L0,${edgeArrowSize /
+            2}`}
         />
       </marker>
     );

src/components/background-pattern.js

@@ -19,16 +19,22 @@ import * as React from 'react';
 import Circle from './circle';
 
 type IBackgroundPatternProps = {
-  gridSpacing?: number;
-  gridDotSize?: number;
+  gridSpacing?: number,
+  gridDotSize?: number,
 };
 
 class BackgroundPattern extends React.Component<IBackgroundPatternProps> {
   render() {
     const { gridSpacing, gridDotSize } = this.props;
 
     return (
-      <pattern id="grid" key="grid" width={gridSpacing} height={gridSpacing} patternUnits="userSpaceOnUse">
+      <pattern
+        id="grid"
+        key="grid"
+        width={gridSpacing}
+        height={gridSpacing}
+        patternUnits="userSpaceOnUse"
+      >
         <Circle gridSpacing={gridSpacing} gridDotSize={gridDotSize} />
       </pattern>
     );

src/components/background.js

@@ -18,18 +18,19 @@
 import * as React from 'react';
 
 type IBackgroundProps = {
-  gridSize?: number;
-  backgroundFillId?: string;
+  gridSize?: number,
+  backgroundFillId?: string,
 };
 
 class Background extends React.Component<IBackgroundProps> {
   static defaultProps = {
     backgroundFillId: '#grid',
-    gridSize: 40960
+    gridSize: 40960,
   };
 
   render() {
     const { gridSize, backgroundFillId } = this.props;
+
     return (
       <rect
         className="background"

src/components/circle.js

@@ -18,20 +18,27 @@
 import * as React from 'react';
 
 type ICircleProps = {
-  gridSpacing?: number;
-  gridDotSize?: number;
+  gridSpacing?: number,
+  gridDotSize?: number,
 };
 
 class Circle extends React.Component<ICircleProps> {
   static defaultProps = {
     gridDotSize: 2,
-    gridSpacing: 36
+    gridSpacing: 36,
   };
 
   render() {
     const { gridSpacing, gridDotSize } = this.props;
 
-    return <circle className="circle" cx={(gridSpacing || 0) / 2} cy={(gridSpacing || 0) / 2} r={gridDotSize} />;
+    return (
+      <circle
+        className="circle"
+        cx={(gridSpacing || 0) / 2}
+        cy={(gridSpacing || 0) / 2}
+        r={gridDotSize}
+      />
+    );
   }
 }
 

src/components/defs.js

@@ -21,59 +21,71 @@ import BackgroundPattern from './background-pattern';
 import DropshadowFilter from './dropshadow-filter';
 
 type IDefsProps = {
-  gridSpacing?: number;
-  gridDotSize?: number;
-  edgeArrowSize?: number;
-  nodeTypes: any; // TODO: define nodeTypes, nodeSubtypes, and edgeTypes. Must have shape and shapeId!
-  nodeSubtypes: any;
-  edgeTypes: any;
-  renderDefs?: () => any | null;
+  gridSpacing?: number,
+  gridDotSize?: number,
+  edgeArrowSize?: number,
+  nodeTypes: any, // TODO: define nodeTypes, nodeSubtypes, and edgeTypes. Must have shape and shapeId!
+  nodeSubtypes: any,
+  edgeTypes: any,
+  renderDefs?: () => any | null,
 };
 
 type IDefsState = {
-  graphConfigDefs: any;
+  graphConfigDefs: any,
 };
 
 class Defs extends React.Component<IDefsProps, IDefsState> {
   static defaultProps = {
     gridDotSize: 2,
-    renderDefs: () => null
+    renderDefs: () => null,
   };
 
   static getDerivedStateFromProps(nextProps: any, prevState: any) {
     const graphConfigDefs = [];
+
     Defs.processGraphConfigDefs(nextProps.nodeTypes, graphConfigDefs);
     Defs.processGraphConfigDefs(nextProps.nodeSubtypes, graphConfigDefs);
     Defs.processGraphConfigDefs(nextProps.edgeTypes, graphConfigDefs);
 
     return {
-      graphConfigDefs
+      graphConfigDefs,
     };
   }
 
   static processGraphConfigDefs(typesObj: any, graphConfigDefs: any) {
-    Object.keys(typesObj).forEach((type) => {
-      const safeId = typesObj[type].shapeId ? typesObj[type].shapeId.replace('#', '') : 'graphdef';
-      graphConfigDefs.push(React.cloneElement(typesObj[type].shape, { key: `${safeId}-${graphConfigDefs.length + 1}` }));
+    Object.keys(typesObj).forEach(type => {
+      const safeId = typesObj[type].shapeId
+        ? typesObj[type].shapeId.replace('#', '')
+        : 'graphdef';
+
+      graphConfigDefs.push(
+        React.cloneElement(typesObj[type].shape, {
+          key: `${safeId}-${graphConfigDefs.length + 1}`,
+        })
+      );
     });
   }
 
   constructor(props: IDefsProps) {
     super(props);
     this.state = {
-      graphConfigDefs: []
+      graphConfigDefs: [],
     };
   }
 
   render() {
     const { edgeArrowSize, gridSpacing, gridDotSize } = this.props;
+
     return (
       <defs>
         {this.state.graphConfigDefs}
 
         <ArrowheadMarker edgeArrowSize={edgeArrowSize} />
 
-        <BackgroundPattern gridSpacing={gridSpacing} gridDotSize={gridDotSize} />
+        <BackgroundPattern
+          gridSpacing={gridSpacing}
+          gridDotSize={gridDotSize}
+        />
 
         <DropshadowFilter />