Merge branch 'master' into update-addon-info-design

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:
 

addons/graphql/src/preview.js

@@ -21,7 +21,7 @@ function getDefautlFetcher(url) {
 function reIndentQuery(query) {
   const lines = query.split('\n');
   const spaces = lines[lines.length - 1].length - 1;
-  return lines.map((l, i) => (i === 0 ? l : l.slice(spaces)).join('\n'));
+  return lines.map((l, i) => (i === 0 ? l : l.slice(spaces))).join('\n');
 }
 
 export function setupGraphiQL(config) {

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,8 +27,8 @@ 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:
 
@@ -41,6 +41,6 @@ If you are using Typescript, make sure you have the type definitions installed v
 
 ## 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/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.html.js

@@ -28,7 +28,7 @@ const managerUrlsFromAssets = assets => {
 };
 
 export default function(data) {
-  const { assets, publicPath } = data;
+  const { assets, publicPath, headHtml } = data;
 
   const managerUrls = managerUrlsFromAssets(assets);
 
@@ -70,6 +70,7 @@ export default function(data) {
             background-color: #eee
           }
         </style>
+        ${headHtml}
       </head>
       <body style="margin: 0;">
         <div id="root"></div>

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

@@ -6,7 +6,14 @@ import getBaseConfig from './config/webpack.config';
 import loadConfig from './config';
 import getIndexHtml from './index.html';
 import getIframeHtml from './iframe.html';
-import { getHeadHtml, getMiddleware } from './utils';
+import { getHeadHtml, getManagerHeadHtml, 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`
@@ -29,19 +36,34 @@ 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) => {
+      const headHtml = getManagerHeadHtml(configDir)
+      res.send(getIndexHtml({ publicPath, headHtml }));
+    });
+
+    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;

app/react/src/server/utils.js

@@ -1,20 +1,40 @@
 import path from 'path';
 import fs from 'fs';
+import deprecate from 'util-deprecate';
+
+const fallbackHeadUsage = deprecate(
+  () => {},
+  'Usage of head.html has been deprecated. Please rename head.html to preview-head.html'
+);
 
 export function parseList(str) {
   return str.split(',');
 }
 
 export function getHeadHtml(configDirPath) {
-  const headHtmlPath = path.resolve(configDirPath, 'head.html');
+  const headHtmlPath = path.resolve(configDirPath, 'preview-head.html');
+  const fallbackHtmlPath = path.resolve(configDirPath, 'head.html');
   let headHtml = '';
   if (fs.existsSync(headHtmlPath)) {
     headHtml = fs.readFileSync(headHtmlPath, 'utf8');
+  } else if (fs.existsSync(fallbackHtmlPath)) {
+    headHtml = fs.readFileSync(fallbackHtmlPath, 'utf8');
+    fallbackHeadUsage();
   }
 
   return headHtml;
 }
 
+export function getManagerHeadHtml(configDirPath) {
+  const scriptPath = path.resolve(configDirPath, 'manager-head.html');
+  let scriptHtml = '';
+  if (fs.existsSync(scriptPath)) {
+    scriptHtml = fs.readFileSync(scriptPath, 'utf8');
+  }
+
+  return scriptHtml;
+}
+
 export function getEnvConfig(program, configEnv) {
   Object.keys(configEnv).forEach(fieldName => {
     const envVarName = configEnv[fieldName];

docs/package.json

@@ -55,7 +55,8 @@
     "sitemap": "^1.12.0",
     "typography": "^0.15.8",
     "typography-plugin-code": "^0.15.9",
-    "underscore.string": "^3.2.2"
+    "underscore.string": "^3.2.2",
+    "webpack": "^1.15.0"
   },
   "private": true
 }

docs/pages/_users.yml

@@ -26,7 +26,8 @@ squarespace:
 coursera:
   logo: ./logos/coursera.svg
   title: Coursera
-  site: https://coursera.org
+  description: Coursera UI component library
+  site: https://building.coursera.org/ui/
 # buffer:
 #   logo: ./logos/buffer.svg
 #   title: Buffer Components

docs/pages/configurations/add-custom-head-tags/index.md

@@ -5,7 +5,7 @@ title: 'Add Custom Head Tags'
 
 Sometimes, you may need to add different tags to the HTML head. This is useful for adding web fonts or some external scripts.
 
-You can do this very easily. Simply create a file called `head.html` inside the Storybook config directory and add tags like this:
+You can do this very easily. Simply create a file called `preview-head.html` inside the Storybook config directory and add tags like this:
 
 ```html
 <script src="https://use.typekit.net/xxxyyy.js"></script>
@@ -17,3 +17,14 @@ That's it. Storybook will inject these tags.
 > **Important**
 >
 > Storybook will inject these tags to the iframe where your components are rendered. So, these won’t be loaded into the main Storybook UI.
+
+## Add Tags or Scripts to the Main UI.
+
+Additionally, you may need to add different scripts or tags to the main Storybook UI. This might arise when your custom Webpack configuration outputs or requires additional chunks.
+
+Create a file called `manager-head.html` inside of the Storybook config directory and add any tags you require.
+
+> **Important**
+>
+> Your scripts will run before Storybook's React UI. Also be aware, that this is an uncommon scenario and could potentially break Storybook's UI. So use with caution.  
+

docs/pages/examples/_examples.yml

@@ -25,6 +25,11 @@ algolia:
   description: Lightning-fast, hyper-configurable search.
   source: https://github.com/algolia/react-instantsearch/
   demo: https://community.algolia.com/react-instantsearch/storybook/
+coursera:
+  thumbnail: ./thumbnails/coursera-ui.png
+  title: Coursera
+  description: Coursera UI component library
+  demo: https://building.coursera.org/ui/
 necolas:
   thumbnail: ./thumbnails/reactnativeweb.jpg
   title: React Native Web

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/jest.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  preset: 'react-native',
+  globals: {
+    __DEV__: true,
+  },
+};