Refactor/run lint on sandbox (#179)

* Minor typos in docs * Configure lint to run against sandbox
danielcaldas · Mar 4, 2019 · 8fcbb0e · 8fcbb0e
1 parent 3854c48
commit 8fcbb0e
Show file tree

Hide file tree

Showing 11 changed files with 262 additions and 258 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -1 +1,2 @@
-/cypress/**
+/cypress/**
+/sandbox/rd3g*
diff --git a/package.json b/package.json
@@ -18,7 +18,8 @@
         "functional:local": "export CYPRESS_SANDBOX_URL=http://localhost:3002 && cypress open",
         "functional:remote": "export CYPRESS_SANDBOX_URL=https://danielcaldas.github.io/react-d3-graph/sandbox/index.html && cypress open",
         "functional": "export CYPRESS_SANDBOX_URL=http://127.0.0.1:8888 && cypress run",
-        "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\"",
+        "lint:fix": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js --fix \"src/**/*.js*\" \"sandbox/**/*.js*\"",
+        "lint:src": "node_modules/eslint/bin/eslint.js --config=.eslintrc.js \"src/**/*.js*\" \"sandbox/**/*.js*\"",
         "lint:test": "node_modules/eslint/bin/eslint.js --config=.eslintrc.test.config.js \"test/**/*.spec.js\"",
         "lint": "npm run lint:src && npm run lint:test && npm run docs:lint",
         "precommit": "lint-staged",

diff --git a/sandbox/Sandbox.jsx b/sandbox/Sandbox.jsx
@@ -1,16 +1,16 @@
 /*global console*/
 /*eslint require-jsdoc: 0, valid-jsdoc: 0, no-console: 0*/
-import React from 'react';
+import React from "react";
 
-import Form from 'react-jsonschema-form';
+import Form from "react-jsonschema-form";
 
-import './styles.css';
+import "./styles.css";
 
-import defaultConfig from '../src/components/graph/graph.config';
-import { Graph } from '../src';
-import utils from './utils';
-import reactD3GraphUtils from '../src/utils';
-import { JsonTree } from 'react-editable-json-tree';
+import defaultConfig from "../src/components/graph/graph.config";
+import { Graph } from "../src";
+import utils from "./utils";
+import reactD3GraphUtils from "../src/utils";
+import { JsonTree } from "react-editable-json-tree";
 
 const sandboxData = utils.loadDataset();
 
@@ -28,16 +28,16 @@ export default class Sandbox extends React.Component {
 
         const { config: configOverride, data, fullscreen } = sandboxData;
         const config = Object.assign(defaultConfig, configOverride);
-        const schemaProps = utils.generateFormSchema(config, '', {});
+        const schemaProps = utils.generateFormSchema(config, "", {});
 
         const schema = {
-            type: 'object',
-            properties: schemaProps
+            type: "object",
+            properties: schemaProps,
         };
 
         const uiSchema = {
-            height: { 'ui:readonly': 'true' },
-            width: { 'ui:readonly': 'true' }
+            height: { "ui:readonly": "true" },
+            width: { "ui:readonly": "true" },
         };
 
         this.uiSchema = uiSchema;
@@ -47,11 +47,11 @@ export default class Sandbox extends React.Component {
             generatedConfig: {},
             schema,
             data,
-            fullscreen
+            fullscreen,
         };
     }
 
-    onClickGraph = () => console.info(`Clicked the graph`);
+    onClickGraph = () => console.info("Clicked the graph");
 
     onClickNode = id => {
         !this.state.config.collapsible && window.alert(`Clicked node ${id}`);
@@ -127,21 +127,21 @@ export default class Sandbox extends React.Component {
             while (this.state.data.nodes[i] && this.state.data.nodes[i].id && nLinks) {
                 this.state.data.links.push({
                     source: newNode,
-                    target: this.state.data.nodes[i].id
+                    target: this.state.data.nodes[i].id,
                 });
 
                 i++;
                 nLinks--;
             }
 
             this.setState({
-                data: this.state.data
+                data: this.state.data,
             });
         } else {
             // 1st node
             const data = {
-                nodes: [{ id: 'Node 1' }],
-                links: []
+                nodes: [{ id: "Node 1" }],
+                links: [],
             };
 
             this.setState({ data });
@@ -161,7 +161,7 @@ export default class Sandbox extends React.Component {
 
             this.setState({ data });
         } else {
-            window.alert('No more nodes to remove!');
+            window.alert("No more nodes to remove!");
         }
     };
 
@@ -174,7 +174,7 @@ export default class Sandbox extends React.Component {
             utils.setValue(config, k, data.formData[k]);
             // Set new values for schema of jsonform
             schemaPropsValues[k] = {};
-            schemaPropsValues[k]['default'] = data.formData[k];
+            schemaPropsValues[k]["default"] = data.formData[k];
         }
 
         return { config, schemaPropsValues };
@@ -186,7 +186,7 @@ export default class Sandbox extends React.Component {
         this.state.schema.properties = reactD3GraphUtils.merge(this.state.schema.properties, schemaPropsValues);
 
         this.setState({
-            config
+            config,
         });
     };
 
@@ -201,23 +201,23 @@ export default class Sandbox extends React.Component {
 
     onClickSubmit = () => {
         // Hack for allow submit button to live outside jsonform
-        document.body.querySelector('.invisible-button').click();
+        document.body.querySelector(".invisible-button").click();
     };
 
     resetGraphConfig = () => {
         const generatedConfig = {};
 
-        const schemaProps = utils.generateFormSchema(defaultConfig, '', {});
+        const schemaProps = utils.generateFormSchema(defaultConfig, "", {});
 
         const schema = {
-            type: 'object',
-            properties: schemaProps
+            type: "object",
+            properties: schemaProps,
         };
 
         this.setState({
             config: defaultConfig,
             generatedConfig,
-            schema
+            schema,
         });
     };
 
@@ -232,7 +232,7 @@ export default class Sandbox extends React.Component {
         return nodes.map(n =>
             Object.assign({}, n, {
                 x: n.x || Math.floor(Math.random() * 500),
-                y: n.y || Math.floor(Math.random() * 500)
+                y: n.y || Math.floor(Math.random() * 500),
             })
         );
     };
@@ -250,7 +250,7 @@ export default class Sandbox extends React.Component {
      */
     buildCommonInteractionsPanel = () => {
         const btnStyle = {
-            cursor: this.state.config.staticGraph ? 'not-allowed' : 'pointer'
+            cursor: this.state.config.staticGraph ? "not-allowed" : "pointer",
         };
 
         const fullscreen = this.state.fullscreen ? (
@@ -309,11 +309,11 @@ export default class Sandbox extends React.Component {
         const data = {
             nodes: this.decorateGraphNodesWithInitialPositioning(this.state.data.nodes),
             links: this.state.data.links,
-            focusedNodeId: this.state.data.focusedNodeId
+            focusedNodeId: this.state.data.focusedNodeId,
         };
 
         const graphProps = {
-            id: 'graph',
+            id: "graph",
             data,
             config: this.state.config,
             onClickNode: this.onClickNode,
@@ -324,13 +324,13 @@ export default class Sandbox extends React.Component {
             onMouseOverNode: this.onMouseOverNode,
             onMouseOutNode: this.onMouseOutNode,
             onMouseOverLink: this.onMouseOverLink,
-            onMouseOutLink: this.onMouseOutLink
+            onMouseOutLink: this.onMouseOutLink,
         };
 
         if (this.state.fullscreen) {
             graphProps.config = Object.assign({}, graphProps.config, {
                 height: window.innerHeight,
-                width: window.innerWidth
+                width: window.innerWidth,
             });
 
             return (

diff --git a/sandbox/data/custom-node/CustomNode.jsx b/sandbox/data/custom-node/CustomNode.jsx
@@ -1,25 +1,27 @@
-import React from 'react';
+/* eslint-disable valid-jsdoc */
+import React from "react";
 
-import './res/styles/custom-node.css';
+import "./res/styles/custom-node.css";
 
-const ICON_PATH = './data/custom-node/res/images/';
+const ICON_PATH = "./data/custom-node/res/images/";
 
 const ICON_TYPES = {
-    MAN: ICON_PATH + 'man.svg',
-    WOMAN: ICON_PATH + 'girl.svg',
-    CAR: ICON_PATH + 'car.svg',
-    BIKE: ICON_PATH + 'bike.svg'
+    MAN: ICON_PATH + "man.svg",
+    WOMAN: ICON_PATH + "girl.svg",
+    CAR: ICON_PATH + "car.svg",
+    BIKE: ICON_PATH + "bike.svg",
 };
 
 /**
  * Component that renders a person's name and gender, along with icons
  * representing if they have a driver license for bike and / or car.
+ * @param {Object} props component props to render.
  */
 function CustomNode({ person }) {
-    const isMale = person.gender === 'male';
+    const isMale = person.gender === "male";
 
     return (
-        <div className={`flex-container person-node ${isMale ? 'male' : 'female'}`}>
+        <div className={`flex-container person-node ${isMale ? "male" : "female"}`}>
             <div className="name">{person.name}</div>
 
             <div className="flex-container fill-space flex-container-row">

diff --git a/sandbox/data/custom-node/custom-node.config.js b/sandbox/data/custom-node/custom-node.config.js
@@ -1,5 +1,5 @@
-import React from 'react';
-import CustomNode from './CustomNode';
+import React from "react";
+import CustomNode from "./CustomNode";
 
 module.exports = {
     automaticRearrangeAfterDropNode: false,
@@ -15,31 +15,31 @@ module.exports = {
     staticGraph: false,
     width: 800,
     node: {
-        color: '#d3d3d3',
-        fontColor: 'black',
+        color: "#d3d3d3",
+        fontColor: "black",
         fontSize: 12,
-        fontWeight: 'normal',
-        highlightColor: 'red',
+        fontWeight: "normal",
+        highlightColor: "red",
         highlightFontSize: 12,
-        highlightFontWeight: 'bold',
-        highlightStrokeColor: 'SAME',
+        highlightFontWeight: "bold",
+        highlightStrokeColor: "SAME",
         highlightStrokeWidth: 1.5,
-        labelProperty: 'name',
-        mouseCursor: 'pointer',
+        labelProperty: "name",
+        mouseCursor: "pointer",
         opacity: 1,
         renderLabel: false,
         size: 700,
-        strokeColor: 'none',
+        strokeColor: "none",
         strokeWidth: 1.5,
-        svg: '',
-        symbolType: 'circle',
-        viewGenerator: node => <CustomNode person={node} />
+        svg: "",
+        symbolType: "circle",
+        viewGenerator: node => <CustomNode person={node} />,
     },
     link: {
-        color: '#d3d3d3',
+        color: "#d3d3d3",
         opacity: 1,
         semanticStrokeWidth: false,
         strokeWidth: 4,
-        highlightColor: 'blue'
-    }
+        highlightColor: "blue",
+    },
 };
diff --git a/sandbox/data/marvel/marvel.config.js b/sandbox/data/marvel/marvel.config.js
@@ -18,36 +18,36 @@ module.exports = {
         alphaTarget: 0.05,
         gravity: -250,
         linkLength: 120,
-        linkStrength: 2
+        linkStrength: 2,
     },
     node: {
-        color: '#d3d3d3',
-        fontColor: 'black',
+        color: "#d3d3d3",
+        fontColor: "black",
         fontSize: 10,
-        fontWeight: 'normal',
-        highlightColor: 'red',
+        fontWeight: "normal",
+        highlightColor: "red",
         highlightFontSize: 14,
-        highlightFontWeight: 'bold',
-        highlightStrokeColor: 'red',
+        highlightFontWeight: "bold",
+        highlightStrokeColor: "red",
         highlightStrokeWidth: 1.5,
         labelProperty: n => (n.name ? `${n.id} - ${n.name}` : n.id),
-        mouseCursor: 'crosshair',
+        mouseCursor: "crosshair",
         opacity: 0.9,
         renderLabel: true,
         size: 200,
-        strokeColor: 'none',
+        strokeColor: "none",
         strokeWidth: 1.5,
-        svg: '',
-        symbolType: 'circle',
-        viewGenerator: null
+        svg: "",
+        symbolType: "circle",
+        viewGenerator: null,
     },
     link: {
-        color: 'lightgray',
-        highlightColor: 'red',
-        mouseCursor: 'pointer',
+        color: "lightgray",
+        highlightColor: "red",
+        mouseCursor: "pointer",
         opacity: 1,
         semanticStrokeWidth: true,
         strokeWidth: 3,
-        type: 'STRAIGHT'
-    }
+        type: "STRAIGHT",
+    },
 };