From 006b4e528a651b014334f5a43b9c6e2ecac75659 Mon Sep 17 00:00:00 2001 From: Muhammed Thanish Date: Thu, 28 Jul 2016 18:34:23 +0530 Subject: [PATCH 1/7] Prepare UI for new addon API --- dist/modules/api/actions/api.js | 17 +- dist/modules/api/actions/index.js | 2 - dist/modules/api/configs/init_api.js | 1 - dist/modules/api/configs/reducers/api.js | 29 --- .../ui/components/action_logger/index.js | 190 ------------------ .../modules/ui/components/down_panel/index.js | 143 +++++++++++++ .../modules/ui/components/down_panel/style.js | 62 ++++++ dist/modules/ui/components/layout/index.js | 1 + dist/modules/ui/containers/action_logger.js | 33 --- dist/modules/ui/containers/down_panel.js | 34 ++++ dist/modules/ui/routes.js | 6 +- example/client/addons.js | 27 +++ example/client/preview.js | 9 - example/client/provider.js | 7 +- src/modules/api/actions/__tests__/api.js | 30 --- src/modules/api/actions/api.js | 13 -- src/modules/api/actions/index.js | 2 - src/modules/api/configs/__tests__/init_api.js | 2 - src/modules/api/configs/init_api.js | 1 - .../api/configs/reducers/__tests__/api.js | 50 ----- src/modules/api/configs/reducers/api.js | 30 --- .../action_logger/__tests__/index.js | 27 --- .../ui/components/action_logger/index.js | 119 ----------- src/modules/ui/components/down_panel/index.js | 67 ++++++ src/modules/ui/components/down_panel/style.js | 51 +++++ src/modules/ui/components/layout/index.js | 1 + .../ui/containers/__tests__/action_logger.js | 31 --- src/modules/ui/containers/action_logger.js | 18 -- src/modules/ui/containers/down_panel.js | 14 ++ src/modules/ui/routes.js | 4 +- 30 files changed, 412 insertions(+), 609 deletions(-) delete mode 100755 dist/modules/ui/components/action_logger/index.js create mode 100644 dist/modules/ui/components/down_panel/index.js create mode 100644 dist/modules/ui/components/down_panel/style.js delete mode 100755 dist/modules/ui/containers/action_logger.js create mode 100644 dist/modules/ui/containers/down_panel.js create mode 100644 example/client/addons.js delete mode 100755 src/modules/ui/components/action_logger/__tests__/index.js delete mode 100755 src/modules/ui/components/action_logger/index.js create mode 100644 src/modules/ui/components/down_panel/index.js create mode 100644 src/modules/ui/components/down_panel/style.js delete mode 100755 src/modules/ui/containers/__tests__/action_logger.js delete mode 100755 src/modules/ui/containers/action_logger.js create mode 100644 src/modules/ui/containers/down_panel.js diff --git a/dist/modules/api/actions/api.js b/dist/modules/api/actions/api.js index 51dc7e9eb5fd..567174a4c5ff 100755 --- a/dist/modules/api/actions/api.js +++ b/dist/modules/api/actions/api.js @@ -32,24 +32,9 @@ exports.default = { direction: direction }); }, - clearActions: function clearActions(_ref4) { + setOptions: function setOptions(_ref4, options) { var reduxStore = _ref4.reduxStore; - reduxStore.dispatch({ - type: _.types.CLEAR_ACTIONS - }); - }, - addAction: function addAction(_ref5, action) { - var reduxStore = _ref5.reduxStore; - - reduxStore.dispatch({ - type: _.types.ADD_ACTION, - action: action - }); - }, - setOptions: function setOptions(_ref6, options) { - var reduxStore = _ref6.reduxStore; - reduxStore.dispatch({ type: _.types.SET_OPTIONS, options: options diff --git a/dist/modules/api/actions/index.js b/dist/modules/api/actions/index.js index 35c4832df837..6067af6081fe 100755 --- a/dist/modules/api/actions/index.js +++ b/dist/modules/api/actions/index.js @@ -16,8 +16,6 @@ var types = exports.types = { SET_STORIES: 'API_SET_STORIES', SELECT_STORY: 'API_SELECT_STORY', JUMP_TO_STORY: 'API_JUMP_TO_STORY', - CLEAR_ACTIONS: 'API_CLEAR_ACTIONS', - ADD_ACTION: 'API_ADD_ACTION', SET_OPTIONS: 'API_SET_OPTIONS' }; diff --git a/dist/modules/api/configs/init_api.js b/dist/modules/api/configs/init_api.js index 4186a4462fe2..95e34f806d1f 100644 --- a/dist/modules/api/configs/init_api.js +++ b/dist/modules/api/configs/init_api.js @@ -11,7 +11,6 @@ exports.default = function (provider, reduxStore, actions) { }, - addAction: actions.api.addAction, setStories: actions.api.setStories, selectStory: actions.api.selectStory, setOptions: actions.api.setOptions, diff --git a/dist/modules/api/configs/reducers/api.js b/dist/modules/api/configs/reducers/api.js index 4a4125bedff9..0b0230d70ac6 100755 --- a/dist/modules/api/configs/reducers/api.js +++ b/dist/modules/api/configs/reducers/api.js @@ -4,10 +4,6 @@ Object.defineProperty(exports, "__esModule", { value: true }); -var _toConsumableArray2 = require('babel-runtime/helpers/toConsumableArray'); - -var _toConsumableArray3 = _interopRequireDefault(_toConsumableArray2); - var _extends2 = require('babel-runtime/helpers/extends'); var _extends3 = _interopRequireDefault(_extends2); @@ -44,13 +40,6 @@ exports.default = function () { }); } - case _actions.types.CLEAR_ACTIONS: - { - return (0, _extends3.default)({}, state, { - actions: [] - }); - } - case _actions.types.SET_STORIES: { var newState = (0, _extends3.default)({}, state, { @@ -63,24 +52,6 @@ exports.default = function () { return newState; } - case _actions.types.ADD_ACTION: - { - var previewAction = (0, _extends3.default)({}, action.action); - var actions = [].concat((0, _toConsumableArray3.default)(state.actions || [])); - - var lastAction = actions.length > 0 && actions[0]; - if (lastAction && (0, _deepEqual2.default)(lastAction.data, previewAction.data)) { - lastAction.count++; - } else { - previewAction.count = 1; - actions.unshift(previewAction); - } - - return (0, _extends3.default)({}, state, { - actions: actions - }); - } - case _actions.types.SET_OPTIONS: { var newOptions = (0, _extends3.default)({}, state.options, action.options); diff --git a/dist/modules/ui/components/action_logger/index.js b/dist/modules/ui/components/action_logger/index.js deleted file mode 100755 index 0c248d9ff126..000000000000 --- a/dist/modules/ui/components/action_logger/index.js +++ /dev/null @@ -1,190 +0,0 @@ -'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 _extends2 = require('babel-runtime/helpers/extends'); - -var _extends3 = _interopRequireDefault(_extends2); - -var _react = require('react'); - -var _react2 = _interopRequireDefault(_react); - -var _reactInspector = require('react-inspector'); - -var _reactInspector2 = _interopRequireDefault(_reactInspector); - -var _theme = require('../theme'); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -var preStyle = { - color: '#666', - overflowY: 'auto', - padding: '8px 2px', - boxSizing: 'border-box', - border: '1px solid #ECECEC', - borderRadius: 4, - backgroundColor: '#FFF', - margin: 0, - position: 'absolute', - top: '30px', - right: 0, - bottom: 0, - left: 0 -}; - -var wrapStyle = { - position: 'relative', - height: '100%' -}; - -var headStyle = (0, _extends3.default)({}, _theme.baseFonts, { - letterSpacing: '2px', - fontSize: 12, - margin: '10px 0 0 5px' -}); - -var btnStyle = { - marginLeft: 5 -}; - -var countStyle = { - display: 'inline-block', - backgroundColor: '#777777', - color: '#ffffff', - padding: '1px 5px', - borderRadius: '8px' -}; - -var logDivStyle = { - marginLeft: 5, - padding: 3, - paddingLeft: 0, - overflow: 'auto', - borderBottom: '1px solid #fafafa', - backgroundColor: 'white' -}; - -var inspectorStyle = { - marginLeft: 5, - float: 'none', - display: 'inline-block', - width: 'calc(100% - 140px)', - whiteSpace: 'initial' -}; - -var countWrapper = { - minWidth: 20, - display: 'inline-block', - float: 'left', - height: 19, - marginRight: 5 -}; - -var ActionLogger = function (_Component) { - (0, _inherits3.default)(ActionLogger, _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: 'componentDidUpdate', - value: function componentDidUpdate() { - var _this2 = this; - - if (this.refs.latest) { - this.refs.latest.style.backgroundColor = '#FFFCE0'; - setTimeout(function () { - _this2.refs.latest.style.backgroundColor = logDivStyle.backgroundColor; - }, 500); - } - } - }, { - key: 'getActionData', - value: function getActionData() { - return this.props.actions.map(function (action, i) { - var ref = i ? '' : 'latest'; - return _react2.default.createElement( - 'div', - { style: logDivStyle, key: action.id, ref: ref }, - _react2.default.createElement( - 'div', - { style: countWrapper }, - action.count > 1 && _react2.default.createElement( - 'span', - { style: countStyle }, - action.count - ) - ), - _react2.default.createElement( - 'div', - { style: inspectorStyle }, - _react2.default.createElement(_reactInspector2.default, { - showNonenumerable: true, - name: action.data.name, - data: action.data.args || action.data - }) - ) - ); - }); - } - }, { - key: 'render', - value: function render() { - var onClear = this.props.onClear; - - return _react2.default.createElement( - 'div', - { style: wrapStyle }, - _react2.default.createElement( - 'h3', - { style: headStyle }, - 'ACTION LOGGER', - _react2.default.createElement( - 'button', - { style: btnStyle, onClick: onClear }, - 'CLEAR' - ) - ), - _react2.default.createElement( - 'pre', - { style: preStyle }, - this.getActionData() - ) - ); - } - }]); - return ActionLogger; -}(_react.Component); - -ActionLogger.propTypes = { - onClear: _react2.default.PropTypes.func, - actions: _react2.default.PropTypes.array -}; - -exports.default = ActionLogger; \ No newline at end of file diff --git a/dist/modules/ui/components/down_panel/index.js b/dist/modules/ui/components/down_panel/index.js new file mode 100644 index 000000000000..9e00f80281ff --- /dev/null +++ b/dist/modules/ui/components/down_panel/index.js @@ -0,0 +1,143 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _assign = require('babel-runtime/core-js/object/assign'); + +var _assign2 = _interopRequireDefault(_assign); + +var _keys = require('babel-runtime/core-js/object/keys'); + +var _keys2 = _interopRequireDefault(_keys); + +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); + +var _style = require('./style'); + +var _style2 = _interopRequireDefault(_style); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var DownPanel = function (_Component) { + (0, _inherits3.default)(DownPanel, _Component); + + function DownPanel(props) { + var _Object$getPrototypeO; + + (0, _classCallCheck3.default)(this, DownPanel); + + for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) { + args[_key - 1] = arguments[_key]; + } + + var _this = (0, _possibleConstructorReturn3.default)(this, (_Object$getPrototypeO = (0, _getPrototypeOf2.default)(DownPanel)).call.apply(_Object$getPrototypeO, [this, props].concat(args))); + + _this.state = { current: (0, _keys2.default)(props.addons)[0] }; + return _this; + } + + (0, _createClass3.default)(DownPanel, [{ + key: 'showAddon', + value: function showAddon(name) { + this.setState({ current: name }); + } + }, { + key: 'renderTab', + value: function renderTab(name, addon) { + var _this2 = this; + + var tabStyle = _style2.default.tablink; + if (this.state.current === name) { + tabStyle = (0, _assign2.default)({}, _style2.default.tablink, _style2.default.tablink.active); + } + + return _react2.default.createElement( + 'a', + { + href: '#', + key: name, + style: tabStyle, + onClick: function onClick() { + return _this2.showAddon(name); + } }, + addon.title + ); + } + }, { + key: 'renderTabs', + value: function renderTabs() { + var _this3 = this; + + return (0, _keys2.default)(this.props.addons).map(function (name) { + var addon = _this3.props.addons[name]; + return _this3.renderTab(name, addon); + }); + } + }, { + key: 'renderAddon', + value: function renderAddon() { + if (!this.state.current) { + return null; + } + var addon = this.props.addons[this.state.current]; + return addon.render(); + } + }, { + key: 'renderEmpty', + value: function renderEmpty() { + return _react2.default.createElement( + 'div', + { style: _style2.default.empty }, + 'no addons available' + ); + } + }, { + key: 'render', + value: function render() { + if (!this.props.addons || !(0, _keys2.default)(this.props.addons).length) { + return this.renderEmpty(); + } + return _react2.default.createElement( + 'div', + { style: _style2.default.wrapper }, + _react2.default.createElement( + 'div', + { style: _style2.default.tabbar }, + this.renderTabs() + ), + _react2.default.createElement( + 'div', + { style: _style2.default.content }, + this.renderAddon() + ) + ); + } + }]); + return DownPanel; +}(_react.Component); + +exports.default = DownPanel; \ No newline at end of file diff --git a/dist/modules/ui/components/down_panel/style.js b/dist/modules/ui/components/down_panel/style.js new file mode 100644 index 000000000000..20ef9f9e2f19 --- /dev/null +++ b/dist/modules/ui/components/down_panel/style.js @@ -0,0 +1,62 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _extends2 = require('babel-runtime/helpers/extends'); + +var _extends3 = _interopRequireDefault(_extends2); + +var _theme = require('../theme'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = { + empty: (0, _extends3.default)({ + flex: 1, + display: 'flex' + }, _theme.baseFonts, { + fontSize: 11, + letterSpacing: '1px', + textTransform: 'uppercase', + alignItems: 'center', + justifyContent: 'center' + }), + + wrapper: { + flex: 1, + display: 'flex', + flexDirection: 'column', + background: 'white', + borderRadius: 4, + border: 'solid 1px rgb(236, 236, 236)', + marginTop: 5 + }, + + tabbar: { + display: 'flex', + flexWrap: 'wrap', + borderBottom: 'solid 1px #eaeaea' + }, + + content: { + flex: 1, + display: 'flex', + overflow: 'auto' + }, + + tablink: (0, _extends3.default)({}, _theme.baseFonts, { + fontSize: 11, + letterSpacing: '1px', + padding: '10px 15px', + textDecoration: 'none', + textTransform: 'uppercase', + transition: 'opacity 0.3s', + opacity: 0.5, + + active: { + opacity: 1 + } + }) +}; \ No newline at end of file diff --git a/dist/modules/ui/components/layout/index.js b/dist/modules/ui/components/layout/index.js index a1a4668efb6f..92b19d9b2c86 100755 --- a/dist/modules/ui/components/layout/index.js +++ b/dist/modules/ui/components/layout/index.js @@ -62,6 +62,7 @@ var leftPanelStyle = { }; var downPanelStyle = { + display: 'flex', position: 'absolute', width: '100%', height: '100%', diff --git a/dist/modules/ui/containers/action_logger.js b/dist/modules/ui/containers/action_logger.js deleted file mode 100755 index c56521b3ef57..000000000000 --- a/dist/modules/ui/containers/action_logger.js +++ /dev/null @@ -1,33 +0,0 @@ -'use strict'; - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.composer = composer; - -var _action_logger = require('../components/action_logger'); - -var _action_logger2 = _interopRequireDefault(_action_logger); - -var _mantraCore = require('mantra-core'); - -var _redux_composer = require('../libs/redux_composer'); - -var _redux_composer2 = _interopRequireDefault(_redux_composer); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function composer(_ref, _ref2) { - var api = _ref.api; - var actions = _ref2.actions; - - var actionMap = actions(); - var data = { - onClear: actionMap.api.clearActions, - actions: api.actions - }; - - return data; -} - -exports.default = (0, _mantraCore.composeAll)((0, _redux_composer2.default)(composer), (0, _mantraCore.useDeps)())(_action_logger2.default); \ No newline at end of file diff --git a/dist/modules/ui/containers/down_panel.js b/dist/modules/ui/containers/down_panel.js new file mode 100644 index 000000000000..08cd533a2c85 --- /dev/null +++ b/dist/modules/ui/containers/down_panel.js @@ -0,0 +1,34 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _objectDestructuringEmpty2 = require('babel-runtime/helpers/objectDestructuringEmpty'); + +var _objectDestructuringEmpty3 = _interopRequireDefault(_objectDestructuringEmpty2); + +exports.composer = composer; + +var _down_panel = require('../components/down_panel'); + +var _down_panel2 = _interopRequireDefault(_down_panel); + +var _mantraCore = require('mantra-core'); + +var _redux_composer = require('../libs/redux_composer'); + +var _redux_composer2 = _interopRequireDefault(_redux_composer); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function composer(_ref, _ref2) { + var context = _ref2.context; + (0, _objectDestructuringEmpty3.default)(_ref); + + return { + addons: context().provider.getAddons() + }; +} + +exports.default = (0, _mantraCore.composeAll)((0, _redux_composer2.default)(composer), (0, _mantraCore.useDeps)())(_down_panel2.default); \ No newline at end of file diff --git a/dist/modules/ui/routes.js b/dist/modules/ui/routes.js index 06181fffecad..0731243cc3bc 100755 --- a/dist/modules/ui/routes.js +++ b/dist/modules/ui/routes.js @@ -34,7 +34,7 @@ exports.default = function (injectDeps, _ref) { return _react2.default.createElement(Preview, null); }, downPanel: function downPanel() { - return _react2.default.createElement(_action_logger2.default, null); + return _react2.default.createElement(_down_panel2.default, null); } }), _react2.default.createElement(InjectedShortcutsHelp, null), @@ -59,9 +59,9 @@ var _left_panel = require('./containers/left_panel'); var _left_panel2 = _interopRequireDefault(_left_panel); -var _action_logger = require('./containers/action_logger'); +var _down_panel = require('./containers/down_panel'); -var _action_logger2 = _interopRequireDefault(_action_logger); +var _down_panel2 = _interopRequireDefault(_down_panel); var _shortcuts_help = require('./containers/shortcuts_help'); diff --git a/example/client/addons.js b/example/client/addons.js new file mode 100644 index 000000000000..55cc8d17e7a6 --- /dev/null +++ b/example/client/addons.js @@ -0,0 +1,27 @@ +import React from 'react'; + +const addonStyle = { + flex: 1, + display: 'flex', + alignItems: 'center', + justifyContent: 'center', +}; + +export default { + test1: { + title: 'Test 1', + render() { return
I
}, + }, + test2: { + title: 'Test 2', + render() { return
II
}, + }, + test3: { + title: 'Test 3', + render() { return
III
}, + }, + test4: { + title: 'Test 4', + render() { return
IV
}, + }, +} diff --git a/example/client/preview.js b/example/client/preview.js index f7c3cf2937be..637cb16a2a97 100644 --- a/example/client/preview.js +++ b/example/client/preview.js @@ -35,12 +35,6 @@ export default class Preview extends React.Component { this.mounted = false; } - fireAction() { - const { kind, story } = this.state; - const message = `This is an action from ${kind}:${story}`; - this.globalState.emit('action', message); - } - jump() { const { kind, story } = this.state; this.globalState.emit('jump', 'Component 2', 'State b'); @@ -57,9 +51,6 @@ export default class Preview extends React.Component {

Rendering the Preview

{kind} => {story}