Add action logger

dist/client/configure/action_store.js

@@ -0,0 +1,69 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+var _uuid = require('uuid');
+
+var _uuid2 = _interopRequireDefault(_uuid);
+
+var _events = require('events');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
+var ActionStore = function (_EventEmitter) {
+  _inherits(ActionStore, _EventEmitter);
+
+  function ActionStore() {
+    var _Object$getPrototypeO;
+
+    _classCallCheck(this, ActionStore);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    return _possibleConstructorReturn(this, (_Object$getPrototypeO = Object.getPrototypeOf(ActionStore)).call.apply(_Object$getPrototypeO, [this].concat(args)));
+  }
+
+  _createClass(ActionStore, [{
+    key: 'newAction',
+    value: function newAction(name) {
+      var _this2 = this;
+
+      return function () {
+        for (var _len2 = arguments.length, _args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+          _args[_key2] = arguments[_key2];
+        }
+
+        var args = Array.from(_args);
+
+        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 };
+        var action = { data: data, id: id };
+
+        _this2.emit('action', action);
+      };
+    }
+  }]);
+
+  return ActionStore;
+}(_events.EventEmitter);
+
+exports.default = ActionStore;

dist/client/configure/client.js

@@ -9,15 +9,21 @@ var _createClass = function () { function defineProperties(target, props) { for
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 var ClientApi = function () {
-  function ClientApi(stories) {
+  function ClientApi(actions, stories) {
     _classCallCheck(this, ClientApi);
 
+    this._actions = actions;
     this._stories = stories;
     this._addons = {};
     this._decorators = [];
   }
 
   _createClass(ClientApi, [{
+    key: 'action',
+    value: function action(name) {
+      return this._actions.newAction(name);
+    }
+  }, {
     key: 'addDecorator',
     value: function addDecorator(decorator) {
       this._decorators.push(decorator);

dist/client/configure/index.js

@@ -3,21 +3,27 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = exports.client = exports.stories = undefined;
+exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = exports.action = exports.client = exports.stories = exports.actions = undefined;
 
-var _store = require('./store');
+var _action_store = require('./action_store');
 
-var _store2 = _interopRequireDefault(_store);
+var _action_store2 = _interopRequireDefault(_action_store);
+
+var _story_store = require('./story_store');
+
+var _story_store2 = _interopRequireDefault(_story_store);
 
 var _client = require('./client');
 
 var _client2 = _interopRequireDefault(_client);
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-var stories = exports.stories = new _store2.default();
-var client = exports.client = new _client2.default(stories);
+var actions = exports.actions = new _action_store2.default();
+var stories = exports.stories = new _story_store2.default();
+var client = exports.client = new _client2.default(actions, stories);
 
+var action = exports.action = client.action.bind(client);
 var addDecorator = exports.addDecorator = client.addDecorator.bind(client);
 var setAddon = exports.setAddon = client.setAddon.bind(client);
 var configure = exports.configure = client.configure.bind(client);

dist/client/index.js

@@ -3,10 +3,16 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = undefined;
+exports.storiesOf = exports.configure = exports.setAddon = exports.addDecorator = exports.action = undefined;
 
 var _configure = require('./configure/');
 
+Object.defineProperty(exports, 'action', {
+  enumerable: true,
+  get: function get() {
+    return _configure.action;
+  }
+});
 Object.defineProperty(exports, 'addDecorator', {
   enumerable: true,
   get: function get() {
@@ -52,6 +58,6 @@ function PreviewComponent(_ref) {
   var host = _ref$host === undefined ? 'localhost' : _ref$host;
 
   return function () {
-    return _react2.default.createElement(_Preview2.default, { address: 'ws://' + host + ':' + port, stories: _configure2.stories });
+    return _react2.default.createElement(_Preview2.default, { address: 'ws://' + host + ':' + port, stories: _configure2.stories, actions: _configure2.actions });
   };
 }

dist/client/preview/components/Preview.js

@@ -54,6 +54,11 @@ var Preview = function (_Component) {
     value: function sendInit() {
       this.socket.send(JSON.stringify({ type: 'init', data: { clientType: 'device' } }));
     }
+  }, {
+    key: 'sendAddAction',
+    value: function sendAddAction(action) {
+      this.socket.send(JSON.stringify({ type: 'addAction', data: { action: action } }));
+    }
   }, {
     key: 'sendSetStories',
     value: function sendSetStories() {
@@ -111,6 +116,11 @@ var Preview = function (_Component) {
       this.props.stories.on('change', function () {
         _this2.sendSetStories();
       });
+
+      // listen for action triggers
+      this.props.actions.on('action', function (action) {
+        _this2.sendAddAction(action);
+      });
     }
   }, {
     key: 'render',

src/client/configure/action_store.js

@@ -0,0 +1,27 @@
+import UUID from 'uuid';
+import { EventEmitter } from 'events';
+
+export default class ActionStore extends EventEmitter {
+  constructor(...args) {
+    super(...args);
+  }
+
+  newAction(name) {
+    return (..._args) => {
+      let args = Array.from(_args);
+
+      args = args.map(arg => {
+        if (arg && typeof arg.preventDefault === 'function') {
+          return '[SyntheticEvent]';
+        }
+        return arg;
+      });
+
+      const id = UUID.v4();
+      const data = { name, args };
+      const action = { data, id };
+
+      this.emit('action', action);
+    };
+  }
+}

src/client/configure/client.js

@@ -1,10 +1,15 @@
 export default class ClientApi {
-  constructor(stories) {
+  constructor(actions, stories) {
+    this._actions = actions;
     this._stories = stories;
     this._addons = {};
     this._decorators = [];
   }
 
+  action(name) {
+    return this._actions.newAction(name);
+  }
+
   addDecorator(decorator) {
     this._decorators.push(decorator);
   }

src/client/configure/index.js

@@ -1,9 +1,12 @@
-import StoryStore from './store';
+import ActionStore from './action_store';
+import StoryStore from './story_store';
 import ClientApi from './client';
 
+export const actions = new ActionStore();
 export const stories = new StoryStore();
-export const client = new ClientApi(stories);
+export const client = new ClientApi(actions, stories);
 
+export const action = client.action.bind(client);
 export const addDecorator = client.addDecorator.bind(client);
 export const setAddon = client.setAddon.bind(client);
 export const configure = client.configure.bind(client);

src/client/index.js

@@ -1,14 +1,16 @@
 import React from 'react';
 import Preview from './preview/components/Preview';
 import { stories } from './configure';
+import { actions } from './configure';
 
 // export configuration API functions
+export { action } from './configure/';
 export { addDecorator } from './configure/';
 export { setAddon } from './configure/';
 export { configure } from './configure/';
 export { storiesOf } from './configure/';
 
 // export the function to generate the preview component
 export function PreviewComponent({port, host = 'localhost'}) {
-  return () => <Preview address={`ws://${host}:${port}`} stories={stories} />;
+  return () => <Preview address={`ws://${host}:${port}`} stories={stories} actions={actions} />;
 }

src/client/preview/components/Preview.js

@@ -21,6 +21,10 @@ export default class Preview extends Component {
     this.socket.send(JSON.stringify({type: 'init', data: {clientType: 'device'}}));
   }
 
+  sendAddAction(action) {
+    this.socket.send(JSON.stringify({type: 'addAction', data: {action}}));
+  }
+
   sendSetStories() {
     const stories = this.props.stories.dump();
     // FIXME this will send stories list to all browser clients
@@ -72,6 +76,11 @@ export default class Preview extends Component {
     this.props.stories.on('change', () => {
       this.sendSetStories();
     });
+
+    // listen for action triggers
+    this.props.actions.on('action', action => {
+      this.sendAddAction(action);
+    });
   }
 
   render() {