Demos are a whole lot better now

dylanvorster · dylanvorster · commit 32738688a6a0 · 2018-01-07T22:48:52.000+02:00
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
@@ -0,0 +1,25 @@
+# Checklist
+
+- [] The code has been run through pretty `yarn run pretty`
+- [] The PR Template has been filled out (see below)
+- [] Had a beer because you are awesome
+
+## What?
+
+(My awesome new feature does this really cool thing.)
+
+## Why?
+
+(Because obviously it could not do it before)
+
+## How?
+
+(Basically I did this and that because im a super 1337 hacker) 
+
+## Feel-Good "programming lol" image:
+
+(Add your own one below)
+
+![](https://media.giphy.com/media/13HgwGsXF0aiGY/giphy.gif)
+
+
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -0,0 +1,27 @@
+# Contributing
+
+See below for guidelines on house keeping:
+
+### Always add a PR
+
+Since the project runs on GitHub, the best way to contribute is to fork and then submit a PR.
+You will find a template that you will need to fill out
+
+### Adding new demos
+
+Add a new folder in the ./demos directory and make sure that it is named correctly like the other demos. 
+A new demo should conform to the standard of either `demo-simple` in which it contains a markdown file that
+clearly explains 'whats going on', or the code sample should have very clear comments that almost always should ready
+like an instruction manual such as the simple demo.
+
+Finally, you should link up your demo to the __index.tsx__ file in the __demos__ directory. It should be quite
+self explanatory on how it works, but ultimately I have a helper method that makes it easy to link source code
+to the demo itself, hence the 'require' statements. The third parameter is if you want to place your demo
+inside a markdown guide (again: see simple demo for how that is done).
+
+### Make the demo testable
+
+Similar procedure, except link your demo in the __index.tsx__ file sitting in the __tests__ directory.
+Running `yarn run test` will fire up jest (hopefully) and then it will render your demo to a snapshot directory
+which when run again (for a second time), should compare the output to the newely generated snapshot. Make sure
+to commit the updated snapshot file with your PR!
diff --git a/demos/.helpers/DemoWorkspaceWidget.tsx b/demos/.helpers/DemoWorkspaceWidget.tsx
diff --git a/demos/.helpers/Helper.tsx b/demos/.helpers/Helper.tsx
@@ -1,3 +1,7 @@
+import * as React from "react";
+import {withDocs} from 'storybook-readme';
+import {WithCode} from "../../.storybook/addon-code/react.js";
+
 export class Helper {
 	/**
 	 * Logs the mouse position in the console, but overlays a div that consumes all events
@@ -18,4 +22,16 @@ export class Helper {
 			console.log(event.clientX, event.clientY);
 		});
 	}
+
+	static makeDemo(widget, code, markdown?) {
+		let container = () => <WithCode code={code}>{widget}</WithCode>;
+		if (markdown) {
+			return withDocs({
+				PreviewComponent: ({children}) => {
+					return <div className="docs-preview-wrapper">{children}</div>
+				}
+			})(markdown, container);
+		}
+		return container;
+	}
 }
diff --git a/demos/.helpers/demo.scss b/demos/.helpers/demo.scss
@@ -1,4 +1,4 @@
-@import "../src/sass";
+@import "../../src/sass";
 
 .srd-demo-workspace{
 	background: black;
@@ -48,7 +48,7 @@
 .storm-diagrams-canvas{
 	height: 100%;
 	min-height: 300px;
-	background-color: rgb(60,60,60);
+	background-color: rgb(60,60,60) !important;
 	$color: rgba(white, .05);
 	background-image:
 		linear-gradient(0deg,
diff --git a/demos/demo-cloning/index.tsx b/demos/demo-cloning/index.tsx
@@ -15,7 +15,7 @@ import {
 } from "../../src/main";
 import * as _ from "lodash";
 import * as React from "react";
-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
 
 /**
  * Tests cloning
diff --git a/demos/demo-dagre/index.tsx b/demos/demo-dagre/index.tsx
@@ -13,7 +13,7 @@ import {
 } from "../../src/main";
 import { distributeElements } from "./dagre-utils";
 import * as React from "react";
-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
 
 function createNode(name) {
 	return new DefaultNodeModel(name, "rgb(0,192,255)");
diff --git a/demos/demo-mutate-graph/index.tsx b/demos/demo-mutate-graph/index.tsx
@@ -12,7 +12,7 @@ import {
 	LinkInstanceFactory
 } from "../../src/main";
 import * as React from "react";
-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
 
 /**
  * Tests the grid size
diff --git a/demos/demo-serializing/index.tsx b/demos/demo-serializing/index.tsx
@@ -12,7 +12,7 @@ import {
 	LinkInstanceFactory
 } from "../../src/main";
 import * as React from "react";
-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
 import { action } from '@storybook/addon-actions';
 var beautify = require("json-beautify");
 
diff --git a/demos/demo-zoom-to-fit/index.tsx b/demos/demo-zoom-to-fit/index.tsx
@@ -9,7 +9,7 @@ import {
 	DiagramWidget
 } from "../../src/main";
 import * as React from "react";
-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";
+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";
 
 /**
  *
diff --git a/demos/index.tsx b/demos/index.tsx
@@ -1,132 +1,93 @@
 import * as React from "react";
-import {storiesOf} from "@storybook/react";
-import * as storybook from '@storybook/react';
-import {action} from "@storybook/addon-actions";
+import {storiesOf, addDecorator} from "@storybook/react";
 import {setOptions} from '@storybook/addon-options';
 import {Toolkit} from "../src/Toolkit";
 import { host } from 'storybook-host';
-import { withReadme, withDocs }  from 'storybook-readme';
-import {WithCode} from "../.storybook/addon-code/react.js";
+import {Helper} from "./.helpers/Helper";
 
-import demo_performance from "./demo-performance/index";
-import demo_custom_node1 from "./demo-custom-node1/index";
-import demo_locks from "./demo-locks/index";
-import demo_drag_and_drop from "./demo-drag-and-drop/index";
-import demo_serializing from "./demo-serializing/index";
-import demo_grid from "./demo-grid/index";
-import demo_limit_points from "./demo-limit-points/index";
-import demo_listeners from "./demo-listeners/index";
-import demo_mutate_graph from "./demo-mutate-graph/index";
-import demo_zoom_to_fit from "./demo-zoom-to-fit/index";
-import demo_custom_link1 from "./demo-custom-link1/index";
-import demo_cloning from "./demo-cloning/index";
-import demo_dagre from "./demo-dagre/index";
-
-import {Helper} from "./Helper";
-
-require("./demo.scss");
+//include the SCSS for the demo
+require("./.helpers/demo.scss");
 
 // make tests deterministic
 Toolkit.TESTING_MODE = true;
 
-// Option defaults:
+addDecorator(host({
+	cropMarks: false,
+	height: '100%',
+	width: '100%',
+	padding: 20
+}));
+
 setOptions({
 	name: 'STORM React Diagrams',
 	url: 'https://github.com/projectstorm/react-diagrams',
 	addonPanelInRight: true
 });
 
-const withCustomPreview = withDocs({
-	PreviewComponent: ({ children }) => {
-		return <div className="docs-preview-wrapper">{children}</div>
-	}
-})
-
-function getDemo(widget, code, markdown?){
-	let container = () => <WithCode code={code}>{widget}</WithCode>;
-	if(markdown){
-		return withCustomPreview(markdown, container);
-	}
-	return container;
-}
-
-
 storiesOf("Simple Usage", module)
-	.addDecorator(host({
-		cropMarks: false,
-		height: '100%',
-		width: '100%',
-		padding: 20
-	}))
-	.add("Simple example", getDemo(
+	.add("Simple example", Helper.makeDemo(
 		require("./demo-simple/index").default(),
 		require('!!raw-loader!./demo-simple/index'),
 		require("./demo-simple/docs.md")
 	))
-	.add("Performance demo", getDemo(
-		demo_performance(),
+	.add("Performance demo", Helper.makeDemo(
+		require("./demo-performance/index").default(),
 		require('!!raw-loader!./demo-performance/index')
 	))
-	.add("Locked widget", () => {
-		return demo_locks();
-	})
-	.add("Grid size", () => {
-		return demo_grid();
-	})
-	.add("Limiting number of points", () => {
-		return demo_limit_points();
-	})
-	.add("Events and listeners", () => {
-		return demo_listeners();
-	})
-	.add("Zoom to fit", () => {
-		return demo_zoom_to_fit();
-	})
+	.add("Locked widget", Helper.makeDemo(
+		require("./demo-locks/index").default(),
+		require('!!raw-loader!./demo-locks/index')
+	))
+	.add("Canvas grid size", Helper.makeDemo(
+		require("./demo-grid/index").default(),
+		require('!!raw-loader!./demo-grid/index')
+	))
+	.add("Limiting link points", Helper.makeDemo(
+		require("./demo-limit-points/index").default(),
+		require('!!raw-loader!./demo-limit-points/index')
+	))
+	.add("Events and listeners", Helper.makeDemo(
+		require("./demo-listeners/index").default(),
+		require('!!raw-loader!./demo-listeners/index')
+	))
+	.add("Zoom to fit", Helper.makeDemo(
+		require("./demo-zoom-to-fit/index").default(),
+		require('!!raw-loader!./demo-zoom-to-fit/index')
+	))
 
 storiesOf("Advanced Techniques", module)
-	.addDecorator(host({
-		cropMarks: false,
-		height: '100%',
-		width: '100%',
-		padding: 20
-	}))
-	.add("Clone selected", () => {
-		return demo_cloning();
-	})
-	.add("Serializing and deserializing", () => {
-		return demo_serializing();
-	})
-	.add("Programatically modify graph", () => {
-		return demo_mutate_graph();
-	})
-	.add("Large application example", () => {
-		return demo_drag_and_drop();
-	})
+	.add("Clone Selected", Helper.makeDemo(
+		require("./demo-cloning/index").default(),
+		require('!!raw-loader!./demo-cloning/index')
+	))
+	.add("Serializing and de-serializing", Helper.makeDemo(
+		require("./demo-serializing/index").default(),
+		require('!!raw-loader!./demo-serializing/index')
+	))
+	.add("Programatically modifying graph", Helper.makeDemo(
+		require("./demo-mutate-graph/index").default(),
+		require('!!raw-loader!./demo-mutate-graph/index')
+	))
+	.add("Large application", Helper.makeDemo(
+		require("./demo-drag-and-drop/index").default(),
+		require('!!raw-loader!./demo-drag-and-drop/components/BodyWidget')
+	))
 
 storiesOf("Custom Models", module)
-	.addDecorator(host({
-		cropMarks: false,
-		height: '100%',
-		width: '100%',
-		padding: 20
-	}))
-	.add("Custom diamond node", () => {
-		return demo_custom_node1();
-	})
-	.add("Custom links", () => {
-		return demo_custom_link1();
-	})
+	.add("Custom diamond node", Helper.makeDemo(
+		require("./demo-custom-node1/index").default(),
+		require('!!raw-loader!./demo-custom-node1/index')
+	))
+	.add("Custom link sizes", Helper.makeDemo(
+		require("./demo-custom-link1/index").default(),
+		require('!!raw-loader!./demo-custom-link1/index')
+	))
 
 storiesOf("3rd party libraries", module)
-	.addDecorator(host({
-		cropMarks: false,
-		height: '100%',
-		width: '100%',
-		padding: 20
-	}))
-	.add("Auto distribute - Dagre", () => {
-		return demo_dagre();
-	})
+	.add("Auto Distribute (Dagre)", Helper.makeDemo(
+		require("./demo-dagre/index").default(),
+		require('!!raw-loader!./demo-dagre/index')
+	))
 
 
 // enable this to log mouse location when writing new puppeteer tests

Original file line number	Diff line number	Diff line change
`@@ -9,7 +9,7 @@ import {`
`9`	`9`	`DiagramWidget`
`10`	`10`	`} from "../../src/main";`
`11`	`11`	`import * as React from "react";`
`12`		`-import {DemoWorkspaceWidget} from "../DemoWorkspaceWidget";`
	`12`	`+import {DemoWorkspaceWidget} from "../.helpers/DemoWorkspaceWidget";`
`13`	`13`
`14`	`14`	`/**`
`15`	`15`	`*`