Allow promise to be returned from 'add()'

addons/storyshots/src/index.js

@@ -98,7 +98,7 @@ export default function testStorySnapshots(options = {}) {
 
           it(story.name, () => {
             const context = { fileName, kind, story: story.name };
-            options.test({ story, context });
+            return options.test({ story, context });
           });
         }
       });

addons/storyshots/src/test-bodies.js

@@ -18,10 +18,13 @@ function getSnapshotFileName(context) {
   return getStoryshotFile(fileName);
 }
 
-export const snapshotWithOptions = options => ({ story, context }) => {
-  const tree = getRenderedTree(story, context, options);
-  expect(tree).toMatchSnapshot();
-};
+export const snapshotWithOptions = options => ({ story, context }) =>
+  Promise.resolve(story)
+    .then(storyVal => storyVal.render(context))
+    .then(() => {
+      const tree = getRenderedTree(story, context, options);
+      expect(tree).toMatchSnapshot();
+    });
 
 export const multiSnapshotWithOptions = options => ({ story, context }) => {
   const tree = getRenderedTree(story, context, options);

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

@@ -66,15 +66,30 @@ export default class ClientApi {
         throw new Error(`Story of "${kind}" named "${storyName}" already exists`);
       }
 
-      // Wrap the getStory function with each decorator. The first
-      // decorator will wrap the story function. The second will
-      // wrap the first decorator and so on.
+      /* DECORATORS:
+       * Wrap the getStory function with each decorator. 
+       * The first decorator will wrap the story function.
+       * The second will wrap the first decorator and so on.
+       * [a,b,c,d] >>> d(c(b(a())))
+       * 
+       * In order to support async stories, we take the real storyFn, and wait until it resolves.
+       * After we can wrap the 'ending' with all the decorators
+       */
+
+      // first let's make an array with all decorators
       const decorators = [...localDecorators, ...this._globalDecorators];
 
-      const fn = decorators.reduce(
-        (decorated, decorator) => context => decorator(() => decorated(context), context),
-        getStory
-      );
+      // make a function that takes context
+      const fn = context =>
+        // resolve the real storyFn
+        Promise.resolve(getStory(context)).then(ending =>
+          // nest function calls of decorators: [a,b,c,d] >>> d(c(b(a())))
+          decorators.reduce(
+            (decorated, decorator) => innerContext =>
+              decorator(() => decorated(innerContext), innerContext),
+            () => ending
+          )(context)
+        );
 
       const fileName = m ? m.filename : null;
 

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

@@ -71,32 +71,32 @@ export function renderMain(data, storyStore) {
     story: selectedStory,
   };
 
-  const element = story(context);
-
-  if (!element) {
-    const error = {
-      title: `Expecting a React element from the story: "${selectedStory}" of "${selectedKind}".`,
-      description: stripIndents`
-        Did you forget to return the React element from the story?
-        Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
-      `,
-    };
-    return renderError(error);
-  }
-
-  if (!isReactRenderable(element)) {
-    const error = {
-      title: `Expecting a valid React element from the story: "${selectedStory}" of "${selectedKind}".`,
-      description: stripIndents`
-         Seems like you are not returning a correct React element from the story.
-         Could you double check that?
-       `,
-    };
-    return renderError(error);
-  }
-
-  ReactDOM.render(element, rootEl);
-  return null;
+  return Promise.resolve(story(context)).then(element => {
+    if (!element) {
+      const error = {
+        title: `Expecting a React element from the story: "${selectedStory}" of "${selectedKind}".`,
+        description: stripIndents`
+          Did you forget to return the React element from the story?
+          Use "() => (<MyComp/>)" or "() => { return <MyComp/>; }" when defining the story.
+        `,
+      };
+      return renderError(error);
+    }
+
+    if (!isReactRenderable(element)) {
+      const error = {
+        title: `Expecting a valid React element from the story: "${selectedStory}" of "${selectedKind}".`,
+        description: stripIndents`
+           Seems like you are not returning a correct React element from the story.
+           Could you double check that?
+         `,
+      };
+      return renderError(error);
+    }
+
+    ReactDOM.render(element, rootEl);
+    return null;
+  });
 }
 
 export default function renderPreview({ reduxStore, storyStore }) {

docs/pages/basics/writing-stories/index.md

@@ -1,8 +1,8 @@
 ---
 id: 'writing-stories'
-title: 'Writing Stories'
+title: 'Writing Stories'		 
 ---
-
+ 
 Storybook is all about writing stories. Usually a story contains a single state of one of your components. That's like a visual test case.
 
 > Technically, a story is a function that returns a React element.
@@ -65,7 +65,7 @@ configure(loadStories, module);
 
 Here we use Webpack's [require.context](https://webpack.github.io/docs/context.html#require-context) to load modules dynamically. Have a look at the relevant Webpack [docs](https://webpack.github.io/docs/context.html#require-context) to learn more about how to use require.context.
 
-The **React Native** packager resolves all the imports at build-time, so it's not possible to load modules dynamically. If you don't want to import all your stories manually you can use [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically create the import statements for all of your stories. 
+The **React Native** packager resolves all the imports at build-time, so it's not possible to load modules dynamically. If you don't want to import all your stories manually you can use [react-native-storybook-loader](https://github.com/elderfo/react-native-storybook-loader) to automatically create the import statements for all of your stories.
 
 ## Using Decorators
 
@@ -127,6 +127,28 @@ storiesOf('My App/Buttons/Emoji', module)
   ));
 ```
 
+## Wrapping stories within promises
+
+You may have components that only render themselves correctly once some data has arrived from a back-end (e.g. a mock back-end used for testing). While these components could be added synchronously, where a spinner could be displayed until the data arrives, you may prefer to delay rendering the component until the data is actually available.
+
+If you happen to use the storyshot plug-in then the ability to wrap your story within a promise becomes even more useful, since otherwise your snapshots will only show the component's loading spinner rather than a component populated with data.
+
+In this next example the data to be rendered is coming from a mock GraphQL back-end, but will only be rendered once that back-end is ready:
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ApolloProvider } from 'react-apollo'
+import createClient from './mock-client';
+
+storiesOf('My component', module)
+  .add('default state', () => createClient().then(client => 
+    <ApolloProvider client={client}>
+      <SomeComponent />
+    </ApolloProvider>
+  ));
+```
+
 ## Run multiple storybooks
 
 You can run multiple storybooks for different kinds of stories (or components). To do that, you can create different NPM scripts to start different stories. See:
@@ -138,4 +160,4 @@ You can run multiple storybooks for different kinds of stories (or components).
      "start-storybook-for-app": "start-storybook -p 8001 -c .storybook-app"
    }
 }
-```
+```

examples/cra-kitchen-sink/src/stories/index.js

@@ -82,6 +82,9 @@ storiesOf('Button', module)
       </Button>
     </WithNotes>
   ))
+  .add('async render', () =>
+    Promise.resolve(<Button onClick={action('clicked')}>Async Button</Button>)
+  )
   .add('with knobs', () => {
     setOptions({ selectedAddonPanel: 'storybooks/storybook-addon-knobs' });
     const name = text('Name', 'Storyteller');

package.json

@@ -80,7 +80,7 @@
     "symlink-dir": "^1.1.0"
   },
   "engines": {
-    "node": "node"
+    "node": ">=8.0.0"
   },
   "collective": {
     "type": "opencollective",
@@ -117,4 +117,4 @@
       "other": "Other"
     }
   }
-}
+}

yarn.lock

@@ -501,14 +501,14 @@ autoprefixer@^6.3.1:
     postcss-value-parser "^3.2.3"
 
 autoprefixer@^7.1.1:
-  version "7.1.3"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.3.tgz#0e8d337976d6f13644db9f8813b4c42f3d1ccc34"
+  version "7.1.4"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.1.4.tgz#960847dbaa4016bc8e8e52ec891cbf8f1257a748"
   dependencies:
     browserslist "^2.4.0"
-    caniuse-lite "^1.0.30000718"
+    caniuse-lite "^1.0.30000726"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^6.0.10"
+    postcss "^6.0.11"
     postcss-value-parser "^3.2.3"
 
 aws-sign2@~0.6.0:
@@ -2282,7 +2282,7 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
   version "1.0.30000726"
   resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000726.tgz#9bb742f8d026a62df873bc03c06843d2255b60d7"
 
-caniuse-lite@^1.0.30000669, caniuse-lite@^1.0.30000718:
+caniuse-lite@^1.0.30000669, caniuse-lite@^1.0.30000718, caniuse-lite@^1.0.30000726:
   version "1.0.30000726"
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000726.tgz#966a753fa107a09d4131cf8b3d616723a06ccf7e"
 
@@ -3692,8 +3692,8 @@ ee-first@1.1.1:
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
 
 electron-to-chromium@^1.2.7:
-  version "1.3.20"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.20.tgz#2eedd5ccbae7ddc557f68ad1fce9c172e915e4e5"
+  version "1.3.21"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.21.tgz#a967ebdcfe8ed0083fc244d1894022a8e8113ea2"
 
 electron-to-chromium@^1.3.18:
   version "1.3.18"
@@ -4503,7 +4503,19 @@ fbjs-scripts@^0.7.0:
     semver "^5.1.0"
     through2 "^2.0.0"
 
-fbjs@^0.8.12, fbjs@^0.8.4, fbjs@^0.8.9, fbjs@~0.8.9:
+fbjs@^0.8.12, fbjs@^0.8.4, fbjs@~0.8.9:
+  version "0.8.15"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.15.tgz#4f0695fdfcc16c37c0b07facec8cb4c4091685b9"
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.9"
+
+fbjs@^0.8.9:
   version "0.8.14"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.14.tgz#d1dbe2be254c35a91e09f31f9cd50a40b2a0ed1c"
   dependencies:
@@ -4933,8 +4945,8 @@ git-semver-tags@^1.2.0, git-semver-tags@^1.2.1:
     semver "^5.0.1"
 
 git-up@^2.0.0:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/git-up/-/git-up-2.0.8.tgz#24be049c9f0b193481d2df4e016a16530a5f4ef4"
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/git-up/-/git-up-2.0.9.tgz#219bfd27c82daeead8495beb386dc18eae63636d"
   dependencies:
     is-ssh "^1.3.0"
     parse-url "^1.3.0"
@@ -7807,8 +7819,8 @@ netrc@^0.1.4:
   resolved "https://registry.yarnpkg.com/netrc/-/netrc-0.1.4.tgz#6be94fcaca8d77ade0a9670dc460914c94472444"
 
 no-case@^2.2.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.1.tgz#7aeba1c73a52184265554b7dc03baf720df80081"
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
   dependencies:
     lower-case "^1.1.1"
 
@@ -7829,13 +7841,20 @@ node-fetch@1.6.3:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
-node-fetch@^1.0.1, node-fetch@^1.3.3, node-fetch@^1.6.3:
+node-fetch@^1.0.1, node-fetch@^1.6.3:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.2.tgz#c54e9aac57e432875233525f3c891c4159ffefd7"
   dependencies:
     encoding "^0.1.11"
     is-stream "^1.0.1"
 
+node-fetch@^1.3.3:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-forge@0.6.33:
   version "0.6.33"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.6.33.tgz#463811879f573d45155ad6a9f43dc296e8e85ebc"
@@ -8468,8 +8487,8 @@ pause@0.1.0:
   resolved "https://registry.yarnpkg.com/pause/-/pause-0.1.0.tgz#ebc8a4a8619ff0b8a81ac1513c3434ff469fdb74"
 
 pbkdf2@^3.0.3:
-  version "3.0.13"
-  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.13.tgz#c37d295531e786b1da3e3eadc840426accb0ae25"
+  version "3.0.14"
+  resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.0.14.tgz#a35e13c64799b06ce15320f459c230e68e73bade"
   dependencies:
     create-hash "^1.1.2"
     create-hmac "^1.1.4"
@@ -8850,7 +8869,7 @@ postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0
     source-map "^0.5.6"
     supports-color "^3.2.3"
 
-postcss@^6.0.1, postcss@^6.0.10, postcss@^6.0.2, postcss@^6.x:
+postcss@^6.0.1, postcss@^6.0.11, postcss@^6.0.2, postcss@^6.x:
   version "6.0.11"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.11.tgz#f48db210b1d37a7f7ab6499b7a54982997ab6f72"
   dependencies:
@@ -8965,8 +8984,8 @@ proto-list@~1.2.1:
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
 
 protocols@^1.1.0, protocols@^1.4.0:
-  version "1.4.5"
-  resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.5.tgz#21de1f441c4ef7094408ed9f1c94f7a114b87557"
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/protocols/-/protocols-1.4.6.tgz#f8bb263ea1b5fd7a7604d26b8be39bd77678bf8a"
 
 proxy-addr@~1.1.5:
   version "1.1.5"
@@ -9122,13 +9141,14 @@ react-clone-referenced-element@^1.0.1:
   resolved "https://registry.yarnpkg.com/react-clone-referenced-element/-/react-clone-referenced-element-1.0.1.tgz#2bba8c69404c5e4a944398600bcc4c941f860682"
 
 react-color@^2.11.4:
-  version "2.13.5"
-  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.5.tgz#741cbfa2bfca1e86b08d13886051ea2017414043"
+  version "2.13.8"
+  resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.13.8.tgz#bcc58f79a722b9bfc37c402e68cd18f26970aee4"
   dependencies:
     lodash "^4.0.1"
     material-colors "^1.2.1"
+    prop-types "^15.5.10"
     reactcss "^1.2.0"
-    tinycolor2 "^1.1.2"
+    tinycolor2 "^1.4.1"
 
 react-datetime@^2.8.10:
   version "2.10.1"
@@ -9537,8 +9557,8 @@ react@^15.6.1:
     prop-types "^15.5.10"
 
 reactcss@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.2.tgz#41b0ef43e01d54880357c34b11ac1531209350ef"
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"
   dependencies:
     lodash "^4.0.1"
 
@@ -11224,7 +11244,7 @@ timers-browserify@^2.0.2:
   dependencies:
     setimmediate "^1.0.4"
 
-tinycolor2@^1.1.2:
+tinycolor2@^1.4.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
 
@@ -11932,8 +11952,8 @@ webpack-dev-server@^2.4.5:
     yargs "^6.0.0"
 
 webpack-hot-middleware@^2.18.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.19.0.tgz#7ab2607159496ff3f3314dda491cd96d8f2d5124"
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/webpack-hot-middleware/-/webpack-hot-middleware-2.19.1.tgz#5db32c31c955c1ead114d37c7519ea554da0d405"
   dependencies:
     ansi-html "0.0.7"
     html-entities "^1.2.0"