Add a working example.

storybookjs · Jun 16, 2016 · fbb6d39 · fbb6d39
1 parent ba4f532
commit fbb6d39
Show file tree

Hide file tree

Showing 7 changed files with 230 additions and 0 deletions.
diff --git a/example/client/index.js b/example/client/index.js
@@ -0,0 +1,14 @@
+import { AppContainer } from 'react-hot-loader';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import renderStorybookUI from '../../src/index.js';
+import Provider from './provider';
+
+const rootEl = document.getElementById('root');
+renderStorybookUI(rootEl, new Provider());
+
+if (module.hot) {
+  module.hot.accept(() => {
+    window.location.reload();
+  });
+}
diff --git a/example/client/preview.js b/example/client/preview.js
@@ -0,0 +1,63 @@
+import React from 'react';
+
+export default class Preview extends React.Component {
+  constructor(globalState) {
+    super();
+    this.state = {};
+    this.globalState = globalState;
+
+    this.globalState.on('change', (kind, story) => {
+      if (this.mounted) {
+        this.setState({
+          kind,
+          story,
+        })
+      } else {
+        this.state = {
+          ...this.state,
+          kind,
+          story,
+        };
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.mounted = true;
+  }
+
+  componentWillUnmount() {
+    this.mounted = false;
+  }
+
+  fireAction() {
+    const { kind, story } = this.state;
+    const message = `This is an action from ${kind}:${story}`;
+    this.globalState.emit('action', message);
+  }
+
+  jump() {
+    const { kind, story } = this.state;
+    this.globalState.emit('jump', 'Component 2', 'State b');
+  }
+
+  toggleFullscreen() {
+    this.globalState.emit('toggleFullscreen');
+  }
+
+  render() {
+    const { kind, story } = this.state;
+    return (
+      <div style={{padding: 10}}>
+        <h3>Rendering the Preview</h3>
+        {kind} => {story}
+        <br/>
+        <button onClick={this.fireAction.bind(this)}>Fire an Action</button>
+        <br/>
+        <button onClick={this.jump.bind(this)}>Jump to Component2:State b</button>
+        <br/>
+        <button onClick={this.toggleFullscreen.bind(this)}>Go FullScreen</button>
+      </div>
+    );
+  }
+}
diff --git a/example/client/provider.js b/example/client/provider.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import Preview from './preview';
+import keycode from 'keycode';
+import { EventEmitter } from 'events';
+import parseKeyEvent from '../../src/libs/key_events';
+
+let id = 0;
+
+export default class ReactProvider {
+  constructor() {
+    this.globalState = new EventEmitter();
+  }
+
+  renderPreview(selectedKind, selectedStory) {
+    this.globalState.removeAllListeners();
+    this.globalState.on('action', (message) => {
+      this.api.addAction({
+        data: { message },
+        id: ++id,
+      });
+    });
+
+    this.globalState.on('jump', (kind, story) => {
+      this.api.selectStory(kind, story);
+    });
+
+    this.globalState.on('toggleFullscreen', () => {
+      const event = {
+        ctrlKey: true,
+        shiftKey: true,
+        keyCode: keycode('F'),
+        preventDefault() {},
+      };
+      const parsedEvent = parseKeyEvent(event);
+      console.log(parsedEvent);
+      this.api.handleShortcut(parsedEvent);
+    });
+
+    const preview = new Preview(this.globalState);
+    this.globalState.emit('change', selectedKind, selectedStory);
+
+    return preview;
+  }
+
+  handleAPI(api) {
+    this.api = api;
+    this.api.setStories([
+      {
+        kind: 'Component 1',
+        stories: ['State 1', 'State 2']
+      },
+
+      {
+        kind: 'Component 2',
+        stories: ['State a', 'State b']
+      }
+    ]);
+
+    this.api.onStory((kind, story) => {
+      this.globalState.emit('change', kind, story);
+    });
+  }
+}
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,17 @@
+<!doctype html>
+<html>
+  <head>
+    <title>Sample App</title>
+    <style>
+      body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id='root'>
+    </div>
+    <script src="/static/bundle.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,29 @@
+{
+  "name": "storybook-ui-example",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "babel-core": "^6.0.20",
+    "babel-eslint": "^4.1.3",
+    "babel-loader": "^6.0.1",
+    "babel-preset-es2015": "^6.0.15",
+    "babel-preset-react": "^6.0.15",
+    "babel-preset-stage-0": "^6.0.15",
+    "eslint": "^1.10.3",
+    "eslint-plugin-react": "^3.6.2",
+    "react-hot-loader": "^3.0.0-beta.1",
+    "webpack": "^1.12.2",
+    "webpack-dev-server": "^1.12.1"
+  },
+  "dependencies": {
+    "keycode": "^2.1.2",
+    "react": "^15.0.1",
+    "react-dom": "^15.0.1"
+  }
+}
diff --git a/example/server.js b/example/server.js
@@ -0,0 +1,14 @@
+var webpack = require('webpack');
+var WebpackDevServer = require('webpack-dev-server');
+var config = require('./webpack.config');
+
+new WebpackDevServer(webpack(config), {
+  publicPath: config.output.publicPath,
+  hot: true,
+  historyApiFallback: true
+}).listen(9999, 'localhost', function (err, result) {
+  if (err) {
+    return console.log(err);
+  }
+  console.log('Listening at http://localhost:9999/');
+});
diff --git a/example/webpack.config.js b/example/webpack.config.js
@@ -0,0 +1,30 @@
+var path = require('path');
+var webpack = require('webpack');
+
+module.exports = {
+  devtool: 'eval',
+  entry: [
+    'webpack-dev-server/client?http://localhost:9999',
+    'webpack/hot/only-dev-server',
+    './client/index'
+  ],
+  output: {
+    path: path.join(__dirname, 'dist'),
+    filename: 'bundle.js',
+    publicPath: '/static/'
+  },
+  plugins: [
+    new webpack.HotModuleReplacementPlugin()
+  ],
+  module: {
+    loaders: [{
+      test: /\.js$/,
+      loader: 'babel',
+      query: { presets: ['react', 'es2015', 'stage-0'] },
+      include: [
+        path.join(__dirname, 'client'),
+        path.resolve(__dirname, '../src')
+      ]
+    }]
+  }
+};