Added sandbox mode

graphql-editor · Oct 27, 2018 · e89cbd8 · e89cbd8
1 parent 3322df1
commit e89cbd8
Show file tree

Hide file tree

Showing 10 changed files with 8,102 additions and 1,989 deletions.
diff --git a/README.md b/README.md
@@ -12,6 +12,15 @@ Here is [Live Demo](https://demo.graphqleditor.com) of diagram used to create no
 
 ![](assets/gif.gif)
 
+## Development using sandbox
+
+```sh
+$ npm run sandbox
+```
+
+Sandbox is a development mode that allows you to review live changes while modifying diagram's code in a hot-reload fashion.
+After running the command above, you can fool around with component's code in `/src/` directory and see immediate results in the browser after navigating to `http://localhost:8080`.
+
 ## Add to your project
 
 ```sh

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,23 +11,32 @@
   "scripts": {
     "build": "grunt",
     "start": "grunt watch",
-    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\""
+    "prettier": "prettier --write \"src/**/*.{ts,tsx,css}\"",
+    "sandbox": "webpack-dev-server --config ./sandbox/webpack.sandbox.config.js --content-base ./sandbox/ --hot --inline --open"
   },
   "license": "MIT",
   "devDependencies": {
+    "@babel/core": "^7.1.2",
     "@types/classnames": "^2.2.3",
     "@types/history": "4.6.2",
     "@types/json-schema": "^6.0.1",
     "@types/node": "9.4.6",
     "@types/react": "^16.4.6",
     "@types/react-dom": "^16.0.6",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^8.0.4",
     "grunt": "^1.0.3",
     "grunt-contrib-clean": "^1.1.0",
     "grunt-contrib-copy": "^1.0.0",
     "grunt-contrib-watch": "^1.1.0",
     "grunt-ts": "^6.0.0-beta.19",
     "prettier": "^1.11.1",
-    "typescript": "^2.9.2"
+    "react-hot-loader": "^4.3.11",
+    "ts-loader": "^5.2.2",
+    "typescript": "^2.9.2",
+    "webpack": "^4.23.1",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   },
   "dependencies": {
     "classnames": "^2.2.5",

diff --git a/sandbox/.babelrc b/sandbox/.babelrc
@@ -0,0 +1,7 @@
+{
+  "plugins": [
+    [
+      "react-hot-loader/babel"
+    ]
+  ]
+}
diff --git a/sandbox/app.tsx b/sandbox/app.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { render } from 'react-dom';
+
+import { Graph } from '../src/Graph';
+
+import { testCategories } from './testCategories';
+
+class App extends React.Component {
+  render() {
+    return (
+      <div>
+        <Graph
+          categories={testCategories}
+          preventOverscrolling
+          serialize={(nodes, links, tabs) => console.info('Serialize called:', nodes, links, tabs)}
+        />
+      </div>
+    );
+  }
+}
+
+render(<App />, document.getElementById('root'));
diff --git a/sandbox/index.html b/sandbox/index.html
@@ -0,0 +1,24 @@
+<html>
+
+<head>
+  <title>Diagram - sandbox</title>
+  <meta charset="utf-8" />
+  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
+  <style>
+    * {
+      box-sizing: border-box;
+    }
+
+    body {
+      margin: 0;
+      font-family: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="root"></div>
+  <script src="/bundle.js"></script>
+</body>
+
+</html>
diff --git a/sandbox/testCategories.tsx b/sandbox/testCategories.tsx
@@ -0,0 +1,251 @@
+export const testCategories = [
+  {
+    "name": "Category 1",
+    "items": [
+      {
+        "name": "Item 1",
+        "node": {
+          "type": "Item 1",
+          "name": "Item 1",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Item 2",
+        "node": {
+          "type": "Item 2",
+          "name": "Item 2",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Item 3",
+        "node": {
+          "type": "Item 3",
+          "name": "Item 3",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+    ]
+  },
+  {
+    "name": "Category 2",
+    "items": [
+      {
+        "name": "Another item 1",
+        "node": {
+          "type": "Another item 1",
+          "name": "Another item 1",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Another item 2",
+        "node": {
+          "type": "Another item 2",
+          "name": "Another item 2",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Another item 3",
+        "node": {
+          "type": "Another item 3",
+          "name": "Another item 3",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+    ]
+  },
+  {
+    "name": "Category 3",
+    "items": [
+      {
+        "name": "Yet another item 1",
+        "node": {
+          "type": "Yet another item 1",
+          "name": "Yet another item 1",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Yet another item 2",
+        "node": {
+          "type": "Yet another item 2",
+          "name": "Yet another item 2",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+      {
+        "name": "Yet another item 3",
+        "node": {
+          "type": "Yet another item 3",
+          "name": "Yet another item 3",
+          "subType": "st1",
+          "editable": true,
+          "outputs": [
+            {
+              "name": ""
+            }
+          ],
+          "inputs": [
+            {
+              "name": "",
+              "accepted": [
+                {
+                  "node": {
+                    "subType": "st1"
+                  }
+                },
+              ]
+            }
+          ]
+        }
+      },
+    ]
+  }
+];
diff --git a/sandbox/tsconfig.json b/sandbox/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "sourceMap": true,
+    "target": "es6",
+    "jsx": "react",
+    "module": "commonjs",
+    "moduleResolution": "node",
+    "experimentalDecorators": true,
+    "declaration": true,
+    "removeComments": true,
+    "noUnusedLocals": true,
+    "outDir": "./lib",
+    "rootDir": "../",
+    "baseUrl": "./",
+    "lib": ["es6", "es7", "dom"],
+    "types": [
+      "react"
+    ]
+  },
+  "exclude": ["lib", "build", "node_modules"]
+}