Render the first story for a kind if no story selected.

For storybookjs/storybook#674

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);
   }
 

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/configs/__tests__/handle_routing.js

@@ -59,19 +59,21 @@ describe('manager.ui.config.handle_routing', () => {
   });
 
   describe('handleInitialUrl', () => {
+    const mockActions = () => ({
+      api: {
+        selectStory: sinon.mock(),
+        setQueryParams: sinon.mock(),
+      },
+      shortcuts: {
+        setOptions: sinon.mock(),
+      },
+      ui: {
+        selectDownPanel: sinon.mock(),
+      },
+    });
+
     it('should call the correct action according to URL', () => {
-      const actions = {
-        api: {
-          selectStory: sinon.mock(),
-          setQueryParams: sinon.mock(),
-        },
-        shortcuts: {
-          setOptions: sinon.mock(),
-        },
-        ui: {
-          selectDownPanel: sinon.mock(),
-        },
-      };
+      const actions = mockActions();
 
       // eslint-disable-next-line max-len
       const url = '?selectedKind=kk&selectedStory=ss&full=1&down=0&left=0&panelRight=0&downPanel=test&customText=teststring';
@@ -96,5 +98,19 @@ describe('manager.ui.config.handle_routing', () => {
       expect(actions.api.setQueryParams.calledWith({ customText: 'teststring' })).to.be.true;
       /* eslint-enable no-unused-expressions */
     });
+
+    it('should handle URLs with only kind selected', () => {
+      const actions = mockActions();
+
+      const url = '?selectedKind=kk';
+
+      const location = {
+        search: url,
+      };
+      window.location.search = url;
+      handleInitialUrl(actions, location);
+
+      expect(actions.api.selectStory.callCount).to.be.equal(1);
+    });
   });
 });

src/modules/ui/configs/handle_routing.js

@@ -60,7 +60,7 @@ export function updateStore(queryParams, actions) {
     ...customQueryParams
   } = queryParams;
 
-  if (selectedKind && selectedStory) {
+  if (selectedKind) {
     actions.api.selectStory(selectedKind, selectedStory);
   }