[WIP] Use the new addons API (#346)

* Update Storybook UI * Setup channel for preview * Load addons from user or load default addons * Allow easy importing default set of addons For an example addons.js: ```js import '@kadira/storybook/addons'; import '@kadira/storybook-addon-hello/register'; ``` * Export correct action, linkTo functions * Rename pageBus to channel * Fix tests and lint errors * Update some comments.
storybookjs · Aug 2, 2016 · 19da888 · 19da888
1 parent 191d648
commit 19da888
Show file tree

Hide file tree

Showing 23 changed files with 267 additions and 373 deletions.
diff --git a/addons.js b/addons.js
@@ -0,0 +1,4 @@
+// We are not using this file inside this project.
+// But, this will be useful when a user is configuring it's own addons.
+// Then he can import this file to add default set of addons.
+require('./dist/server/addons');
diff --git a/dist/client/channel.js b/dist/client/channel.js
@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
+var _pageBus = require('page-bus');
+
+var _pageBus2 = _interopRequireDefault(_pageBus);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var Channel = function () {
+  function Channel(dataId) {
+    (0, _classCallCheck3.default)(this, Channel);
+
+    this._dataId = dataId || _uuid2.default.v4();
+    this._pageBus = (0, _pageBus2.default)();
+    this._listeners = {};
+  }
+
+  (0, _createClass3.default)(Channel, [{
+    key: 'getDataId',
+    value: function getDataId() {
+      return this._dataId;
+    }
+  }, {
+    key: 'on',
+    value: function on(type, handler) {
+      var listener = function listener(p) {
+        return handler(JSON.parse(p));
+      };
+      // TODO add listener to a map[handler]listener
+      this._pageBus.on(this._dataId + '.' + type, listener);
+    }
+  }, {
+    key: 'emit',
+    value: function emit(type, data) {
+      var payload = (0, _stringify2.default)(data);
+      this._pageBus.emit(this._dataId + '.' + type, payload);
+    }
+  }, {
+    key: 'removeListener',
+    value: function removeListener() /* type, handler */{
+      // TODO get listener from a map[handler]listener
+      // this._pageBus.removeListener(type, listener);
+    }
+  }]);
+  return Channel;
+}();
+
+exports.default = Channel;
diff --git a/dist/client/index.js b/dist/client/index.js
@@ -3,7 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getStorybook = exports.configure = exports.addDecorator = exports.setAddon = exports.linkTo = exports.action = exports.storiesOf = undefined;
+exports.linkTo = exports.action = exports.getStorybook = exports.configure = exports.addDecorator = exports.setAddon = exports.storiesOf = undefined;
+
+var _storybookAddonActions = require('@kadira/storybook-addon-actions');
+
+Object.defineProperty(exports, 'action', {
+  enumerable: true,
+  get: function get() {
+    return _storybookAddonActions.action;
+  }
+});
+
+var _storybookAddonLinks = require('@kadira/storybook-addon-links');
+
+Object.defineProperty(exports, 'linkTo', {
+  enumerable: true,
+  get: function get() {
+    return _storybookAddonLinks.linkTo;
+  }
+});
 
 var _preview = require('./preview');
 
@@ -12,9 +30,9 @@ var previewApi = _interopRequireWildcard(_preview);
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 var storiesOf = exports.storiesOf = previewApi.storiesOf;
-var action = exports.action = previewApi.action;
-var linkTo = exports.linkTo = previewApi.linkTo;
 var setAddon = exports.setAddon = previewApi.setAddon;
 var addDecorator = exports.addDecorator = previewApi.addDecorator;
 var configure = exports.configure = previewApi.configure;
-var getStorybook = exports.getStorybook = previewApi.getStorybook;
+var getStorybook = exports.getStorybook = previewApi.getStorybook;
+
+// NOTE export these to keep backwards compatibility
diff --git a/dist/client/manager/provider.js b/dist/client/manager/provider.js
@@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _stringify = require('babel-runtime/core-js/json/stringify');
-
-var _stringify2 = _interopRequireDefault(_stringify);
-
 var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
 
 var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
@@ -36,19 +32,19 @@ var _qs = require('qs');
 
 var _qs2 = _interopRequireDefault(_qs);
 
-var _uuid = require('uuid');
-
-var _uuid2 = _interopRequireDefault(_uuid);
-
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
-var _pageBus = require('page-bus');
+var _storybookUi = require('@kadira/storybook-ui');
 
-var _pageBus2 = _interopRequireDefault(_pageBus);
+var _storybookAddons = require('@kadira/storybook-addons');
 
-var _storybookUi = require('@kadira/storybook-ui');
+var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+
+var _channel = require('../channel');
+
+var _channel2 = _interopRequireDefault(_channel);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -60,15 +56,21 @@ var ReactProvider = function (_Provider) {
 
     var _this = (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ReactProvider).call(this));
 
-    _this.dataId = _uuid2.default.v4();
+    _this.channel = new _channel2.default();
+    _storybookAddons2.default.setChannel(_this.channel);
     return _this;
   }
 
   (0, _createClass3.default)(ReactProvider, [{
+    key: 'getPanels',
+    value: function getPanels() {
+      return _storybookAddons2.default.getPanels();
+    }
+  }, {
     key: 'renderPreview',
     value: function renderPreview(selectedKind, selectedStory) {
       var queryParams = {
-        dataId: this.dataId,
+        dataId: this.channel.getDataId(),
         selectedKind: selectedKind,
         selectedStory: selectedStory
       };
@@ -80,38 +82,21 @@ var ReactProvider = function (_Provider) {
   }, {
     key: 'handleAPI',
     value: function handleAPI(api) {
-      var dataId = this.dataId;
-      var bus = (0, _pageBus2.default)();
+      var _this2 = this;
 
       api.onStory(function (kind, story) {
-        var payload = {
-          kind: kind,
-          story: story
-        };
-
-        bus.emit(dataId + '.setCurrentStory', (0, _stringify2.default)(payload));
-      });
-
-      // watch pageBus and put both actions and stories.
-      bus.on(dataId + '.addAction', function (payload) {
-        var data = JSON.parse(payload);
-        api.addAction(data.action);
+        _this2.channel.emit('setCurrentStory', { kind: kind, story: story });
       });
-
-      bus.on(dataId + '.setStories', function (payload) {
-        var data = JSON.parse(payload);
+      this.channel.on('setStories', function (data) {
         api.setStories(data.stories);
       });
-
-      bus.on(dataId + '.selectStory', function (payload) {
-        var data = JSON.parse(payload);
+      this.channel.on('selectStory', function (data) {
         api.selectStory(data.kind, data.story);
       });
-
-      bus.on(dataId + '.applyShortcut', function (payload) {
-        var data = JSON.parse(payload);
+      this.channel.on('applyShortcut', function (data) {
         api.handleShortcut(data.event);
       });
+      _storybookAddons2.default.loadAddons(api);
     }
   }]);
   return ReactProvider;

diff --git a/dist/client/preview/client_api.js b/dist/client/preview/client_api.js
@@ -1,66 +1,58 @@
-'use strict';
+"use strict";
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _from = require('babel-runtime/core-js/array/from');
-
-var _from2 = _interopRequireDefault(_from);
-
-var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray');
+var _toConsumableArray2 = require("babel-runtime/helpers/toConsumableArray");
 
 var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2);
 
-var _extends2 = require('babel-runtime/helpers/extends');
+var _extends2 = require("babel-runtime/helpers/extends");
 
 var _extends3 = _interopRequireDefault(_extends2);
 
-var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
 
 var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
 
-var _createClass2 = require('babel-runtime/helpers/createClass');
+var _createClass2 = require("babel-runtime/helpers/createClass");
 
 var _createClass3 = _interopRequireDefault(_createClass2);
 
-var _uuid = require('uuid');
-
-var _uuid2 = _interopRequireDefault(_uuid);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var ClientApi = function () {
   function ClientApi(_ref) {
-    var pageBus = _ref.pageBus;
+    var channel = _ref.channel;
     var storyStore = _ref.storyStore;
     (0, _classCallCheck3.default)(this, ClientApi);
 
-    // pageBus can be null when running in node
-    // always check whether pageBus is available
-    this._pageBus = pageBus;
+    // channel can be null when running in node
+    // always check whether channel is available
+    this._channel = channel;
     this._storyStore = storyStore;
     this._addons = {};
     this._globalDecorators = [];
   }
 
   (0, _createClass3.default)(ClientApi, [{
-    key: 'setAddon',
+    key: "setAddon",
     value: function setAddon(addon) {
       this._addons = (0, _extends3.default)({}, this._addons, addon);
     }
   }, {
-    key: 'addDecorator',
+    key: "addDecorator",
     value: function addDecorator(decorator) {
       this._globalDecorators.push(decorator);
     }
   }, {
-    key: 'clearDecorators',
+    key: "clearDecorators",
     value: function clearDecorators() {
       this._globalDecorators = [];
     }
   }, {
-    key: 'storiesOf',
+    key: "storiesOf",
     value: function storiesOf(kind, m) {
       var _this = this;
 
@@ -119,50 +111,7 @@ var ClientApi = function () {
       return api;
     }
   }, {
-    key: 'action',
-    value: function action(name) {
-      var pageBus = this._pageBus;
-
-      return function action() {
-        for (var _len2 = arguments.length, _args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
-          _args[_key2] = arguments[_key2];
-        }
-
-        var args = (0, _from2.default)(_args);
-
-        // Remove events from the args. Otherwise, it creates a huge JSON string.
-        args = args.map(function (arg) {
-          if (arg && typeof arg.preventDefault === 'function') {
-            return '[SyntheticEvent]';
-          }
-          return arg;
-        });
-
-        var id = _uuid2.default.v4();
-        var data = { name: name, args: args };
-
-        if (pageBus) {
-          pageBus.emit('addAction', { action: { data: data, id: id } });
-        }
-      };
-    }
-  }, {
-    key: 'linkTo',
-    value: function linkTo(kind, story) {
-      var pageBus = this._pageBus;
-
-      return function linkTo() {
-        var resolvedKind = typeof kind === 'function' ? kind.apply(undefined, arguments) : kind;
-        var resolvedStory = typeof story === 'function' ? story.apply(undefined, arguments) : story;
-        var selection = { kind: resolvedKind, story: resolvedStory };
-
-        if (pageBus) {
-          pageBus.emit('selectStory', selection);
-        }
-      };
-    }
-  }, {
-    key: 'getStorybook',
+    key: "getStorybook",
     value: function getStorybook() {
       var _this2 = this;
 

diff --git a/dist/client/preview/config_api.js b/dist/client/preview/config_api.js
@@ -20,14 +20,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 var ConfigApi = function () {
   function ConfigApi(_ref) {
-    var pageBus = _ref.pageBus;
+    var channel = _ref.channel;
     var storyStore = _ref.storyStore;
     var reduxStore = _ref.reduxStore;
     (0, _classCallCheck3.default)(this, ConfigApi);
 
-    // pageBus can be null when running in node
-    // always check whether pageBus is available
-    this._pageBus = pageBus;
+    // channel can be null when running in node
+    // always check whether channel is available
+    this._channel = channel;
     this._storyStore = storyStore;
     this._reduxStore = reduxStore;
   }
@@ -39,7 +39,7 @@ var ConfigApi = function () {
 
       var stories = this._storyStore.dumpStoryBook();
       // send to the parent frame.
-      this._pageBus.emit('setStories', { stories: stories });
+      this._channel.emit('setStories', { stories: stories });
 
       // clear the error if exists.
       this._reduxStore.dispatch((0, _actions.clearError)());
@@ -76,7 +76,7 @@ var ConfigApi = function () {
         });
       }
 
-      if (this._pageBus) {
+      if (this._channel) {
         render();
       } else {
         loaders();