Merge branch 'master' into info-docgen

.gitignore

@@ -17,3 +17,4 @@ docs/public
 packs/*.tgz
 package-lock.json
 .nvmrc
+storybook-static

CHANGELOG.md

@@ -1,3 +1,28 @@
+# 3.2.4
+
+2017-August-12
+
+#### Features
+
+-   Hierarchy expansion on search [#1598](https://github.com/storybooks/storybook/pull/1598)
+-   Add sidebarAnimations config prop [#1601](https://github.com/storybooks/storybook/pull/1601)
+-   Add hrefs to left menu links [#1523](https://github.com/storybooks/storybook/pull/1523)
+-   Enable many components of same type in addon-info prop tables [#1607](https://github.com/storybooks/storybook/pull/1607)
+-   Always collapse an expanded kind in tree view without changing selected story [#1590](https://github.com/storybooks/storybook/pull/1590)
+-   Option to select an addon panel [#1641](https://github.com/storybooks/storybook/pull/1641)
+
+#### Documentation
+
+-   Document how to use info addon as decorator [#1592](https://github.com/storybooks/storybook/pull/1592)
+-   Add Android simulator instructions for React Native [#1591](https://github.com/storybooks/storybook/pull/1591)
+
+#### Maintenance
+
+-   Tree view visual adjustments [#1599](https://github.com/storybooks/storybook/pull/1599)
+-   Add z-index to shortcuts popup overlay [#1617](https://github.com/storybooks/storybook/pull/1617)
+-   Use ReactModal for search box [#1548](https://github.com/storybooks/storybook/pull/1548)
+-   Limit react versions to >=15 [#1613](https://github.com/storybooks/storybook/pull/1613)
+
 # 3.2.3
 
 2017-August-01

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.2.0",
+  "version": "3.2.4",
   "description": "A Storybook addon to show additional information for your stories.",
   "license": "MIT",
   "main": "dist/index.js",

addons/info/src/components/Story.js

@@ -127,9 +127,7 @@ export default class Story extends React.Component {
     return (
       <div>
         {this._renderInlineHeader()}
-        <div style={this.state.stylesheet.infoStory}>
-          {this._renderStory()}
-        </div>
+        {this._renderStory()}
         <div style={this.state.stylesheet.infoPage}>
           <div style={this.state.stylesheet.infoBody}>
             {this._getInfoContent()}

addons/knobs/src/KnobManager.js

@@ -6,11 +6,14 @@ import KnobStore from './KnobStore';
 const PANEL_UPDATE_INTERVAL = 400;
 
 export default class KnobManager {
-  constructor(channel) {
-    this.channel = channel;
+  constructor() {
     this.knobStore = new KnobStore();
   }
 
+  setChannel(channel) {
+    this.channel = channel;
+  }
+
   knob(name, options) {
     this._mayCallChannel();
 

addons/knobs/src/index.js

@@ -4,8 +4,7 @@ import KnobManager from './KnobManager';
 import { vueHandler } from './vue';
 import { reactHandler } from './react';
 
-const channel = addons.getChannel();
-const manager = new KnobManager(channel);
+const manager = new KnobManager();
 
 export function knob(name, options) {
   return manager.knob(name, options);
@@ -63,6 +62,9 @@ export function date(name, value = new Date()) {
 // In 3.3, this will become `withKnobs`, once our decorator API supports it.
 //   See https://github.com/storybooks/storybook/pull/1527
 function wrapperKnobs(options) {
+  const channel = addons.getChannel();
+  manager.setChannel(channel);
+
   if (options) channel.emit('addon:knobs:setOptions', options);
 
   switch (window.STORYBOOK_ENV) {

addons/options/README.md

@@ -93,6 +93,12 @@ setOptions({
    * @type {Boolean}
    */
   sidebarAnimations: true,
+
+  /**
+   * id to select an addon panel
+   * @type {String}
+   */
+  selectedAddonPanel: undefined, // The order of addons in the "Addons Panel" is the same as you import them in 'addons.js'. The first panel will be opened by default as you run Storybook
 });
 
 storybook.configure(() => require('./stories'), module);

addons/options/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Options addon for storybook",
   "keywords": [
     "storybook"

addons/storyshots/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -22,7 +22,7 @@
   "devDependencies": {
     "@storybook/addons": "^3.2.0",
     "@storybook/channels": "^3.2.0",
-    "@storybook/react": "^3.2.3",
+    "@storybook/react": "^3.2.4",
     "babel-cli": "^6.24.1",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-es2015": "^6.24.1",
@@ -33,7 +33,7 @@
   "peerDependencies": {
     "@storybook/addons": "^3.2.0",
     "@storybook/channels": "^3.2.0",
-    "@storybook/react": "^3.2.3",
+    "@storybook/react": "^3.2.4",
     "babel-core": "^6.25.0",
     "react": "*",
     "react-test-renderer": "*"

app/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -28,7 +28,7 @@
     "@storybook/addon-links": "^3.2.0",
     "@storybook/addons": "^3.2.0",
     "@storybook/channel-websocket": "^3.2.0",
-    "@storybook/ui": "^3.2.3",
+    "@storybook/ui": "^3.2.4",
     "autoprefixer": "^7.1.1",
     "babel-core": "^6.25.0",
     "babel-loader": "^7.0.0",

app/react-native/src/bin/storybook-start.js

@@ -41,8 +41,17 @@ server.listen(...listenAddr, err => {
 });
 
 if (!program.skipPackager) {
-  const projectRoots = configDir === projectDir ? [configDir] : [configDir, projectDir];
+  let symlinks = []
+
+  try{
+    const findSymlinksPaths = require('react-native/local-cli/util/findSymlinksPaths'); // eslint-disable-line global-require
+    symlinks = findSymlinksPaths(path.join(projectDir, 'node_modules'), [projectDir]);
+  }catch(e){
+   console.warn(`Unable to load findSymlinksPaths: ${e.message}`); 
+  }
 
+  const projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(symlinks);
+
   let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
   if (program.haul) {
     cliCommand = `node node_modules/.bin/haul start --config ${program.haul} --platform all`;

app/react-native/src/preview/components/OnDeviceUI/index.js

@@ -12,6 +12,9 @@ import style from './style';
 import StoryListView from '../StoryListView';
 import StoryView from '../StoryView';
 
+const openMenuImage = require('./menu_open.png');
+const closeMenuImage = require('./menu_close.png');
+
 export default class OnDeviceUI extends Component {
   constructor(...args) {
     super(...args);
@@ -100,10 +103,18 @@ export default class OnDeviceUI extends Component {
       },
     ];
 
-    /* eslint-disable global-require */
-    const openMenuImage = require('./menu_open.png');
-    const closeMenuImage = require('./menu_close.png');
-    /* eslint-enable global-require */
+    /*
+      Checks if import is a base64 encoded string uri.
+      If using haul as bundler, some projects are set up to include small files as base64 strings.
+     */
+    let openIcon = openMenuImage;
+    if (typeof openIcon === 'string') {
+      openIcon = { uri: openMenuImage };
+    }
+    let closeIcon = closeMenuImage;
+    if (typeof closeIcon === 'string') {
+      closeIcon = { uri: closeMenuImage };
+    }
 
     return (
       <View style={style.main}>
@@ -113,7 +124,7 @@ export default class OnDeviceUI extends Component {
           <Animated.View style={headerStyles}>
             <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
               <View>
-                <Image source={openMenuImage} style={style.icon} />
+                <Image source={openIcon} style={style.icon} />
               </View>
             </TouchableWithoutFeedback>
             <Text style={style.headerText} numberOfLines={1}>
@@ -129,7 +140,7 @@ export default class OnDeviceUI extends Component {
         <Animated.View style={menuStyles} onLayout={this.menuLayoutHandler}>
           <TouchableWithoutFeedback onPress={this.menuToggledHandler}>
             <View style={style.closeButton}>
-              <Image source={closeMenuImage} style={style.icon} />
+              <Image source={closeIcon} style={style.icon} />
             </View>
           </TouchableWithoutFeedback>
           <StoryListView

app/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
   "bugs": {
@@ -26,7 +26,7 @@
     "@storybook/addon-links": "^3.2.0",
     "@storybook/addons": "^3.2.0",
     "@storybook/channel-postmessage": "^3.2.0",
-    "@storybook/ui": "^3.2.3",
+    "@storybook/ui": "^3.2.4",
     "airbnb-js-shims": "^1.1.1",
     "autoprefixer": "^7.1.1",
     "babel-core": "^6.25.0",
@@ -80,7 +80,7 @@
     "react-dom": "^15.6.1"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=15.0.0 || ^16.0.0-alpha",
+    "react-dom": ">=15.0.0 || ^16.0.0-alpha"
   }
 }

app/react/src/server/build.js

@@ -51,9 +51,10 @@ getEnvConfig(program, {
 const configDir = program.configDir || './.storybook';
 const outputDir = program.outputDir || './storybook-static';
 
-// create output directory (and the static dir) if not exists
-shelljs.rm('-rf', outputDir);
+// create output directory if not exists
 shelljs.mkdir('-p', path.resolve(outputDir));
+// clear the static dir
+shelljs.rm('-rf', path.resolve(outputDir, 'static'));
 shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 
 // Build the webpack configuration using the `baseConfig`

app/react/src/server/iframe.html.js

@@ -54,6 +54,7 @@ export default function({ assets, publicPath, headHtml }) {
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <base target="_parent">
         <script>
           if (window.parent !== window) {
             window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;

app/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
   "bugs": {
@@ -26,7 +26,7 @@
     "@storybook/addon-links": "^3.2.0",
     "@storybook/addons": "^3.2.0",
     "@storybook/channel-postmessage": "^3.2.0",
-    "@storybook/ui": "^3.2.3",
+    "@storybook/ui": "^3.2.4",
     "airbnb-js-shims": "^1.1.1",
     "autoprefixer": "^7.1.1",
     "babel-core": "^6.25.0",

app/vue/src/server/build.js

@@ -51,9 +51,10 @@ getEnvConfig(program, {
 const configDir = program.configDir || './.storybook';
 const outputDir = program.outputDir || './storybook-static';
 
-// create output directory (and the static dir) if not exists
-shelljs.rm('-rf', outputDir);
+// create output directory if not exists
 shelljs.mkdir('-p', path.resolve(outputDir));
+// clear the static dir
+shelljs.rm('-rf', path.resolve(outputDir, 'static'));
 shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 
 // Build the webpack configuration using the `baseConfig`

app/vue/src/server/iframe.html.js

@@ -54,6 +54,7 @@ export default function({ assets, publicPath, headHtml }) {
       <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1">
+        <base target="_parent">
         <script>
           if (window.parent !== window) {
             window.__VUE_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__VUE_DEVTOOLS_GLOBAL_HOOK__;

docs/pages/basics/faq/index.md

@@ -28,8 +28,8 @@ You can generally reuse webpack rules fairly easily by placing them in a file th
 ### Why is there no addons channel?
 
 A common error is that an addon tries to access the "channel", but the channel is not set. This can happen in a few different cases:
-1. In storybook/addon development, it can be an NPM version problem. If there are two versions of the addons NPM package, it will cause problems. In this case, make sure there is only a single version of `@storybook/addons` being used by your project.
-2. In React Native, it's a special case that's documented in [#1192](https://github.com/storybooks/storybook/issues/1192)
+1\. In storybook/addon development, it can be an NPM version problem. If there are two versions of the addons NPM package, it will cause problems. In this case, make sure there is only a single version of `@storybook/addons` being used by your project.
+2\. In React Native, it's a special case that's documented in [#1192](https://github.com/storybooks/storybook/issues/1192)
 
 ### Can I modify React component state in stories?
 

docs/pages/basics/quick-start-guide/index.md

@@ -3,10 +3,11 @@ id: 'quick-start-guide'
 title: 'Quick Start Guide'
 ---
 
-React Storybook is very easy to use. You can use it with any kind of React project.
+Storybook is very easy to use. You can use it with any kind of React or Vue project.
 Follow these steps to get started with Storybook.
 
 ```sh
+cd my-project-directory
 npm i -g @storybook/cli
 getstorybook
 ```

examples/cra-kitchen-sink/src/__snapshots__/storyshots.test.js.snap

@@ -260,6 +260,22 @@ exports[`Storyshots Button addons composition 1`] = `
                   >
                 </span>
               </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                />
+              </div>
               <div
                 style={
                   Object {
@@ -709,6 +725,22 @@ exports[`Storyshots Button with new info 1`] = `
                   &gt;
                 </span>
               </div>
+              <div
+                style={
+                  Object {
+                    "paddingLeft": 33,
+                    "paddingRight": 3,
+                  }
+                }
+              >
+                <span
+                  style={
+                    Object {
+                      "color": "#777",
+                    }
+                  }
+                />
+              </div>
               <div
                 style={
                   Object {