tslint

package.json

@@ -11,6 +11,7 @@
     "@types/react": "^16.9.0",
     "@types/react-dom": "^16.9.0",
     "graphlib": "^2.1.8",
+    "jsondiffpatch": "^0.4.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-scripts": "3.3.0",
@@ -23,11 +24,26 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "cosmos": "cosmos",
-    "cosmos:export": "cosmos-export"
+    "cosmos:export": "cosmos-export",
+    "type-check": "tsc --noEmit",
+    "type-check:watch": "tsc --noEmit --watch",
+    "lint": "tslint --project .",
+    "lint:fix": "tslint --fix --project ."
   },
   "eslintConfig": {
     "extends": "react-app"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn type-check && pretty-quick --staged --pattern 'frontend/**/*.*'"
+    }
+  },
+  "lint-staged": {
+    "*.{js,jsx,ts,tsx,html,md}": [
+      "prettier --write",
+      "git add"
+    ]
+  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -43,7 +59,15 @@
   "devDependencies": {
     "@testing-library/dom": ">=5",
     "@types/graphlib": "^2.1.5",
+    "husky": "^4.0.10",
+    "lint-staged": "^10.0.0",
+    "prettier": "^1.19.1",
+    "pretty-quick": "^2.0.1",
     "react-cosmos": "^5.0.6",
+    "tslint": "^5.20.1",
+    "tslint-config-airbnb": "^5.11.2",
+    "tslint-config-prettier": "^1.18.0",
+    "tslint-react": "^4.1.0",
     "webpack": "^4.0.0"
   }
 }

src/lib/store.ts

@@ -0,0 +1,76 @@
+import { alg, Graph } from "graphlib";
+import jsondiffpatch from "jsondiffpatch";
+import create from "zustand";
+
+const jdiff = jsondiffpatch.create({
+  objectHash: obj => obj.id || JSON.stringify(obj)
+});
+
+const g = new Graph({ directed: true });
+g.setNode("null");
+
+const removeOrphans = ids => {
+  const [root, ...others] = alg.components(g);
+  others.forEach(other => {
+    const overlap = root.some(value => other.includes(value));
+    if (!overlap) {
+      other.forEach(id => {
+        ids.push(id);
+        g.removeNode(id);
+      });
+      removeOrphans(ids);
+    }
+  });
+};
+
+export const [useStore, api] = create(set => ({
+  flow: {
+    name: undefined,
+    nodes: {},
+    edges: []
+  },
+
+  setName: name => {
+    set(state => (state.flow.name = name));
+  },
+
+  addNode: ({ id, ...node }, src = null) => {
+    g.setNode(id);
+    g.setEdge(src, id);
+    set(state => {
+      state.flow.nodes[id] = node;
+      state.flow.edges.push([src, id]);
+    });
+  },
+
+  removeNode: id => {
+    const origEdges = g.edges();
+    g.removeNode(id);
+    const ids = [id];
+    removeOrphans(ids);
+    const edgesDiff = jdiff.diff(origEdges, g.edges());
+
+    set(state => {
+      ids.forEach(id => delete state.flow.nodes[id]);
+      jdiff.patch(state.flow.edges, edgesDiff);
+    });
+  },
+
+  connectNodes: (src, tgt) => {
+    g.setEdge(src, tgt);
+    set(state => {
+      state.flow.edges.push([src, tgt]);
+    });
+  },
+
+  moveNode: (src, tgt, newSrc) => {
+    const origEdges = g.edges();
+    g.removeEdge(src, tgt);
+    g.setEdge(newSrc, tgt);
+    const edgesDiff = jdiff.diff(origEdges, g.edges());
+
+    set(state => {
+      jdiff.patch(state.flow.edges, edgesDiff);
+    });
+  }
+}));

tsconfig.json

@@ -1,25 +1,20 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "strict": true,
+    "strict": false,
     "forceConsistentCasingInFileNames": true,
     "module": "esnext",
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react"
+    "jsx": "react",
+    "noImplicitAny": false
   },
-  "include": [
-    "src"
-  ]
+  "include": ["src"]
 }

tslint.json

@@ -0,0 +1,13 @@
+{
+  "defaultSeverity": "error",
+  "extends": ["tslint-config-airbnb", "tslint-react", "tslint-config-prettier"],
+  "jsRules": {},
+  "rules": {
+    "function-name": false,
+    "import-name": false,
+    "jsx-boolean-value": false,
+    "jsx-no-lambda": false,
+    "variable-name": false
+  },
+  "rulesDirectory": []
+}