Merge pull request #14 from storybooks/add-addonactions-repo

Add addonactions repo
storybookjs · Apr 5, 2017 · 471a8bb · 471a8bb
2 parents f225cd0 + 145ff3d
commit 471a8bb
Show file tree

Hide file tree

Showing 22 changed files with 798 additions and 0 deletions.
diff --git a/dist/components/ActionLogger/index.js b/dist/components/ActionLogger/index.js
@@ -0,0 +1,115 @@
+'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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _reactInspector = require('react-inspector');
+
+var _reactInspector2 = _interopRequireDefault(_reactInspector);
+
+var _style = require('./style');
+
+var _style2 = _interopRequireDefault(_style);
+
+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 ActionLogger = function (_Component) {
+  _inherits(ActionLogger, _Component);
+
+  function ActionLogger() {
+    _classCallCheck(this, ActionLogger);
+
+    return _possibleConstructorReturn(this, (ActionLogger.__proto__ || Object.getPrototypeOf(ActionLogger)).apply(this, arguments));
+  }
+
+  _createClass(ActionLogger, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var latest = this.refs.latest;
+      if (latest) {
+        var borderLeft = _style2.default.action.borderLeft;
+        latest.style.borderLeft = 'solid 5px #aaa';
+        setTimeout(function () {
+          latest.style.borderLeft = borderLeft;
+        }, 300);
+      }
+    }
+  }, {
+    key: 'renderAction',
+    value: function renderAction(action, i) {
+      var ref = i ? '' : 'latest';
+      var counter = _react2.default.createElement(
+        'div',
+        { style: _style2.default.counter },
+        action.count
+      );
+      return _react2.default.createElement(
+        'div',
+        { ref: ref, key: action.id, style: _style2.default.action },
+        _react2.default.createElement(
+          'div',
+          { style: _style2.default.countwrap },
+          action.count > 1 && counter
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: _style2.default.inspector },
+          _react2.default.createElement(_reactInspector2.default, {
+            showNonenumerable: true,
+            name: action.data.name,
+            data: action.data.args || action.data
+          })
+        )
+      );
+    }
+  }, {
+    key: 'getActionData',
+    value: function getActionData() {
+      var _this2 = this;
+
+      return this.props.actions.map(function (action, i) {
+        return _this2.renderAction(action, i);
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      return _react2.default.createElement(
+        'div',
+        { style: _style2.default.wrapper },
+        _react2.default.createElement(
+          'pre',
+          { style: _style2.default.actions },
+          this.getActionData()
+        ),
+        _react2.default.createElement(
+          'button',
+          { style: _style2.default.button, onClick: this.props.onClear },
+          'CLEAR'
+        )
+      );
+    }
+  }]);
+
+  return ActionLogger;
+}(_react.Component);
+
+ActionLogger.propTypes = {
+  onClear: _react2.default.PropTypes.func,
+  actions: _react2.default.PropTypes.array
+};
+
+exports.default = ActionLogger;
diff --git a/dist/components/ActionLogger/style.js b/dist/components/ActionLogger/style.js
@@ -0,0 +1,53 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = {
+  wrapper: {
+    flex: 1,
+    display: 'flex',
+    position: 'relative'
+  },
+  actions: {
+    flex: 1,
+    margin: 0,
+    padding: '8px 2px 20px 0',
+    overflowY: 'auto',
+    color: '#666'
+  },
+  action: {
+    display: 'flex',
+    padding: '3px 3px 3px 0',
+    borderLeft: '5px solid white',
+    borderBottom: '1px solid #fafafa',
+    transition: 'all 0.1s',
+    alignItems: 'center'
+  },
+  countwrap: {
+    paddingBottom: 2
+  },
+  counter: {
+    margin: '0 5px 0 5px',
+    backgroundColor: '#777777',
+    color: '#ffffff',
+    padding: '1px 5px',
+    borderRadius: '20px'
+  },
+  inspector: {
+    flex: 1,
+    padding: '0 0 0 5px'
+  },
+  button: {
+    position: 'absolute',
+    bottom: 0, right: 0,
+    border: 'none',
+    borderTop: 'solid 1px rgba(0, 0, 0, 0.2)',
+    borderLeft: 'solid 1px rgba(0, 0, 0, 0.2)',
+    background: 'rgba(255, 255, 255, 0.5)',
+    padding: '5px 10px',
+    borderRadius: '4px 0 0 0',
+    color: 'rgba(0, 0, 0, 0.5)',
+    outline: 'none'
+  }
+};
diff --git a/dist/containers/ActionLogger/index.js b/dist/containers/ActionLogger/index.js
@@ -0,0 +1,103 @@
+'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 _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _deepEqual = require('deep-equal');
+
+var _deepEqual2 = _interopRequireDefault(_deepEqual);
+
+var _ActionLogger = require('../../components/ActionLogger/');
+
+var _ActionLogger2 = _interopRequireDefault(_ActionLogger);
+
+var _ = require('../../');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+
+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 ActionLogger = function (_React$Component) {
+  _inherits(ActionLogger, _React$Component);
+
+  function ActionLogger(props) {
+    var _ref;
+
+    _classCallCheck(this, ActionLogger);
+
+    for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+      args[_key - 1] = arguments[_key];
+    }
+
+    var _this = _possibleConstructorReturn(this, (_ref = ActionLogger.__proto__ || Object.getPrototypeOf(ActionLogger)).call.apply(_ref, [this, props].concat(args)));
+
+    _this.state = { actions: [] };
+    _this._actionListener = function (action) {
+      return _this.addAction(action);
+    };
+    return _this;
+  }
+
+  _createClass(ActionLogger, [{
+    key: 'addAction',
+    value: function addAction(action) {
+      action.data.args = action.data.args.map(function (arg) {
+        return JSON.parse(arg);
+      });
+      var actions = [].concat(_toConsumableArray(this.state.actions));
+      var previous = actions.length && actions[0];
+      if (previous && (0, _deepEqual2.default)(previous.data, action.data)) {
+        previous.count++;
+      } else {
+        action.count = 1;
+        actions.unshift(action);
+      }
+      this.setState({ actions: actions });
+    }
+  }, {
+    key: 'clearActions',
+    value: function clearActions() {
+      this.setState({ actions: [] });
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      this.props.channel.on(_.EVENT_ID, this._actionListener);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      this.props.channel.removeListener(_.EVENT_ID, this._actionListener);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _this2 = this;
+
+      var props = {
+        actions: this.state.actions,
+        onClear: function onClear() {
+          return _this2.clearActions();
+        }
+      };
+      return _react2.default.createElement(_ActionLogger2.default, props);
+    }
+  }]);
+
+  return ActionLogger;
+}(_react2.default.Component);
+
+exports.default = ActionLogger;
diff --git a/dist/index.js b/dist/index.js
@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _manager = require('./manager');
+
+Object.defineProperty(exports, 'register', {
+  enumerable: true,
+  get: function get() {
+    return _manager.register;
+  }
+});
+
+var _preview = require('./preview');
+
+Object.defineProperty(exports, 'action', {
+  enumerable: true,
+  get: function get() {
+    return _preview.action;
+  }
+});
+Object.defineProperty(exports, 'decorateAction', {
+  enumerable: true,
+  get: function get() {
+    return _preview.decorateAction;
+  }
+});
+// addons, panels and events get unique names using a prefix
+var ADDON_ID = exports.ADDON_ID = 'kadirahq/storybook-addon-actions';
+var PANEL_ID = exports.PANEL_ID = ADDON_ID + '/actions-panel';
+var EVENT_ID = exports.EVENT_ID = ADDON_ID + '/action-event';
diff --git a/dist/manager.js b/dist/manager.js
@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.register = register;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _storybookAddons = require('@kadira/storybook-addons');
+
+var _storybookAddons2 = _interopRequireDefault(_storybookAddons);
+
+var _ActionLogger = require('./containers/ActionLogger');
+
+var _ActionLogger2 = _interopRequireDefault(_ActionLogger);
+
+var _ = require('./');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function register() {
+  _storybookAddons2.default.register(_.ADDON_ID, function (api) {
+    var channel = _storybookAddons2.default.getChannel();
+    _storybookAddons2.default.addPanel(_.PANEL_ID, {
+      title: 'Action Logger',
+      render: function render() {
+        return _react2.default.createElement(_ActionLogger2.default, { channel: channel });
+      }
+    });
+  });
+}