- Create lib dir with transpiled code

danielcaldas · danielcaldas · commit 3d08b01d0822 · 2017-04-25T22:58:50.000+01:00
- Add entry main to package.json
- Fix id prop in Graph
- Bump to 0.0.2
- Update docs
diff --git a/.DS_Store b/.DS_Store
diff --git a/.gitignore b/.gitignore
@@ -64,7 +64,8 @@ typings/
 # End of https://www.gitignore.io/api/node
 
 # PROJECT configurations
-dist/
+dist
+lib
 coverage
 sandbox/rd3g.sandbox.bundle.js.map
 gen-docs
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,5 @@
 .babelrc
+.DS_Store
 .eslintrc.js
 .git
 .gitignore
@@ -8,6 +9,7 @@ docs
 gen-docs
 package.json
 sandbox
+src
 test
 webpack.config.dist.js
 webpack.config.js
diff --git a/README.md b/README.md
@@ -22,6 +22,8 @@ The code for the live example (<https://danielcaldas.github.io/react-d3-graph/sa
 can be consulted here <https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js>
 
 ```javascript
+import { Graph } from 'react-d3-graph';
+
 // Graph payload (with minimalist structure)
 const data = {
     nodes: [
diff --git a/docs/index.html b/docs/index.html
@@ -2,8 +2,8 @@
 <html>
 <head>
   <meta charset='utf-8' />
-  <title>react-d3-graph  | Documentation</title>
-  <meta name='viewport' content='width=device-width,initial-scale=1'>
+  <title>react-d3-graph | Documentation</title>
+  <meta name='viewport' content='wiodth=device-width,initial-scale=1'>
   <link href='assets/bass.css' type='text/css' rel='stylesheet' />
   <link href='assets/style.css' type='text/css' rel='stylesheet' />
   <link href='assets/github.css' type='text/css' rel='stylesheet' />
@@ -14,7 +14,7 @@
       <div class='fixed xs-hide fix-3 overflow-auto max-height-100'>
         <div class='py1 px2'>
           <h2>react-d3-graph</h2>
-          <h3 class='mb0 no-anchor'>v0.0.1</h3>
+          <h3 class='mb0 no-anchor'>v0.0.2</h3>
           <div class='mb1'><code></code></div>
           <input
             placeholder='Filter'
@@ -1608,7 +1608,9 @@ <h3 class='fl m0' id='graph'>
     <div class='py1 quiet mt1 prose-big'>Example</div>
 
 
-      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Graph payload (with minimalist structure)</span>
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-keyword">import</span> { Graph } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-d3-graph'</span>;
+
+<span class="hljs-comment">// Graph payload (with minimalist structure)</span>
 <span class="hljs-keyword">const</span> data = {
     <span class="hljs-attr">nodes</span>: [
       {<span class="hljs-attr">id</span>: <span class="hljs-string">'Harry'</span>},
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-d3-graph",
-    "version": "0.0.1",
+    "version": "0.0.2",
     "description": "React component to build interactive and configurable graphs with d3 effortlessly",
     "author": "Daniel Caldas",
     "license": "MIT",
@@ -9,6 +9,7 @@
         "dist": "node_modules/.bin/npm-run-all --parallel dist:*",
         "dist:rd3g": "rm -rf dist/ && webpack --config webpack.config.dist.js -p --display-modules",
         "dist:sandbox": "webpack --config webpack.config.js -p",
+        "dist:transpile": "./node_modules/babel-cli/bin/babel.js -d lib src",
         "docs": "node_modules/documentation/bin/documentation.js build src/**/*.js -f html -o gen-docs && node_modules/documentation/bin/documentation.js build src/**/*.js -f md > gen-docs/DOCUMENTATION.md",
         "docs:lint": "node_modules/documentation/bin/documentation.js lint src/**/*.js",
         "docs:watch": "node_modules/documentation/bin/documentation.js build src/**/*.js -f html -o gen-docs --watch",
@@ -22,6 +23,7 @@
         "react": "^15.5.0"
     },
     "devDependencies": {
+        "babel-cli": "^6.24.1",
         "babel-core": "6.24.0",
         "babel-jest": "19.0.0",
         "babel-loader": "6.4.1",
@@ -53,6 +55,7 @@
     "engines": {
         "node": ">=6.9.5"
     },
+    "main": "lib/index.js",
     "repository": {
         "type": "git",
         "url": "git+https://github.com/danielcaldas/react-d3-graph.git"
diff --git a/sandbox/rd3g.sandbox.bundle.js b/sandbox/rd3g.sandbox.bundle.js
diff --git a/src/components/Graph/index.js b/src/components/Graph/index.js
@@ -15,6 +15,8 @@ import Utils from '../../utils';
  * The code for the live example (https://danielcaldas.github.io/react-d3-graph/sandbox/index.html)
  * can be consulted here https://github.com/danielcaldas/react-d3-graph/blob/master/sandbox/Sandbox.js
  * @example
+ * import { Graph } from 'react-d3-graph';
+ *
  * // Graph payload (with minimalist structure)
  * const data = {
  *     nodes: [
@@ -132,15 +134,15 @@ export default class Graph extends React.Component {
      * {@link https://github.com/d3/d3-zoom#zoom}
      * @return {undefined}
      */
-    _zoomConfig = () => d3.select(`#${this.props.id}-${CONST.GRAPH_WRAPPER_ID}`)
+    _zoomConfig = () => d3.select(`#${this.id}-${CONST.GRAPH_WRAPPER_ID}`)
                             .call(d3.zoom().scaleExtent([this.state.config.minZoom, this.state.config.maxZoom])
                             .on('zoom', this._zoomed));
 
     /**
      * Handler for 'zoom' event within zoom config.
      * @return {Object} returns the transformed elements within the svg graph area.
      */
-    _zoomed = () => d3.selectAll(`#${this.props.id}-${CONST.GRAPH_CONTAINER_ID}`).attr('transform', d3.event.transform);
+    _zoomed = () => d3.selectAll(`#${this.id}-${CONST.GRAPH_CONTAINER_ID}`).attr('transform', d3.event.transform);
 
     /**
      * Handles mouse out node event.
@@ -212,6 +214,7 @@ export default class Graph extends React.Component {
         let {nodes, indexMapping} = GraphHelper.initializeNodes(graph.nodes);
         let links = GraphHelper.initializeLinks(graph.links); // Matrix of graph connections
 
+        this.id = this.props.id.replace(/ /g, '_');
         this.indexMapping = indexMapping;
         this.simulation = GraphHelper.createForceSimulation(config.width, config.height);
 
@@ -253,7 +256,7 @@ export default class Graph extends React.Component {
                                     .on('drag', this._onDragMove)
                                     .on('end', this._onDragEnd);
 
-            d3.select(`#${this.props.id}-${CONST.GRAPH_WRAPPER_ID}`).selectAll('.node').call(customNodeDrag);
+            d3.select(`#${this.id}-${CONST.GRAPH_WRAPPER_ID}`).selectAll('.node').call(customNodeDrag);
         }
 
         // Graph zoom and drag&drop all network
@@ -291,9 +294,9 @@ export default class Graph extends React.Component {
         };
 
         return (
-            <div id={`${this.props.id}-${CONST.GRAPH_WRAPPER_ID}`}>
+            <div id={`${this.id}-${CONST.GRAPH_WRAPPER_ID}`}>
                 <svg style={svgStyle}>
-                    <g id={`${this.props.id}-${CONST.GRAPH_CONTAINER_ID}`}>
+                    <g id={`${this.id}-${CONST.GRAPH_CONTAINER_ID}`}>
                         {links}
                         {nodes}
                     </g>
diff --git a/yarn.lock b/yarn.lock
@@ -258,6 +258,27 @@ aws4@^1.2.1:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.6.0.tgz#83ef5ca860b2b32e4a0deedee8c771b9db57471e"
 
+babel-cli@^6.24.1:
+  version "6.24.1"
+  resolved "https://registry.yarnpkg.com/babel-cli/-/babel-cli-6.24.1.tgz#207cd705bba61489b2ea41b5312341cf6aca2283"
+  dependencies:
+    babel-core "^6.24.1"
+    babel-polyfill "^6.23.0"
+    babel-register "^6.24.1"
+    babel-runtime "^6.22.0"
+    commander "^2.8.1"
+    convert-source-map "^1.1.0"
+    fs-readdir-recursive "^1.0.0"
+    glob "^7.0.0"
+    lodash "^4.2.0"
+    output-file-sync "^1.1.0"
+    path-is-absolute "^1.0.0"
+    slash "^1.0.0"
+    source-map "^0.5.0"
+    v8flags "^2.0.10"
+  optionalDependencies:
+    chokidar "^1.6.1"
+
 babel-code-frame@^6.11.0, babel-code-frame@^6.16.0, babel-code-frame@^6.22.0:
   version "6.22.0"
   resolved "https://registry.yarnpkg.com/babel-code-frame/-/babel-code-frame-6.22.0.tgz#027620bee567a88c32561574e7fd0801d33118e4"
@@ -896,6 +917,14 @@ babel-plugin-transform-strict-mode@^6.24.1:
     babel-runtime "^6.22.0"
     babel-types "^6.24.1"
 
+babel-polyfill@^6.23.0:
+  version "6.23.0"
+  resolved "https://registry.yarnpkg.com/babel-polyfill/-/babel-polyfill-6.23.0.tgz#8364ca62df8eafb830499f699177466c3b03499d"
+  dependencies:
+    babel-runtime "^6.22.0"
+    core-js "^2.4.0"
+    regenerator-runtime "^0.10.0"
+
 babel-preset-es2015@6.24.1, babel-preset-es2015@^6.16.0:
   version "6.24.1"
   resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939"
@@ -1319,7 +1348,7 @@ character-reference-invalid@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.0.tgz#dec9ad1dfb9f8d06b4fcdaa2adc3c4fd97af1e68"
 
-chokidar@^1.2.0, chokidar@^1.4.3, chokidar@^1.6.0:
+chokidar@^1.2.0, chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2"
   dependencies:
@@ -1476,7 +1505,7 @@ comma-separated-tokens@^1.0.1:
   dependencies:
     trim "0.0.1"
 
-commander@2, commander@2.9.x:
+commander@2, commander@2.9.x, commander@^2.8.1:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.9.0.tgz#9c99094176e12240cb22d6c5146098400fe0f7d4"
   dependencies:
@@ -2957,6 +2986,10 @@ from@~0:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
 
+fs-readdir-recursive@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/fs-readdir-recursive/-/fs-readdir-recursive-1.0.0.tgz#8cd1745c8b4f8a29c8caec392476921ba195f560"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -3118,7 +3151,7 @@ globby@^5.0.0:
     pify "^2.0.0"
     pinkie-promise "^2.0.0"
 
-graceful-fs@^4.0.0, graceful-fs@^4.1.2, graceful-fs@^4.1.6:
+graceful-fs@^4.0.0, graceful-fs@^4.1.2, graceful-fs@^4.1.4, graceful-fs@^4.1.6:
   version "4.1.11"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
 
@@ -4786,6 +4819,14 @@ osenv@^0.1.4:
     os-homedir "^1.0.0"
     os-tmpdir "^1.0.0"
 
+output-file-sync@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/output-file-sync/-/output-file-sync-1.1.2.tgz#d0a33eefe61a205facb90092e826598d5245ce76"
+  dependencies:
+    graceful-fs "^4.1.4"
+    mkdirp "^0.5.1"
+    object-assign "^4.1.0"
+
 p-limit@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc"
@@ -6604,6 +6645,10 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+user-home@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/user-home/-/user-home-1.1.1.tgz#2b5be23a32b63a7c9deb8d0f28d485724a3df190"
+
 user-home@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f"
@@ -6640,6 +6685,12 @@ uuid@^3.0.0:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.0.1.tgz#6544bba2dfda8c1cf17e629a3a305e2bb1fee6c1"
 
+v8flags@^2.0.10:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
+  dependencies:
+    user-home "^1.1.1"
+
 vali-date@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/vali-date/-/vali-date-1.0.0.tgz#1b904a59609fb328ef078138420934f6b86709a6"
