Merge pull request #24 from kadirahq/add-decorators

Add decorators feature

dist/client/configure/client.js

@@ -14,9 +14,15 @@ var ClientApi = function () {
 
     this._stories = stories;
     this._addons = {};
+    this._decorators = [];
   }
 
   _createClass(ClientApi, [{
+    key: 'addDecorator',
+    value: function addDecorator(decorator) {
+      this._decorators.push(decorator);
+    }
+  }, {
     key: 'setAddon',
     value: function setAddon(addon) {
       Object.assign(this._addons, addon);
@@ -36,7 +42,7 @@ var ClientApi = function () {
   }, {
     key: 'storiesOf',
     value: function storiesOf(kind) {
-      return new KindApi(this._stories, this._addons, kind);
+      return new KindApi(this._stories, this._addons, this._decorators, kind);
     }
   }]);
 
@@ -46,20 +52,39 @@ var ClientApi = function () {
 exports.default = ClientApi;
 
 var KindApi = exports.KindApi = function () {
-  function KindApi(stories, addons, kind) {
+  function KindApi(stories, addons, decorators, kind) {
     _classCallCheck(this, KindApi);
 
     this.kind = kind;
     this._stories = stories;
+    this._decorators = decorators.slice();
     Object.assign(this, addons);
   }
 
   _createClass(KindApi, [{
+    key: 'addDecorator',
+    value: function addDecorator(decorator) {
+      this._decorators.push(decorator);
+    }
+  }, {
     key: 'add',
     value: function add(story, fn) {
-      this._stories.add(this.kind, story, fn);
+      var decorated = this._decorate(fn);
+      this._stories.add(this.kind, story, decorated);
       return this;
     }
+  }, {
+    key: '_decorate',
+    value: function _decorate(fn) {
+      return this._decorators.reduce(function (decorated, decorator) {
+        return function (context) {
+          var _fn = function _fn() {
+            return decorated(context);
+          };
+          return decorator(_fn, context);
+        };
+      }, fn);
+    }
   }]);
 
   return KindApi;

dist/client/configure/index.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setAddon = exports.storiesOf = exports.configure = exports.client = exports.stories = undefined;
+exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = exports.client = exports.stories = undefined;
 
 var _store = require('./store');
 
@@ -18,6 +18,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var stories = exports.stories = new _store2.default();
 var client = exports.client = new _client2.default(stories);
 
+var addDecorator = exports.addDecorator = client.addDecorator.bind(client);
+var setAddon = exports.setAddon = client.setAddon.bind(client);
 var configure = exports.configure = client.configure.bind(client);
-var storiesOf = exports.storiesOf = client.storiesOf.bind(client);
-var setAddon = exports.setAddon = client.setAddon.bind(client);
+var storiesOf = exports.storiesOf = client.storiesOf.bind(client);

dist/client/index.js

@@ -3,26 +3,32 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setAddon = exports.storiesOf = exports.configure = undefined;
+exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = undefined;
 
 var _configure = require('./configure/');
 
-Object.defineProperty(exports, 'configure', {
+Object.defineProperty(exports, 'addDecorator', {
   enumerable: true,
   get: function get() {
-    return _configure.configure;
+    return _configure.addDecorator;
   }
 });
-Object.defineProperty(exports, 'storiesOf', {
+Object.defineProperty(exports, 'setAddon', {
   enumerable: true,
   get: function get() {
-    return _configure.storiesOf;
+    return _configure.setAddon;
   }
 });
-Object.defineProperty(exports, 'setAddon', {
+Object.defineProperty(exports, 'configure', {
   enumerable: true,
   get: function get() {
-    return _configure.setAddon;
+    return _configure.configure;
+  }
+});
+Object.defineProperty(exports, 'storiesOf', {
+  enumerable: true,
+  get: function get() {
+    return _configure.storiesOf;
   }
 });
 exports.PreviewComponent = PreviewComponent;

src/client/configure/client.js

@@ -2,6 +2,11 @@ export default class ClientApi {
   constructor(stories) {
     this._stories = stories;
     this._addons = {};
+    this._decorators = [];
+  }
+
+  addDecorator(decorator) {
+    this._decorators.push(decorator);
   }
 
   setAddon(addon) {
@@ -16,19 +21,34 @@ export default class ClientApi {
   }
 
   storiesOf(kind) {
-    return new KindApi(this._stories, this._addons, kind);
+    return new KindApi(this._stories, this._addons, this._decorators, kind);
   }
 }
 
 export class KindApi {
-  constructor(stories, addons, kind) {
+  constructor(stories, addons, decorators, kind) {
     this.kind = kind;
     this._stories = stories;
+    this._decorators = decorators.slice();
     Object.assign(this, addons);
   }
 
+  addDecorator(decorator) {
+    this._decorators.push(decorator);
+  }
+
   add(story, fn) {
-    this._stories.add(this.kind, story, fn);
+    const decorated = this._decorate(fn);
+    this._stories.add(this.kind, story, decorated);
     return this;
   }
+
+  _decorate(fn) {
+    return this._decorators.reduce((decorated, decorator) => {
+      return context => {
+        const _fn = () => decorated(context);
+        return decorator(_fn, context);
+      };
+    }, fn);
+  }
 }

src/client/configure/index.js

@@ -4,6 +4,7 @@ import ClientApi from './client';
 export const stories = new StoryStore();
 export const client = new ClientApi(stories);
 
+export const addDecorator = client.addDecorator.bind(client);
+export const setAddon = client.setAddon.bind(client);
 export const configure = client.configure.bind(client);
 export const storiesOf = client.storiesOf.bind(client);
-export const setAddon = client.setAddon.bind(client);

src/client/index.js

@@ -3,9 +3,10 @@ import Preview from './preview/components/Preview';
 import { stories } from './configure';
 
 // export configuration API functions
+export { addDecorator } from './configure/';
+export { setAddon } from './configure/';
 export { configure } from './configure/';
 export { storiesOf } from './configure/';
-export { setAddon } from './configure/';
 
 // export the function to generate the preview component
 export function PreviewComponent({port, host = 'localhost'}) {