Setup StoryBook for demo

Author: tomkp

.storybook/addons.js

@@ -0,0 +1,2 @@
+import '@storybook/addon-actions/register';
+import '@storybook/addon-links/register';

.storybook/config.js

@@ -0,0 +1,9 @@
+import { configure } from '@storybook/react';
+
+// automatically import all files ending in *.stories.js
+const req = require.context('../stories', true, /.stories.js$/);
+function loadStories() {
+  req.keys().forEach((filename) => req(filename));
+}
+
+configure(loadStories, module);

.storybook/preview-head.html

@@ -0,0 +1,33 @@
+<style>
+
+
+  *, *:before, *:after {
+    box-sizing: border-box;
+    position: relative;
+  }
+
+  html {
+    font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 1.5;
+  }
+
+  body, html, #root {
+    margin: 0;
+    height: 100vh;
+    min-height: 100vh;
+    width: 100vw;
+  }
+
+  a {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+  }
+
+  #root {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+  }
+
+</style>

package.json

@@ -52,7 +52,10 @@
     "react-dom": "^16.2.0",
     "surge": "^0.19.0",
     "typescript": "^2.6.2",
-    "watchify": "^3.9.0"
+    "watchify": "^3.9.0",
+    "@storybook/react": "^3.3.3",
+    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-links": "^3.3.3"
   },
   "scripts": {
     "compile": "babel -d lib/ src/",
@@ -64,7 +67,9 @@
     "demo": "npm run compile && browserify demo/Examples.js -d -t -o demo/bundle.js",
     "demo:watch": "npm run compile:watch & watchify demo/Examples.js -d -t -o demo/bundle.js",
     "demo:publish": "npm run compile && browserify demo/Examples.js -d -t -o demo/bundle.js && surge demo react-split-pane-v2.surge.sh",
-    "prettier": "prettier --single-quote --trailing-comma es5 --write './{src,test}/**/*.js'"
+    "prettier": "prettier --single-quote --trailing-comma es5 --write './{src,test}/**/*.js'",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
   },
   "browserify": {
     "transform": [

stories/index.stories.js

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { storiesOf } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import SplitPane from '../lib/SplitPane';
+import Pane from "../lib/Pane";
+
+import { Button, Welcome } from '@storybook/react/demo';
+
+storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+
+storiesOf('Vertical', module)
+  .add('with divs', () =>
+    <SplitPane split="vertical">
+      <div>This is a div</div>
+      <div>This is a div</div>
+    </SplitPane>
+  )
+  .add('with Panes', () =>
+    <SplitPane split="vertical">
+      <Pane>This is a Pane</Pane>
+      <Pane>This is a Pane</Pane>
+    </SplitPane>
+  );