Add option to use storybook with more than one user

package.json

@@ -70,6 +70,7 @@
     "shelljs": "^0.7.3",
     "style-loader": "^0.13.1",
     "url-loader": "^0.5.7",
+    "uuid": "^3.0.1",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.8.3",
     "webpack-hot-middleware": "^2.12.2"

src/bin/storybook-start.js

@@ -9,6 +9,9 @@ program
   .option('-h, --host <host>', 'host to listen on')
   .option('-p, --port <port>', 'port to listen on')
   .option('-c, --config-dir [dir-name]', 'storybook config directory')
+  .option('-r, --reset-cache', 'reset react native packager')
+  .option('-s, --skip-packager', 'run only storybook server')
+  .option('-i, --manual-id', 'allow multiple users to work with same storybook')
   .parse(process.argv);
 
 const projectDir = path.resolve();
@@ -18,7 +21,7 @@ if (program.host) {
   listenAddr.push(program.host);
 }
 
-const server = new Server({projectDir, configDir});
+const server = new Server({projectDir, configDir, manualId: program.manualId});
 server.listen(...listenAddr, function (err) {
   if (err) {
     throw err;
@@ -27,11 +30,15 @@ server.listen(...listenAddr, function (err) {
   console.info(`\nReact Native Storybook started on => ${address}\n`);
 });
 
-const projectRoots = configDir === projectDir ? [configDir] : [configDir, projectDir];
+if (!program.skipPackager) {
+  const projectRoots = configDir === projectDir ? [configDir] : [configDir, projectDir];
 
 // RN packager
-shelljs.exec([
-  'node node_modules/react-native/local-cli/cli.js start',
-  `--projectRoots ${projectRoots.join(',')}`,
-  `--root ${projectDir}`,
-].join(' '), {async: true});
+  shelljs.exec([
+    'node node_modules/react-native/local-cli/cli.js start',
+    `--projectRoots ${projectRoots.join(',')}`,
+    `--root ${projectDir}`,
+    program.resetCache && '--reset-cache'
+  ].filter(x => x).join(' '), {async: true});
+
+}

src/manager/index.js

@@ -2,4 +2,4 @@ import renderStorybookUI from '@kadira/storybook-ui';
 import Provider from './provider';
 
 const rootEl = document.getElementById('root');
-renderStorybookUI(rootEl, new Provider({ url: `ws://${location.host}` }));
+renderStorybookUI(rootEl, new Provider({ url: `ws://${location.host}`, options: window.storybookOptions}));

src/manager/provider.js

@@ -2,12 +2,23 @@ import React from 'react';
 import { Provider } from '@kadira/storybook-ui';
 import createChannel from '@kadira/storybook-channel-websocket';
 import addons from '@kadira/storybook-addons';
+import uuid from 'uuid';
 
 export default class ReactProvider extends Provider {
-  constructor({ url }) {
+  constructor({ url: domain, options }) {
     super();
+    this.options = options;
     this.selection = null;
     this.channel = addons.getChannel();
+
+    let url = domain;
+    if (options.manualId) {
+      const pairedId = uuid().substr(-6);
+
+      this.pairedId = pairedId;
+      url = domain + '/pairedId=' + this.pairedId;
+    }
+
     if (!this.channel) {
       this.channel = createChannel({ url });
       addons.setChannel(this.channel);
@@ -22,10 +33,19 @@ export default class ReactProvider extends Provider {
     this.selection = { kind, story };
     this.channel.emit('setCurrentStory', { kind, story });
     const renderPreview = addons.getPreview();
-    if (renderPreview) {
-      return renderPreview(kind, story);
+
+    const innerPreview = renderPreview ? renderPreview(kind, story) :  null;
+
+    if (this.options.manualId) {
+      return (
+        <div>
+          Your ID: { this.pairedId }
+          { innerPreview }
+        </div>
+      );
     }
-    return null;
+
+    return innerPreview;
   }
 
   handleAPI(api) {

src/preview/components/StoryView/index.js

@@ -6,7 +6,14 @@ export default class StoryView extends Component {
   constructor(props, ...args) {
     super(props, ...args);
     this.state = {storyFn: null, selection: {}};
-    this.props.events.on('story', this.selectStory.bind(this));
+
+    this.storyHandler = this.selectStory.bind(this);
+
+    this.props.events.on('story', this.storyHandler);
+  }
+
+  componentWillUnmount() {
+    this.props.events.removeListener('story', this.storyHandler);
   }
 
   selectStory(storyFn, selection) {

src/preview/index.js

@@ -56,10 +56,10 @@ export default class Preview {
     return () => {
       let webUrl = null;
       let channel = addons.getChannel();
-      if (!channel) {
+      if (params.resetStorybook || !channel) {
         const host = params.host || 'localhost';
         const port = params.port || 7007;
-        const url = `ws://${host}:${port}`;
+        const url = `ws://${host}:${port}/${params.query}`;
         webUrl = `http://${host}:${port}`;
         channel = createChannel({ url });
         addons.setChannel(channel);

src/server/index.html.js

@@ -1,6 +1,6 @@
 import url from 'url';
 
-export default function (publicPath, settings) {
+export default function (publicPath, options) {
   return `
     <!DOCTYPE html>
     <html>
@@ -40,6 +40,9 @@ export default function (publicPath, settings) {
       </head>
       <body style="margin: 0;">
         <div id="root"></div>
+        <script>
+          window.storybookOptions = ${JSON.stringify(options)};
+        </script>
         <script src="${url.resolve(publicPath, 'static/manager.bundle.js')}"></script>
       </body>
     </html>

src/server/index.js

@@ -1,4 +1,5 @@
 import express from 'express';
+import querystring from 'querystring';
 import http from 'http';
 import ws from 'ws';
 import storybook from './middleware';
@@ -8,15 +9,30 @@ export default class Server {
     this.options = options;
     this.httpServer = http.createServer();
     this.expressApp = express();
-    this.expressApp.use(storybook(options.projectDir, options.configDir));
+    this.expressApp.use(storybook(options));
     this.httpServer.on('request', this.expressApp);
     this.wsServer = ws.Server({server: this.httpServer});
     this.wsServer.on('connection', s => this.handleWS(s));
   }
 
   handleWS(socket) {
+
+    if (this.options.manualId) {
+      const params = socket.upgradeReq && socket.upgradeReq.url
+        ? querystring.parse(socket.upgradeReq.url.substr(1))
+        : {};
+
+      if (params.pairedId) {
+        socket.pairedId = params.pairedId;
+      }
+    }
+
     socket.on('message', data => {
-      this.wsServer.clients.forEach(c => c.send(data));
+      this.wsServer.clients.forEach(c => {
+        if (!this.options.manualId || (socket.pairedId && socket.pairedId === c.pairedId)) {
+          return c.send(data);
+        }
+      });
     });
   }
 

src/server/middleware.js

@@ -20,7 +20,7 @@ function getMiddleware(configDir) {
   return function () {};
 }
 
-export default function (projectDir, configDir) {
+export default function ({projectDir, configDir, ...options}) {
   // Build the webpack configuration using the `baseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
   const config = loadConfig('DEVELOPMENT', baseConfig, projectDir, configDir);
@@ -46,7 +46,9 @@ export default function (projectDir, configDir) {
   router.use(webpackHotMiddleware(compiler));
 
   router.get('/', function (req, res) {
-    res.send(getIndexHtml(publicPath));
+    res.send(getIndexHtml(publicPath, {
+      manualId: options.manualId,
+    }));
   });
 
   return router;