Merge branch 'select-knob-ordering' of github.com:storybooks/storyboo…

…k into select-knob-ordering
storybookjs · Jan 31, 2018 · 5928842 · 5928842
2 parents 0a1140f + b2f22ae
commit 5928842
Show file tree

Hide file tree

Showing 46 changed files with 554 additions and 250 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,6 +1,7 @@
 {
   "presets": ["env", "stage-0", "react"],
   "plugins": [
+    "babel-plugin-macros",
     ["transform-runtime", {
       "polyfill": false,
       "regenerator": true

diff --git a/addons/knobs/src/angular/helpers.js b/addons/knobs/src/angular/helpers.js
@@ -86,11 +86,12 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
   return KnobWrapperComponent;
 };
 
-const createComponentFromTemplate = template => {
+const createComponentFromTemplate = (template, styles) => {
   const componentClass = class DynamicComponent {};
 
   return Component({
     template,
+    styles,
   })(componentClass);
 };
 
@@ -106,10 +107,10 @@ export function prepareComponent({ getStory, context, channel, knobStore }) {
   resetKnobs(knobStore, channel);
   const story = getStory(context);
   let { component } = story;
-  const { template } = story;
+  const { template, styles } = story;
 
   if (!component) {
-    component = createComponentFromTemplate(template);
+    component = createComponentFromTemplate(template, styles);
   }
 
   const { componentMeta, props, params, moduleMetadata } = getComponentMetadata({

diff --git a/addons/notes/package.json b/addons/notes/package.json
@@ -4,8 +4,8 @@
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
-    "storybook",
-    "notes"
+    "notes",
+    "storybook"
   ],
   "license": "MIT",
   "main": "dist/index.js",

diff --git a/addons/storyshots/README.md b/addons/storyshots/README.md
@@ -122,6 +122,30 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y
 ![Screenshot](docs/storyshots.png)
 
 
+### Using `createNodeMock` to mock refs
+
+`react-test-renderer` doesn't provide refs for rendered components. By
+default, it returns null when the refs are referenced. In order to mock
+out elements that rely on refs, you will have to use the
+`createNodeMock` option [added to React](https://reactjs.org/blog/2016/11/16/react-v15.4.0.html#mocking-refs-for-snapshot-testing) starting with version 15.4.0.
+
+Here is an example of how to specify the `createNodeMock` option in Storyshots:
+
+```js
+import initStoryshots, { snapshotWithOptions } from '@storybook/addon-storyshots'
+import TextareaThatUsesRefs from '../component/TextareaThatUsesRefs'
+
+initStoryshots({
+  test: snapshotWithOptions({
+    createNodeMock: (element) => {
+      if (element.type === TextareaThatUsesRefs) {
+        return document.createElement('textarea')
+      }
+    },
+  }),
+})
+```
+
 ## Configure Storyshots for image snapshots ( alpha )
 
 /*\ **React-native** is **not supported** by this test function.

diff --git a/addons/storyshots/package.json b/addons/storyshots/package.json
@@ -11,9 +11,9 @@
   },
   "scripts": {
     "build-storybook": "build-storybook",
+    "example": "jest storyshot.test",
     "prepare": "node ../../scripts/prepare.js",
-    "storybook": "start-storybook -p 6006",
-    "example": "jest storyshot.test"
+    "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
     "@storybook/channels": "^3.4.0-alpha.6",

diff --git a/addons/viewport/package.json b/addons/viewport/package.json
@@ -2,14 +2,14 @@
   "name": "@storybook/addon-viewport",
   "version": "3.4.0-alpha.6",
   "description": "Storybook addon to change the viewport size to mobile",
-  "main": "register.js",
   "keywords": [
     "storybook"
   ],
+  "license": "MIT",
+  "main": "register.js",
   "scripts": {
     "prepare": "node ../../scripts/prepare.js"
   },
-  "license": "MIT",
   "dependencies": {
     "@storybook/components": "^3.4.0-alpha.6",
     "global": "^4.3.2",

diff --git a/app/angular/package.json b/app/angular/package.json
@@ -35,6 +35,7 @@
     "autoprefixer": "^7.2.5",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.0.0",
+    "babel-plugin-macros": "^2.1.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-preset-env": "^1.6.0",
     "babel-preset-react": "^6.24.1",
@@ -79,7 +80,7 @@
     "shelljs": "^0.8.1",
     "style-loader": "^0.20.1",
     "ts-loader": "^2.2.2",
-    "uglifyjs-webpack-plugin": "^1.1.6",
+    "uglifyjs-webpack-plugin": "^1.1.7",
     "url-loader": "^0.6.2",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.2.1",
@@ -95,7 +96,7 @@
     "codelyzer": "^3.1.2",
     "mock-fs": "^4.3.0",
     "nodemon": "^1.14.11",
-    "typescript": "^2.4.0"
+    "typescript": "^2.7.1"
   },
   "peerDependencies": {
     "@angular/common": ">=4.0.0",

diff --git a/app/angular/src/client/preview/angular/helpers.ts b/app/angular/src/client/preview/angular/helpers.ts
@@ -68,26 +68,27 @@ const getModule = (
   return NgModule(moduleMeta)(moduleClass);
 };
 
-const createComponentFromTemplate = (template: string): Function => {
+const createComponentFromTemplate = (template: string, styles: string[]): Function => {
   const componentClass = class DynamicComponent {};
 
   return Component({
-    template: template,
+    template,
+    styles,
   })(componentClass);
 };
 
 const initModule = (
   currentStory: IGetStoryWithContext,
   context: IContext,
-  reRender: boolean = false,
+  reRender: boolean = false
 ): Function => {
   const storyObj = currentStory(context);
-  const { component, template, props, moduleMetadata = {} } = storyObj;
+  const { component, template, props, styles, moduleMetadata = {} } = storyObj;
 
   let AnnotatedComponent;
 
   if (template) {
-    AnnotatedComponent = createComponentFromTemplate(template);
+    AnnotatedComponent = createComponentFromTemplate(template, styles);
   } else {
     AnnotatedComponent = component;
   }

diff --git a/app/angular/src/client/preview/angular/types.ts b/app/angular/src/client/preview/angular/types.ts
@@ -16,6 +16,7 @@ export interface NgStory {
   propsMeta?: ICollection;
   moduleMetadata?: NgModuleMetadata;
   template?: string;
+  styles?: string[];
 }
 
 export interface NgError {

diff --git a/app/angular/src/server/build.js b/app/angular/src/server/build.js
@@ -19,6 +19,7 @@ program
   .option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
   .option('-o, --output-dir [dir-name]', 'Directory where to store built files')
   .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
+  .option('-w, --watch', 'Enable watch mode')
   .option('-d, --db-path [db-file]', 'DEPRECATED!')
   .option('--enable-db', 'DEPRECATED!')
   .parse(process.argv);
@@ -73,13 +74,20 @@ if (program.staticDir) {
 
 // compile all resources with webpack and write them to the disk.
 logger.info('Building storybook ...');
-webpack(config).run((err, stats) => {
+const webpackCb = (err, stats) => {
   if (err || stats.hasErrors()) {
     logger.error('Failed to build the storybook');
     // 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);
+    stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
+    process.exitCode = 1;
   }
-});
+  logger.info('Building storybook completed.');
+};
+const compiler = webpack(config);
+if (program.watch) {
+  compiler.watch({}, webpackCb);
+} else {
+  compiler.run(webpackCb);
+}
diff --git a/app/angular/src/server/config/babel.js b/app/angular/src/server/config/babel.js
@@ -1,24 +1,29 @@
-/**
- * Copyright (c) 2015-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the BSD-style license found in the
- * LICENSE file in the root directory of this source tree. An additional grant
- * 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-env'),
+    [
+      require.resolve('babel-preset-env'),
+      {
+        targets: {
+          browsers: ['last 2 versions', 'safari >= 7'],
+        },
+        modules: process.env.NODE_ENV === 'test' ? 'commonjs' : false,
+      },
+    ],
     require.resolve('babel-preset-stage-0'),
     require.resolve('babel-preset-react'),
   ],
+  plugins: [
+    require.resolve('babel-plugin-macros'),
+    require.resolve('babel-plugin-transform-regenerator'),
+    [
+      require.resolve('babel-plugin-transform-runtime'),
+      {
+        helpers: true,
+        polyfill: true,
+        regenerator: true,
+      },
+    ],
+  ],
 };
diff --git a/app/polymer/package.json b/app/polymer/package.json
@@ -33,12 +33,13 @@
     "autoprefixer": "^7.1.6",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.1.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.0",
-    "babel-preset-minify": "^0.2.0",
+    "babel-preset-minify": "^0.3.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.1.1",
     "babel-preset-stage-0": "^6.24.1",

diff --git a/app/polymer/src/server/build.js b/app/polymer/src/server/build.js
@@ -19,6 +19,7 @@ program
   .option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
   .option('-o, --output-dir [dir-name]', 'Directory where to store built files')
   .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
+  .option('-w, --watch', 'Enable watch mode')
   .option('-d, --db-path [db-file]', 'DEPRECATED!')
   .option('--enable-db', 'DEPRECATED!')
   .parse(process.argv);
@@ -72,14 +73,21 @@ if (program.staticDir) {
 }
 
 // compile all resources with webpack and write them to the disk.
-logger.log('Building storybook ...');
-webpack(config).run((err, stats) => {
+logger.info('Building storybook ...');
+const webpackCb = (err, stats) => {
   if (err || stats.hasErrors()) {
     logger.error('Failed to build the storybook');
     // 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);
+    stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
+    process.exitCode = 1;
   }
-});
+  logger.info('Building storybook completed.');
+};
+const compiler = webpack(config);
+if (program.watch) {
+  compiler.watch({}, webpackCb);
+} else {
+  compiler.run(webpackCb);
+}
diff --git a/app/polymer/src/server/config/babel.js b/app/polymer/src/server/config/babel.js
@@ -15,6 +15,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-transform-regenerator'),
     [
       require.resolve('babel-plugin-transform-runtime'),

diff --git a/app/react-native/package.json b/app/react-native/package.json
@@ -33,6 +33,7 @@
     "@storybook/ui": "^3.4.0-alpha.6",
     "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.1.0",
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
@@ -42,7 +43,7 @@
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-polyfill": "^6.26.0",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-minify": "^0.2.0",
+    "babel-preset-minify": "^0.3.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
@@ -62,7 +63,7 @@
     "react-native-iphone-x-helper": "^1.0.1",
     "shelljs": "^0.8.1",
     "style-loader": "^0.20.1",
-    "uglifyjs-webpack-plugin": "^1.1.6",
+    "uglifyjs-webpack-plugin": "^1.1.7",
     "url-loader": "^0.6.2",
     "url-parse": "^1.1.9",
     "util-deprecate": "^1.0.2",

diff --git a/app/react-native/src/server/config/babel.js b/app/react-native/src/server/config/babel.js
@@ -11,6 +11,7 @@ module.exports = {
     require.resolve('babel-preset-react'),
   ],
   plugins: [
+    require.resolve('babel-plugin-macros'),
     require.resolve('babel-plugin-syntax-trailing-function-commas'),
     require.resolve('babel-plugin-syntax-async-functions'),
     require.resolve('babel-plugin-transform-class-properties'),

diff --git a/app/react/package.json b/app/react/package.json
@@ -34,11 +34,12 @@
     "airbnb-js-shims": "^1.4.1",
     "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
+    "babel-plugin-macros": "^2.1.0",
     "babel-plugin-react-docgen": "^1.8.2",
     "babel-plugin-transform-regenerator": "^6.26.0",
     "babel-plugin-transform-runtime": "^6.23.0",
     "babel-preset-env": "^1.6.1",
-    "babel-preset-minify": "^0.2.0",
+    "babel-preset-minify": "^0.3.0",
     "babel-preset-react": "^6.24.1",
     "babel-preset-react-app": "^3.1.1",
     "babel-preset-stage-0": "^6.24.1",
@@ -75,7 +76,7 @@
     "serve-favicon": "^2.4.5",
     "shelljs": "^0.8.1",
     "style-loader": "^0.20.1",
-    "uglifyjs-webpack-plugin": "^1.1.6",
+    "uglifyjs-webpack-plugin": "^1.1.7",
     "url-loader": "^0.6.2",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.2.1",

diff --git a/app/react/src/server/build.js b/app/react/src/server/build.js
@@ -19,6 +19,7 @@ program
   .option('-s, --static-dir <dir-names>', 'Directory where to load static files from', parseList)
   .option('-o, --output-dir [dir-name]', 'Directory where to store built files')
   .option('-c, --config-dir [dir-name]', 'Directory where to load Storybook configurations from')
+  .option('-w, --watch', 'Enable watch mode')
   .option('-d, --db-path [db-file]', 'DEPRECATED!')
   .option('--enable-db', 'DEPRECATED!')
   .parse(process.argv);
@@ -73,7 +74,7 @@ if (program.staticDir) {
 
 // compile all resources with webpack and write them to the disk.
 logger.info('Building storybook ...');
-webpack(config).run((err, stats) => {
+const webpackCb = (err, stats) => {
   if (err || stats.hasErrors()) {
     logger.error('Failed to build the storybook');
     // eslint-disable-next-line no-unused-expressions
@@ -82,4 +83,11 @@ webpack(config).run((err, stats) => {
     stats && stats.hasErrors() && stats.toJson().errors.forEach(e => logger.error(e));
     process.exitCode = 1;
   }
-});
+  logger.info('Building storybook completed.');
+};
+const compiler = webpack(config);
+if (program.watch) {
+  compiler.watch({}, webpackCb);
+} else {
+  compiler.run(webpackCb);
+}