Allow linking to only a kind and picking the first story

dist/modules/api/actions/api.js

@@ -77,6 +77,7 @@ function ensureStory(storyKinds, selectedKind, selectedStory) {
   });
   if (found) return found;
 
+  // if the selected story is non-existant, select the first story
   return kindInfo.stories[0];
 }
 

dist/modules/ui/components/layout/dimensions.js

@@ -0,0 +1,145 @@
+'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 _theme = require('../theme');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var container = {
+  position: 'absolute',
+  padding: 5,
+  bottom: 10,
+  right: 10,
+  backgroundColor: 'rgba(255, 255, 255, 0.5)'
+};
+
+var dimensionStyle = (0, _extends3.default)({
+  fontSize: 12
+}, _theme.baseFonts);
+
+var delimeterStyle = (0, _extends3.default)({
+  margin: '0px 5px',
+  fontSize: 12
+}, _theme.baseFonts);
+
+// Same as Chrome's timeout in the developer tools
+var DISPLAY_TIMEOUT = 1000;
+
+var Dimensions = function (_React$Component) {
+  (0, _inherits3.default)(Dimensions, _React$Component);
+
+  function Dimensions(props) {
+    (0, _classCallCheck3.default)(this, Dimensions);
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (Dimensions.__proto__ || (0, _getPrototypeOf2.default)(Dimensions)).call(this, props));
+
+    _this.state = {
+      isVisible: false
+    };
+
+    _this._hideTimeout = null;
+    return _this;
+  }
+
+  (0, _createClass3.default)(Dimensions, [{
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(_ref) {
+      var width = _ref.width,
+          height = _ref.height;
+
+      if (width !== this.state.width || height !== this.state.height) {
+        this.onChange(width, height);
+      }
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      clearTimeout(this._hideTimeout);
+    }
+  }, {
+    key: 'onChange',
+    value: function onChange(width, height) {
+      var _this2 = this;
+
+      this.setState({ isVisible: true });
+
+      this._hideTimeout = setTimeout(function () {
+        // Ensure the dimensions aren't still changing
+        if (width === _this2.props.width && height === _this2.props.height) {
+          _this2.setState({ isVisible: false });
+        }
+      }, DISPLAY_TIMEOUT);
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      if (!this.state.isVisible) {
+        return null;
+      }
+
+      var _props = this.props,
+          width = _props.width,
+          height = _props.height;
+
+
+      return _react2.default.createElement(
+        'div',
+        { style: container },
+        _react2.default.createElement(
+          'span',
+          { style: dimensionStyle },
+          width + 'px'
+        ),
+        _react2.default.createElement(
+          'span',
+          { style: delimeterStyle },
+          'x'
+        ),
+        _react2.default.createElement(
+          'span',
+          { style: dimensionStyle },
+          height + 'px'
+        )
+      );
+    }
+  }]);
+  return Dimensions;
+}(_react2.default.Component);
+
+Dimensions.propTypes = {
+  width: _react2.default.PropTypes.number.isRequired,
+  height: _react2.default.PropTypes.number.isRequired
+};
+
+exports.default = Dimensions;

dist/modules/ui/components/layout/index.js

@@ -36,6 +36,10 @@ var _hsplit = require('./hsplit');
 
 var _hsplit2 = _interopRequireDefault(_hsplit);
 
+var _dimensions = require('./dimensions');
+
+var _dimensions2 = _interopRequireDefault(_dimensions);
+
 var _reactSplitPane = require('@kadira/react-split-pane');
 
 var _reactSplitPane2 = _interopRequireDefault(_reactSplitPane);
@@ -104,17 +108,72 @@ var onDragEnd = function onDragEnd() {
   document.body.classList.remove('dragging');
 };
 
+var saveHeightPanel = function saveHeightPanel(h) {
+  try {
+    localStorage.setItem('splitPos', h);
+    return true;
+  } catch (e) {
+    return false;
+  }
+};
+
+var getSavedHeight = function getSavedHeight(h) {
+  try {
+    return localStorage.getItem('splitPos');
+  } catch (e) {
+    return h;
+  }
+};
+
 var Layout = function (_React$Component) {
   (0, _inherits3.default)(Layout, _React$Component);
 
-  function Layout() {
+  function Layout(props) {
     (0, _classCallCheck3.default)(this, Layout);
-    return (0, _possibleConstructorReturn3.default)(this, (Layout.__proto__ || (0, _getPrototypeOf2.default)(Layout)).apply(this, arguments));
+
+    var _this = (0, _possibleConstructorReturn3.default)(this, (Layout.__proto__ || (0, _getPrototypeOf2.default)(Layout)).call(this, props));
+
+    _this.state = {
+      previewPanelDimensions: {
+        height: 0,
+        width: 0
+      }
+    };
+
+    _this.onResize = _this.onResize.bind(_this);
+    return _this;
   }
 
   (0, _createClass3.default)(Layout, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      window.addEventListener('resize', this.onResize);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      window.removeEventListener('resize', this.onResize);
+    }
+  }, {
+    key: 'onResize',
+    value: function onResize() {
+      var _previewPanelRef = this.previewPanelRef,
+          clientWidth = _previewPanelRef.clientWidth,
+          clientHeight = _previewPanelRef.clientHeight;
+
+
+      this.setState({
+        previewPanelDimensions: {
+          width: clientWidth,
+          height: clientHeight
+        }
+      });
+    }
+  }, {
     key: 'render',
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
           goFullScreen = _props.goFullScreen,
           showLeftPanel = _props.showLeftPanel,
@@ -123,6 +182,7 @@ var Layout = function (_React$Component) {
           downPanel = _props.downPanel,
           leftPanel = _props.leftPanel,
           preview = _props.preview;
+      var previewPanelDimensions = this.state.previewPanelDimensions;
 
 
       var previewStyle = normalPreviewStyle;
@@ -137,12 +197,8 @@ var Layout = function (_React$Component) {
         downPanelDefaultSize = downPanelInRight ? 400 : 200;
       }
 
-      if (typeof localStorage !== 'undefined') {
-        var savedSize = localStorage.getItem('splitPos');
-        if (typeof savedSize !== 'undefined') {
-          downPanelDefaultSize = savedSize;
-        }
-      }
+      // Get the value from localStorage or user downPanelDefaultSize
+      downPanelDefaultSize = getSavedHeight(downPanelDefaultSize);
 
       return _react2.default.createElement(
         'div',
@@ -155,7 +211,8 @@ var Layout = function (_React$Component) {
             defaultSize: leftPanelDefaultSize,
             resizerChildren: vsplit,
             onDragStarted: onDragStart,
-            onDragFinished: onDragEnd
+            onDragFinished: onDragEnd,
+            onChange: this.onResize
           },
           _react2.default.createElement(
             'div',
@@ -173,19 +230,24 @@ var Layout = function (_React$Component) {
               onDragStarted: onDragStart,
               onDragFinished: onDragEnd,
               onChange: function onChange(size) {
-                if (typeof localStorage !== 'undefined') {
-                  localStorage.setItem('splitPos', size);
-                }
+                saveHeightPanel(size);
+                _this2.onResize();
               }
             },
             _react2.default.createElement(
               'div',
               { style: contentPanelStyle },
               _react2.default.createElement(
                 'div',
-                { style: previewStyle },
+                {
+                  style: previewStyle,
+                  ref: function ref(_ref) {
+                    _this2.previewPanelRef = _ref;
+                  }
+                },
                 preview()
-              )
+              ),
+              _react2.default.createElement(_dimensions2.default, previewPanelDimensions)
             ),
             _react2.default.createElement(
               'div',

dist/modules/ui/configs/handle_routing.js

@@ -103,7 +103,7 @@ function updateStore(queryParams, actions) {
       customQueryParams = (0, _objectWithoutProperties3.default)(queryParams, ['selectedKind', 'selectedStory', 'full', 'down', 'left', 'panelRight', 'downPanel']);
 
 
-  if (selectedKind && selectedStory) {
+  if (selectedKind) {
     actions.api.selectStory(selectedKind, selectedStory);
   }
 

package.json

@@ -29,7 +29,7 @@
     "babel-preset-stage-0": "^6.5.0",
     "chai": "^3.5.0",
     "enzyme": "^2.2.0",
-    "eslint": "^2.7.0",
+    "eslint": "^3.19.0",
     "eslint-config-airbnb": "^7.0.0",
     "eslint-plugin-babel": "^3.2.0",
     "eslint-plugin-jsx-a11y": "^0.6.2",

src/modules/api/actions/api.js

@@ -43,6 +43,7 @@ export function ensureStory(storyKinds, selectedKind, selectedStory) {
   const found = kindInfo.stories.find(item => item === selectedStory);
   if (found) return found;
 
+  // if the selected story is non-existant, select the first story
   return kindInfo.stories[0];
 }
 

src/modules/ui/components/shortcuts_help.js

@@ -67,14 +67,14 @@ export const Keys = ({ shortcutKeys }) => {
   }
 
   // if we have multiple key combinations for a shortcut
-  let keys = shortcutKeys.map((key, index, arr) => {
+  const keys = shortcutKeys.map((key, index, arr) => {
     return (
-        <span key={index}>
-          <b style={commandStyle}>{key}</b>
-          {/* add / & space if it is not a last key combination */}
-          {((arr.length - 1) !== index) ? <span>/ &nbsp;</span> : ''}
-        </span>
-      );
+      <span key={index}>
+        <b style={commandStyle}>{key}</b>
+        {/* add / & space if it is not a last key combination */}
+        {((arr.length - 1) !== index) ? <span>/ &nbsp;</span> : ''}
+      </span>
+    );
   });
 
   return (
@@ -87,7 +87,7 @@ Keys.propTypes = {
 };
 
 export const Shortcuts = ({ appShortcuts }) => {
-  let shortcuts = appShortcuts.map((shortcut, index) => {
+  const shortcuts = appShortcuts.map((shortcut, index) => {
     return (
       <div key = {index}>
         <Keys shortcutKeys = {shortcut.keys} />