Merge branch 'master' into fix/graphql

.travis.yml

@@ -12,6 +12,7 @@ after_success: "./scripts/travis/after_success.sh"
 script:
 - npm run bootstrap
 - npm run bootstrap:test-cra
+- npm run bootstrap:react-native-vanilla
 - npm run bootstrap:docs
 - npm run lint
 - npm run test -- --coverage

HISTORY.md

@@ -1,6 +1,6 @@
 ## v.Next
 
--   Deprecated `{ linkTo, action }` as built-in addons: <https://github.com/storybooks/storybook/issues/1017>. From 3.0 use them as you would [any other addon](https://storybook.js.org/docs/react-storybook/addons/using-addons/).
+-   Deprecated `{ linkTo, action }` as built-in addons: <https://github.com/storybooks/storybook/issues/1017>. From 3.0 use them as you would [any other addon](https://storybook.js.org/addons/using-addons/).
 
 Before:
 

app/react-native/src/server/addons.js

@@ -4,5 +4,5 @@ import '@storybook/addon-links/register';
 
 deprecate(
   () => {},
-  '@storybook/react-native/addons is deprecated. See https://storybook.js.org/docs/react-storybook/addons/using-addons/'
+  '@storybook/react-native/addons is deprecated. See https://storybook.js.org/addons/using-addons/'
 )();

app/react/README.md

@@ -27,16 +27,20 @@ For more information visit: [storybook.js.org](https://storybook.js.org)
 
 * * *
 
-Storybook also comes with a lot of [addons](https://storybook.js.org/docs/react-storybook/addons/introduction) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/react-storybook/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
+Storybook also comes with a lot of [addons](https://storybook.js.org/addons/introduction) and a great API to customize as you wish.
+You can also build a [static version](https://storybook.js.org/basics/exporting-storybook) of your storybook and deploy it anywhere you want.
 
 Here are some featured storybooks that you can reference to see how Storybook works:
 
 -   [Demo of React Dates](http://airbnb.io/react-dates/) - [source](https://github.com/airbnb/react-dates)
 -   [Demo of React Native Web](http://necolas.github.io/react-native-web/storybook/) - [source](https://github.com/necolas/react-native-web)
 
+## Typescript
+
+If you are using Typescript, make sure you have the type definitions installed via `yarn add @types/node @types/react @types/storybook__react --dev`.
+
 ## Docs
 
--   [Basics](https://storybook.js.org/docs/react-storybook/basics/introduction)
--   [Configurations](https://storybook.js.org/docs/react-storybook/configurations/default-config)
--   [Addons](https://storybook.js.org/docs/react-storybook/addons/introduction)
+-   [Basics](https://storybook.js.org/basics/introduction)
+-   [Configurations](https://storybook.js.org/configurations/default-config)
+-   [Addons](https://storybook.js.org/addons/introduction)

app/react/addons.js

@@ -4,5 +4,5 @@ import '@storybook/addon-links/register';
 
 deprecate(
   () => {},
-  '@storybook/react/addons is deprecated. See https://storybook.js.org/docs/react-storybook/addons/using-addons/'
+  '@storybook/react/addons is deprecated. See https://storybook.js.org/addons/using-addons/'
 )();

app/react/demo/src/stories/Welcome.js

@@ -99,7 +99,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://storybook.js.org/docs/react-storybook/basics/writing-stories"
+            href="https://storybook.js.org/basics/writing-stories"
             target="_blank"
           >
             Writing Stories

app/react/package.json

@@ -8,7 +8,6 @@
   },
   "license": "MIT",
   "main": "dist/client/index.js",
-  "typings": "./config/storybook.d.ts",
   "bin": {
     "build-storybook": "./dist/server/build.js",
     "start-storybook": "./dist/server/index.js",
@@ -32,7 +31,7 @@
     "autoprefixer": "^7.1.1",
     "babel-core": "^6.24.1",
     "babel-loader": "^7.0.0",
-    "babel-plugin-react-docgen": "^1.4.2",
+    "babel-plugin-react-docgen": "^1.5.0",
     "babel-preset-es2015": "^6.24.1",
     "babel-preset-es2016": "^6.24.1",
     "babel-preset-react": "^6.24.1",

app/react/src/server/config/webpack.config.js

@@ -26,6 +26,7 @@ export default function() {
       new webpack.HotModuleReplacementPlugin(),
       new CaseSensitivePathsPlugin(),
       new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+      new webpack.ProgressPlugin(),
     ],
     module: {
       rules: [

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

@@ -8,37 +8,47 @@ import url from 'url';
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css',
 //   'static/preview.9adbb5ef965106be1cc3.bundle.js.map',
 //   'preview.0d2d3d845f78399fd6d5e859daa152a9.css.map' ]
-const previewUrlsFromAssets = assets => {
+const urlsFromAssets = assets => {
   if (!assets) {
     return {
-      js: 'static/preview.bundle.js',
+      js: ['static/preview.bundle.js'],
+      css: [],
     };
   }
 
-  if (typeof assets.preview === 'string') {
-    return {
-      js: assets.preview,
-    };
-  }
-
-  return {
-    js: assets.preview.find(filename => filename.match(/\.js$/)),
-    css: assets.preview.find(filename => filename.match(/\.css$/)),
+  const urls = {
+    js: [],
+    css: [],
   };
+
+  const re = /.+\.(\w+)$/;
+  Object.keys(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);
+      }
+    });
+
+  return urls;
 };
 
 export default function(data) {
   const { assets, headHtml, publicPath } = data;
 
-  const previewUrls = previewUrlsFromAssets(assets);
+  const urls = urlsFromAssets(assets);
 
-  let previewCssTag = '';
-  if (previewUrls.css) {
-    previewCssTag = `<link rel='stylesheet' type='text/css' href='${url.resolve(
-      publicPath,
-      previewUrls.css
-    )}'>`;
-  }
+  const cssTags = urls.css
+    .map(u => `<link rel='stylesheet' type='text/css' href='${url.resolve(publicPath, u)}'>`)
+    .join('\n');
+  const scriptTags = urls.js
+    .map(u => `<script src="${url.resolve(publicPath, u)}"></script>`)
+    .join('\n');
 
   return `
     <!DOCTYPE html>
@@ -53,12 +63,12 @@ export default function(data) {
         </script>
         <title>Storybook</title>
         ${headHtml}
-        ${previewCssTag}
+        ${cssTags}
       </head>
       <body>
         <div id="root"></div>
         <div id="error-display"></div>
-        <script src="${url.resolve(publicPath, previewUrls.js)}"></script>
+        ${scriptTags}
       </body>
     </html>
   `;

app/react/src/server/index.js

@@ -8,7 +8,7 @@ import path from 'path';
 import fs from 'fs';
 import chalk from 'chalk';
 import shelljs from 'shelljs';
-import storybook from './middleware';
+import storybook, { webpackValid } from './middleware';
 import packageJson from '../../package.json';
 import { parseList, getEnvConfig } from './utils';
 
@@ -135,11 +135,23 @@ process.env.STORYBOOK_GIT_BRANCH =
 // `getBaseConfig` function which is called inside the middleware
 app.use(storybook(configDir));
 
+let serverResolve = () => {};
+let serverReject = () => {};
+const serverListening = new Promise((resolve, reject) => {
+  serverResolve = resolve;
+  serverReject = reject;
+});
 server.listen(...listenAddr, error => {
   if (error) {
-    throw error;
+    serverReject(error);
   } else {
-    const address = `http://${program.host || 'localhost'}:${program.port}/`;
-    logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
+    serverResolve();
   }
 });
+
+Promise.all([webpackValid, serverListening])
+  .then(() => {
+    const address = `http://${program.host || 'localhost'}:${program.port}/`;
+    logger.info(`Storybook started on => ${chalk.cyan(address)}\n`);
+  })
+  .catch(error => logger.error(error));

app/react/src/server/middleware.js

@@ -8,6 +8,13 @@ import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
 import { getHeadHtml, getMiddleware } from './utils';
 
+let webpackResolve = () => {};
+let webpackReject = () => {};
+export const webpackValid = new Promise((resolve, reject) => {
+  webpackResolve = resolve;
+  webpackReject = reject;
+});
+
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
@@ -29,19 +36,33 @@ export default function(configDir) {
   };
 
   const router = new Router();
-  router.use(webpackDevMiddleware(compiler, devMiddlewareOptions));
+  const webpackDevMiddlewareInstance = webpackDevMiddleware(compiler, devMiddlewareOptions);
+  router.use(webpackDevMiddlewareInstance);
   router.use(webpackHotMiddleware(compiler));
 
   // custom middleware
   middlewareFn(router);
 
-  router.get('/', (req, res) => {
-    res.send(getIndexHtml({ publicPath }));
-  });
+  webpackDevMiddlewareInstance.waitUntilValid(stats => {
+    const data = {
+      publicPath: config.output.publicPath,
+      assets: stats.toJson().assetsByChunkName,
+    };
+
+    router.get('/', (req, res) => {
+      res.send(getIndexHtml({ publicPath }));
+    });
+
+    router.get('/iframe.html', (req, res) => {
+      const headHtml = getHeadHtml(configDir);
+      res.send(getIframeHtml({ ...data, headHtml, publicPath }));
+    });
 
-  router.get('/iframe.html', (req, res) => {
-    const headHtml = getHeadHtml(configDir);
-    res.send(getIframeHtml({ headHtml, publicPath }));
+    if (stats.toJson().errors.length) {
+      webpackReject(stats);
+    } else {
+      webpackResolve(stats);
+    }
   });
 
   return router;

examples/cra-storybook/package.json

@@ -19,11 +19,11 @@
     "uuid": "^3.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "3.0.0",
-    "@storybook/addon-links": "3.0.0",
-    "@storybook/addon-events": "3.0.1",
-    "@storybook/addons": "3.0.0",
-    "@storybook/react": "3.0.0",
+    "@storybook/addon-actions": "^3.0.0",
+    "@storybook/addon-links": "^3.0.0",
+    "@storybook/addon-events": "^3.0.0",
+    "@storybook/addons": "^3.0.0",
+    "@storybook/react": "^3.0.0",
     "react-scripts": "1.0.1"
   },
   "private": true

examples/cra-storybook/src/stories/Welcome.js

@@ -94,7 +94,7 @@ export default class Welcome extends React.Component {
           {' '}
           <a
             style={styles.link}
-            href="https://storybook.js.org/docs/react-storybook/basics/writing-stories"
+            href="https://storybook.js.org/basics/writing-stories"
             target="_blank"
             rel="noopener noreferrer"
           >

examples/react-native-vanilla/.babelrc

@@ -0,0 +1,3 @@
+{
+  "presets": ["react-native"]
+}

examples/react-native-vanilla/.buckconfig

@@ -0,0 +1,6 @@
+
+[android]
+  target = Google Inc.:Google APIs:23
+
+[maven_repositories]
+  central = https://repo1.maven.org/maven2

examples/react-native-vanilla/.flowconfig

@@ -0,0 +1,47 @@
+[ignore]
+; We fork some components by platform
+.*/*[.]android.js
+
+; Ignore "BUCK" generated dirs
+<PROJECT_ROOT>/\.buckd/
+
+; Ignore unexpected extra "@providesModule"
+.*/node_modules/.*/node_modules/fbjs/.*
+
+; Ignore duplicate module providers
+; For RN Apps installed via npm, "Libraries" folder is inside
+; "node_modules/react-native" but in the source repo it is in the root
+.*/Libraries/react-native/React.js
+.*/Libraries/react-native/ReactNative.js
+
+[include]
+
+[libs]
+node_modules/react-native/Libraries/react-native/react-native-interface.js
+node_modules/react-native/flow
+flow/
+
+[options]
+emoji=true
+
+module.system=haste
+
+experimental.strict_type_args=true
+
+munge_underscores=true
+
+module.name_mapper='^[./a-zA-Z0-9$_-]+\.\(bmp\|gif\|jpg\|jpeg\|png\|psd\|svg\|webp\|m4v\|mov\|mp4\|mpeg\|mpg\|webm\|aac\|aiff\|caf\|m4a\|mp3\|wav\|html\|pdf\)$' -> 'RelativeImageStub'
+
+suppress_type=$FlowIssue
+suppress_type=$FlowFixMe
+suppress_type=$FixMe
+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixMe\\($\\|[^(]\\|(\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)
+suppress_comment=\\(.\\|\n\\)*\\$FlowIssue\\((\\(>=0\\.\\(4[0-2]\\|[1-3][0-9]\\|[0-9]\\).[0-9]\\)? *\\(site=[a-z,_]*react_native[a-z,_]*\\)?)\\)?:? #[0-9]+
+suppress_comment=\\(.\\|\n\\)*\\$FlowFixedInNextDeploy
+suppress_comment=\\(.\\|\n\\)*\\$FlowExpectedError
+
+unsafe.enable_getters_and_setters=true
+
+[version]
+^0.42.0

examples/react-native-vanilla/.gitattributes

@@ -0,0 +1 @@
+*.pbxproj -text