storybookjs · fuller · Apr 15, 2017 · Apr 15, 2017 · Apr 16, 2017 · Apr 17, 2017
diff --git a/.jestrc b/.jestrc
@@ -5,6 +5,7 @@
     "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
     "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.js"
   },
+  "testPathIgnorePatterns": ["/node_modules/", "/dist/"],
   "roots": ["packages"],
   "collectCoverage": false,
   "collectCoverageFrom": [

diff --git a/package.json b/package.json
@@ -19,7 +19,6 @@
     "react-dom": "^15.5.4"
   },
   "scripts": {
-    "postinstall": "lerna bootstrap --hoist",
     "lint": "eslint .",
     "test": "jest --config ./.jestrc",
     "test:watch": "npm test -- --watch",

diff --git a/packages/storybook-ui/.scripts/mocha_runner.js b/packages/storybook-ui/.scripts/mocha_runner.js
@@ -0,0 +1,33 @@
+// IMPORTANT
+// ---------
+// This is an auto generated file with React CDK.
+// Do not modify this file.
+// Use `.scripts/user/pretest.js instead`.
+
+require('babel-core/register');
+require('babel-polyfill');
+
+// Add jsdom support, which is required for enzyme.
+var jsdom = require('jsdom').jsdom;
+// Adds window.matchMedia support 
+var matchMedia = require('matchmedia');
+
+var exposedProperties = ['window', 'navigator', 'document'];
+
+global.document = jsdom('');
+global.window = document.defaultView;
+Object.keys(document.defaultView).forEach((property) => {
+  if (typeof global[property] === 'undefined') {
+    exposedProperties.push(property);
+    global[property] = document.defaultView[property];
+  }
+});
+global.window.matchMedia = matchMedia;
+global.navigator = {
+  userAgent: 'node.js'
+};
+
+process.on('unhandledRejection', function (error) {
+  console.error('Unhandled Promise Rejection:');
+  console.error(error && error.stack || error);
+});
diff --git a/packages/storybook-ui/example/index.html b/packages/storybook-ui/example/index.html
@@ -1,6 +1,7 @@
 <!doctype html>
 <html>
   <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Storybook UI Demo</title>
     <style>
       body {

diff --git a/packages/storybook-ui/package.json b/packages/storybook-ui/package.json
@@ -10,18 +10,20 @@
   "scripts": {
     "prepublish": ". ./.scripts/prepublish.sh",
     "storybook": "start-storybook -p 9010",
-    "publish-storybook": "bash ./.scripts/publish_storybook.sh"
+    "publish-storybook": "bash ./.scripts/publish_storybook.sh",
+    "test": "jest"
   },
   "devDependencies": {
     "@kadira/storybook": "*",
     "babel-cli": "^6.24.1",
     "babel-core": "^6.24.1",
     "babel-eslint": "^7.2.2",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-polyfill": "^6.23.0",
+    "babel-polyfill": "^6.23.0", 
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
+    "matchmedia": "^0.1.2",
     "react": "^15.5.4",
     "react-dom": "^15.5.4"
   },
@@ -37,6 +39,7 @@
     "fuzzysearch": "^1.0.3",
     "json-stringify-safe": "^5.0.1",
     "keycode": "^2.1.8",
+    "lodash.isstring": "^4.0.1",
     "lodash.pick": "^4.4.0",
     "lodash.sortby": "^4.7.0",
     "mantra-core": "^1.7.0",
@@ -46,6 +49,7 @@
     "react-fuzzy": "^0.3.3",
     "react-inspector": "^1.1.2",
     "react-komposer": "^2.0.0",
+    "react-media": "^1.5.1",
     "react-modal": "^1.7.6",
     "redux": "^3.6.0"
   },

diff --git a/packages/storybook-ui/src/modules/ui/components/collapsible.js b/packages/storybook-ui/src/modules/ui/components/collapsible.js
@@ -0,0 +1,109 @@
+import React, { PropTypes } from 'react';
+import { baseFonts } from './theme';
+
+const wrapperStyles = {
+  display: 'block',
+  paddingTop: '10px',
+  marginBottom: '15px',
+  listStyle: 'none',
+  fontSize: '18px',
+  fontWeight: 'bold',
+  ...baseFonts,
+};
+
+const iconStyles = {
+  float: 'right',
+  fontWeight: 'normal',
+  fontSize: '150%',
+  lineHeight: '0.65',
+};
+
+class Collapsible extends React.Component {
+  constructor(props) {
+    super(props);
+    // Collapsible will be closed by default but
+    // allows props to be passed in to override initialState
+    this.state = { isActive: props.isActive || false };
+    this.handleClick = this.handleClick.bind(this);
+    this.focusToContent = this.focusToContent.bind(this);
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Allow controlled toggling of active state
+    if (nextProps.active !== this.props.active) {
+      this.setState({
+        isActive: nextProps.active,
+      });
+    }
+  }
+
+  focusToContent() {
+    const content = this.collapsibleBody;
+    if (content) {
+      content.focus();
+    }
+  }
+
+  handleClick(e) {
+    e.preventDefault();
+    this.setState({
+      isActive: !this.state.isActive,
+    }, this.focusToContent);
+    // We will execute any additional onClick handlers that are passed
+    // to the component
+    const { onClick } = this.props;
+    if (onClick) {
+      onClick();
+    }
+  }
+
+  render() {
+    const {
+      tagName = 'div',
+      children,
+      title,
+      id = encodeURI(title),
+    } = this.props;
+    const { isActive } = this.state;
+    const headingStyles = {
+      ...wrapperStyles,
+      textDecoration: isActive ? 'underline' : 'none',
+    };
+    const Element = tagName;
+
+    return (
+      <Element>
+        <a
+          href={`#${id}`}
+          onClick={this.handleClick}
+          aria-label={isActive ? `${title} - hides content` : `${title} - shows more content`}
+          style={headingStyles}
+        >
+          {title}
+          <span style={iconStyles}>
+            {isActive ? '-' : '+'}
+          </span>
+        </a>
+        {isActive &&
+          <div
+            id={id}
+            ref={c => this.collapsibleBody = c} // eslint-disable-line no-return-assign
+            tabIndex="-1"
+          >
+            {children}
+          </div>}
+      </Element>
+    );
+  }
+}
+
+Collapsible.propTypes = {
+  tagName: PropTypes.string,
+  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
+  id: PropTypes.string,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+};
+
+export default Collapsible;
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/commonLayoutStyles.js b/packages/storybook-ui/src/modules/ui/components/layout/commonLayoutStyles.js
@@ -0,0 +1,19 @@
+export const rootStyle = {
+  height: '100%',
+  backgroundColor: '#F7F7F7',
+};
+
+export const fullScreenPreviewStyle = {
+  position: 'fixed',
+  left: '0px',
+  right: '0px',
+  top: '0px',
+  zIndex: 1,
+  backgroundColor: '#FFF',
+  height: '100%',
+  width: '100%',
+  border: 0,
+  margin: 0,
+  padding: 0,
+  overflow: 'hidden',
+};
diff --git a/packages/storybook-ui/src/modules/ui/components/layout/desktop.js b/packages/storybook-ui/src/modules/ui/components/layout/desktop.js
@@ -0,0 +1,122 @@
+import React, { Component, PropTypes } from 'react';
+
+import VSplit from './vsplit';
+import HSplit from './hsplit';
+import SplitPane from '@kadira/react-split-pane';
+
+import { rootStyle, fullScreenPreviewStyle } from './commonLayoutStyles';
+
+const leftPanelStyle = {
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+};
+
+const downPanelStyle = {
+  display: 'flex',
+  position: 'absolute',
+  width: '100%',
+  height: '100%',
+  padding: '5px 10px 10px 0',
+  boxSizing: 'border-box',
+};
+
+const contentPanelStyle = {
+  position: 'absolute',
+  boxSizing: 'border-box',
+  width: '100%',
+  height: '100%',
+  padding: '10px 10px 10px 0',
+};
+
+const normalPreviewStyle = {
+  width: '100%',
+  height: '100%',
+  backgroundColor: '#FFF',
+  border: '1px solid #ECECEC',
+  borderRadius: 4,
+};
+
+const vsplit = <VSplit />;
+const hsplit = <HSplit />;
+
+const onDragStart = function () {
+  document.body.classList.add('dragging');
+};
+
+const onDragEnd = function () {
+  document.body.classList.remove('dragging');
+};
+
+class Layout extends Component {
+  render() {
+    const {
+      goFullScreen,
+      showLeftPanel,
+      showDownPanel,
+      downPanelInRight,
+      downPanel,
+      leftPanel,
+      preview,
+    } = this.props;
+    let previewStyle = normalPreviewStyle;
+
+    if (goFullScreen) {
+      previewStyle = fullScreenPreviewStyle;
+    }
+
+    const leftPanelDefaultSize = showLeftPanel ? 250 : 1;
+    let downPanelDefaultSize = 1;
+    if (showDownPanel) {
+      downPanelDefaultSize = downPanelInRight ? 400 : 200;
+    }
+
+    return (
+      <div style={rootStyle}>
+        <SplitPane
+          split="vertical"
+          minSize={leftPanelDefaultSize}
+          defaultSize={leftPanelDefaultSize}
+          resizerChildren={vsplit}
+          onDragStarted={onDragStart}
+          onDragFinished={onDragEnd}
+        >
+          <div style={leftPanelStyle}>
+            {showLeftPanel ? leftPanel() : null}
+          </div>
+
+          <SplitPane
+            split={downPanelInRight ? 'vertical' : 'horizontal'}
+            primary="second"
+            minSize={downPanelInRight ? 200 : 100}
+            defaultSize={downPanelDefaultSize}
+            resizerChildren={downPanelInRight ? vsplit : hsplit}
+            onDragStarted={onDragStart}
+            onDragFinished={onDragEnd}
+          >
+            <div style={contentPanelStyle}>
+              <div style={previewStyle}>
+                {preview()}
+              </div>
+            </div>
+            <div style={downPanelStyle}>
+              {showDownPanel ? downPanel() : null}
+            </div>
+          </SplitPane>
+        </SplitPane>
+      </div>
+    );
+  }
+}
+
+Layout.propTypes = {
+  showLeftPanel: PropTypes.bool.isRequired,
+  showDownPanel: PropTypes.bool.isRequired,
+  goFullScreen: PropTypes.bool.isRequired,
+  leftPanel: PropTypes.func.isRequired,
+  preview: PropTypes.func.isRequired,
+  downPanel: PropTypes.func.isRequired,
+  downPanelInRight: PropTypes.bool.isRequired,
+};
+
+export default Layout;