Merge remote-tracking branch 'origin/151-story-hierarchy' into story-hierarchy-3rd-party

2025-04-06 06:51:17 +08:00 · 2017-06-29 17:27:39 +03:00 · 2017-06-29 17:27:39 +03:00 · 2fdf710f0f
commit 2fdf710f0f
parent 8a98f621dc 8262b7bedc
49 changed files with 335 additions and 165 deletions
--- a/.gitignore
+++ b/.gitignore
@ -15,3 +15,4 @@ yarn.lock
 /**/LICENSE
 docs/public
 packs/*.tgz
+package-lock.json
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,38 @@
+# 3.1.7
+
+2017-June-28
+
+#### Bug Fixes
+
+-   Exit storybook build non-zero on stats errors (e.g. errors in the transpilation pipeline) [#1372](https://github.com/storybooks/storybook/pull/1372)
+-   Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using exract-text-webpack-plugin) [#1363](https://github.com/storybooks/storybook/pull/1363)
+
+#### Documentation
+
+-   Document Storybook release process [#1348](https://github.com/storybooks/storybook/pull/1348)
+
+# 3.1.6
+
+2017-June-26
+
+#### Bug Fixes
+
+-   Remove the `cacheDirectory` option from babel config [#1350](https://github.com/storybooks/storybook/pull/1350)
+-   websockets (ws) removed `socket.upgradeReq`, so use `req` instead [#1337](https://github.com/storybooks/storybook/pull/1337)
+-   Ensure we add the correct version of `react-dom` [#1349](https://github.com/storybooks/storybook/pull/1349)
+-   Addon Info: Fix invalid prop `node.type` supplied to 'Props' [#1351](https://github.com/storybooks/storybook/pull/1351)
+-   Addon Info: Omit empty inline info header [#1306](https://github.com/storybooks/storybook/pull/1306)
+-   Addon Actions: Use uuid for action IDs instead of Math.random (fixes #1109) [#1347](https://github.com/storybooks/storybook/pull/1347)
+
+#### Documentation
+
+-   Fix welcome instructions to reflect current `getstorybook` [#1358](https://github.com/storybooks/storybook/pull/1358)
+-   Addon Info: Update README with configuration instructions [#1326](https://github.com/storybooks/storybook/pull/1326)
+
+#### Dependency Upgrades
+
+-   Update lint-staged to the latest version 🚀 [#1315](https://github.com/storybooks/storybook/pull/1315)
+
 # 3.1.5

 2017-June-22
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -9,6 +9,7 @@ Please review this document to help to streamline the process and save everyone'
 No software is bug free. So, if you got an issue, follow these steps:

 -   Search the [issue list](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=) for current and old issues.
+    -   If you find an existing issue, please UPVOTE the issue by adding a "thumbs-up reaction". We use this to help prioritize issues!
 -   If none of that is helping, create an issue with with following information:
    -   Clear title (make is shorter if possible).
    -   Describe the issue in clear language.
--- a/RELEASES.md
+++ b/RELEASES.md
@ -0,0 +1,117 @@
+# Release Process
+
+A Storybook release process based on [Semver](http://semver.org/). In short:
+
+1.  Merge bugfix PRs directly into master automatically release (~daily)
+
+2.  Merge feature and breaking PRs into a release branch (e.g. `release/3.2`) and release features in groups along with a marketing push after a preview period (~monthly)
+
+3.  Consensus on critical infrastructure/bugs that are needed before we can do a minor release, so that we pay down our tech debt as we go.
+
+## Motivation
+
+During the Storybook 3.x transition we've undergone a series of growing pains as
+we've opened up the development process. We've had questions about:
+
+1.  how to adhere to semver?
+2.  how to do marketing releases (while adhering to semver)?
+3.  how to introduce significant new features (e.g. vue support, story hierarchy)?
+4.  how to converge on key design decisions (e.g. new addons API)?
+5.  how to schedule releases?
+6.  how to maintain quality/stability through the process?
+7.  how to pay down tech debt as we go?
+
+This process attempts to address all these concerns in one shot.
+
+## Semver
+
+[Semver](http://semver.org/) dictates three types of release:
+
+1.  MAJOR version when you make incompatible API changes,
+2.  MINOR version when you add functionality in a backwards-compatible manner, and
+3.  PATCH version when you make backwards-compatible bug fixes.
+
+We'll do our best to adhere to Semver, but won't be religious about it. In
+particular, we may occasionally release small bits of new functionality in PATCH
+releases. We'll try our best to restrict breaking changes to MAJOR releases.
+
+## PATCH releases
+
+Every bugfix should go out as soon as we've verified the fix, and based on the
+current rate of contribution, we should be issuing PATCH releases multiple times per week.
+Soon we'll automate the process so that a release will go out every time a PR is
+merged into `master`, and we've already laid most of the groundwork for this.
+
+## MINOR releases
+
+Every new feature, particularly significant ones (e.g. Vue support, deep
+hierarchy for stories) deserves more attention:
+
+1.  They should be well-tested by the community before we release.
+2.  They often have architectural implications for the entire Storybook ecosystem, so should be discussed thoroughly before release. Doing `alpha` releases allow us to test in the community without necessarily achieving agreement. For example, currently `Vue` support is in `alpha`, although it contains potentially controversial changes to addons.
+3.  They often deserve proper marketing treatment (blog posts, release announcement, podcast, etc.)
+
+Therefore we merge these into a release branch of the form `release/MAJOR.MINOR`
+and we create preview releases and get them tested by the community before
+merging those branches into `master`.
+
+> NOTE: it is possible to edit the `base` branch in a PR, so we can expect users to issue PRs to `master`, but as maintainers as we see feature releases we should set them to merge into the appropriate release branch.
+
+In general we should release 2-3 headline features per minor release for
+marketing purposes. Each headline feature should get its own blog post on the
+Storybook medium publication, and the release itself should also get a blog
+post.
+
+## MAJOR releases
+
+We should avoid major releases, and should try to do these at most 1-2x per
+year. Ideally each breaking change would have been agreed upon by the
+maintainers and validated in backwards-compatible feature releases. At some
+point once a change has been thoroughly vetted, we deprecate the old way and
+give some time for people to upgrade to the new way. Finally MAJOR releases
+should have killer features that reward users for upgrading, and should not be
+used to scratch our own architectural itches -- unless those itches are really
+killing development in some meaningful way.
+
+## Blocking bugs
+
+Most PATCH releases come from community members, who generously fix problems as
+they come up. However, there are also bugs that never get picked up and just sit
+there gathering upvotes and "me too" comments. We need a way to make sure that
+these bugs get addressed.
+
+For every non-PATCH release, we nominate a small number of bugs that must be
+addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybooks/storybook/milestone/3).
+
+Adding bugs to the milestone helps people looking for good ways to contribute,
+or to understand what is blocking the release so they can actually do something
+about it. Discussion about which bugs are critical happens in the `#maintenance`
+channel [in our Slack](https://storybooks-slackin.herokuapp.com/).
+
+If you're experiencing a bug, the best way to make sure that it gets attention
+is to upvote it by adding a "thumbs-up" reaction in Github. This way important
+bugs quickly bubble to the top [with a
+search](https://github.com/storybooks/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug).
+
+And of course, the best way to make sure a bug gets addressed quickly is to fix
+it yourself and issue a PR. If the fix is good, we'll try to release it quickly
+in a patch release.
+
+## Decision-making
+
+-   For PATCH changes, all discussion can occur in issue/PR comments (and random slack chat as needed).
+-   For MINOR feature changes, there are multiple stages of discussion:
+    -   The feature may be discussed in an issue before it is implemented (ex: <https://github.com/storybooks/storybook/issues/151>)
+    -   Once it's implemented, the discussion may be occur on the PR (ex: <https://github.com/storybooks/storybook/pull/1329>)
+    -   If people disagree on an implementation and it can't be resolved in discussion, they may issue alternative PR's with different ideas
+    -   Ultimately the maintainers will reach a consensus before merging the changes. There is no set process for this, but we're all adults.
+    -   Since MINOR features are released in alpha before they are fully released, new issues may be created by end users, etc.
+-   For MAJOR infrastructural changes, the discussion may take place over time, in gists like this one, issues, slack discussions, etc.
+    -   Once the breaking changes have been reduced to an actual implementation, it looks pretty much like a feature release (only with higher stakes and probably a longer stabilization process).
+
+## FAQ's
+
+#### How does my PR get merged?
+
+-   For PATCH PR's, any maintainer can review, test, approve, and merge it.
+-   For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -21,11 +21,12 @@
    "storybook": "start-storybook -p 9001"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "deep-equal": "^1.0.1",
    "json-stringify-safe": "^5.0.1",
    "prop-types": "^15.5.8",
-    "react-inspector": "^2.0.0"
+    "react-inspector": "^2.0.0",
+    "uuid": "^3.1.0"
  },
  "devDependencies": {
    "react": "^15.5.4",
--- a/addons/actions/src/preview.js
+++ b/addons/actions/src/preview.js
@ -2,6 +2,7 @@

 import addons from '@storybook/addons';
 import stringify from 'json-stringify-safe';
+import uuid from 'uuid/v1';
 import { EVENT_ID } from './';

 function _format(arg) {
@ -16,9 +17,9 @@ export function action(name) {
  const handler = function(..._args) {
    const args = Array.from(_args).map(_format);
    const channel = addons.getChannel();
-    const randomId = Math.random().toString(16).slice(2);
+    const id = uuid();
    channel.emit(EVENT_ID, {
-      id: randomId,
+      id,
      data: { name, args },
    });
  };
--- a/addons/actions/src/preview.test.js
+++ b/addons/actions/src/preview.test.js
@ -0,0 +1,27 @@
+import addons from '@storybook/addons';
+import uuid from 'uuid/v1';
+import { action } from './preview';
+
+jest.mock('uuid/v1');
+jest.mock('@storybook/addons');
+
+describe('preview', () => {
+  describe('action()', () => {
+    it('should use a uuid for action ids', () => {
+      const channel = { emit: jest.fn() };
+      const uuidGenerator = (function*() {
+        yield '42';
+        yield '24';
+      })();
+      uuid.mockImplementation(() => uuidGenerator.next().value);
+      addons.getChannel.mockReturnValue(channel);
+      const fn = action('foo');
+
+      fn();
+      fn();
+      expect(channel.emit).toHaveBeenCalledTimes(2);
+      expect(channel.emit.mock.calls[0][1].id).toBe('42');
+      expect(channel.emit.mock.calls[1][1].id).toBe('24');
+    });
+  });
+});
--- a/addons/comments/package.json
+++ b/addons/comments/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-comments",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Comments addon for Storybook",
  "keywords": [
    "storybook"
@ -23,7 +23,7 @@
    "storybook-remote": "start-storybook -p 3006"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "babel-runtime": "^6.23.0",
    "deep-equal": "^1.0.1",
    "events": "^1.1.1",
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -20,7 +20,7 @@
    "storybook": "start-storybook -p 6006"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "babel-runtime": "^6.5.0",
    "format-json": "^1.0.3",
    "prop-types": "^15.5.10",
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "storybook"
--- a/addons/info/README.md
+++ b/addons/info/README.md
@ -55,6 +55,23 @@ storiesOf('Component')

 > Have a look at [this example](example/story.js) stories to learn more about the `addWithInfo` API.

+To customize your defaults:
+
+```js
+// config.js
+import infoAddon, { setDefaults } from '@storybook/addon-info';
+
+// addon-info
+setDefaults({
+  inline: true,
+  maxPropsIntoLine: 1,
+  maxPropObjectKeys: 10,
+  maxPropArrayLength: 10,
+  maxPropStringLength: 100,
+});
+setAddon(infoAddon);
+```
+
 ## The FAQ

 **Components lose their names on static build**
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-info",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "A Storybook addon to show additional information for your stories.",
  "license": "MIT",
  "main": "dist/index.js",
@ -14,7 +14,7 @@
    "storybook": "start-storybook -p 9010"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "babel-runtime": "^6.23.0",
    "global": "^4.3.2",
    "marksy": "^2.0.0",
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@ -125,11 +125,7 @@ export default class Story extends React.Component {
  _renderInline() {
    return (
      <div>
-        <div style={this.state.stylesheet.infoPage}>
-          <div style={this.state.stylesheet.infoBody}>
-            {this._getInfoHeader()}
-          </div>
-        </div>
+        {this._renderInlineHeader()}
        <div>
          {this._renderStory()}
        </div>
@ -145,6 +141,19 @@ export default class Story extends React.Component {
    );
  }

+  _renderInlineHeader() {
+    const infoHeader = this._getInfoHeader();
+
+    return (
+      infoHeader &&
+      <div style={this.state.stylesheet.infoPage}>
+        <div style={this.state.stylesheet.infoBody}>
+          {infoHeader}
+        </div>
+      </div>
+    );
+  }
+
  _renderOverlay() {
    const linkStyle = {
      ...stylesheet.link.base,
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,10 +1,9 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Storybook Addon Prop Editor Component",
  "license": "MIT",
  "main": "dist/index.js",
-  "typings": "./storybook-addon-knobs.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/storybooks/storybook.git"
@ -16,7 +15,7 @@
    "storybook": "start-storybook -p 9010"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "babel-runtime": "^6.23.0",
    "deep-equal": "^1.0.1",
    "global": "^4.3.2",
--- a/addons/knobs/storybook-addon-knobs.d.ts
+++ b/addons/knobs/storybook-addon-knobs.d.ts
@ -1,46 +0,0 @@
-import * as React from 'react';
-
-interface KnobOption<T> {
-	value: T,
-	type: 'text' | 'boolean' | 'number' | 'color' | 'object' | 'select' | 'date',
-}
-
-interface StoryContext {
-	kind: string,
-	story: string,
-}
-
-interface NumberOptions {
-	range: boolean,
-	min: number,
-	max: number,
-	step: number,
-}
-
-export function knob<T>(name: string, options: KnobOption<T>): T;
-
-export function text(name: string, value: string | null): string;
-
-export function boolean(name: string, value: boolean): boolean;
-
-export function number(name: string, value: number, options?: NumberOptions): number;
-
-export function color(name: string, value: string): string;
-
-export function object<T>(name: string, value: T): T;
-
-export function select<T>(name: string, options: { [s: string]: T }, value: string): T;
-export function select(name: string, options: string[], value: string): string;
-
-export function date(name: string, value?: Date): Date;
-
-interface IWrapStoryProps {
-  context?: Object;
-  storyFn?: Function;
-  channel?: Object;
-  knobStore?: Object;
-  initialContent?: Object;
-}
-
-export function withKnobs(storyFn: Function, context: StoryContext): React.ReactElement<IWrapStoryProps>;
-export function withKnobsOptions(options: Object): (storyFn: Function, context: StoryContext) => React.ReactElement<IWrapStoryProps>;
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Story Links addon for storybook",
  "keywords": [
    "storybook"
@ -11,7 +11,6 @@
  },
  "license": "MIT",
  "main": "dist/index.js",
-  "typings": "./storybook-addon-links.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/storybooks/storybook.git"
@ -22,7 +21,7 @@
    "storybook": "start-storybook -p 9001"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5"
+    "@storybook/addons": "^3.1.6"
  },
  "devDependencies": {
    "react": "^15.5.4",
--- a/addons/links/storybook-addon-links.d.ts
+++ b/addons/links/storybook-addon-links.d.ts
@ -1,3 +0,0 @@
-import * as React from 'react';
-
-export function linkTo<E>(book: string, kind?: string): React.MouseEventHandler<E>;
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-notes",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Write notes for your Storybook stories.",
  "keywords": [
    "addon",
@ -19,7 +19,7 @@
    "storybook": "start-storybook -p 9010"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
    "babel-runtime": "^6.23.0",
    "prop-types": "^15.5.10"
  },
--- a/addons/notes/storybook-addon-notes.d.ts
+++ b/addons/notes/storybook-addon-notes.d.ts
@ -1,7 +0,0 @@
-import * as React from 'react';
-
-export interface WithNotesProps extends React.HTMLProps<HTMLDivElement> {
-  notes?: string;
-}
-
-export const WithNotes: React.StatelessComponent<WithNotesProps>;
--- a/addons/options/package.json
+++ b/addons/options/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-options",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Options addon for storybook",
  "keywords": [
    "storybook"
@ -11,7 +11,6 @@
  },
  "license": "MIT",
  "main": "preview.js",
-  "typings": "./storybook-addon-options.d.ts",
  "repository": {
    "type": "git",
    "url": "https://github.com/storybooks/storybook.git"
@ -21,7 +20,7 @@
    "storybook": "start-storybook -p 9001"
  },
  "dependencies": {
-    "@storybook/addons": "^3.1.5"
+    "@storybook/addons": "^3.1.6"
  },
  "devDependencies": {
    "react": "^15.5.4",
--- a/addons/options/storybook-addon-options.d.ts
+++ b/addons/options/storybook-addon-options.d.ts
@ -1,12 +0,0 @@
-interface Options {
-  name?: string;
-  url?: string;
-  goFullScreen?: boolean;
-  showLeftPanel?: boolean;
-  showDownPanel?: boolean;
-  showSearchBox?: boolean;
-  downPanelInRight?: boolean;
-  sortStoriesByKind?: boolean;
-}
-
-export function setOptions(options: Options): void;
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "3.1.5",
+  "version": "3.1.7",
  "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
  "license": "MIT",
  "main": "dist/index.js",
@ -20,9 +20,9 @@
    "read-pkg-up": "^2.0.0"
  },
  "devDependencies": {
-    "@storybook/addons": "^3.1.5",
-    "@storybook/channels": "^3.1.5",
-    "@storybook/react": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
+    "@storybook/channels": "^3.1.6",
+    "@storybook/react": "^3.1.7",
    "babel-cli": "^6.24.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-es2015": "^6.24.1",
@ -31,9 +31,9 @@
    "react-dom": "^15.5.4"
  },
  "peerDependencies": {
-    "@storybook/addons": "^3.1.5",
-    "@storybook/channels": "^3.1.5",
-    "@storybook/react": "^3.1.5",
+    "@storybook/addons": "^3.1.6",
+    "@storybook/channels": "^3.1.6",
+    "@storybook/react": "^3.1.7",
    "babel-core": "^6.24.1",
    "react": "*",
    "react-test-renderer": "*"
--- a/addons/storyshots/src/index.js
+++ b/addons/storyshots/src/index.js
@ -31,7 +31,8 @@ export default function testStorySnapshots(options = {}) {
  if (isStorybook) {
    storybook = require.requireActual('@storybook/react');
    // eslint-disable-next-line
-    const loadBabelConfig = require('@storybook/react/dist/server/babel_config').default;
+    const loadBabelConfig = require('@storybook/react/dist/server/babel_config')
+      .default;
    const configDirPath = path.resolve(options.configPath || '.storybook');
    configPath = path.join(configDirPath, 'config.js');

--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-native",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "A better way to develop React Native Components for your app",
  "keywords": [
    "react",
@ -24,11 +24,11 @@
    "prepublish": "node ../../scripts/prepublish.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "^3.1.5",
-    "@storybook/addon-links": "^3.1.5",
-    "@storybook/addons": "^3.1.5",
-    "@storybook/channel-websocket": "^3.1.5",
-    "@storybook/ui": "^3.1.5",
+    "@storybook/addon-actions": "^3.1.6",
+    "@storybook/addon-links": "^3.1.6",
+    "@storybook/addons": "^3.1.6",
+    "@storybook/channel-websocket": "^3.1.6",
+    "@storybook/ui": "^3.1.6",
    "autoprefixer": "^7.0.1",
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
@ -51,6 +51,7 @@
    "events": "^1.1.1",
    "express": "^4.15.2",
    "file-loader": "^0.11.1",
+    "find-cache-dir": "^1.0.0",
    "global": "^4.3.2",
    "json-loader": "^0.5.4",
    "json5": "^0.5.1",
--- a/app/react-native/src/server/config.js
+++ b/app/react-native/src/server/config.js
@ -1,6 +1,7 @@
 import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
+import findCacheDir from 'find-cache-dir';

 // avoid ESLint errors
 const logger = console;
@ -82,6 +83,13 @@ export default function(configType, baseConfig, projectDir, configDir) {
    config.module.loaders[0].query = babelConfig;
  }

+  // This is a feature of `babel-loader` for webpack (not Babel itself).
+  // It enables a cache directory for faster-rebuilds
+  // `find-cache-dir` will create the cache directory under the node_modules directory.
+  config.module.loaders[0].query.cacheDirectory = findCacheDir({
+    name: 'react-storybook',
+  });
+
  // Check whether addons.js file exists inside the storybook.
  // Load the default addons.js file if it's missing.
  const storybookDefaultAddonsPath = path.resolve(__dirname, 'addons.js');
--- a/app/react-native/src/server/config/babel.js
+++ b/app/react-native/src/server/config/babel.js
@ -10,9 +10,6 @@
 module.exports = {
  // Don't try to find .babelrc because we want to force this configuration.
  babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables caching results in OS temporary directory for faster rebuilds.
-  cacheDirectory: true,
  presets: [
    // let, const, destructuring, classes, modules
    require.resolve('babel-preset-es2015'),
--- a/app/react-native/src/server/index.js
+++ b/app/react-native/src/server/index.js
@ -12,14 +12,12 @@ export default class Server {
    this.expressApp.use(storybook(options));
    this.httpServer.on('request', this.expressApp);
    this.wsServer = new ws.Server({ server: this.httpServer });
-    this.wsServer.on('connection', s => this.handleWS(s));
+    this.wsServer.on('connection', (s, req) => this.handleWS(s, req));
  }

-  handleWS(socket) {
+  handleWS(socket, req) {
    if (this.options.manualId) {
-      const params = socket.upgradeReq && socket.upgradeReq.url
-        ? querystring.parse(socket.upgradeReq.url.substr(1))
-        : {};
+      const params = req.url ? querystring.parse(req.url.substr(1)) : {};

      if (params.pairedId) {
        socket.pairedId = params.pairedId; // eslint-disable-line
--- a/app/react/package.json
+++ b/app/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react",
-  "version": "3.1.5",
+  "version": "3.1.7",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/react",
  "bugs": {
@ -22,11 +22,11 @@
    "prepublish": "node ../../scripts/prepublish.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "^3.1.5",
-    "@storybook/addon-links": "^3.1.5",
-    "@storybook/addons": "^3.1.5",
-    "@storybook/channel-postmessage": "^3.1.5",
-    "@storybook/ui": "^3.1.5",
+    "@storybook/addon-actions": "^3.1.6",
+    "@storybook/addon-links": "^3.1.6",
+    "@storybook/addons": "^3.1.6",
+    "@storybook/channel-postmessage": "^3.1.6",
+    "@storybook/ui": "^3.1.6",
    "airbnb-js-shims": "^1.1.1",
    "autoprefixer": "^7.1.1",
    "babel-core": "^6.24.1",
--- a/app/react/src/client/index.js
+++ b/app/react/src/client/index.js
@ -14,10 +14,10 @@ export const getStorybook = previewApi.getStorybook;

 export const action = deprecate(
  deprecatedAction,
-  '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/actions'
+  '@storybook/react action is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/actions'
 );

 export const linkTo = deprecate(
  deprecatedLinkTo,
-  '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addon/links'
+  '@storybook/react linkTo is deprecated. See: https://github.com/storybooks/storybook/tree/master/addons/links'
 );
--- a/app/react/src/demo/Welcome.js
+++ b/app/react/src/demo/Welcome.js
@ -63,8 +63,8 @@ const Welcome = props =>
      <br />
      You can also edit those components and see changes right away.
      <br />
-      (Try editing the <InlineCode>Button</InlineCode> component
-      located at <InlineCode>src/stories/Button.js</InlineCode>.)
+      (Try editing the <InlineCode>Button</InlineCode> stories
+      located at <InlineCode>src/stories/index.js</InlineCode>.)
    </p>
    <p>
      Usually we create stories with smaller UI components in the app.<br />
--- a/app/react/src/server/build.js
+++ b/app/react/src/server/build.js
@ -77,9 +77,12 @@ if (program.staticDir) {
 // compile all resources with webpack and write them to the disk.
 logger.log('Building storybook ...');
 webpack(config).run((err, stats) => {
-  if (err) {
+  if (err || stats.hasErrors()) {
    logger.error('Failed to build the storybook');
-    logger.error(err.message);
+    // eslint-disable-next-line no-unused-expressions
+    err && logger.error(err.message);
+    // eslint-disable-next-line no-unused-expressions
+    stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
    process.exit(1);
  }

--- a/app/react/src/server/config.js
+++ b/app/react/src/server/config.js
@ -1,6 +1,7 @@
 /* eslint-disable global-require, import/no-dynamic-require */
 import fs from 'fs';
 import path from 'path';
+import findCacheDir from 'find-cache-dir';
 import loadBabelConfig from './babel_config';

 // avoid ESLint errors
@ -13,7 +14,13 @@ export default function(configType, baseConfig, configDir) {
  const config = baseConfig;

  const babelConfig = loadBabelConfig(configDir);
-  config.module.rules[0].query = babelConfig;
+  config.module.rules[0].query = {
+    // This is a feature of `babel-loader` for webpack (not Babel itself).
+    // It enables a cache directory for faster-rebuilds
+    // `find-cache-dir` will create the cache directory under the node_modules directory.
+    cacheDirectory: findCacheDir({ name: 'react-storybook' }),
+    ...babelConfig,
+  };

  // Check whether a config.js file exists inside the storybook
  // config directory and throw an error if it's not.
--- a/app/react/src/server/config/babel.js
+++ b/app/react/src/server/config/babel.js
@ -7,15 +7,9 @@
 * of patent rights can be found in the PATENTS file in the same directory.
 */

-const findCacheDir = require('find-cache-dir');
-
 module.exports = {
  // Don't try to find .babelrc because we want to force this configuration.
  babelrc: false,
-  // This is a feature of `babel-loader` for webpack (not Babel itself).
-  // It enables a cache directory for faster-rebuilds
-  // `find-cache-dir` will create the cache directory under the node_modules directory.
-  cacheDirectory: findCacheDir({ name: 'react-storybook' }),
  presets: [
    require.resolve('babel-preset-es2015'),
    require.resolve('babel-preset-es2016'),
--- a/app/react/src/server/iframe.html.js
+++ b/app/react/src/server/iframe.html.js
@ -8,7 +8,7 @@ import url from 'url';
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css',
 //   'static/preview.9adbb5ef965106be1cc3.bundle.js.map',
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css.map' ]
-const urlsFromAssets = assets => {
+export const urlsFromAssets = assets => {
  if (!assets) {
    return {
      js: ['static/preview.bundle.js'],
@ -26,13 +26,13 @@ const urlsFromAssets = assets => {
    // Don't load the manager script in the iframe
    .filter(key => key !== 'manager')
    .forEach(key => {
-      const asset = assets[key];
-      if (typeof asset === 'string') {
-        urls[re.exec(asset)[1]].push(asset);
-      } else {
-        const assetUrl = asset.find(u => re.exec(u)[1] !== 'map');
-        urls[re.exec(assetUrl)[1]].push(assetUrl);
+      let assetList = assets[key];
+      if (!Array.isArray(assetList)) {
+        assetList = [assetList];
      }
+      assetList.filter(assetUrl => re.exec(assetUrl)[1] !== 'map').forEach(assetUrl => {
+        urls[re.exec(assetUrl)[1]].push(assetUrl);
+      });
    });

  return urls;
--- a/app/react/src/server/iframe.html.test.js
+++ b/app/react/src/server/iframe.html.test.js
@ -0,0 +1,21 @@
+import { urlsFromAssets } from './iframe.html';
+
+describe('server.urlsFromAssets', () => {
+  it('should return the default when there are no assets', () => {
+    expect(urlsFromAssets()).toEqual({
+      js: ['static/preview.bundle.js'],
+      css: [],
+    });
+  });
+
+  it('should return multiple assets', () => {
+    const fixture = {
+      manager: 'static/manager.a.bundle.js',
+      preview: ['static/preview.x.bundle.js', 'static/preview.y.css', 'static/preview.y.css.map'],
+    };
+    expect(urlsFromAssets(fixture)).toEqual({
+      js: ['static/preview.x.bundle.js'],
+      css: ['static/preview.y.css'],
+    });
+  });
+});
--- a/docs/components/Homepage/MainLinks/index.js
+++ b/docs/components/Homepage/MainLinks/index.js
@ -55,7 +55,7 @@ const MainLinks = () =>
          <ul>
            <li><Link to="/basics/quick-start-guide/">Quick setup</Link></li>
            <li><Link to="/basics/slow-start-guide/">Adding to existing project</Link></li>
-            <li><Link to="/basics/slow-start-guide/">Writing stories</Link></li>
+            <li><Link to="/basics/writing-stories/">Writing stories</Link></li>
          </ul>
        </div>

--- a/examples/cra-kitchen-sink/src/stories/index.js
+++ b/examples/cra-kitchen-sink/src/stories/index.js
@ -177,19 +177,19 @@ storiesOf('component.Button')

 // Atomic

-storiesOf('Atoms¯\\_(ツ)_/¯Molecules.Cells/simple', module)
+storiesOf('Cells¯\\_(ツ)_/¯Molecules.Atoms/simple', module)
  .addDecorator(withKnobs)
  .add('with text', () => <Button>{text('buttonText', 'Hello Button')}</Button>)
  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

-storiesOf('Atoms/Molecules/Cells.more', module)
+storiesOf('Cells/Molecules/Atoms.more', module)
  .add('with text2', () => <Button>Hello Button</Button>)
  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);

-storiesOf('Atoms/Molecules', module)
+storiesOf('Cells/Molecules', module)
  .add('with text', () => <Button>Hello Button</Button>)
  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

-storiesOf('Atoms.Molecules.Cells', module)
+storiesOf('Cells.Molecules.Atoms', module)
  .add('with text2', () => <Button>Hello Button</Button>)
  .add('with some emoji2', () => <Button>😀 😎 👍 💯</Button>);
--- a/examples/test-cra/src/snapshots/storyshots.test.js.snap
+++ b/examples/test-cra/src/snapshots/storyshots.test.js.snap
@ -79,11 +79,11 @@ exports[`Storyshots Welcome to Storybook 1`] = `
    >
      Button
    </code>
-     component located at 
+     stories located at 
    <code
      className="css-mteq83"
    >
-      src/stories/Button.js
+      src/stories/index.js
    </code>
    .)
  </p>
--- a/lerna.json
+++ b/lerna.json
@ -23,5 +23,5 @@
    "examples/*"
  ],
  "concurrency": 1,
-  "version": "3.1.5"
+  "version": "3.1.7"
 }
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addons",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Storybook addons store",
  "keywords": [
    "storybook"
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-postmessage",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
@ -8,7 +8,7 @@
    "prepublish": "node ../../scripts/prepublish.js"
  },
  "dependencies": {
-    "@storybook/channels": "^3.1.5",
+    "@storybook/channels": "^3.1.6",
    "global": "^4.3.2",
    "json-stringify-safe": "^5.0.1"
  },
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-websocket",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
@ -8,7 +8,7 @@
    "prepublish": "node ../../scripts/prepublish.js"
  },
  "dependencies": {
-    "@storybook/channels": "^3.1.5",
+    "@storybook/channels": "^3.1.6",
    "global": "^4.3.2"
  },
  "devDependencies": {
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ b/lib/cli/generators/REACT_NATIVE/index.js
@ -31,7 +31,8 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    packageJson.devDependencies['react-dom'] = '^15.5.4';
+    const reactVersion = packageJson.dependencies.react;
+    packageJson.devDependencies['react-dom'] = reactVersion;
  }

  packageJson.scripts = packageJson.scripts || {};
--- a/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js
+++ b/lib/cli/generators/REACT_NATIVE_SCRIPTS/index.js
@ -15,7 +15,8 @@ module.exports = latestVersion('@storybook/react-native').then(version => {
  packageJson.devDependencies['@storybook/react-native'] = `^${version}`;

  if (!packageJson.dependencies['react-dom'] && !packageJson.devDependencies['react-dom']) {
-    packageJson.devDependencies['react-dom'] = '^15.5.4';
+    const reactVersion = packageJson.dependencies.react;
+    packageJson.devDependencies['react-dom'] = reactVersion;
  }

  packageJson.scripts = packageJson.scripts || {};
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Storybook's CLI - easiest method of adding storybook to your projects",
  "keywords": [
    "cli",
@ -24,7 +24,7 @@
    "postinstall": "opencollective postinstall --collective=storybook"
  },
  "dependencies": {
-    "@storybook/codemod": "^3.1.5",
+    "@storybook/codemod": "^3.1.6",
    "chalk": "^1.1.3",
    "child-process-promise": "^2.2.1",
    "commander": "^2.9.0",
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/codemod",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "A collection of codemod scripts written with JSCodeshift",
  "license": "MIT",
  "main": "dist/index.js",
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ui",
-  "version": "3.1.5",
+  "version": "3.1.6",
  "description": "Core Storybook UI",
  "license": "MIT",
  "main": "dist/index.js",
--- a/package.json
+++ b/package.json
@ -58,7 +58,7 @@
    "jest": "^20.0.4",
    "jest-enzyme": "^3.2.0",
    "lerna": "2.0.0-rc.5",
-    "lint-staged": "^3.5.1",
+    "lint-staged": "^4.0.0",
    "markdown-it-anchor": "^4.0.0",
    "markdownlint-cli": "^0.3.1",
    "nodemon": "^1.11.0",