[WIP] Use the new addons API

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');

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;

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

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;

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;
 

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();