Merge branch 'action-pane'

dist/client/index.js

@@ -10,6 +10,7 @@ var _keys = require('babel-runtime/core-js/object/keys');
 var _keys2 = _interopRequireDefault(_keys);
 
 exports.storiesOf = storiesOf;
+exports.action = action;
 exports.getStories = getStories;
 exports.configure = configure;
 exports.renderMain = renderMain;
@@ -45,6 +46,22 @@ function storiesOf(kind, m) {
   return { add: add };
 }
 
+function action(name) {
+  return function () {
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    var _getData = (0, _data.getData)();
+
+    var _getData$actions = _getData.actions;
+    var actions = _getData$actions === undefined ? [] : _getData$actions;
+
+    actions = [{ name: name, args: args }].concat(actions);
+    (0, _data.setData)({ actions: actions });
+  };
+}
+
 function getStories() {
   return _storybook3.default;
 }

dist/client/ui/action_logger.js

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ActionLogger = function (_React$Component) {
+  (0, _inherits3.default)(ActionLogger, _React$Component);
+
+  function ActionLogger() {
+    (0, _classCallCheck3.default)(this, ActionLogger);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ActionLogger).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(ActionLogger, [{
+    key: 'render',
+    value: function render() {
+      var h3Style = {
+        fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+        color: '#444',
+        letterSpacing: '2px',
+        fontSize: 12,
+        margin: '12px 0 5px 0'
+      };
+
+      var preStyle = {
+        height: 105,
+        overflowY: 'auto',
+        backgroundColor: '#FFF',
+        borderRadius: 3,
+        padding: 8,
+        color: '#666',
+        border: '1px solid #EAEAEA'
+      };
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'h3',
+          { style: h3Style },
+          'ACTION LOGGER'
+        ),
+        _react2.default.createElement(
+          'pre',
+          { style: preStyle },
+          this.props.actionLog
+        )
+      );
+    }
+  }]);
+  return ActionLogger;
+}(_react2.default.Component);
+
+exports.default = ActionLogger;

dist/client/ui/admin.js

@@ -8,9 +8,14 @@ var _keys = require('babel-runtime/core-js/object/keys');
 
 var _keys2 = _interopRequireDefault(_keys);
 
+var _stringify = require('babel-runtime/core-js/json/stringify');
+
+var _stringify2 = _interopRequireDefault(_stringify);
+
 exports.default = renderAdmin;
 exports.getControls = getControls;
 exports.getIframe = getIframe;
+exports.getActionLogger = getActionLogger;
 exports.renderMain = renderMain;
 
 var _react = require('react');
@@ -29,6 +34,10 @@ var _controls = require('./controls');
 
 var _controls2 = _interopRequireDefault(_controls);
 
+var _action_logger = require('./action_logger');
+
+var _action_logger2 = _interopRequireDefault(_action_logger);
+
 var _layout = require('./layout');
 
 var _layout2 = _interopRequireDefault(_layout);
@@ -68,10 +77,28 @@ function getIframe(data) {
     src: '/iframe?' + queryString });
 }
 
+function getActionLogger(data) {
+  var _data$actions = data.actions;
+  var actions = _data$actions === undefined ? [] : _data$actions;
+
+  var log = actions.map(function (action) {
+    return (0, _stringify2.default)(action, null, 2);
+  }).join('\n\n');
+
+  return _react2.default.createElement(_action_logger2.default, { actionLog: log });
+}
+
 function renderMain(data) {
   // Inside the main page, we simply render iframe.
   var controls = getControls(data);
-  var root = _react2.default.createElement(_layout2.default, { controls: controls, content: getIframe(data) });
+  var iframe = getIframe(data);
+  var actionLogger = getActionLogger(data);
+
+  var root = _react2.default.createElement(_layout2.default, {
+    controls: controls,
+    preview: iframe,
+    actionLogger: actionLogger });
+
   _reactDom2.default.render(root, rootEl);
 }
 

dist/client/ui/controls.js

@@ -58,7 +58,7 @@ var StorybookControls = function (_React$Component) {
         fontSize: '12px',
         fontWeight: 'bolder',
         color: '#828282',
-        border: '1px solid #DDD',
+        border: '1px solid #C1C1C1',
         textAlign: 'center',
         borderRadius: '2px',
         padding: '5px',

dist/client/ui/layout.js

@@ -43,28 +43,35 @@ var Layout = function (_React$Component) {
     value: function render() {
       var _props = this.props;
       var controls = _props.controls;
-      var content = _props.content;
+      var preview = _props.preview;
+      var actionLogger = _props.actionLogger;
       var height = this.state.height;
 
 
       var rootStyles = {
         height: height,
-        padding: '8px',
+        padding: 8,
         backgroundColor: '#F7F7F7'
       };
       var controlsStyle = {
-        width: '240px',
+        width: 240,
         float: 'left',
         height: '100%',
         overflowY: 'auto'
       };
-      var contentStyle = {
-        height: height - 15,
-        marginLeft: '250px',
+
+      var actionStyle = {
+        height: 150,
+        marginLeft: 250
+      };
+
+      var previewStyle = {
+        height: height - actionStyle.height - 25,
+        marginLeft: 250,
         border: '1px solid #DDD',
-        borderRadius: '4px',
+        borderRadius: 4,
         boxShadow: '0px 2px 6px -1px #b8b8b8',
-        padding: '5px',
+        padding: 5,
         backgroundColor: '#FFF'
       };
 
@@ -78,8 +85,13 @@ var Layout = function (_React$Component) {
         ),
         _react2.default.createElement(
           'div',
-          { style: contentStyle },
-          content
+          { style: previewStyle },
+          preview
+        ),
+        _react2.default.createElement(
+          'div',
+          { style: actionStyle },
+          actionLogger
         )
       );
     }

src/client/index.js

@@ -29,6 +29,14 @@ export function storiesOf(kind, m) {
   return {add};
 }
 
+export function action(name) {
+  return function(...args) {
+    let {actions = []} = getData();
+    actions = [{name, args}].concat(actions);
+    setData({actions});
+  }
+}
+
 export function getStories() {
   return storybook;
 }

src/client/ui/action_logger.js

@@ -0,0 +1,32 @@
+import React from 'react';
+
+class ActionLogger extends React.Component {
+  render() {
+    const h3Style = {
+      fontFamily: '"Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif',
+      color: '#444',
+      letterSpacing: '2px',
+      fontSize: 12,
+      margin: '12px 0 5px 0'
+    };
+
+    const preStyle = {
+      height: 105,
+      overflowY: 'auto',
+      backgroundColor: '#FFF',
+      borderRadius: 3,
+      padding: 8,
+      color: '#666',
+      border: '1px solid #EAEAEA'
+    };
+
+    return (
+      <div>
+        <h3 style={h3Style}>ACTION LOGGER</h3>
+        <pre style={preStyle}>{this.props.actionLog}</pre>
+      </div>
+    );
+  }
+}
+
+export default ActionLogger;

src/client/ui/admin.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import ReadBox from 'redbox-react';
 import StorybookControls from './controls';
+import ActionLogger from './action_logger';
 import Layout from './layout';
 import {setData} from '../data';
 
@@ -40,10 +41,28 @@ export function getIframe(data) {
   );
 }
 
+export function getActionLogger(data) {
+  const {actions = []} = data;
+  const log = actions
+    .map(action => JSON.stringify(action, null, 2))
+    .join('\n\n');
+
+  return (<ActionLogger actionLog={log} />);
+}
+
 export function renderMain(data) {
   // Inside the main page, we simply render iframe.
   const controls = getControls(data);
-  const root = (<Layout controls={controls} content={getIframe(data)}/>);
+  const iframe = getIframe(data);
+  const actionLogger = getActionLogger(data);
+
+  const root = (
+    <Layout
+      controls={controls}
+      preview={iframe}
+      actionLogger={actionLogger}/>
+  );
+
   ReactDOM.render(root, rootEl);
 }
 

src/client/ui/controls.js

@@ -15,7 +15,7 @@ export default class StorybookControls extends React.Component {
       fontSize: '12px',
       fontWeight: 'bolder',
       color: '#828282',
-      border: '1px solid #DDD',
+      border: '1px solid #C1C1C1',
       textAlign: 'center',
       borderRadius: '2px',
       padding: '5px',

src/client/ui/layout.js

@@ -2,27 +2,33 @@ import React from 'react';
 
 class Layout extends React.Component {
   render() {
-    const {controls, content} = this.props;
+    const {controls, preview, actionLogger} = this.props;
     const {height} = this.state;
 
     const rootStyles = {
       height,
-      padding: '8px',
+      padding: 8,
       backgroundColor: '#F7F7F7'
     };
     const controlsStyle = {
-      width: '240px',
+      width: 240,
       float: 'left',
       height: '100%',
       overflowY: 'auto'
     };
-    const contentStyle = {
-      height: height - 15,
-      marginLeft: '250px',
+
+    const actionStyle = {
+      height: 150,
+      marginLeft: 250
+    };
+
+    const previewStyle = {
+      height: height - actionStyle.height - 25,
+      marginLeft: 250,
       border: '1px solid #DDD',
-      borderRadius: '4px',
+      borderRadius: 4,
       boxShadow: '0px 2px 6px -1px #b8b8b8',
-      padding: '5px',
+      padding: 5,
       backgroundColor: '#FFF'
     };
 
@@ -31,8 +37,11 @@ class Layout extends React.Component {
         <div style={controlsStyle}>
           {controls}
         </div>
-        <div style={contentStyle}>
-          {content}
+        <div style={previewStyle}>
+          {preview}
+        </div>
+        <div style={actionStyle}>
+          {actionLogger}
         </div>
       </div>
     );