Merge branch 'master' into ndelangen/add-dirname

addons/notes/README.md

@@ -41,7 +41,7 @@ import { withNotes } from '@storybook/addon-notes';
 import Component from './Component';
 
 storiesOf('Component', module)
-  .add('with some emoji', withNotes('A very simple component')(() => </Component>>));
+  .add('with some emoji', withNotes('A very simple component')(() => </Component>));
 ```
 
 #### Using Markdown

app/angular/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 import loadTsConfig from './ts_config';
 import {
@@ -47,22 +48,28 @@ export default function(configType, baseConfig, configDir) {
     logger.info('=> Loading angular-cli config.');
   }
 
+  const defaultConfig = applyAngularCliWebpackConfig(
+    createDefaultWebpackConfig(config),
+    cliWebpackConfigOptions
+  );
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "angular-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return applyAngularCliWebpackConfig(customConfig(config), cliWebpackConfigOptions);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(applyAngularCliWebpackConfig(config, cliWebpackConfigOptions), configType);
+    return customConfig(
+      applyAngularCliWebpackConfig(config, cliWebpackConfigOptions),
+      configType,
+      defaultConfig
+    );
   }
   logger.info('=> Loading custom webpack config (extending mode).');
 

app/angular/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/angular/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/polymer/src/server/config.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // `baseConfig` is a webpack configuration bundled with storybook.
@@ -41,22 +42,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "polymer-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

app/polymer/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/polymer/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

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

@@ -2,6 +2,7 @@ import fs from 'fs';
 import path from 'path';
 import JSON5 from 'json5';
 import findCacheDir from 'find-cache-dir';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 
 // avoid ESLint errors
 const logger = console;
@@ -80,13 +81,13 @@ export default function(configType, baseConfig, projectDir, configDir) {
         ? path.resolve(babelConfigDir, babelConfig.extends)
         : path.resolve(babelConfig.extends);
     }
-    config.module.loaders[0].query = babelConfig;
+    config.module.rules[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({
+  config.module.rules[0].query.cacheDirectory = findCacheDir({
     name: 'react-storybook',
   });
 
@@ -101,19 +102,21 @@ export default function(configType, baseConfig, projectDir, configDir) {
     config.entry.manager.unshift(storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
-  let customConfigPath = path.resolve(configDir, 'webpack.config.js');
+  const customConfigPath = path.resolve(configDir, 'webpack.config.js');
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "Create React App".');
-    customConfigPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
+    return defaultConfig;
   }
 
   const customConfig = require(customConfigPath); // eslint-disable-line
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
 
   logger.info('=> Loading custom webpack config.');
@@ -129,9 +132,9 @@ export default function(configType, baseConfig, projectDir, configDir) {
     plugins: [...config.plugins, ...(customConfig.plugins || [])],
     module: {
       ...config.module,
-      // We need to use our and custom loaders.
+      // We need to use our and custom rules.
       ...customConfig.module,
-      loaders: [...config.module.loaders, ...(customConfig.module.loaders || [])],
+      rules: [...config.module.rules, ...(customConfig.module.rules || [])],
     },
   };
 }

app/react-native/src/server/config/defaults/webpack.config.js

@@ -1,63 +1,7 @@
-import autoprefixer from 'autoprefixer';
-import { includePaths } from '../utils';
+import deprecate from 'util-deprecate';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 
-// Add a default custom config which is similar to what React Create App does.
-module.exports = storybookBaseConfig => {
-  const newConfig = { ...storybookBaseConfig };
-
-  newConfig.module.loaders = [
-    ...newConfig.module.loaders,
-    {
-      test: /\.css?$/,
-      include: includePaths,
-      use: [
-        require.resolve('style-loader'),
-        require.resolve('css-loader'),
-        {
-          loader: require.resolve('postcss-loader'),
-          options: {
-            plugins: () => [
-              autoprefixer({
-                browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
-              }),
-            ],
-          },
-        },
-      ],
-    },
-    {
-      test: /\.json$/,
-      include: includePaths,
-      loader: require.resolve('json-loader'),
-    },
-    {
-      test: /\.(jpg|png|gif|eot|svg|ttf|woff|woff2)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('file-loader'),
-      query: {
-        name: 'static/media/[name].[hash:8].[ext]',
-      },
-    },
-    {
-      test: /\.(mp4|webm)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('url-loader'),
-      query: {
-        limit: 10000,
-        name: 'static/media/[name].[hash:8].[ext]',
-      },
-    },
-  ];
-
-  newConfig.resolve = {
-    ...newConfig.resolve,
-    alias: {
-      ...((newConfig.resolve && newConfig.resolve.alias) || {}),
-      // This is to support NPM2
-      'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
-    },
-  };
-
-  // Return the altered config
-  return newConfig;
-};
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/react-native/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

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

@@ -27,7 +27,7 @@ const getConfig = options => ({
     new CaseSensitivePathsPlugin(),
   ],
   module: {
-    loaders: [
+    rules: [
       {
         test: /\.jsx?$/,
         loader: require.resolve('babel-loader'),

app/react-native/src/server/config/webpack.config.prod.js

@@ -47,7 +47,7 @@ const getConfig = options => {
       }),
     ],
     module: {
-      loaders: [
+      rules: [
         {
           test: /\.jsx?$/,
           loader: require.resolve('babel-loader'),

app/react/src/server/config.js

@@ -3,6 +3,7 @@ import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
 import { logger } from '@storybook/node-logger';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // `baseConfig` is a webpack configuration bundled with storybook.
@@ -41,22 +42,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "Create React App".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

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

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/react/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

app/vue/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import findCacheDir from 'find-cache-dir';
+import { createDefaultWebpackConfig } from '@storybook/core/server';
 import loadBabelConfig from './babel_config';
 
 // avoid ESLint errors
@@ -43,22 +44,21 @@ export default function(configType, baseConfig, configDir) {
     config.entry.manager.splice(1, 0, storybookDefaultAddonsPath);
   }
 
+  const defaultConfig = createDefaultWebpackConfig(config);
+
   // Check whether user has a custom webpack config file and
   // return the (extended) base configuration if it's not available.
   const customConfigPath = path.resolve(configDir, 'webpack.config.js');
 
   if (!fs.existsSync(customConfigPath)) {
     logger.info('=> Using default webpack setup based on "vue-cli".');
-    const configPath = path.resolve(__dirname, './config/defaults/webpack.config.js');
-    const customConfig = require(configPath);
-
-    return customConfig(config);
+    return defaultConfig;
   }
   const customConfig = require(customConfigPath);
 
   if (typeof customConfig === 'function') {
     logger.info('=> Loading custom webpack config (full-control mode).');
-    return customConfig(config, configType);
+    return customConfig(config, configType, defaultConfig);
   }
   logger.info('=> Loading custom webpack config (extending mode).');
   return {

app/vue/src/server/config/defaults/webpack.config.js

@@ -1,5 +1,7 @@
+import deprecate from 'util-deprecate';
 import { createDefaultWebpackConfig } from '@storybook/core/server';
-import { includePaths } from '../utils';
 
-module.exports = storybookBaseConfig =>
-  createDefaultWebpackConfig(storybookBaseConfig, includePaths);
+module.exports = deprecate(
+  createDefaultWebpackConfig,
+  "importing default webpack config generator from '@storybook/vue/dist/server/config/defaults/webpack.config.js' is deprecated. Use third argument of your exported function instead. See https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode--default"
+);

docs/package.json

@@ -18,10 +18,10 @@
     "storybook": "start-storybook -p 9009 -s src/pages"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.9",
-    "@storybook/addon-links": "^3.3.9",
-    "@storybook/addons": "^3.3.9",
-    "@storybook/react": "^3.3.9",
+    "@storybook/addon-actions": "^3.3.10",
+    "@storybook/addon-links": "^3.3.10",
+    "@storybook/addons": "^3.3.10",
+    "@storybook/react": "^3.3.10",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^6.4.1",
@@ -31,14 +31,14 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.158",
+    "gatsby": "^1.9.164",
     "gatsby-link": "^1.6.34",
     "gatsby-plugin-sharp": "^1.6.25",
     "gatsby-remark-autolink-headers": "^1.4.11",
     "gatsby-remark-copy-linked-files": "^1.5.25",
-    "gatsby-remark-images": "^1.5.37",
+    "gatsby-remark-images": "^1.5.39",
     "gatsby-remark-smartypants": "^1.4.10",
-    "gatsby-source-filesystem": "^1.5.11",
+    "gatsby-source-filesystem": "^1.5.14",
     "gatsby-transformer-remark": "^1.7.28",
     "gh-pages": "^1.1.0",
     "global": "^4.3.2",

docs/src/pages/addons/using-addons/index.md

@@ -12,7 +12,7 @@ We are going to use an addon called [Notes](https://github.com/storybooks/storyb
 First, we need to install the addons:
 
 ```sh
-npm i --save-dev @storybook-addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes
+npm i --save-dev @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes
 ```
 
 Then, we need to create a file called `addons.js` inside the storybook config directory and add the following content:

docs/src/pages/addons/writing-addons/index.md

@@ -100,7 +100,7 @@ export class WithNotes extends React.Component {
 
 In this case, our component can access something called the channel. It lets us communicate with the panel (where we display notes). It has a NodeJS [EventEmitter](https://nodejs.org/api/events.html) compatible API.
 
-In the above case, it will emit the notes text to the channel, so our panel can listen to it.
+In the above case, it will emit the notes' text to the channel, so our panel can listen to it.
 
 Then add the following code to the register.js.
 
@@ -158,13 +158,13 @@ You can learn more about the complete API [here](/addons/api).
 
 ## Packaging
 
-You can package this addon into a NPM module very easily. Have a look at this [package](https://github.com/storybooks/storybook/tree/master/addons/notes).
+You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybooks/storybook/tree/master/addons/notes).
 
-In addition to moving the above code to an NPM module, we've set `react` and `@storybook/addons` as peer dependencies.
+In addition to moving the above code to a NPM module, we've set `react` and `@storybook/addons` as peer dependencies.
 
 ### Local Development
 
-When you are developing your addon as a package, you can't use `npm link` to add it your project. Instead add your package as a local dependency into your `package.json` as shown below:
+When you are developing your addon as a package, you can't use `npm link` to add it to your project. Instead add your package as a local dependency into your `package.json` as shown below:
 
 ```json
 {

docs/src/pages/basics/guide-vue/index.md

@@ -86,7 +86,7 @@ function loadStories() {
 configure(loadStories, module);
 ```
 
-This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded you Storybook stories defined in `../stories/index.js`.
+This example registered your custom `Button.vue` component, installed the Vuex plugin, and loaded your Storybook stories defined in `../stories/index.js`.
 
 All custom components and Vue plugins should be registered before calling `configure()`.
 

docs/src/pages/configurations/custom-webpack-config/index.md

@@ -95,28 +95,21 @@ You may want to keep Storybook's [default config](/configurations/default-config
 If so, this is how you do it using the Full Control Mode.
 Add following content to the `webpack.config.js` in your Storybook config directory.
 
-> We plan to expose our default webpack-config as it's own package in the future.
-
 ```js
 const path = require('path');
 
-// load the default config generator.
-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-
-module.exports = (baseConfig, env) => {
-  const config = genDefaultConfig(baseConfig, env);
-
-  // Extend it as you need.
+module.exports = (baseConfig, env, defaultConfig) => {
+  // Extend defaultConfig as you need.
 
   // For example, add typescript loader:
-  config.module.rules.push({
+  defaultConfig.module.rules.push({
     test: /\.(ts|tsx)$/,
     include: path.resolve(__dirname, '../src'),
     loader: require.resolve('ts-loader')
   });
-  config.resolve.extensions.push('.ts', '.tsx');
+  defaultConfig.resolve.extensions.push('.ts', '.tsx');
 
-  return config;
+  return defaultConfig;
 };
 ```
 

docs/yarn.lock

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@storybook/addon-actions@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.9.tgz#2b191548928467fe1dd26dcba606feafbf182d36"
+"@storybook/addon-actions@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.10.tgz#f3e4b538d8260364c55a3ba1e301a2fab9d8d3f2"
   dependencies:
     deep-equal "^1.0.1"
     global "^4.3.2"
@@ -13,37 +13,37 @@
     react-inspector "^2.2.2"
     uuid "^3.1.0"
 
-"@storybook/addon-links@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.9.tgz#13781ac1c21ddfe347ece6ceab8518c8d1f98a0f"
+"@storybook/addon-links@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.10.tgz#4e6c1a0b0bf5b18101bc5001b858b33202ae8209"
   dependencies:
-    "@storybook/components" "^3.3.9"
+    "@storybook/components" "^3.3.10"
     global "^4.3.2"
     prop-types "^15.5.10"
 
-"@storybook/addons@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.9.tgz#356ce7f1de892d88ca4bc5f686d06e07dd8c2108"
+"@storybook/addons@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.10.tgz#8753007d872013d2376ba71b14396eef3159673b"
 
-"@storybook/channel-postmessage@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.9.tgz#a59220f9ecbdbe05deac6ac4339715aa587d41dd"
+"@storybook/channel-postmessage@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.10.tgz#4f22b5a665d3c95eb61cf41bbb06872009ace7b5"
   dependencies:
-    "@storybook/channels" "^3.3.9"
+    "@storybook/channels" "^3.3.10"
     global "^4.3.2"
     json-stringify-safe "^5.0.1"
 
-"@storybook/channels@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.9.tgz#3116a6c5e441fd057558870b254c34fe3a9fbfb0"
+"@storybook/channels@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.10.tgz#0b15d47c2ea0cb1c7b735955d74e9d3ca99cdc42"
 
-"@storybook/client-logger@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.9.tgz#a73e382c383c1bfa6d2ff7fa5cae77cd09efa524"
+"@storybook/client-logger@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.10.tgz#6f8b85c3dfad229794fee88f930df59b163ee144"
 
-"@storybook/components@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.9.tgz#1f7ced8b10a0e405c1d3fd6fe7ef7b8957ddf89f"
+"@storybook/components@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.10.tgz#f213a129ed49de33cdaf116da2c2b662b8eb3ea0"
   dependencies:
     glamor "^2.20.40"
     glamorous "^4.11.2"
@@ -57,9 +57,9 @@
     "@storybook/react-simple-di" "^1.2.1"
     babel-runtime "6.x.x"
 
-"@storybook/node-logger@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.9.tgz#c070ef5ced91b1b1aa7bb3e402855db277ed426b"
+"@storybook/node-logger@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.10.tgz#d9c09a622713ec4726cdd292e798aa98c0503c15"
   dependencies:
     chalk "^2.3.0"
     npmlog "^4.1.2"
@@ -87,17 +87,17 @@
   dependencies:
     babel-runtime "^6.5.0"
 
-"@storybook/react@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.9.tgz#2bd203a5b3c5e5fad4a756ca41d78e62cd49b160"
+"@storybook/react@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.10.tgz#a55f8f804f3f01d76f1b7e8675e818ee4c107324"
   dependencies:
-    "@storybook/addon-actions" "^3.3.9"
-    "@storybook/addon-links" "^3.3.9"
-    "@storybook/addons" "^3.3.9"
-    "@storybook/channel-postmessage" "^3.3.9"
-    "@storybook/client-logger" "^3.3.9"
-    "@storybook/node-logger" "^3.3.9"
-    "@storybook/ui" "^3.3.9"
+    "@storybook/addon-actions" "^3.3.10"
+    "@storybook/addon-links" "^3.3.10"
+    "@storybook/addons" "^3.3.10"
+    "@storybook/channel-postmessage" "^3.3.10"
+    "@storybook/client-logger" "^3.3.10"
+    "@storybook/node-logger" "^3.3.10"
+    "@storybook/ui" "^3.3.10"
     airbnb-js-shims "^1.4.0"
     autoprefixer "^7.2.3"
     babel-loader "^7.1.2"
@@ -149,11 +149,11 @@
     webpack-dev-middleware "^1.12.2"
     webpack-hot-middleware "^2.21.0"
 
-"@storybook/ui@^3.3.9":
-  version "3.3.9"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.9.tgz#abb1df557131b174bf3c0879863a309ee85de8e3"
+"@storybook/ui@^3.3.10":
+  version "3.3.10"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.10.tgz#99a83b988b01cde1df61b87a58227a50ed196dd1"
   dependencies:
-    "@storybook/components" "^3.3.9"
+    "@storybook/components" "^3.3.10"
     "@storybook/mantra-core" "^1.7.2"
     "@storybook/react-komposer" "^2.0.3"
     babel-runtime "^6.26.0"
@@ -4409,9 +4409,9 @@ gatsby-remark-copy-linked-files@^1.5.25:
     path-is-inside "^1.0.2"
     unist-util-visit "^1.1.1"
 
-gatsby-remark-images@^1.5.37:
-  version "1.5.37"
-  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.37.tgz#8a8b872bac4bdac0af828b8e4e3ba4eccf5443eb"
+gatsby-remark-images@^1.5.39:
+  version "1.5.39"
+  resolved "https://registry.yarnpkg.com/gatsby-remark-images/-/gatsby-remark-images-1.5.39.tgz#afd2f8493af625ea1dcc10977af03769aa4c5d97"
   dependencies:
     babel-runtime "^6.26.0"
     cheerio "^1.0.0-rc.2"
@@ -4430,9 +4430,9 @@ gatsby-remark-smartypants@^1.4.10:
     retext-smartypants "^2.0.0"
     unist-util-visit "^1.1.1"
 
-gatsby-source-filesystem@^1.5.11:
-  version "1.5.11"
-  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.11.tgz#bc2f9bdcc71212df42d45ae0b8adc7e37540b599"
+gatsby-source-filesystem@^1.5.14:
+  version "1.5.14"
+  resolved "https://registry.yarnpkg.com/gatsby-source-filesystem/-/gatsby-source-filesystem-1.5.14.tgz#2d016615ca03e32f1ec0e453d4c7e87fd7966f15"
   dependencies:
     babel-cli "^6.26.0"
     babel-runtime "^6.26.0"
@@ -4468,9 +4468,9 @@ gatsby-transformer-remark@^1.7.28:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.158:
-  version "1.9.158"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.158.tgz#15ec2e86a9c3d958c113d72003eb2d2eb187b804"
+gatsby@^1.9.164:
+  version "1.9.164"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.164.tgz#d97e31e61bff5d5a54d25b88c59ee1719a3b8b02"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"

examples/angular-cli/.storybook/config.js

@@ -1,6 +1,5 @@
 import { configure } from '@storybook/angular';
 import addCssWarning from '../src/cssWarning';
-import '../src/assets/common.css'
 
 addCssWarning();
 

examples/angular-cli/src/assets/common.css

@@ -1,3 +0,0 @@
-.css-rules-warning {
-  display: none;
-}

examples/angular-cli/src/styles.css

@@ -3,3 +3,7 @@
 .green-color {
   color: green;
 }
+
+.css-rules-warning {
+  display: none;
+}

examples/cra-kitchen-sink/.storybook/webpack.config.js

@@ -1,18 +1,13 @@
 const webpack = require('webpack');
 
-// load the default config generator.
-const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js');
-
-// Export a function. Accept the base config as the only param.
-module.exports = (storybookBaseConfig, configType) => {
+// Export a function.
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
   // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
   // You can change the configuration based on that.
   // 'PRODUCTION' is used when building the static version of storybook.
 
-  const config = genDefaultConfig(storybookBaseConfig, configType);
-
   // Make whatever fine-grained changes you need
-  config.plugins.push(
+  defaultConfig.plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
       name: "vendor",
       chunks: ['preview'],
@@ -24,5 +19,5 @@ module.exports = (storybookBaseConfig, configType) => {
   );
 
   // Return the altered config
-  return config;
+  return defaultConfig;
 };

examples/crna-kitchen-sink/storybook/webpack.config.js

@@ -1,18 +1,12 @@
 const webpack = require('webpack');
 
-// load the default config generator.
-const genDefaultConfig = require('@storybook/react-native/dist/server/config/defaults/webpack.config.js');
-
-// Export a function. Accept the base config as the only param.
-module.exports = (storybookBaseConfig, configType) => {
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
   // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
   // You can change the configuration based on that.
   // 'PRODUCTION' is used when building the static version of storybook.
 
-  const config = genDefaultConfig(storybookBaseConfig, configType);
-
   // Make whatever fine-grained changes you need
-  config.plugins.push(
+  defaultConfig.plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
       name: 'vendor',
       minChunks(module) {
@@ -23,5 +17,5 @@ module.exports = (storybookBaseConfig, configType) => {
   );
 
   // Return the altered config
-  return config;
+  return defaultConfig;
 };

examples/official-storybook/image-snapshots/storyshots-image.runner.js

@@ -20,10 +20,11 @@ if (!fs.existsSync(pathToStorybookStatic)) {
     suite: 'Image snapshots',
     framework: 'react',
     configPath: path.join(__dirname, '..'),
+    storyNameRegex: /^((?!tweaks static values with debounce delay|Inlines component inside story).)$/,
     test: imageSnapshot({
       storybookUrl: `file://${pathToStorybookStatic}`,
       getMatchOptions: () => ({
-        failureThreshold: 0.01, // 1% threshold,
+        failureThreshold: 0.04, // 4% threshold,
         failureThresholdType: 'percent',
       }),
     }),

examples/vue-kitchen-sink/.storybook/webpack.config.js

@@ -1,18 +1,12 @@
 const webpack = require('webpack');
 
-// load the default config generator.
-const genDefaultConfig = require('@storybook/vue/dist/server/config/defaults/webpack.config.js');
-
-// Export a function. Accept the base config as the only param.
-module.exports = (storybookBaseConfig, configType) => {
+module.exports = (storybookBaseConfig, configType, defaultConfig) => {
   // configType has a value of 'DEVELOPMENT' or 'PRODUCTION'
   // You can change the configuration based on that.
   // 'PRODUCTION' is used when building the static version of storybook.
 
-  const config = genDefaultConfig(storybookBaseConfig, configType);
-
   // Make whatever fine-grained changes you need
-  config.plugins.push(
+  defaultConfig.plugins.push(
     new webpack.optimize.CommonsChunkPlugin({
       name: "vendor",
       chunks: ['preview'],
@@ -24,5 +18,5 @@ module.exports = (storybookBaseConfig, configType) => {
   );
 
   // Return the altered config
-  return config;
+  return defaultConfig;
 };

lib/core/src/server/config/defaults/webpack.config.js

@@ -1,65 +1,65 @@
 import autoprefixer from 'autoprefixer';
 
-export function createDefaultWebpackConfig(storybookBaseConfig, includePaths) {
-  const newConfig = { ...storybookBaseConfig };
-
-  newConfig.module.rules = [
-    ...storybookBaseConfig.module.rules,
-    {
-      test: /\.css$/,
-      use: [
-        require.resolve('style-loader'),
+export function createDefaultWebpackConfig(storybookBaseConfig) {
+  return {
+    ...storybookBaseConfig,
+    module: {
+      ...storybookBaseConfig.module,
+      rules: [
+        ...storybookBaseConfig.module.rules,
         {
-          loader: require.resolve('css-loader'),
-          options: {
-            importLoaders: 1,
+          test: /\.css$/,
+          use: [
+            require.resolve('style-loader'),
+            {
+              loader: require.resolve('css-loader'),
+              options: {
+                importLoaders: 1,
+              },
+            },
+            {
+              loader: require.resolve('postcss-loader'),
+              options: {
+                ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
+                plugins: () => [
+                  require('postcss-flexbugs-fixes'), // eslint-disable-line
+                  autoprefixer({
+                    browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
+                    flexbox: 'no-2009',
+                  }),
+                ],
+              },
+            },
+          ],
+        },
+        {
+          test: /\.json$/,
+          loader: require.resolve('json-loader'),
+        },
+        {
+          test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
+          loader: require.resolve('file-loader'),
+          query: {
+            name: 'static/media/[name].[hash:8].[ext]',
           },
         },
         {
-          loader: require.resolve('postcss-loader'),
-          options: {
-            ident: 'postcss', // https://webpack.js.org/guides/migrating/#complex-options
-            plugins: () => [
-              require('postcss-flexbugs-fixes'), // eslint-disable-line
-              autoprefixer({
-                browsers: ['>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9'],
-                flexbox: 'no-2009',
-              }),
-            ],
+          test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
+          loader: require.resolve('url-loader'),
+          query: {
+            limit: 10000,
+            name: 'static/media/[name].[hash:8].[ext]',
           },
         },
       ],
     },
-    {
-      test: /\.json$/,
-      include: includePaths,
-      loader: require.resolve('json-loader'),
-    },
-    {
-      test: /\.(ico|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('file-loader'),
-      query: {
-        name: 'static/media/[name].[hash:8].[ext]',
+    resolve: {
+      ...storybookBaseConfig.resolve,
+      alias: {
+        ...(storybookBaseConfig.resolve && storybookBaseConfig.resolve.alias),
+        // This is to support NPM2
+        'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
       },
     },
-    {
-      test: /\.(mp4|webm|wav|mp3|m4a|aac|oga)(\?.*)?$/,
-      include: includePaths,
-      loader: require.resolve('url-loader'),
-      query: {
-        limit: 10000,
-        name: 'static/media/[name].[hash:8].[ext]',
-      },
-    },
-  ];
-
-  newConfig.resolve.alias = {
-    ...storybookBaseConfig.resolve.alias,
-    // This is to support NPM2
-    'babel-runtime/regenerator': require.resolve('babel-runtime/regenerator'),
   };
-
-  // Return the altered config
-  return newConfig;
 }

scripts/test.js

@@ -57,7 +57,7 @@ const tasks = {
     isJest: true,
   }),
   integration: createProject({
-    name: `Screenshots of running apps ${chalk.gray('(integration)')}`,
+    name: `Screenshots of built apps ${chalk.gray('(integration)')}`,
     defaultValue: false,
     option: '--integration',
     projectLocation: path.join(__dirname, '..', 'integration'),