🔧 refactor using lerna and tsdx

Author: PierreCapo

.babelrc

@@ -0,0 +1,6 @@
+{
+  "packages": [
+    "packages/*"
+  ],
+  "version": "0.0.0"
+}

README.md

@@ -1,55 +1,6 @@
 {
-  "name": "treeviz",
-  "version": "2.2.1",
-  "description": "Library which aims to represent trees for data visualization",
-  "keywords": [
-    "d3",
-    "data",
-    "visualization",
-    "tree",
-    "decision",
-    "hierarchy",
-    "dynamic"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git://github.com/PierreCapo/treeviz.git"
-  },
-  "license": "BSD-3-Clause",
-  "main": "./dist/index.js",
-  "types": "./dist/typescript/index.d.ts",
-  "scripts": {
-    "build": "webpack --mode=production",
-    "watch": "webpack --mode=development --watch",
-    "dev": "webpack-dev-server  --mode=development",
-    "test": "jest",
-    "lint": "tslint src/*.ts"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.6.4",
-    "@babel/preset-env": "^7.6.3",
-    "@babel/preset-typescript": "^7.6.0",
-    "@types/node": "^12.7.12",
-    "@types/webpack": "^4.39.3",
-    "@types/webpack-dev-server": "^3.1.7",
-    "babel-loader": "^8.0.6",
-    "html-webpack-plugin": "^3.2.0",
-    "ts-loader": "^6.2.0",
-    "ts-node": "^8.4.1",
-    "tslint": "^5.20.0",
-    "tslint-config-prettier": "^1.18.0",
-    "typescript": "^3.6.4",
-    "webpack": "^4.41.1",
-    "webpack-cli": "^3.3.9",
-    "webpack-dev-server": "^3.8.2"
-  },
   "dependencies": {
-    "@types/d3-hierarchy": "^1.1.6",
-    "@types/d3-selection": "^1.4.1",
-    "@types/d3-transition": "^1.1.4",
-    "@types/d3-zoom": "^1.7.4",
-    "d3-hierarchy": "^1.1.8",
-    "d3-selection": "^1.4.0",
-    "d3-zoom": "^1.8.3"
-  }
+    "lerna": "^3.20.2"
+  },
+  "name": "treeviz-root"
 }

dist/index.js

@@ -0,0 +1,9 @@
+**/node_modules/**
+**/dist/**
+**/storybook-static/**
+yarn-error.log
+.DS_Store
+example/.cache
+example/dist
+node_modules
+dist

dist/typescript/d3.d.ts

@@ -0,0 +1,6 @@
+example
+stories
+storybook-static
+test
+node_modules
+.DS_Store

dist/typescript/draw-links.d.ts

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 PierreCapo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

dist/typescript/index.d.ts

@@ -23,36 +23,32 @@ yarn add treeviz-react
 ```
 
 ```js
-import React from "react";
-import { TreevizReact } from "treeviz-react";
+import React from 'react';
+import { TreevizReact } from 'treeviz-react';
 
 const data = [
-  { id: 1, text_1: "Chaos", text_2: "Void", father: null, color: "#FF5722" },
-  { id: 2, text_1: "Tartarus", text_2: "Abyss", father: 1, color: "#FFC107" },
-  { id: 3, text_1: "Gaia", text_2: "Earth", father: 1, color: "#8BC34A" },
-  { id: 4, text_1: "Eros", text_2: "Desire", father: 1, color: "#00BCD4" }
+  { id: 1, text_1: 'Chaos', text_2: 'Void', father: null, color: '#FF5722' },
+  { id: 2, text_1: 'Tartarus', text_2: 'Abyss', father: 1, color: '#FFC107' },
+  { id: 3, text_1: 'Gaia', text_2: 'Earth', father: 1, color: '#8BC34A' },
+  { id: 4, text_1: 'Eros', text_2: 'Desire', father: 1, color: '#00BCD4' },
 ];
 
 const Foo = () => {
   return (
     <TreevizReact
       data={data}
-      idKey={"id"}
-      relationnalField={"father"}
+      idKey={'id'}
+      relationnalField={'father'}
       nodeWidth={200}
       nodeHeight={100}
       mainAxisNodeSpacing={2}
       secondaryAxisNodeSpacing={1.3}
-      renderNode={node =>
-        `<div style="height:${
-          node.settings.nodeHeight
-        }px;display:flex;align-items:center;margin-left:12px">Node name: ${
-          node.data.text_1
-        }</div>`
+      renderNode={(node) =>
+        `<div style="height:${node.settings.nodeHeight}px;display:flex;align-items:center;margin-left:12px">Node name: ${node.data.text_1}</div>`
       }
-      onNodeClick={node => console.log("you clicked on node " + node.id)}
+      onNodeClick={(node) => console.log('you clicked on node ' + node.id)}
       duration={500}
-      linkWidth={node => 3}
+      linkWidth={(node) => 3}
     />
   );
 };

dist/typescript/initializeSVG.d.ts

@@ -0,0 +1,3 @@
+node_modules
+.cache
+dist

dist/typescript/link-enter.d.ts

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Playground</title>
+    <style>
+      .box {
+        transition: box-shadow 0.3s;
+      }
+      .box:hover {
+        box-shadow: 0 0 11px rgba(11, 11, 11, 0.4);
+      }
+
+      html {
+        font-family: Arial;
+      }
+    </style>
+  </head>
+
+  <body>
+    <div id="root"></div>
+    <script src="./index.tsx"></script>
+  </body>
+</html>