Use @kadira/storybook-channel modules (#359)

* Use @kadira/storybook-channel module

* Update channel addons

dist/client/manager/provider.js

@@ -24,9 +24,9 @@ var _inherits2 = require('babel-runtime/helpers/inherits');
 
 var _inherits3 = _interopRequireDefault(_inherits2);
 
-var _preview = require('./preview');
+var _uuid = require('uuid');
 
-var _preview2 = _interopRequireDefault(_preview);
+var _uuid2 = _interopRequireDefault(_uuid);
 
 var _qs = require('qs');
 
@@ -42,9 +42,13 @@ var _storybookAddons = require('@kadira/storybook-addons');
 
 var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
 
-var _channel = require('../channel');
+var _storybookChannelPagebus = require('@kadira/storybook-channel-pagebus');
+
+var _storybookChannelPagebus2 = _interopRequireDefault(_storybookChannelPagebus);
 
-var _channel2 = _interopRequireDefault(_channel);
+var _preview = require('./preview');
+
+var _preview2 = _interopRequireDefault(_preview);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -56,7 +60,8 @@ var ReactProvider = function (_Provider) {
 
     var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ReactProvider).call(this));
 
-    _this.channel = new _channel2.default();
+    _this.dataId = _uuid2.default.v4();
+    _this.channel = (0, _storybookChannelPagebus2.default)({ key: _this.dataId });
     _storybookAddons2.default.setChannel(_this.channel);
     return _this;
   }
@@ -70,7 +75,7 @@ var ReactProvider = function (_Provider) {
     key: 'renderPreview',
     value: function renderPreview(selectedKind, selectedStory) {
       var queryParams = {
-        dataId: this.channel.getDataId(),
+        dataId: this.dataId,
         selectedKind: selectedKind,
         selectedStory: selectedStory
       };

dist/client/preview/index.js

@@ -33,9 +33,9 @@ var _init = require('./init');
 
 var _init2 = _interopRequireDefault(_init);
 
-var _channel = require('../channel');
+var _storybookChannelPagebus = require('@kadira/storybook-channel-pagebus');
 
-var _channel2 = _interopRequireDefault(_channel);
+var _storybookChannelPagebus2 = _interopRequireDefault(_storybookChannelPagebus);
 
 var _actions = require('./actions');
 
@@ -63,7 +63,7 @@ if (isBrowser) {
   if (!queryParams.dataId) {
     throw new Error('dataId is not supplied via queryString');
   }
-  var channel = new _channel2.default(queryParams.dataId);
+  var channel = (0, _storybookChannelPagebus2.default)({ key: queryParams.dataId });
   channel.on('setCurrentStory', function (data) {
     reduxStore.dispatch((0, _actions.selectStory)(data.kind, data.story));
   });

package.json

@@ -25,20 +25,20 @@
     "@kadira/storybook-addon-actions": "^1.0.2",
     "@kadira/storybook-addon-links": "^1.0.0",
     "@kadira/storybook-addons": "^1.3.1",
+    "@kadira/storybook-channel-pagebus": "^2.0.2",
     "@kadira/storybook-ui": "^3.1.0",
-    "redux": "^3.5.2",
     "airbnb-js-shims": "^1.0.0",
     "autoprefixer": "^6.3.7",
     "babel-core": "^6.11.4",
     "babel-loader": "^6.2.4",
-    "babel-plugin-transform-react-constant-elements": "^6.9.1",
-    "babel-plugin-transform-runtime": "^6.12.0",
-    "babel-polyfill": "^6.9.1",
     "babel-plugin-syntax-async-functions": "^6.8.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.8.0",
     "babel-plugin-transform-class-properties": "^6.11.5",
     "babel-plugin-transform-object-rest-spread": "^6.8.0",
+    "babel-plugin-transform-react-constant-elements": "^6.9.1",
     "babel-plugin-transform-regenerator": "^6.11.4",
+    "babel-plugin-transform-runtime": "^6.12.0",
+    "babel-polyfill": "^6.9.1",
     "babel-preset-es2015": "^6.9.0",
     "babel-preset-es2016": "^6.11.3",
     "babel-preset-react": "^6.11.1",
@@ -54,11 +54,11 @@
     "json-loader": "^0.5.4",
     "json-stringify-safe": "^5.0.1",
     "lodash.pick": "^4.2.0",
-    "page-bus": "^3.0.1",
     "postcss-loader": "0.9.1",
     "qs": "^6.1.0",
     "react-modal": "^1.2.0",
     "redbox-react": "^1.2.2",
+    "redux": "^3.5.2",
     "shelljs": "^0.6.0",
     "stack-source-map": "^1.0.5",
     "style-loader": "0.13.1",

src/client/manager/provider.js

@@ -1,14 +1,16 @@
-import Preview from './preview';
+import UUID from 'uuid';
 import qs from 'qs';
 import React from 'react';
 import { Provider } from '@kadira/storybook-ui';
 import addons from '@kadira/storybook-addons';
-import Channel from '../channel';
+import createChannel from '@kadira/storybook-channel-pagebus';
+import Preview from './preview';
 
 export default class ReactProvider extends Provider {
   constructor() {
     super();
-    this.channel = new Channel();
+    this.dataId = UUID.v4();
+    this.channel = createChannel({ key: this.dataId });
     addons.setChannel(this.channel);
   }
 
@@ -18,7 +20,7 @@ export default class ReactProvider extends Provider {
 
   renderPreview(selectedKind, selectedStory) {
     const queryParams = {
-      dataId: this.channel.getDataId(),
+      dataId: this.dataId,
       selectedKind,
       selectedStory,
     };

src/client/preview/index.js

@@ -4,7 +4,7 @@ import ConfigApi from './config_api';
 import render from './render';
 import qs from 'qs';
 import init from './init';
-import Channel from '../channel';
+import createChannel from '@kadira/storybook-channel-pagebus';
 import { selectStory } from './actions';
 import addons from '@kadira/storybook-addons';
 
@@ -23,7 +23,7 @@ if (isBrowser) {
   if (!queryParams.dataId) {
     throw new Error('dataId is not supplied via queryString');
   }
-  const channel = new Channel(queryParams.dataId);
+  const channel = createChannel({ key: queryParams.dataId });
   channel.on('setCurrentStory', data => {
     reduxStore.dispatch(selectStory(data.kind, data.story));
   });