Chore/change indentation to tab with 2 spaces

.editorconfig

@@ -5,16 +5,12 @@ root = true
 end_of_line = lf
 insert_final_newline = true
 
-[*.{js}]
+[*.{js,jsx,json}]
 charset = utf-8
 
-[*.js]
+[*.{js,jsx,json}]
 indent_style = space
-indent_size = 4
+indent_size = 2
 
 [Makefile]
 indent_style = tab
-
-[{package.json,package-lock.json}]
-indent_style = space
-indent_size = 4

.eslintrc.js

@@ -1,60 +1,60 @@
 module.exports = {
-    extends: ["eslint:recommended", "plugin:jest/recommended"],
-    globals: {
-        cy: true,
-        Cypress: true,
-        document: true,
-        module: true,
-        Promise: true,
-        Reflect: true,
-        window: true,
-        __dirname: true,
-        process: true,
+  extends: ["eslint:recommended", "plugin:jest/recommended"],
+  globals: {
+    cy: true,
+    Cypress: true,
+    document: true,
+    module: true,
+    Promise: true,
+    Reflect: true,
+    window: true,
+    __dirname: true,
+    process: true,
+  },
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
     },
-    parser: "babel-eslint",
-    parserOptions: {
-        ecmaVersion: 6,
-        ecmaFeatures: {
-            jsx: true,
+  },
+  plugins: ["standard", "promise", "react", "jest", "cypress", "babel"],
+  env: {
+    browser: true,
+  },
+  rules: {
+    "react/jsx-uses-react": "error",
+    "react/jsx-uses-vars": "error",
+    camelcase: "error",
+    "keyword-spacing": "error",
+    "max-len": ["error", 120, 4, { ignoreComments: true }],
+    "max-lines": ["error", { max: 450, skipComments: true }],
+    "no-nested-ternary": "error",
+    "no-useless-constructor": "error",
+    semi: "error",
+    "require-jsdoc": "error",
+    "valid-jsdoc": [
+      "error",
+      {
+        prefer: {
+          arg: "param",
+          argument: "param",
+          class: "constructor",
+          return: "returns",
+          virtual: "abstract",
         },
-    },
-    plugins: ["standard", "promise", "react", "jest", "cypress", "babel"],
-    env: {
-        browser: true,
-    },
-    rules: {
-        "react/jsx-uses-react": "error",
-        "react/jsx-uses-vars": "error",
-        camelcase: "error",
-        "keyword-spacing": "error",
-        "max-len": ["error", 120, 4, { ignoreComments: true }],
-        "max-lines": ["error", { max: 450, skipComments: true }],
-        "no-nested-ternary": "error",
-        "no-useless-constructor": "error",
-        semi: "error",
-        "require-jsdoc": "error",
-        "valid-jsdoc": [
-            "error",
-            {
-                prefer: {
-                    arg: "param",
-                    argument: "param",
-                    class: "constructor",
-                    return: "returns",
-                    virtual: "abstract",
-                },
-                preferType: {
-                    Boolean: "boolean",
-                    Number: "number",
-                    object: "Object",
-                    String: "string",
-                    Function: "Function",
-                },
-                requireReturn: true,
-                requireReturnType: true,
-            },
-        ],
-        quotes: ["error", "double"],
-        "comma-dangle": ["error", "always-multiline"],
-    },
+        preferType: {
+          Boolean: "boolean",
+          Number: "number",
+          object: "Object",
+          String: "string",
+          Function: "Function",
+        },
+        requireReturn: true,
+        requireReturnType: true,
+      },
+    ],
+    quotes: ["error", "double"],
+    "comma-dangle": ["error", "always-multiline"],
+  },
 };

.eslintrc.test.config.js

@@ -1,29 +1,29 @@
 module.exports = {
-    extends: ["plugin:jest/recommended"],
-    globals: {
-        document: true,
-        Reflect: true,
-        window: true,
-    },
-    parser: "babel-eslint",
-    parserOptions: {
-        ecmaVersion: 6,
-        ecmaFeatures: {
-            jsx: true,
-        },
-    },
-    plugins: ["standard", "promise", "react", "jest"],
-    rules: {
-        "jest/no-disabled-tests": "warn",
-        "jest/no-focused-tests": "error",
-        "jest/no-identical-title": "error",
-        "jest/valid-expect": "error",
-        "max-len": ["error", 180, 4, { ignoreComments: true }],
-        "max-lines": ["error", { max: 800, skipComments: true }],
-        quotes: ["error", "double"],
-        "comma-dangle": ["error", "always-multiline"],
-    },
-    env: {
-        "jest/globals": true,
+  extends: ["plugin:jest/recommended"],
+  globals: {
+    document: true,
+    Reflect: true,
+    window: true,
+  },
+  parser: "babel-eslint",
+  parserOptions: {
+    ecmaVersion: 6,
+    ecmaFeatures: {
+      jsx: true,
     },
+  },
+  plugins: ["standard", "promise", "react", "jest"],
+  rules: {
+    "jest/no-disabled-tests": "warn",
+    "jest/no-focused-tests": "error",
+    "jest/no-identical-title": "error",
+    "jest/valid-expect": "error",
+    "max-len": ["error", 180, 4, { ignoreComments: true }],
+    "max-lines": ["error", { max: 800, skipComments: true }],
+    quotes: ["error", "double"],
+    "comma-dangle": ["error", "always-multiline"],
+  },
+  env: {
+    "jest/globals": true,
+  },
 };

.prettierrc.js

@@ -1,6 +1,6 @@
 module.exports = {
-    printWidth: 120,
-    singleQuote: false,
-    tabWidth: 4,
-    trailingComma: "es5",
+  printWidth: 120,
+  singleQuote: false,
+  tabWidth: 2,
+  trailingComma: "es5",
 };

README.md

@@ -1,7 +1,5 @@
 # react-d3-graph · [![Build Status](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)](https://github.com/danielcaldas/react-d3-graph/workflows/react-d3-graph/badge.svg)
 
-⚠️ __There has been some changes in the domain where I host the documentation and live examples, please use https://danielcaldas.github.io/react-d3-graph/docs instead of the old domain https://goodguydaniel.com/react-d3-graph. Sorry for any inconvenient__  ⚠️
-
 [![npm version](https://img.shields.io/npm/v/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![npm](https://img.shields.io/npm/dw/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph)
 [![npm](https://img.shields.io/npm/dt/react-d3-graph.svg?style=flat-square)](https://www.npmjs.com/package/react-d3-graph) [![probot enabled](https://img.shields.io/badge/probot:stale-enabled-yellow.svg?longCache=true&style=flat-square)](https://probot.github.io/) [![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)
 
@@ -66,87 +64,87 @@ import { Graph } from "react-d3-graph";
 
 // graph payload (with minimalist structure)
 const data = {
-    nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
-    links: [
-        { source: "Harry", target: "Sally" },
-        { source: "Harry", target: "Alice" },
-    ],
+  nodes: [{ id: "Harry" }, { id: "Sally" }, { id: "Alice" }],
+  links: [
+    { source: "Harry", target: "Sally" },
+    { source: "Harry", target: "Alice" },
+  ],
 };
 
 // the graph configuration, you only need to pass down properties
 // that you want to override, otherwise default ones will be used
 const myConfig = {
-    nodeHighlightBehavior: true,
-    node: {
-        color: "lightgreen",
-        size: 120,
-        highlightStrokeColor: "blue",
-    },
-    link: {
-        highlightColor: "lightblue",
-    },
+  nodeHighlightBehavior: true,
+  node: {
+    color: "lightgreen",
+    size: 120,
+    highlightStrokeColor: "blue",
+  },
+  link: {
+    highlightColor: "lightblue",
+  },
 };
 
 // graph event callbacks
 const onClickGraph = function() {
-    window.alert(`Clicked the graph background`);
+  window.alert(`Clicked the graph background`);
 };
 
 const onClickNode = function(nodeId) {
-    window.alert(`Clicked node ${nodeId}`);
+  window.alert(`Clicked node ${nodeId}`);
 };
 
 const onDoubleClickNode = function(nodeId) {
-    window.alert(`Double clicked node ${nodeId}`);
+  window.alert(`Double clicked node ${nodeId}`);
 };
 
 const onRightClickNode = function(event, nodeId) {
-    window.alert(`Right clicked node ${nodeId}`);
+  window.alert(`Right clicked node ${nodeId}`);
 };
 
 const onMouseOverNode = function(nodeId) {
-    window.alert(`Mouse over node ${nodeId}`);
+  window.alert(`Mouse over node ${nodeId}`);
 };
 
 const onMouseOutNode = function(nodeId) {
-    window.alert(`Mouse out node ${nodeId}`);
+  window.alert(`Mouse out node ${nodeId}`);
 };
 
 const onClickLink = function(source, target) {
-    window.alert(`Clicked link between ${source} and ${target}`);
+  window.alert(`Clicked link between ${source} and ${target}`);
 };
 
 const onRightClickLink = function(event, source, target) {
-    window.alert(`Right clicked link between ${source} and ${target}`);
+  window.alert(`Right clicked link between ${source} and ${target}`);
 };
 
 const onMouseOverLink = function(source, target) {
-    window.alert(`Mouse over in link between ${source} and ${target}`);
+  window.alert(`Mouse over in link between ${source} and ${target}`);
 };
 
 const onMouseOutLink = function(source, target) {
-    window.alert(`Mouse out link between ${source} and ${target}`);
+  window.alert(`Mouse out link between ${source} and ${target}`);
 };
 
 const onNodePositionChange = function(nodeId, x, y) {
-    window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
+  window.alert(`Node ${nodeId} is moved to new position. New position is x= ${x} y= ${y}`);
 };
 
 <Graph
-    id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
-    data={data}
-    config={myConfig}
-    onClickNode={onClickNode}
-    onDoubleClickNode={onDoubleClickNode}
-    onRightClickNode={onRightClickNode}
-    onClickGraph={onClickGraph}
-    onClickLink={onClickLink}
-    onRightClickLink={onRightClickLink}
-    onMouseOverNode={onMouseOverNode}
-    onMouseOutNode={onMouseOutNode}
-    onMouseOverLink={onMouseOverLink}
-    onMouseOutLink={onMouseOutLink}
-    onNodePositionChange={onNodePositionChange}
+  id="graph-id" // id is mandatory, if no id is defined rd3g will throw an error
+  data={data}
+  config={myConfig}
+  onClickNode={onClickNode}
+  onDoubleClickNode={onDoubleClickNode}
+  onRightClickNode={onRightClickNode}
+  onClickGraph={onClickGraph}
+  onClickLink={onClickLink}
+  onRightClickLink={onRightClickLink}
+  onMouseOverNode={onMouseOverNode}
+  onMouseOutNode={onMouseOutNode}
+  onMouseOverLink={onMouseOverLink}
+  onMouseOutLink={onMouseOutLink}
+  onNodePositionChange={onNodePositionChange}
 />;
 ```
 
@@ -156,14 +154,14 @@ Contributions are welcome, feel free to submit new ideas/features, just open an
 
 To run react-d3-graph in development mode you just need to run `npm run dev` and the interactive sandbox will reload with the changes to the library code, that way you can test your changes not only through unit test but also through a real life example. It's that simple. The development workflow usually should follow the steps:
 
--   Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.
--   Make sure you are up to date running `npm install`.
--   Run `npm run dev`.
--   Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
-    with webpack-dev-server.
--   You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.
--   After you're done, open the Pull Request and describe the changes you've made.
+- Create a branch prefixed with `fix/` for bug fixes, `feature/` for new features, `chore/` or `refactor/` for refactoring or tooling and CI/CD related tasks.
+- Make sure you are up to date running `npm install`.
+- Run `npm run dev`.
+- Make you changes inside the folder `src` and the interactive sandbox consumes your changes in real time
+  with webpack-dev-server.
+- You can run tests locally with `npm run test` (for unit tests) or `npm run functional:local` for e2e tests.
+- After you're done, open the Pull Request and describe the changes you've made.
 
 ## Alternatives (Not what you where looking for?)
 
-Well if you scrolled this far maybe _react-d3-graph_ does not fulfill all your requirements 😭, but don't worry I got you covered! There are a lot of different and good alternatives out there, [here is a list with a few alternatives](http://anvaka.github.io/graph-drawing-libraries/#!/all#%2Fall). Btw, not in the previous list but also a valid alternative built by uber [uber/react-vis-force](https://github.com/uber/react-vis-force).
+Well if you scrolled this far maybe _react-d3-graph_ does not fulfill all your requirements 😭, but don't worry I got you covered! There are a lot of different and good alternatives out there, [here is a list with a few alternatives](http://anvaka.github.io/graph-drawing-libraries/#!/all#%2Fall).

cypress.json

@@ -1,3 +1,3 @@
 {
-    "video": false
+  "video": false
 }