Merge branch 'master' into release/3.2

ROADMAP.md

@@ -10,16 +10,15 @@
     -   [See multiple (or all) stories in 1 preview.](#see-multiple-or-all-stories-in-1-preview)
     -   [Deeper level hierarchy](#deeper-level-hierarchy)
 -   [Supporting other frameworks and libraries](#supporting-other-frameworks-and-libraries)
-    -   [Vue](#vue)
-    -   [Angular](#angular)
+    -   [Vue](#vue) (*in alpha*)
+    -   [Angular](#angular) (*in development*)
     -   [Webcomponents](#webcomponents)
     -   [Polymer](#polymer)
     -   [Aurelia](#aurelia)
 -   [Breaking changes](#breaking-changes)
     -   [Addon API](#addon-api)
     -   [API for adding stories](#api-for-adding-stories)
 -   [Documentation](#documentation)
-    -   [Search & Structure](#search--structure)
     -   [Better design](#better-design)
     -   [Record videos and write blog post on how to tweak storybook](#record-videos-and-write-blog-post-on-how-to-tweak-storybook)
 
@@ -74,11 +73,11 @@ We want you to be able to use storybook with the framework / library of your cho
 
 ### Vue
 
-Interested in supporting. We know about [vue-play](https://github.com/vue-play/vue-play/), we're interested in learning and working together!
+Storybook for Vue is currently in alpha release, it won't be long now!
 
 ### Angular
 
-Interested in supporting ( not AngularJS ).
+Storybook for Angular is in development.
 
 ### Webcomponents
 
@@ -105,17 +104,14 @@ We want to support this, but will likely mean we will have to change the `add` m
 
 ## Documentation
 
-### Search & Structure
-
-Finding the right part of our documentation isn't easy, since there is no search.
-We want to integrate the readme of the individual packages into the documentation site and also have the changelog, contributing, migration and roadmap findable there.
-
 ### Better design
 
 We have a new logo, so next step is a overhaul of our documentation site.
 
-### Record videos and write blog post on how to tweak storybook
+### Record videos and write blog post on how to use, tweak & develop storybook
+
+- writing addons, 
+- choosing the right addons.
+- how to start developing on our codebase.
+- how to use storybook itself and the CLI.
 
-This may include writing addons, choosing the right addons etc.
-Also how to start developing on our codebase.
-Also how to use storybook itself and the CLI.

addons/info/src/components/Story.js

@@ -63,6 +63,7 @@ const stylesheet = {
   infoContent: {
     marginBottom: 0,
   },
+  infoStory: {},
   jsxInfoContent: {
     borderTop: '1px solid #eee',
     margin: '20px 0 0 0',
@@ -116,7 +117,7 @@ export default class Story extends React.Component {
 
   _renderStory() {
     return (
-      <div>
+      <div style={this.state.stylesheet.infoStory}>
         {this.props.children}
       </div>
     );
@@ -126,7 +127,7 @@ export default class Story extends React.Component {
     return (
       <div>
         {this._renderInlineHeader()}
-        <div>
+        <div style={this.state.stylesheet.infoStory}>
           {this._renderStory()}
         </div>
         <div style={this.state.stylesheet.infoPage}>

addons/knobs/src/components/Panel.js

@@ -99,11 +99,10 @@ export default class Panel extends React.Component {
 
         queryParams[`knob-${name}`] = Types[knob.type].serialize(knob.value);
       });
+      this.loadedFromUrl = true;
+      api.setQueryParams(queryParams);
+      this.setState({ knobs });
     }
-
-    this.loadedFromUrl = true;
-    api.setQueryParams(queryParams);
-    this.setState({ knobs });
   }
 
   reset() {

addons/storyshots/src/index.js

@@ -24,9 +24,11 @@ const hasDependency = name =>
 export default function testStorySnapshots(options = {}) {
   addons.setChannel(createChannel());
 
-  const isStorybook = options.framework === 'react' || hasDependency('@storybook/react');
+  const isStorybook =
+    options.framework === 'react' || (!options.framework && hasDependency('@storybook/react'));
   const isRNStorybook =
-    options.framework === 'react-native' || hasDependency('@storybook/react-native');
+    options.framework === 'react-native' ||
+    (!options.framework && hasDependency('@storybook/react-native'));
 
   if (isStorybook) {
     storybook = require.requireActual('@storybook/react');

app/react-native/package.json

@@ -74,6 +74,6 @@
   },
   "peerDependencies": {
     "react": "*",
-    "react-native": "0.27.0 - 0.43.x"
+    "react-native": ">=0.27.0"
   }
 }

app/react-native/src/server/index.html.js

@@ -36,6 +36,11 @@ export default function(publicPath, options) {
           .btn:hover{
             background-color: #eee
           }
+
+          /* Remove blue outline defined by the user argent*/
+          :focus {
+            outline: none !important;
+          }
         </style>
       </head>
       <body style="margin: 0;">

app/react/src/client/preview/client_api.js

@@ -8,6 +8,7 @@ export default class ClientApi {
     this._storyStore = storyStore;
     this._addons = {};
     this._globalDecorators = [];
+    this._storiesAdded = false;
   }
 
   setAddon(addon) {
@@ -18,6 +19,9 @@ export default class ClientApi {
   }
 
   addDecorator(decorator) {
+    if (this._storiesAdded) {
+      throw new Error('Global decorators added after loading stories will not be applied');
+    }
     this._globalDecorators.push(decorator);
   }
 
@@ -51,6 +55,8 @@ export default class ClientApi {
     });
 
     api.add = (storyName, getStory) => {
+      this._storiesAdded = true;
+
       if (typeof storyName !== 'string') {
         throw new Error(`Invalid or missing storyName provided for a "${kind}" story.`);
       }

app/react/src/client/preview/client_api.test.js

@@ -150,6 +150,16 @@ describe('preview.client_api', () => {
       expect(storyStore.stories[0].fn()).toBe('bb-Hello');
     });
 
+    it('should throw on adding global decorators after stories', () => {
+      const storyStore = new StoryStore();
+      const api = new ClientAPI({ storyStore });
+      const localApi = api.storiesOf('none');
+      localApi.add('storyName', () => 'Hello');
+      expect(() => {
+        api.addDecorator(fn => `bb-${fn()}`);
+      }).toThrow('Global decorators added after loading stories will not be applied');
+    });
+
     it('should utilize both decorators at once', () => {
       const storyStore = new StoryStore();
       const api = new ClientAPI({ storyStore });

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

@@ -67,6 +67,11 @@ export default function({ assets, publicPath, headHtml }) {
           .btn:hover{
             background-color: #eee
           }
+
+          /* Remove blue outline defined by the user argent*/
+          :focus {
+            outline: none !important;
+          }
         </style>
         ${headHtml}
       </head>

docs/components/Footer/index.js

@@ -14,7 +14,7 @@ const Footer = () =>
             .
           </center>
           <center>
-            <Link to="https://storybooks-slackin.herokuapp.com/" target="_blank">
+            <Link to="https://now-examples-slackin-nqnzoygycp.now.sh/" target="_blank">
               <img src={slackIcon} alt="Storybook Slack" />
             </Link>
             <Link to="https://github.com/storybooks/storybook" target="_blank">

docs/pages/basics/faq/index.md

@@ -23,3 +23,9 @@ Next automatically defines `React` for all of your files via a babel plugin. You
 ### How do I setup Storybook to share Webpack configuration with Next.js?
 
 You can generally reuse webpack rules fairly easily by placing them in a file that is `require()`-ed from both your `next.config.js` and your `.storybook/webpack.config.js` files. For example, [this gist](https://gist.github.com/metasean/cadd2becd60cc3b295bf49895a56f9b4) sets both next.js and storybook up with global stylesheets.
+
+### 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)

lib/addons/src/index.js

@@ -1,8 +1,16 @@
+function channelError() {
+  throw new Error(
+    'Accessing nonexistent addons channel, see https://storybook.js.org/basics/faq/#why-is-there-no-addons-channel'
+  );
+}
+
 export class AddonStore {
   constructor() {
     this.loaders = {};
     this.panels = {};
-    this.channel = { on() {}, emit() {} };
+    // this.channel should get overwritten by setChannel if package versions are
+    // correct and AddonStore is a proper singleton. If not, throw an error.
+    this.channel = { on: channelError, emit: channelError };
     this.preview = null;
     this.database = null;
   }

lib/ui/package.json

@@ -33,7 +33,7 @@
     "react-komposer": "^2.0.0",
     "react-modal": "^1.7.7",
     "react-split-pane": "^0.1.63",
-    "react-treebeard": "^2.0.3",
+    "react-split-pane": "^0.1.65",
     "redux": "^3.6.0"
   },
   "devDependencies": {

package.json

@@ -66,11 +66,11 @@
     "react": "^15.5.4",
     "react-dom": "^15.5.4",
     "react-test-renderer": "^15.5.4",
-    "remark-cli": "^3.0.1",
+    "remark-cli": "^4.0.0",
     "remark-lint": "^6.0.0",
     "remark-lint-code": "^2.0.0",
     "remark-lint-code-eslint": "^2.0.0",
-    "remark-preset-lint-recommended": "^2.0.0",
+    "remark-preset-lint-recommended": "^3.0.0",
     "remark-toc": "^4.0.0",
     "shelljs": "^0.7.7",
     "symlink-dir": "^1.1.0"

scripts/logo.js

@@ -0,0 +1,66 @@
+const coloured = `
+⢀⢀⣀⣀⣠⣤⣤⣤⣤⣤⣶⣶⣶⣶⣶⣶⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⢸⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⣿⠸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⣤⣤⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣶⡆⠀⠀⠀⠀⠀
+⢸⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⢀⣿⣿⣇⡀⠀⠀⢀⣀⣀⣀⠀⠀⠀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⠀⠀⣿⣿⡇⣀⣀⠀⠀⠀⠀⠀⣀⣀⣀⠀⠀⠀⠀⠀⣀⣀⣀⠀⠀⠀⢸⣿⣿⠀⠀⢀⠀⠀⠀
+⠈⡆⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠸⠿⣿⣿⠟⠛⢀⣿⣿⡿⢿⣿⣿⠀⠀⣿⣿⣿⣿⡟⢠⢿⢿⠀⠀⢿⢿⠀⠀⣿⣿⣿⠿⣿⣿⡆⠀⣾⣿⢿⠿⢿⣿⣆⠀⣴⣿⣿⠿⣿⣿⣷⠀⢸⣿⣿⢀⣾⣿⡟⠁⠀
+⠀⡇⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⣿⣿⠀⠀⢸⣿⣿⠀⠀⣿⣿⡇⠀⣿⣿⠁⠀⠀⢸⢿⢿⠀⠀⢿⢿⠀⠀⣿⣿⠀⠀⣿⣿⣿⢰⢿⢿⠀⠀⢸⢿⢿⠀⣿⣿⠃⠀⢸⣿⣿⠀⢸⣿⣿⣿⣿⣍⠀⠀⠀
+⠀⣷⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⣿⣿⠀⠀⠘⣿⣿⣦⣾⣿⣿⠀⠀⣿⣿⠀⠀⠀⠈⢿⢿⣷⣾⢿⢿⠀⠀⣿⣿⣷⣶⣿⣿⠁⠀⣿⢿⣷⡶⣿⢿⠃⠀⢿⣿⣷⣶⣿⣿⠏⠀⢸⣿⣿⠈⢿⣿⣷⣀⠀
+⠀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠉⠉⠀⠀⠀⠀⠉⠉⠉⠁⠀⠀⠀⠉⠉⠀⠀⠀⠀⢠⣀⠀⣠⢿⢿⠀⠀⠉⠉⠀⠉⠉⠀⠀⠀⠀⠈⠉⠉⠉⠀⠀⠀⠀⠈⠉⠉⠉⠀⠀⠀⠈⠉⠉⠀⠀⠈⠉⠉⠀
+⠀⣿⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⢿⡿⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠉⠈⠛⠛⠛⠛⠛⠛⠛⠛⠛⠿⠿⠿⠿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+`;
+
+const mono = `
+⢀⢀⣀⣀⣠⣤⣤⣤⣤⣤⣶⣶⣶⠀⠀⣶⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⢸⢸⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣶⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⣿⠸⣿⣿⣿⡿⠉⠀⠀⠀⠀⠀⠙⣿⣿⣿⣿⠀⠀⠀⣤⣤⡄⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⣿⣶⡆⠀⠀⠀⠀⠀
+⢸⠀⣿⣿⣿⠀⠀⠀⢰⣿⡀⠀⠀⢸⣿⣿⣿⠀⠀⢀⣿⣿⣇⡀⠀⠀⢀⣀⣀⣀⠀⠀⠀⣀⣀⠀⠀⠀⠀⠀⠀⠀⠀⣀⣀⠀⠀⣿⣿⡇⣀⣀⠀⠀⠀⠀⠀⣀⣀⣀⠀⠀⠀⠀⠀⣀⣀⣀⠀⠀⠀⢸⣿⣿⠀⠀⢀⠀⠀⠀
+⠈⡆⣿⣿⣿⣧⠀⠀⠀⠈⠙⢿⣿⣿⣿⣿⣿⠀⠸⠿⣿⣿⠟⠛⢀⣿⣿⡿⢿⣿⣿⠀⠀⣿⣿⣿⣿⡟⢠⢿⢿⠀⠀⢿⢿⠀⠀⣿⣿⣿⠿⣿⣿⡆⠀⣾⣿⢿⠿⢿⣿⣆⠀⣴⣿⣿⠿⣿⣿⣷⠀⢸⣿⣿⢀⣾⣿⡟⠁⠀
+⠀⡇⣿⣿⣿⣿⣿⣶⣤⠀⠀⠀⠀⢿⣿⣿⣿⠀⠀⠀⣿⣿⠀⠀⢸⣿⣿⠀⠀⣿⣿⡇⠀⣿⣿⠁⠀⠀⢸⢿⢿⠀⠀⢿⢿⠀⠀⣿⣿⠀⠀⣿⣿⣿⢰⢿⢿⠀⠀⢸⢿⢿⠀⣿⣿⠃⠀⢸⣿⣿⠀⢸⣿⣿⣿⣿⣍⠀⠀⠀
+⠀⣷⣿⣿⣿⠀⠀⠀⠸⣿⠀⠀⠀⢸⣿⣿⣿⠀⠀⠀⣿⣿⠀⠀⠘⣿⣿⣦⣾⣿⣿⠀⠀⣿⣿⠀⠀⠀⠈⢿⢿⣷⣾⢿⢿⠀⠀⣿⣿⣷⣶⣿⣿⠁⠀⣿⢿⣷⡶⣿⢿⠃⠀⢿⣿⣷⣶⣿⣿⠏⠀⢸⣿⣿⠈⢿⣿⣷⣀⠀
+⠀⣿⣿⣿⣿⣷⣀⠀⠀⠀⠀⠀⣠⣿⣿⣿⣿⠀⠀⠀⠉⠉⠀⠀⠀⠀⠉⠉⠉⠁⠀⠀⠀⠉⠉⠀⠀⠀⠀⢠⣀⠀⣠⢿⢿⠀⠀⠉⠉⠀⠉⠉⠀⠀⠀⠀⠈⠉⠉⠉⠀⠀⠀⠀⠈⠉⠉⠉⠀⠀⠀⠈⠉⠉⠀⠀⠈⠉⠉⠀
+⠀⣿⢹⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠘⠿⢿⡿⠟⠁⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+⠀⠉⠈⠛⠛⠛⠛⠛⠛⠛⠛⠛⠿⠿⠿⠿⣿⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀
+`;
+
+const chalkMap = {
+  '▓': () => '\\033[38;5;176m',
+  '▒': () => '\\033[38;5;211m',
+  '.': () => '\\033[38;5;231m',
+  B: () => '\\033[38;5;111m',
+  '₯': () => '\\033[38;5;150m',
+  R: () => '\\033[38;5;210m',
+  m: () => '\\033[38;5;211m',
+  l: () => '\\033[38;5;225m',
+  O: () => '\\033[38;5;215m',
+  Z: () => '\\033[38;5;232m',
+  ' ': () => '\\033[38;5;16m',
+  '?': () => `\\033[38;5;${Math.floor(Math.random() * 255) + 1}m`,
+};
+
+const colourmap = `
+▓▓▒▒▒▒▒▒▒▒▒▒▒..▒▒                                                               
+▓▓▒▒▒▒▒▒▒▒▒▒▒ll▒▒                                                               
+▓▓▒▒▒▒l.....▒▒▒▒▒   OOO                        RRR                      ▓▓▓     
+▓▓▒▒▒l...▒▒..▒▒▒▒  OOOOO  ₯₯₯₯   ▓▓        BB  RRRRR     BBB     ₯₯₯   ▓▓▓  ▓   
+▓▓▒▒▒▒...l▒▒▒▒▒▒▒ OOOOOO₯₯₯₯₯₯₯  ▓▓▓▓▓BBB  BB  RRRRRRR BBBBBBB ₯₯₯₯₯₯₯ ▓▓▓▓▓▓▓▓ 
+ ▓▒▒▒▒▒▒l....▒▒▒▒   OO  ₯₯₯  ₯₯₯ ▓▓▓  BBB  BB  RR  RRRBBB  BBB ₯₯₯ ₯₯₯ ▓▓▓▓▓▓   
+ ▓▒▒▒...▒▒l...▒▒▒   OO  ₯₯₯₯₯₯₯  ▓▓   BBBBBBB  RRRRRRR BBBBBBB ₯₯₯₯₯₯₯ ▓▓▓▓▓▓▓▓ 
+ ▓▒▒▒▒l.....l▒▒▒▒   OO    ₯₯₯₯   ▓▓    BB BBB  RR RR    BBBB    ₯₯₯₯   ▓▓▓  ▓▓▓ 
+ ▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒                      BBBBBB                                   
+ ▓▒▒▒▒▒▒▒▒▒▒▒▒▒▒▒                                                               
+`.split('');
+
+const result = coloured.split('').map((char, index) => {
+  const colorKey = colourmap[index];
+  const colorPrefix = chalkMap[colorKey] ? chalkMap[colorKey]() : '';
+  const isSpace = colorKey === ' ';
+  return colorPrefix + (isSpace ? '⠀' : char);
+});
+
+const exec = require('child_process').exec;
+
+exec(`printf "%b" "${result.join('')}\\033[0m"`, {}).stdout.pipe(process.stdout);
+
+exec(`printf "%b" "${mono}"`, {}).stdout.pipe(process.stdout);