Merge branch 'master' into addon-a11y-delayed-render

.circleci/config.yml

@@ -58,6 +58,14 @@ jobs:
           name: "Link packages"
           command: |
             yarn install
+      - run:
+          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+          command: sh ./scripts/workaround-puppeteer-issue-290.sh
+      - run:
+          name: "Build official-storybook"
+          command: |
+            cd examples/official-storybook
+            yarn build-storybook
       - run:
           name: "Build react kitchen-sink"
           command: |
@@ -73,34 +81,33 @@ jobs:
           command: |
             cd examples/angular-cli
             yarn build-storybook
-
       - run:
-          name: "Run react kitchen-sink"
+          name: "Run react kitchen-sink (smoke test)"
           command: |
             cd examples/cra-kitchen-sink
-            yarn storybook
+            yarn storybook --smoke-test
-          background: true
       - run:
-          name: "Run vue kitchen-sink"
+          name: "Run vue kitchen-sink (smoke test)"
           command: |
             cd examples/vue-kitchen-sink
-            yarn storybook
+            yarn storybook --smoke-test
-          background: true
       - run:
-          name: "Run angular-cli"
+          name: "Run angular-cli (smoke test)"
           command: |
             cd examples/angular-cli
-            yarn storybook
+            yarn storybook --smoke-test
-          background: true
       - run:
-          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
+          name: "Run image snapshots"
-          command: sh ./scripts/workaround-puppeteer-issue-290.sh
+          command: yarn test --image
       - run:
           name: Integration Test - Kichen sinks
           command: yarn test --integration
       - store_artifacts:
           path: integration/__image_snapshots__
           destination: integration_image_snapshots
+      - store_artifacts:
+          path: examples/official-storybook/image-snapshots/__image_snapshots__
+          destination: official_storybook_image_snapshots
   react-native:
     <<: *defaults
     steps:

.gitignore

@@ -21,3 +21,4 @@ package-lock.json
 storybook-static
 integration/__image_snapshots__/__diff_output__
 .jest-test-results.json
+/examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/

CHANGELOG.md

@@ -1,3 +1,332 @@
+# 3.4.0-alpha.2
+
+2018-January-11
+
+This is a duplicate of `3.4.0-alpha.1`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
+
+# 3.3.8
+
+2018-January-11
+
+This is a duplicate of `3.3.7`, re-published because I accidentally published `3.4.0-alpha.1` on the `latest` NPM tag.
+
+# 3.4.0-alpha.1
+
+2018-January-10
+
+In addition to the changes listed here, also contains fixes from [3.3.5](#335) and [3.3.6](#336) and [3.3.7](#337).
+
+#### Features
+
+-   Custom tsconfig.json for angular apps. [#2669](https://github.com/storybooks/storybook/pull/2669)
+
+#### Dependency Upgrades
+
+<details>
+<summary>
+105 Upgrades
+</summary>
+
+-   Upgraded `babel-eslint` in `/` from "8.1.2" to "8.2.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `eslint-plugin-jest` in `/` from "21.5.0" to "21.6.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest-cli` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest-config` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest-diff` in `/` from "22.0.3" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest-environment-jsdom` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest-jasmine2` in `/` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `lerna` in `/` from "2.5.1" to "2.6.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `nodemon` in `/` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `common-tags` in `app/react` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `nodemon` in `app/react` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `common-tags` in `app/angular` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `nodemon` in `app/angular` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `common-tags` in `app/vue` from "1.6.0" to "1.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `nodemon` in `app/vue` from "1.14.9" to "1.14.10" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `vue-loader` in `app/vue` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `jest` in `examples/cra-kitchen-sink` from "22.0.4" to "22.0.5" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.2" to "13.7.0" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.10.0" to "2.10.1" [#2700](https://github.com/storybooks/storybook/pull/2700)
+-   Upgraded `marked` in `/docs` from "0.3.7" to "0.3.12" [#2699](https://github.com/storybooks/storybook/pull/2699)
+-   Upgraded `react-stack-grid` in `/docs` from "0.7.0" to "0.7.1" [#2699](https://github.com/storybooks/storybook/pull/2699)
+-   Upgraded `@storybook/addon-actions` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `@storybook/addon-links` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `@storybook/addons` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `@storybook/react` in `/docs` from "3.3.4" to "3.3.6" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `gatsby-link` in `/docs` from "1.6.32" to "1.6.33" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `gatsby` in `/docs` from "1.9.149" to "1.9.150" [#2686](https://github.com/storybooks/storybook/pull/2686)
+-   Upgraded `nodemon` in `/` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `markdown-loader` in `app/react` from "2.0.1" to "2.0.2" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `nodemon` in `app/react` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `nodemon` in `app/angular` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `react-native` in `app/react-native` from "0.51.0" to "0.52.0" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `nodemon` in `app/vue` from "1.14.8" to "1.14.9" [#2687](https://github.com/storybooks/storybook/pull/2687)
+-   Upgraded `@storybook/addon-actions` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
+-   Upgraded `@storybook/addon-links` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
+-   Upgraded `@storybook/addons` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
+-   Upgraded `@storybook/react` in `/docs` from "3.3.3" to "3.3.4" [#2674](https://github.com/storybooks/storybook/pull/2674)
+-   Update eslint in / from 4.14.0 to 4.15.0 [#2673](https://github.com/storybooks/storybook/pull/2673)
+-   Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
+-   Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
+-   Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
+-   Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
+-   Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
+-   Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
+
+</details>
+
+# 3.3.7
+
+2018-January-10
+
+#### Maintenance
+
+-   Extract tslint exclusions out of package.json scripts [#2684](https://github.com/storybooks/storybook/pull/2684)
+-   Add tslint to the linting pipe [#2682](https://github.com/storybooks/storybook/pull/2682)
+
+#### Bug Fixes
+
+-   Angular: add entry components to modulemetadata - #2701 [#2702](https://github.com/storybooks/storybook/pull/2702)
+-   Add html and markup loaders to angular and vue apps [#2692](https://github.com/storybooks/storybook/pull/2692)
+
+# 3.3.6
+
+2018-January-08
+
+#### Bug Fixes
+
+-   Remove `src/` from remaining `.npmignore`s [#2678](https://github.com/storybooks/storybook/pull/2678)
+
+# 3.3.5
+
+2018-January-08
+
+#### Bug Fixes
+
+-   Remove src from individual .npmignore files [#2677](https://github.com/storybooks/storybook/pull/2677)
+
+# 3.4.0-alpha.0
+
+2018-January-07
+
+#### Features
+
+-   Multiple hierarchies [#2452](https://github.com/storybooks/storybook/pull/2452)
+-   Change template story files extension to .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
+-   Use store revisions to ensure that stories re-render on HMR. [#2605](https://github.com/storybooks/storybook/pull/2605)
+-   Ability to force re-render a story [#2463](https://github.com/storybooks/storybook/pull/2463)
+-   Introduce framework-independent core library [#2241](https://github.com/storybooks/storybook/pull/2241)
+
+#### Documentation
+
+<details>
+<summary>
+4 PRs
+</summary>
+
+-   Update webpack extend warning. [#2660](https://github.com/storybooks/storybook/pull/2660)
+-   ADD demo images to a new img folder with the documentation site [#2644](https://github.com/storybooks/storybook/pull/2644)
+-   write doc about .css/.scss rules for Angular [#2634](https://github.com/storybooks/storybook/pull/2634)
+-   Updated documentation wrt ejs exclusion [#2633](https://github.com/storybooks/storybook/pull/2633)
+
+</details>
+
+#### Maintenance
+
+<details>
+<summary>
+4 PRs
+</summary>
+
+-   Only update CLI snapsots on postpublish script, skip smoke tests [#2671](https://github.com/storybooks/storybook/pull/2671)
+-   Fix the timezone for example dates [#2654](https://github.com/storybooks/storybook/pull/2654)
+-   Update prereq yarn install level [#2638](https://github.com/storybooks/storybook/pull/2638)
+-   Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
+
+</details>
+
+#### Dependency Upgrades
+
+<details>
+<summary>
+66 Upgrades
+</summary>
+
+-   Upgraded `nodemon` in `/` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `marksy` in `addons/info` from "6.0.2" to "6.0.3" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/react` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/angular` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `nodemon` in `app/vue` from "1.14.7" to "1.14.8" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `webpack-dev-server` in `examples/vue-kitchen-sink` from "2.9.7" to "2.10.0" [#2664](https://github.com/storybooks/storybook/pull/2664)
+-   Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `@angular/animations` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/common` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/compiler` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/core` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/forms` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/http` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/platform-browser` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/platform-browser-dynamic` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/router` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/compiler-cli` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `@angular/language-service` in `examples/angular-cli` from "5.1.2" to "5.1.3" [#2648](https://github.com/storybooks/storybook/pull/2648)
+-   Upgraded `postcss-loader` in `app/react` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/angular` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/react-native` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Upgraded `postcss-loader` in `app/vue` from "2.0.9" to "2.0.10" [#2637](https://github.com/storybooks/storybook/pull/2637)
+-   Update inquirer in / from 4.0.1 to 4.0.2 [#2632](https://github.com/storybooks/storybook/pull/2632)
+-   Upgraded `danger` in `/` from "2.1.8" to "2.1.10" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/react` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/angular` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/react-native` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `autoprefixer` in `app/vue` from "7.2.3" to "7.2.4" [#2618](https://github.com/storybooks/storybook/pull/2618)
+-   Upgraded `nodemon` in `/` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/react` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/angular` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `nodemon` in `app/vue` from "1.14.6" to "1.14.7" [#2612](https://github.com/storybooks/storybook/pull/2612)
+-   Upgraded `vue-loader` in `app/vue` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
+-   Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "13.6.1" to "13.6.2" [#2611](https://github.com/storybooks/storybook/pull/2611)
+-   Upgraded `nodemon` in `/` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/react` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/angular` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `nodemon` in `app/vue` from "1.14.5" to "1.14.6" [#2609](https://github.com/storybooks/storybook/pull/2609)
+-   Upgraded `enzyme` in `/` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `/` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `graphiql` in `addons/graphql` from "0.11.10" to "0.11.11" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `addons/links` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/react` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/angular` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `nodemon` in `app/vue` from "1.14.3" to "1.14.5" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `examples/cra-kitchen-sink` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Upgraded `enzyme` in `examples/official-storybook` from "3.2.0" to "3.3.0" [#2608](https://github.com/storybooks/storybook/pull/2608)
+-   Update 2 dependencies from npm [#2597](https://github.com/storybooks/storybook/pull/2597)
+-   Upgraded `@storybook/addon-actions` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/addon-links` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/addons` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `@storybook/react` in `/docs` from "3.3.1" to "3.3.3" [#2598](https://github.com/storybooks/storybook/pull/2598)
+-   Upgraded `danger` in `/` from "2.1.6" to "2.1.8" [#2599](https://github.com/storybooks/storybook/pull/2599)
+-   Upgraded `axe-core` in `addons/a11y` from "2.6.0" to "2.6.1" [#2599](https://github.com/storybooks/storybook/pull/2599)
+
+</details>
+
+# 3.3.4
+
+2018-January-07
+
+#### Bug Fixes
+
+-   Fix config dir detection [#2666](https://github.com/storybooks/storybook/pull/2666)
+-   Removed lowercase-only restriction for knobs [#2646](https://github.com/storybooks/storybook/pull/2646)
+-   Add IE11 compatibility meta tag [#2650](https://github.com/storybooks/storybook/pull/2650)
+-   Allow transparency in color knob [#2624](https://github.com/storybooks/storybook/pull/2624)
+-   RN: Use haul/bin/cli.js for cross-platform support [#2577](https://github.com/storybooks/storybook/pull/2577)
+-   Publish package sources along with transpiled files [#2604](https://github.com/storybooks/storybook/pull/2604)
+-   Fixed all peerDependencies for apps. [#2601](https://github.com/storybooks/storybook/pull/2601)
+-   Renamed angular root node to avoid name collisions [#2657](https://github.com/storybooks/storybook/pull/2657)
+-   Add .ts compatibility to storyshots [#2639](https://github.com/storybooks/storybook/pull/2639)
+-   Remove @angular/core dep from knobs peer. [#2640](https://github.com/storybooks/storybook/pull/2640)
+-   Angular: Change template story files extension .ts [#2594](https://github.com/storybooks/storybook/pull/2594)
+-   Skip serializing (Synthetic)Events [#2626](https://github.com/storybooks/storybook/pull/2626)
+
+#### Maintenance
+
+-   Separate stories in angular-cli example [#2592](https://github.com/storybooks/storybook/pull/2592)
+
+#### Dependency Upgrades
+
+<details>
+<summary>
+13 Upgrades
+</summary>
+
+-   Upgraded `@types/lodash` in `/` from "4.14.91" to "4.14.92" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `marksy` in `addons/info` from "6.0.1" to "6.0.2" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `html-loader` in `app/react` from "0.5.1" to "0.5.4" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/angular` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/angular` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/react-native` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/react-native` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `app/vue` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `uglifyjs-webpack-plugin` in `app/vue` from "1.1.5" to "1.1.6" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `@types/node` in `examples/angular-cli` from "6.0.95" to "6.0.96" [#2659](https://github.com/storybooks/storybook/pull/2659)
+-   Upgraded `css-loader` in `examples/vue-kitchen-sink` from "0.28.7" to "0.28.8" [#2659](https://github.com/storybooks/storybook/pull/2659)
+
+</details>
+
 # 3.3.3
 
 2017-December-29

CONTRIBUTING.md

@@ -4,7 +4,7 @@ Thanks for your interest in improving Storybook! We are a community-driven proje
 
 Please review this document to help to streamline the process and save everyone's precious time.
 
-This repo uses yarn workspaces, so you should `yarn@1.3.2` or higher as package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
+This repo uses yarn workspaces, so you should install `yarn@1.3.2` or higher as package manager. See [installation guide](https://yarnpkg.com/en/docs/install).
 
 ## Issues
 
@@ -31,7 +31,7 @@ yarn install
 yarn bootstrap --core
 ```
 
-The bootstrap command will ask which sections of the codebase you want to bootstrap. Unless you're going to work with ReactNative or the Documentation, you can keep the default.
+The bootstrap command might ask which sections of the codebase you want to bootstrap. Unless you're going to work with ReactNative or the Documentation, you can keep the default.
 
 You can also pick directly from CLI:
 
@@ -57,25 +57,33 @@ You can also pick suites from CLI.  Suites available are listed below.
 
 `yarn test --core`
 
-This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`
+This option executes test from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
 Before the tests are ran, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core` 
 
 ##### React-Native example Tests
 
 `yarn test --reactnative`
 
-This option executes tests from `<rootdir>/app/react-native`
+This option executes tests from `<rootdir>/app/react-native`.
 Before these tests are ran, the project must be bootstrapped with the React Native example enabled.  You can accomplish this by running `yarn bootstrap --reactnative`
 
 ##### Integration Tests (Screenshots of running apps)
 
 `yarn test --integration`
 
-This option executes tests from `<rootdir>/integration`
+This option executes tests from `<rootdir>/integration`.
 In order for the snapshot-integration tests to be executed properly, examples being tested must be running on their defaults ports, as declared in `integration/examples.test.js`
 
 Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images.
 
+##### CRA-kitchen-sink - Image snapshots using Storyshots
+
+`yarn test --image`
+
+This option executes tests from `<rootdir>/examples/cra-kitchen-sink`
+In order for the image snapshots to be correctly generated, you must have static build of the storybook up-to-date.
+
+Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
 
 #### 2b. Run e2e tests for CLI
 
@@ -95,7 +103,7 @@ In that case, please check the git diff before commiting to make sure it only co
 
 If you want to test your own existing project using the github version of storybook, you need to `link` the packages you use in your project.
 
-````sh
+```sh
     cd app/react
     yarn link
 
@@ -130,7 +138,7 @@ If you want to test your own existing project using the github version of storyb
     # fork the storybook repo to your account, then add the resulting remote
     git remote add <your-username> https://github.com/<your-username>/storybook.git
     git push -u <your-username> master
-````
+```
 
 If you follow that process, you can then link to the github repository in the issue. See <https://github.com/storybooks/storybook/issues/708#issuecomment-290589886> for an example.
 

MIGRATION.md

@@ -18,7 +18,20 @@
 
 ## From version 3.2.x to 3.3.x
 
-There should be no breaking changes in this release, but read on if you're using `addon-knobs`: we advise an update to your code for efficiency's sake.
+There wasn't expected be any breaking changes in this release, but unfortunately it turned out that there are some. We're revisiting our [release strategy](https://github.com/storybooks/storybook/blob/master/RELEASES.md) to follow semver more strictly.
+Also read on if you're using `addon-knobs`: we advise an update to your code for efficiency's sake.
+
+### `babel-core` is now a peer dependency ([#2494](https://github.com/storybooks/storybook/pull/2494))
+
+This affects you if you don't use babel in your project. You may need to add `babel-core` as dev dependency:
+```
+npm install --save-dev babel-core
+```
+This was done to support different major versions of babel.
+
+### Base webpack config now contains vital plugins ([#1775](https://github.com/storybooks/storybook/pull/1775))
+
+This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a reccomendation, but now it [became](https://github.com/storybooks/storybook/pull/2578) a requirement.
 
 ### Refactored Knobs
 

README.md

@@ -60,6 +60,8 @@ It runs a codemod to update all package names. Read all migration details in our
 
 For full documentation on using Storybook visit: [storybook.js.org](https://storybook.js.org)
 
+For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
+
 ## Projects
 
 ### Main Projects

RELEASES.md

@@ -116,3 +116,4 @@ in a patch release.
 
 -   For PATCH PR's, any maintainer can review, test, approve, and merge it.
 -   For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
+

addons/a11y/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/components": "^3.3.3",
+    "@storybook/components": "^3.4.0-alpha.1",
     "axe-core": "^2.6.1",
     "prop-types": "^15.6.0"
   },

addons/actions/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"

addons/background/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",

addons/centered/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook decorator to center components",
   "license": "MIT",
   "author": "Muhammed Thanish <mnmtanish@gmail.com>",

addons/events/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",

addons/graphql/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "storybook"

addons/info/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "A Storybook addon to show additional information for your stories.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -15,11 +15,11 @@
     "storybook": "start-storybook -p 9010"
   },
   "dependencies": {
-    "@storybook/client-logger": "^3.3.3",
+    "@storybook/client-logger": "^3.4.0-alpha.1",
-    "@storybook/components": "^3.3.3",
+    "@storybook/components": "^3.4.0-alpha.1",
     "babel-runtime": "^6.26.0",
     "global": "^4.3.2",
-    "marksy": "^6.0.1",
+    "marksy": "^6.0.3",
     "nested-object-assign": "^1.0.1",
     "prop-types": "^15.6.0",
     "react-addons-create-fragment": "^15.5.3",

addons/jest/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/components": "^3.3.3",
+    "@storybook/components": "^3.4.0-alpha.1",
     "glamor": "^2.20.40",
     "glamorous": "^4.11.2",
     "global": "^4.3.2",

addons/knobs/.npmignore

@@ -1,2 +1 @@
-src
 .babelrc

addons/knobs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook Addon Prop Editor Component",
   "license": "MIT",
   "main": "dist/index.js",

addons/knobs/src/angular/helpers.js

@@ -3,7 +3,7 @@
 import { Component, SimpleChange, ChangeDetectorRef } from '@angular/core';
 import { getParameters, getAnnotations, getPropMetadata } from './utils';
 
-const getComponentMetadata = ({ component, props = {}, moduleMetadata = {} }) => {
+const getComponentMetadata = ({ component, props = {}, moduleMetadata = {}, template = '' }) => {
   if (!component || typeof component !== 'function') throw new Error('No valid component provided');
 
   const componentMeta = getAnnotations(component)[0] || {};
@@ -16,6 +16,7 @@ const getComponentMetadata = ({ component, props = {}, moduleMetadata = {} }) =>
     componentMeta,
     propsMeta,
     moduleMetadata,
+    template,
     params: paramsMetadata,
   };
 };
@@ -29,8 +30,8 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
   };
 
   KnobWrapperComponent.prototype = Object.create(component.prototype);
-  KnobWrapperComponent.__annotations__ = [new Component(componentMeta)];
+  KnobWrapperComponent.annotations = [new Component(componentMeta)];
-  KnobWrapperComponent.__parameters__ = [[ChangeDetectorRef], ...params];
+  KnobWrapperComponent.parameters = [[ChangeDetectorRef], ...params];
 
   KnobWrapperComponent.prototype.constructor = KnobWrapperComponent;
   KnobWrapperComponent.prototype.ngOnInit = function onInit() {
@@ -73,11 +74,10 @@ const getAnnotatedComponent = ({ componentMeta, component, params, knobStore, ch
     const oldValue = knobOptions.value;
     knobOptions.value = value;
     knobStore.markAllUnused();
-    const lowercasedName = name.toLocaleLowerCase();
+    this[name] = value;
-    this[lowercasedName] = value;
     this.cd.detectChanges();
     this.ngOnChanges({
-      [lowercasedName]: new SimpleChange(oldValue, value, false),
+      [name]: new SimpleChange(oldValue, value, false),
     });
   };
 

addons/links/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Story Links addon for storybook",
   "keywords": [
     "storybook"
@@ -22,7 +22,7 @@
     "storybook": "start-storybook -p 9001"
   },
   "dependencies": {
-    "@storybook/components": "^3.3.3",
+    "@storybook/components": "^3.4.0-alpha.1",
     "global": "^4.3.2",
     "prop-types": "^15.5.10"
   },
@@ -30,7 +30,7 @@
     "enzyme": "^3.3.0",
     "react": "^16.1.0",
     "react-dom": "^16.1.0",
-    "shelljs": "^0.7.8"
+    "shelljs": "^0.8.0"
   },
   "peerDependencies": {
     "@storybook/addons": "^3.3.0",

addons/notes/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",

addons/options/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Options addon for storybook",
   "keywords": [
     "storybook"

addons/storyshots/.npmignore

@@ -1,2 +1 @@
-src
 .babelrc

addons/storyshots/README.md

@@ -36,7 +36,7 @@ Usually, you might already have completed this step. If not, here are some resou
 
 > Note: If you use React 16, you'll need to follow [these additional instructions](https://github.com/facebook/react/issues/9102#issuecomment-283873039).
 
-## Configure Storyshots
+## Configure Storyshots for HTML snapshots
 
 Create a new test file with the name `Storyshots.test.js`. (Or whatever the name you prefer, as long as it matches Jest's config [`testMatch`](http://facebook.github.io/jest/docs/en/configuration.html#testmatch-array-string)).
 Then add following content to it:
@@ -53,6 +53,103 @@ Now run your Jest test command. (Usually, `npm test`.) Then you can see all of y
 
 ![Screenshot](docs/storyshots.png)
 
+
+## Configure Storyshots for image snapshots
+
+/*\ **React-native** is **not supported** by this test function.
+
+Internally, it uses [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot).
+
+When willing to generate and compare image snapshots for your stories, you have to two options: 
+ - Have a storybook running (ie. accessible via http(s):// , for instance using `yarn run storybook`)
+ - Have a static build of the storybook (for instance, using `yarn run build-storybook`)
+
+Then you will need to reference the storybook URL (`file://...` if local, `http(s)://...` if served)
+
+### Using default values for _imageSnapshots_
+
+Then you can either create a new Storyshots instance or edit the one you previously used: 
+```js
+import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
+
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot});
+```
+This will assume you have a storybook running on at _http://localhost:6006_.
+Internally here are the steps:  
+- Launches a Chrome headless using [puppeteer](https://github.com/GoogleChrome/puppeteer)
+- Browses each stories (calling _http://localhost:6006/iframe.html?..._ URL),
+- Take screenshots & save all images under _\_image_snapshots\__ folder.
+
+### Specifying the storybook URL
+
+If you want to set specific storybook URL, you can specify via the `storybookUrl` parameter, see below: 
+```js
+import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
+
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://my-specific-domain.com:9010'})});
+```
+The above config will use _https://my-specific-domain.com:9010_ for screenshots.
+
+
+You may also use a local static build of storybook if you do not want to run the webpack dev-server:
+```js
+import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
+
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'file:///path/to/my/storybook-static'})});
+```
+
+### Specifying options to _jest-image-snapshots_
+
+If you wish to customize [jest-image-snapshot](https://github.com/americanexpress/jest-image-snapshot), then you can provide a `getMatchOptions` parameter that should return the options config object.
+```js
+import initStoryshots, { imageSnapshot } from '@storybook/addon-storyshots';
+const getMatchOptions = ({context : {kind, story}, url}) => {
+  return {
+    failureThreshold: 0.2,
+    failureThresholdType: 'percent',
+  }
+}
+initStoryshots({suite: 'Image storyshots', test: imageSnapshot({storybookUrl: 'http://localhost:6006', getMatchOptions})});
+```
+`getMatchOptions` receives an object: `{ context: {kind, story}, url}`. _kind_ is the kind of the story and the _story_ its name. _url_ is the URL the browser will use to screenshot.
+
+
+### Integrate image storyshots with regular app
+You may want to use another Jest project to run your image snapshots as they require more resources: Chrome and Storybook built/served.
+You can find a working example of this in the [official-storybook](https://github.com/storybooks/storybook/tree/master/examples/official-storybook) example.
+
+### Integrate image storyshots with [Create React App](https://github.com/facebookincubator/create-react-app)
+You have two options here, you can either: 
+
+- Simply add the storyshots configuration inside any of your `test.js` file. You must ensure you have either a running storybook or a static build available.
+
+- Create a custom test file using Jest outside of the CRA scope:
+
+    A more robust approach would be to separate existing test files ran by create-react-app (anything `(test|spec).js` suffixed files) from the test files to run storyshots with image snapshots.
+    This use case can be achieved by using a custom name for the test file, ie something like `image-storyshots.runner.js`. This file will contains the `initStoryshots` call with image snapshots configuration.
+    Then you will create a separate script entry in your package.json, for instance 
+    ```json
+    {
+        "scripts": { 
+            "image-snapshots" : "jest image-storyshots.runner.js --config path/to/custom/jest.config.json"
+        }
+    }
+    ```
+    Note that you will certainly need a custom config file for Jest as you run it outside of the CRA scope and thus you do not have the built-in config.
+
+    Once that's setup, you can run `yarn run image-snapshots` (or `npm run image-snapshots`).
+
+### Reminder
+An image snapshot is simply a screenshot taken by a web browser (in our case, Chrome).
+
+The browser opens a page (either using the static build of storybook or a running instance of Storybook)
+
+If you run your test without either the static build or a running instance, this wont work.
+
+To make sure your screenshots are taken from latest changes of your Storybook, you must keep your static build or running Storybook up-to-date. 
+This can be achieved by adding a step before running the test ie: `yarn run build-storybook && yarn run image-snapshots`.
+If you run the image snapshots against a running Storybook in dev mode, you don't have to care about being up-to-date because the dev-server is watching changes and rebuilds automatically.
+
 ## Options
 
 ### `configPath`

addons/storyshots/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "license": "MIT",
   "main": "dist/index.js",
@@ -16,17 +16,19 @@
     "example": "jest storyshot.test"
   },
   "dependencies": {
-    "@storybook/channels": "^3.3.3",
+    "@storybook/channels": "^3.4.0-alpha.1",
     "babel-runtime": "^6.26.0",
     "glob": "^7.1.2",
     "global": "^4.3.2",
     "jest-specific-snapshot": "^0.3.0",
+    "jest-image-snapshot": "^2.2.0",
     "prop-types": "^15.6.0",
+    "puppeteer": "^0.13.0",
     "read-pkg-up": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/react": "^3.3.3",
+    "@storybook/react": "^3.4.0-alpha.1",
     "babel-cli": "^6.26.0",
     "babel-jest": "^20.0.3",
     "babel-plugin-transform-runtime": "^6.23.0",
@@ -40,7 +42,7 @@
     "react-dom": "^16.1.0"
   },
   "peerDependencies": {
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "react": "*",
     "react-test-renderer": "*"

addons/storyshots/src/index.js

@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 import glob from 'glob';
-import global, { describe, it } from 'global';
+import global, { describe, it, beforeEach, afterEach } from 'global';
 import readPkgUp from 'read-pkg-up';
 import addons from '@storybook/addons';
 
@@ -18,6 +18,8 @@ export {
   renderOnly,
 } from './test-bodies';
 
+export { imageSnapshot } from './test-body-image-snapshot';
+
 export { getSnapshotFileName };
 
 let storybook;
@@ -100,6 +102,20 @@ export default function testStorySnapshots(options = {}) {
     }
 
     describe(suite, () => {
+      beforeEach(() => {
+        if (typeof options.test.beforeEach === 'function') {
+          return options.test.beforeEach();
+        }
+        return Promise.resolve();
+      });
+
+      afterEach(() => {
+        if (typeof options.test.afterEach === 'function') {
+          return options.test.afterEach();
+        }
+        return Promise.resolve();
+      });
+
       describe(kind, () => {
         // eslint-disable-next-line
         for (const story of group.stories) {
@@ -109,7 +125,7 @@ export default function testStorySnapshots(options = {}) {
           }
 
           it(story.name, () => {
-            const context = { fileName, kind, story: story.name };
+            const context = { fileName, kind, story: story.name, isRNStorybook };
             return options.test({
               story,
               context,
@@ -122,14 +138,13 @@ export default function testStorySnapshots(options = {}) {
 }
 
 describe('Storyshots Integrity', () => {
-  describe('Abandoned Storyshots', () => {
+  test('Abandoned Storyshots', () => {
     const storyshots = glob.sync('**/*.storyshot');
 
     const abandonedStoryshots = storyshots.filter(fileName => {
       const possibleStoriesFiles = getPossibleStoriesFiles(fileName);
       return !possibleStoriesFiles.some(fs.existsSync);
     });
-
     expect(abandonedStoryshots).toHaveLength(0);
   });
 });

addons/storyshots/src/test-body-image-snapshot.js

@@ -0,0 +1,67 @@
+import puppeteer from 'puppeteer';
+import { toMatchImageSnapshot } from 'jest-image-snapshot';
+
+expect.extend({ toMatchImageSnapshot });
+
+export const imageSnapshot = ({
+  storybookUrl = 'http://localhost:6006',
+  getMatchOptions = () => {},
+}) => {
+  let browser; // holds ref to browser. (ie. Chrome)
+  let page; // Hold ref to the page to screenshot.
+
+  const testFn = ({ context }) => {
+    if (context.isRNStorybook) {
+      // Skip tests since we de not support RN image snapshots.
+      console.error(
+        "It seems you are running imageSnapshot on RN app and it's not supported. Skipping test."
+      );
+      return Promise.resolve();
+    }
+
+    const encodedKind = encodeURIComponent(context.kind);
+    const encodedStoryName = encodeURIComponent(context.story);
+    const storyUrl = `/iframe.html?selectedKind=${encodedKind}&selectedStory=${encodedStoryName}`;
+    const url = storybookUrl + storyUrl;
+    if (!browser || !page) {
+      console.error(
+        `Error when generating image snapshot for test ${context.kind} - ${
+          context.story
+        } : It seems the headless browser is not running.`
+      );
+      return Promise.reject(new Error('no-headless-browser-running'));
+    }
+
+    expect.assertions(1);
+    return page
+      .goto(url)
+      .catch(e => {
+        console.error(
+          `ERROR WHILE CONNECTING TO ${url}, did you start or build the storybook first ? A storybook instance should be running or a static version should be built when using image snapshot feature.`,
+          e
+        );
+        throw e;
+      })
+      .then(() =>
+        page.screenshot().then(image => {
+          expect(image).toMatchImageSnapshot(getMatchOptions({ context, url }));
+        })
+      );
+  };
+
+  testFn.beforeEach = () =>
+    puppeteer
+      // add some options "no-sandbox" to make it work properly on some Linux systems as proposed here: https://github.com/Googlechrome/puppeteer/issues/290#issuecomment-322851507
+      .launch({ args: ['--no-sandbox ', '--disable-setuid-sandbox'] })
+      .then(b => {
+        browser = b;
+      })
+      .then(() => browser.newPage())
+      .then(p => {
+        page = p;
+      });
+
+  testFn.afterEach = () => browser.close();
+
+  return testFn;
+};

addons/viewport/README.md

@@ -4,7 +4,7 @@ Storybook Viewport Addon allows your stories to be displayed in different sizes
 
 This addon works with Storybook for: [React](https://github.com/storybooks/storybook/tree/master/app/react) and [Vue](https://github.com/storybooks/storybook/tree/master/app/vue).
 
-![Screenshot](https://github.com/storybooks/storybook/blob/master/docs/viewport.png)
+![Screenshot](https://github.com/storybooks/storybook/blob/master/addons/viewport/docs/viewport.png)
 
 ## Installation
 

addons/viewport/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook addon to change the viewport size to mobile",
   "main": "register.js",
   "keywords": [
@@ -11,7 +11,7 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@storybook/components": "^3.3.3",
+    "@storybook/components": "^3.4.0-alpha.1",
     "global": "^4.3.2",
     "prop-types": "^15.5.10"
   },

app/angular/.npmignore

@@ -1,3 +1,2 @@
 docs
-src
 .babelrc

app/angular/index.d.ts

@@ -1,19 +1,20 @@
 import { NgModuleMetadata, ICollection } from './dist/client/preview/angular/types';
 
 export interface IStorybookStory {
-    name: string,
+  name: string;
-    render: () => any
+  render: () => any;
 }
 
 export interface IStoribookSection {
-    kind: string,
+  kind: string;
-    stories: IStorybookStory[]
+  stories: IStorybookStory[];
 }
 
 export type IGetStory = () => {
   props?: ICollection;
   moduleMetadata?: Partial<NgModuleMetadata>;
-    component: any
+  component?: any;
+  template?: string;
 };
 
 export interface IApi {

app/angular/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/angular",
   "bugs": {
@@ -23,15 +23,15 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.4.0-alpha.1",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.4.0-alpha.1",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/channel-postmessage": "^3.3.3",
+    "@storybook/channel-postmessage": "^3.4.0-alpha.1",
-    "@storybook/core": "^3.3.3",
+    "@storybook/core": "^3.4.0-alpha.1",
-    "@storybook/ui": "^3.3.3",
+    "@storybook/ui": "^3.4.0-alpha.1",
     "airbnb-js-shims": "^1.1.1",
     "angular2-template-loader": "^0.6.2",
-    "autoprefixer": "^7.2.4",
+    "autoprefixer": "^7.2.5",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.0.0",
     "babel-plugin-react-docgen": "^1.6.0",
@@ -42,21 +42,24 @@
     "babel-runtime": "^6.23.0",
     "case-sensitive-paths-webpack-plugin": "^2.0.0",
     "chalk": "^2.1.0",
-    "commander": "^2.11.0",
+    "commander": "^2.13.0",
-    "common-tags": "^1.4.0",
+    "common-tags": "^1.7.2",
     "configstore": "^3.1.0",
     "core-js": "^2.4.1",
     "cross-env": "^5.1.1",
-    "css-loader": "^0.28.1",
+    "css-loader": "^0.28.8",
     "express": "^4.15.3",
     "file-loader": "^0.11.1",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
+    "html-loader": "^0.5.4",
     "html-webpack-plugin": "^2.30.1",
     "json-loader": "^0.5.4",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.1",
     "lodash.pick": "^4.4.0",
+    "markdown-loader": "^2.0.2",
+    "node-sass": "^4.7.2",
     "postcss-flexbugs-fixes": "^3.0.0",
     "postcss-loader": "^2.0.10",
     "prop-types": "^15.5.10",
@@ -68,18 +71,19 @@
     "redux": "^3.6.0",
     "request": "^2.81.0",
     "rxjs": "^5.4.2",
+    "sass-loader": "^6.0.6",
     "serve-favicon": "^2.4.3",
-    "shelljs": "^0.7.8",
+    "shelljs": "^0.8.0",
     "style-loader": "^0.18.2",
     "ts-loader": "^2.2.2",
-    "uglifyjs-webpack-plugin": "^1.1.5",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.5.8",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",
     "webpack": "^2.5.1 || ^3.0.0",
     "webpack-dev-middleware": "^1.10.2",
     "webpack-hot-middleware": "^2.18.0",
-    "zone.js": "^0.8.19"
+    "zone.js": "^0.8.20"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",
@@ -87,7 +91,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "codelyzer": "^3.1.2",
     "mock-fs": "^4.3.0",
-    "nodemon": "^1.14.7",
+    "nodemon": "^1.14.11",
     "typescript": "^2.4.0"
   },
   "peerDependencies": {

app/angular/src/client/preview/angular/app.token.ts

@@ -1,4 +1,4 @@
-import { InjectionToken } from "@angular/core";
+import { InjectionToken } from '@angular/core';
-import { NgStory } from "./types";
+import { NgStory } from './types';
 
-export const STORY = new InjectionToken<NgStory>("story");
+export const STORY = new InjectionToken<NgStory>('story');

app/angular/src/client/preview/angular/components/app.component.ts

@@ -2,35 +2,31 @@
 // to provide @Inputs and subscribe to @Outputs, see
 // https://github.com/angular/angular/issues/15360
 // For the time being, the ViewContainerRef approach works pretty well.
-import * as _ from 'lodash';
 import {
   Component,
   Inject,
-  AfterViewInit,
+  OnInit,
   ViewChild,
   ViewContainerRef,
   ComponentFactoryResolver,
   OnDestroy,
   EventEmitter,
   SimpleChanges,
-  SimpleChange
+  SimpleChange,
 } from '@angular/core';
 import { STORY } from '../app.token';
 import { NgStory, ICollection } from '../types';
 
 @Component({
-  selector: 'app-root',
+  selector: 'storybook-dynamic-app-root',
-  template: '<ng-template #target></ng-template>'
+  template: '<ng-template #target></ng-template>',
 })
-export class AppComponent implements AfterViewInit, OnDestroy {
+export class AppComponent implements OnInit, OnDestroy {
   @ViewChild('target', { read: ViewContainerRef })
   target: ViewContainerRef;
-  constructor(
+  constructor(private cfr: ComponentFactoryResolver, @Inject(STORY) private data: NgStory) {}
-    private cfr: ComponentFactoryResolver,
-    @Inject(STORY) private data: NgStory
-  ) {}
 
-  ngAfterViewInit(): void {
+  ngOnInit(): void {
     this.putInMyHtml();
   }
 
@@ -49,20 +45,20 @@ export class AppComponent implements AfterViewInit, OnDestroy {
   /**
    * Set inputs and outputs
    */
-  private setProps(instance: any, {props = {}, propsMeta = {}}: NgStory): void {
+  private setProps(instance: any, { props = {} }: NgStory): void {
     const changes: SimpleChanges = {};
-    const hasNgOnChangesHook = _.has(instance, 'ngOnChanges');
+    const hasNgOnChangesHook = !!instance['ngOnChanges'];
 
-    _.forEach(propsMeta, (meta, key) => {
+    Object.keys(props).map((key: string) => {
       const value = props[key];
-      const instanceProperty = <any>_.get(instance, key);
+      const instanceProperty = instance[key];
 
-      if (!(instanceProperty instanceof EventEmitter) && !_.isUndefined(value)) {
+      if (!(instanceProperty instanceof EventEmitter) && !!value) {
-        _.set(instance, key, value);
+        instance[key] = value;
         if (hasNgOnChangesHook) {
           changes[key] = new SimpleChange(undefined, value, instanceProperty === undefined);
         }
-      } else if (_.isFunction(value) && (key !== 'ngModelChange')) {
+      } else if (typeof value === 'function' && key !== 'ngModelChange') {
         instanceProperty.subscribe(value);
       }
     });
@@ -76,8 +72,8 @@ export class AppComponent implements AfterViewInit, OnDestroy {
    * Issue: [https://github.com/angular/angular/issues/8903]
    */
   private callNgOnChangesHook(instance: any, changes: SimpleChanges): void {
-    if (!_.isEmpty(changes)) {
+    if (!!Object.keys(changes).length) {
-      _.invoke(instance, 'ngOnChanges', changes);
+      instance.ngOnChanges(changes);
     }
   }
 
@@ -85,12 +81,12 @@ export class AppComponent implements AfterViewInit, OnDestroy {
    * If component implements ControlValueAccessor interface try to set ngModel
    */
   private setNgModel(instance: any, props: ICollection): void {
-    if (_.has(props, 'ngModel')) {
+    if (!!props['ngModel']) {
-      _.invoke(instance, 'writeValue', props.ngModel);
+      instance.writeValue(props.ngModel);
     }
 
-    if (_.isFunction(props.ngModelChange)) {
+    if (typeof props.ngModelChange === 'function') {
-        _.invoke(instance, 'registerOnChange', props.ngModelChange);
+      instance.registerOnChange(props.ngModelChange);
     }
   }
 }

app/angular/src/client/preview/angular/components/error.component.ts

@@ -1,9 +1,9 @@
-import { Component, Inject } from "@angular/core";
+import { Component, Inject } from '@angular/core';
-import { STORY } from "../app.token";
+import { STORY } from '../app.token';
-import { NgError } from "../types";
+import { NgError } from '../types';
 
 @Component({
-  selector: "app-root",
+  selector: 'storybook-dynamic-app-root',
   template: `
     <div class="main">
       <h1>{{ error.message }}</h1>
@@ -40,8 +40,8 @@ import { NgError } from "../types";
         width: 100vw;
         overflow: auto;
       }
-    `
+    `,
-  ]
+  ],
 })
 export class ErrorComponent {
   constructor(@Inject(STORY) public error: NgError) {}

app/angular/src/client/preview/angular/components/no-preview.component.ts

@@ -1,7 +1,7 @@
-import { Component } from "@angular/core";
+import { Component } from '@angular/core';
 
 @Component({
-  selector: "app-root",
+  selector: 'storybook-dynamic-app-root',
-  template: "<p>No Preview Available!</p>"
+  template: '<p>No Preview Available!</p>',
 })
 export class NoPreviewComponent {}

app/angular/src/client/preview/angular/helpers.ts

@@ -1,44 +1,34 @@
-import {
+import { enableProdMode, NgModule, Component, NgModuleRef, Type } from '@angular/core';
-  Type,
+import { FormsModule } from '@angular/forms';
-  enableProdMode,
-  NgModule,
-  Component,
-  NgModuleRef
-} from '@angular/core';
-import {FormsModule} from '@angular/forms'
-
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 import { BrowserModule } from '@angular/platform-browser';
 import { AppComponent } from './components/app.component';
 import { ErrorComponent } from './components/error.component';
 import { NoPreviewComponent } from './components/no-preview.component';
 import { STORY } from './app.token';
-import { getAnnotations, getParameters, getPropMetadata } from './utils';
+import {
-import { NgModuleMetadata, NgStory, IGetStoryWithContext, IContext, NgProvidedData } from './types';
+  NgModuleMetadata,
+  IGetStoryWithContext,
+  IContext,
+  NgProvidedData,
+  IRenderErrorFn,
+  IRenderStoryFn,
+} from './types';
 
 let platform: any = null;
 let promises: Promise<NgModuleRef<any>>[] = [];
 
-type IRenderStoryFn = (story: IGetStoryWithContext, context: IContext, reRender?: boolean) => void;
-type IRenderErrorFn = (error: Error) => void;
-
-interface IModule extends Type<any> {
-  annotations: any[];
-}
-interface IComponent extends Type<any> {
-  annotations: any[];
-  parameters: any[];
-  propsMetadata: any[]
-}
-
 // Taken from https://davidwalsh.name/javascript-debounce-function
 // We don't want to pull underscore
-const debounce = (func: IRenderStoryFn | IRenderErrorFn,
+const debounce = (
+  func: IRenderStoryFn | IRenderErrorFn,
   wait: number = 100,
-                  immediate: boolean = false): () => void => {
+  immediate: boolean = false
+): (() => void) => {
   let timeout: any;
   return function() {
-    const context = this, args = arguments;
+    const context = this,
+      args = arguments;
     const later = function() {
       timeout = null;
       if (!immediate) {
@@ -54,113 +44,57 @@ const debounce = (func: IRenderStoryFn | IRenderErrorFn,
   };
 };
 
-const getComponentMetadata = (
+const getModule = (
-  { component, props = {}, propsMeta = {}, moduleMetadata = {
+  declarations: Array<Type<any> | any[]>,
-    imports: [],
-    schemas: [],
-    declarations: [],
-    providers: []
-  } }: NgStory
-) => {
-  if (!component || typeof component !== 'function') {
-    throw new Error('No valid component provided');
-  }
-
-  const componentMetadata = getAnnotations(component)[0] || {};
-  const propsMetadata = getPropMetadata(component);
-  const paramsMetadata = getParameters(component);
-
-  Object.keys(propsMeta).map(key => {
-      (<any>propsMetadata)[key] = (<any>propsMeta)[key];
-  });
-
-  const {
-    imports = [],
-    schemas = [],
-    declarations = [],
-    providers = []
-  } = moduleMetadata;
-
-  return {
-    component,
-    props,
-    componentMeta: componentMetadata,
-    propsMeta: propsMetadata,
-    params: paramsMetadata,
-    moduleMeta: {
-      imports,
-      schemas,
-      declarations,
-      providers
-    }
-  };
-};
-
-const getAnnotatedComponent = (meta: NgModule,
-                               component: any,
-                               propsMeta: { [p: string]: any },
-                               params: any[]): IComponent => {
-  const NewComponent: any = function NewComponent(...args: any[]) {
-    component.call(this, ...args);
-  };
-
-  NewComponent.prototype = Object.create(component.prototype);
-  NewComponent.annotations = [new Component(meta)];
-  NewComponent.parameters = params;
-  NewComponent.propsMetadata = propsMeta;
-
-  return NewComponent;
-};
-
-const getModule = (declarations: Array<Type<any> | any[]>,
   entryComponents: Array<Type<any> | any[]>,
   bootstrap: Array<Type<any> | any[]>,
   data: NgProvidedData,
-moduleMetadata: NgModuleMetadata = {
+  moduleMetadata: NgModuleMetadata
-  imports: [],
+) => {
-  schemas: [],
+  const moduleMeta = {
-  declarations: [],
+    declarations: [...declarations, ...(moduleMetadata.declarations || [])],
-  providers: []
+    imports: [BrowserModule, FormsModule, ...(moduleMetadata.imports || [])],
-}): IModule => {
+    providers: [
-  const moduleMeta = new NgModule({
+      { provide: STORY, useValue: Object.assign({}, data) },
-    declarations: [...declarations, ...moduleMetadata.declarations],
+      ...(moduleMetadata.providers || []),
-    imports: [BrowserModule, FormsModule, ...moduleMetadata.imports],
+    ],
-    providers: [{ provide: STORY, useValue: Object.assign({}, data) }, ...moduleMetadata.providers],
+    entryComponents: [...entryComponents, ...(moduleMetadata.entryComponents || [])],
-    entryComponents: [...entryComponents],
+    schemas: [...(moduleMetadata.schemas || [])],
-    schemas: [...moduleMetadata.schemas],
+    bootstrap: [...bootstrap],
-    bootstrap: [...bootstrap]
-  });
-
-  const NewModule: any = function NewModule() {};
-  (<IModule>NewModule).annotations = [moduleMeta];
-  return NewModule;
   };
 
-const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRender: boolean): IModule => {
+  const moduleClass = class DynamicModule {};
-  const {
-    component,
-    componentMeta,
-    props,
-    propsMeta,
-    params,
-    moduleMeta
-  } = getComponentMetadata(currentStory(context));
 
-  if (!componentMeta) {
+  return NgModule(moduleMeta)(moduleClass);
-    throw new Error('No component metadata available');
+};
+
+const createComponentFromTemplate = (template: string): Function => {
+  const componentClass = class DynamicComponent {};
+
+  return Component({
+    template: template,
+  })(componentClass);
+};
+
+const initModule = (
+  currentStory: IGetStoryWithContext,
+  context: IContext,
+  reRender: boolean
+): Function => {
+  const storyObj = currentStory(context);
+  const { component, template, props, moduleMetadata = {} } = storyObj;
+
+  let AnnotatedComponent;
+
+  if (template) {
+    AnnotatedComponent = createComponentFromTemplate(template);
+  } else {
+    AnnotatedComponent = component;
   }
 
-  const AnnotatedComponent = getAnnotatedComponent(
-    componentMeta,
-    component,
-    propsMeta,
-    [...params, ...moduleMeta.providers.map(provider => [provider])]
-  );
-
   const story = {
     component: AnnotatedComponent,
     props,
-    propsMeta
   };
 
   return getModule(
@@ -168,25 +102,24 @@ const initModule = (currentStory: IGetStoryWithContext, context: IContext, reRen
     [AnnotatedComponent],
     [AppComponent],
     story,
-    moduleMeta
+    moduleMetadata
   );
 };
 
-const draw = (newModule: IModule, reRender: boolean = true): void => {
+const draw = (newModule: Function, reRender: boolean = true): void => {
   if (!platform) {
     try {
       enableProdMode();
     } catch (e) {}
 
     platform = platformBrowserDynamic();
-    promises.push(platform.bootstrapModule(newModule))
+    promises.push(platform.bootstrapModule(newModule));
   } else {
-    Promise.all(promises)
+    Promise.all(promises).then(modules => {
-      .then((modules) => {
       modules.forEach(mod => mod.destroy());
 
       const body = document.body;
-        const app = document.createElement('app-root');
+      const app = document.createElement('storybook-dynamic-app-root');
       body.appendChild(app);
       promises = [];
       promises.push(platform.bootstrapModule(newModule));
@@ -197,10 +130,10 @@ const draw = (newModule: IModule, reRender: boolean = true): void => {
 export const renderNgError = debounce((error: Error) => {
   const errorData = {
     message: error.message,
-    stack: error.stack
+    stack: error.stack,
   };
 
-  const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData);
+  const Module = getModule([ErrorComponent], [], [ErrorComponent], errorData, {});
 
   draw(Module);
 });
@@ -212,8 +145,9 @@ export const renderNoPreview = debounce(() => {
     [NoPreviewComponent],
     {
       message: 'No Preview available.',
-      stack: ''
+      stack: '',
-    }
+    },
+    {}
   );
 
   draw(Module);

app/angular/src/client/preview/angular/types.ts

@@ -1,28 +1,40 @@
+
 export interface NgModuleMetadata {
-    declarations: Array<any>,
+  declarations?: Array<any>;
-    imports: Array<any>,
+  entryComponents?: Array<any>;
-    schemas: Array<any>,
+  imports?: Array<any>;
-    providers: Array<any>,
+  schemas?: Array<any>;
+  providers?: Array<any>;
 }
 
-export interface ICollection {[p: string]: any}
+export interface ICollection {
+  [p: string]: any;
+}
 
 export interface NgStory {
-    component: any,
+  component?: any;
-    props: ICollection,
+  props: ICollection;
-    propsMeta: ICollection,
+  propsMeta?: ICollection;
-    moduleMetadata?: NgModuleMetadata
+  moduleMetadata?: NgModuleMetadata;
+  template?: string;
 }
 
 export interface NgError {
-    message: string,
+  message: string;
-    stack: string
+  stack: string;
 }
 
 export type NgProvidedData = NgStory | NgError;
 
 export interface IContext {
-    [p: string]: any
+  [p: string]: any;
 }
 
-export type IGetStoryWithContext = (context: IContext) => NgStory
+export type IGetStoryWithContext = (context: IContext) => NgStory;
+
+export type IRenderStoryFn = (
+  story: IGetStoryWithContext,
+  context: IContext,
+  reRender?: boolean
+) => void;
+export type IRenderErrorFn = (error: Error) => void;

app/angular/src/client/preview/angular/utils.ts

@@ -1,38 +0,0 @@
-import { ɵReflectionCapabilities } from '@angular/core';
-
-const reflectionCapabilities = new ɵReflectionCapabilities();
-
-function getMeta(component: any, [name1, name2]: any, defaultValue: any) {
-  if (!name2) {
-    name2 = name1;
-    name1 = `__${name1}__`;
-  }
-
-  if (component[name1]) {
-    return component[name1];
-  }
-
-  if (component[name2]) {
-    return component[name2];
-  }
-
-  return (<any>window)['Reflect'].getMetadata(name2, component) || defaultValue;
-}
-
-export function getAnnotations(component: any) {
-  return getMeta(component, ['annotations'], []);
-}
-
-export function getPropMetadata(component: any) {
-  return getMeta(component, ['__prop__metadata__', 'propMetadata'], {});
-}
-
-export function getParameters(component: any) {
-  const params = reflectionCapabilities.parameters(component);
-
-  if (!params || !params[0]) {
-    return getMeta(component, ['parameters'], []);
-  }
-
-  return params;
-}

app/angular/src/demo/button.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, Output, EventEmitter } from '@angular/core';
 
 @Component({
-  selector: 'button-component',
+  selector: 'storybook-button-component',
   template: `
       <button (click)="onClick.emit($event);">{{ text }}</button>
   `,
@@ -16,8 +16,8 @@ import { Component, Input, Output, EventEmitter } from '@angular/core';
           padding: 3px 10px;
           margin: 10px;
         }
-      `
+      `,
-  ]
+  ],
 })
 export default class ButtonComponent {
   @Input() text = '';

app/angular/src/demo/welcome.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'welcome-component',
+  selector: 'storybook-welcome-component',
   template: `
       <main>
         <h1>Welcome to storybook</h1>
@@ -15,7 +15,8 @@ import { Component } from '@angular/core';
           (Basically a story is like a visual test case.)
         </p>
         <p>
-          See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called <span class="inline-code">Button</span> .
+          See these sample <a (click)="showApp();" role="button" tabIndex="0">stories</a> for a component called
+          <span class="inline-code">Button</span> .
         </p>
         <p>
           Just like that, you can add your own components as stories.
@@ -38,7 +39,8 @@ import { Component } from '@angular/core';
         <p class="note">
           <b>NOTE:</b>
           <br />
-          Have a look at the <span class="inline-code">.storybook/webpack.config.js</span> to add webpack loaders and plugins you are using in this project.
+          Have a look at the <span class="inline-code">.storybook/webpack.config.js</span>
+          to add webpack loaders and plugins you are using in this project.
         </p>
       </main>
   `,
@@ -71,8 +73,8 @@ import { Component } from '@angular/core';
           border-bottom: 1px solid #1474f3;
           padding-bottom: 2px;
         }
-      `
+      `,
-  ]
+  ],
 })
 export default class WelcomeComponent {
   displayName = 'Welcome';

app/angular/src/server/build.js

@@ -56,7 +56,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

app/angular/src/server/config.js

@@ -2,6 +2,7 @@
 import fs from 'fs';
 import path from 'path';
 import loadBabelConfig from './babel_config';
+import loadTsConfig from './ts_config';
 
 // avoid ESLint errors
 const logger = console;
@@ -15,6 +16,9 @@ export default function(configType, baseConfig, configDir) {
   const babelConfig = loadBabelConfig(configDir);
   config.module.rules[0].query = babelConfig;
 
+  const tsOptions = loadTsConfig(configDir);
+  config.module.rules[1].loaders[0].options = tsOptions;
+
   // Check whether a config.js file exists inside the storybook
   // config directory and throw an error if it's not.
   const storybookConfigPath = path.resolve(configDir, 'config.js');

app/angular/src/server/config/utils.js

@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

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

@@ -4,19 +4,12 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
 
-import {
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
 import babelLoaderConfig from './babel';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -37,7 +30,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -46,7 +39,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
@@ -71,12 +64,21 @@ export default function() {
         },
         {
           test: /\.ts?$/,
-          loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
+          loaders: [
+            {
+              loader: require.resolve('ts-loader'),
+            },
+            require.resolve('angular2-template-loader'),
+          ],
         },
         {
-          test: /\.(html|css)$/,
+          test: /\.html$/,
           loader: 'raw-loader',
-          exclude: /\.async\.(html|css)$/,
+          exclude: /\.async\.css$/,
+        },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
         },
         {
           test: /\.md$/,

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

@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
@@ -52,6 +52,9 @@ export default function() {
           ie8: false,
           mangle: false,
           warnings: false,
+          compress: {
+            keep_fnames: true,
+          },
           output: {
             comments: false,
           },
@@ -73,12 +76,21 @@ export default function() {
         },
         {
           test: /\.ts?$/,
-          loaders: [require.resolve('ts-loader'), require.resolve('angular2-template-loader')],
+          loaders: [
+            {
+              loader: require.resolve('ts-loader'),
+            },
+            require.resolve('angular2-template-loader'),
+          ],
         },
         {
-          test: /\.(html|css)$/,
+          test: /\.html$/,
           loader: 'raw-loader',
-          exclude: /\.async\.(html|css)$/,
+          exclude: /\.async\.html$/,
+        },
+        {
+          test: /\.scss$/,
+          loaders: [require.resolve('raw-loader'), require.resolve('sass-loader')],
         },
       ],
     },

app/angular/src/server/iframe.html.ejs

@@ -14,6 +14,6 @@
     <%= htmlWebpackPlugin.options.data.previewHead %>
 </head>
 <body>
-    <app-root></app-root>
+    <storybook-dynamic-app-root></storybook-dynamic-app-root>
 </body>
 </html>

app/angular/src/server/index.js

@@ -120,8 +120,6 @@ if (!hasCustomFavicon) {
   app.use(favicon(path.resolve(__dirname, 'public/favicon.ico')));
 }
 
-// Build the webpack configuration using the `baseConfig`
-// custom `.babelrc` file and `webpack.config.js` files
 const configDir = program.configDir || './.storybook';
 
 // The repository info is sent to the storybook while running on

app/angular/src/server/middleware.js

@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

app/angular/src/server/ts_config.js

@@ -0,0 +1,27 @@
+import fs from 'fs';
+import path from 'path';
+
+// avoid ESLint errors
+const logger = console;
+
+function resolveTsConfig(tsConfigPath) {
+  if (!fs.existsSync(tsConfigPath)) {
+    return null;
+  }
+
+  logger.info('=> Found custom tsconfig.json');
+
+  return tsConfigPath;
+}
+
+export default function(configDir) {
+  const configFile = resolveTsConfig(path.resolve(configDir, 'tsconfig.json'));
+
+  if (!configFile) {
+    return {};
+  }
+
+  return {
+    configFile,
+  };
+}

app/angular/src/server/ts_config.test.js

@@ -0,0 +1,32 @@
+import loadTsConfig from './ts_config';
+
+// eslint-disable-next-line global-require
+jest.mock('fs', () => require('../../../../__mocks__/fs'));
+jest.mock('path', () => ({
+  resolve: () => 'tsconfig.json',
+}));
+
+const setupFiles = files => {
+  // eslint-disable-next-line no-underscore-dangle, global-require
+  require('fs').__setMockFiles(files);
+};
+
+describe('ts_config', () => {
+  it('should return the config with the path to the tsconfig.json', () => {
+    setupFiles({ 'tsconfig.json': '{}' });
+
+    const config = loadTsConfig('.foo');
+
+    expect(config).toEqual({
+      configFile: 'tsconfig.json',
+    });
+  });
+
+  it('should return empty object when there is no tsconfig.json', () => {
+    setupFiles({});
+
+    const config = loadTsConfig('.foo');
+
+    expect(config).toEqual({});
+  });
+});

app/angular/tslint.json

@@ -1,135 +0,0 @@
-{
-  "rulesDirectory": [
-    "node_modules/codelyzer"
-  ],
-  "rules": {
-    "arrow-return-shorthand": true,
-    "callable-types": true,
-    "class-name": true,
-    "comment-format": [
-      true,
-      "check-space"
-    ],
-    "curly": true,
-    "eofline": true,
-    "forin": true,
-    "import-blacklist": [
-      true,
-      "rxjs"
-    ],
-    "import-spacing": true,
-    "indent": [
-      true,
-      "spaces"
-    ],
-    "interface-over-type-literal": true,
-    "label-position": true,
-    "max-line-length": [
-      true,
-      140
-    ],
-    "member-access": false,
-    "member-ordering": [
-      true,
-      "static-before-instance",
-      "variables-before-functions"
-    ],
-    "no-arg": true,
-    "no-bitwise": true,
-    "no-console": [
-      true,
-      "debug",
-      "info",
-      "time",
-      "timeEnd",
-      "trace"
-    ],
-    "no-construct": true,
-    "no-debugger": true,
-    "no-duplicate-super": true,
-    "no-empty": false,
-    "no-empty-interface": true,
-    "no-eval": true,
-    "no-inferrable-types": [
-      true,
-      "ignore-params"
-    ],
-    "no-misused-new": true,
-    "no-non-null-assertion": true,
-    "no-shadowed-variable": true,
-    "no-string-literal": false,
-    "no-string-throw": true,
-    "no-switch-case-fall-through": true,
-    "no-trailing-whitespace": true,
-    "no-unnecessary-initializer": true,
-    "no-unused-expression": true,
-    "no-use-before-declare": true,
-    "no-var-keyword": true,
-    "object-literal-sort-keys": false,
-    "one-line": [
-      true,
-      "check-open-brace",
-      "check-catch",
-      "check-else",
-      "check-whitespace"
-    ],
-    "prefer-const": true,
-    "quotemark": [
-      true,
-      "single"
-    ],
-    "radix": true,
-    "semicolon": [
-      "always"
-    ],
-    "triple-equals": [
-      true,
-      "allow-null-check"
-    ],
-    "typedef-whitespace": [
-      true,
-      {
-        "call-signature": "nospace",
-        "index-signature": "nospace",
-        "parameter": "nospace",
-        "property-declaration": "nospace",
-        "variable-declaration": "nospace"
-      }
-    ],
-    "typeof-compare": true,
-    "unified-signatures": true,
-    "variable-name": false,
-    "whitespace": [
-      true,
-      "check-branch",
-      "check-decl",
-      "check-operator",
-      "check-separator",
-      "check-type"
-    ],
-    "directive-selector": [
-      true,
-      "attribute",
-      "app",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "app",
-      "kebab-case"
-    ],
-    "use-input-property-decorator": true,
-    "use-output-property-decorator": true,
-    "use-host-property-decorator": true,
-    "no-input-rename": true,
-    "no-output-rename": true,
-    "use-life-cycle-interface": true,
-    "use-pipe-transform-interface": true,
-    "component-class-suffix": true,
-    "directive-class-suffix": true,
-    "no-access-missing-member": true,
-    "templates-use-public": true,
-    "invoke-injectable": true
-  }
-}

app/react-native/.npmignore

@@ -1,3 +1,2 @@
 docs
-src
 .babelrc

app/react-native/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -25,13 +25,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.4.0-alpha.1",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.4.0-alpha.1",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/channel-websocket": "^3.3.3",
+    "@storybook/channel-websocket": "^3.4.0-alpha.1",
-    "@storybook/core": "^3.3.3",
+    "@storybook/core": "^3.4.0-alpha.1",
-    "@storybook/ui": "^3.3.3",
+    "@storybook/ui": "^3.4.0-alpha.1",
-    "autoprefixer": "^7.2.4",
+    "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
     "babel-plugin-syntax-async-functions": "^6.13.0",
     "babel-plugin-syntax-trailing-function-commas": "^6.22.0",
@@ -47,8 +47,8 @@
     "babel-preset-stage-0": "^6.24.1",
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
-    "commander": "^2.12.2",
+    "commander": "^2.13.0",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.8",
     "express": "^4.16.2",
     "file-loader": "^1.1.6",
     "find-cache-dir": "^1.0.0",
@@ -60,9 +60,9 @@
     "prop-types": "^15.6.0",
     "react-native-compat": "^1.0.0",
     "react-native-iphone-x-helper": "^1.0.1",
-    "shelljs": "^0.7.8",
+    "shelljs": "^0.8.0",
     "style-loader": "^0.19.1",
-    "uglifyjs-webpack-plugin": "^1.1.5",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
     "url-parse": "^1.1.9",
     "util-deprecate": "^1.0.2",
@@ -73,11 +73,11 @@
     "ws": "^3.3.3"
   },
   "devDependencies": {
-    "react-native": "^0.51.0"
+    "react-native": "^0.52.0"
   },
   "peerDependencies": {
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "react": "*",
-    "react-native": ">=0.27.0"
+    "react-native": "0.52.0"
   }
 }

app/react-native/src/bin/storybook-start.js

@@ -75,10 +75,10 @@ if (!program.skipPackager) {
     );
   }
 
-  let cliCommand = 'node node_modules/react-native/local-cli/cli.js start';
+  let cliCommand = 'react-native start';
   if (program.haul) {
     const platform = program.platform || 'all';
-    cliCommand = `node node_modules/haul/bin/cli.js start --config ${
+    cliCommand = `haul start --config ${
       program.haul
     } --platform ${platform}`;
   }

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

@@ -37,6 +37,9 @@ const getConfig = options => {
           ie8: false,
           mangle: false,
           warnings: false,
+          compress: {
+            keep_fnames: true,
+          },
           output: {
             comments: false,
           },

app/react/.npmignore

@@ -1,3 +1,2 @@
 docs
-src
 .babelrc

app/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/app/react",
   "bugs": {
@@ -23,16 +23,16 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.4.0-alpha.1",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.4.0-alpha.1",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/channel-postmessage": "^3.3.3",
+    "@storybook/channel-postmessage": "^3.4.0-alpha.1",
-    "@storybook/client-logger": "^3.3.3",
+    "@storybook/client-logger": "^3.4.0-alpha.1",
-    "@storybook/core": "^3.3.3",
+    "@storybook/core": "^3.4.0-alpha.1",
-    "@storybook/node-logger": "^3.3.3",
+    "@storybook/node-logger": "^3.4.0-alpha.1",
-    "@storybook/ui": "^3.3.3",
+    "@storybook/ui": "^3.4.0-alpha.1",
     "airbnb-js-shims": "^1.4.0",
-    "autoprefixer": "^7.2.4",
+    "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
     "babel-plugin-react-docgen": "^1.8.0",
     "babel-plugin-transform-regenerator": "^6.26.0",
@@ -45,11 +45,11 @@
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "chalk": "^2.3.0",
-    "commander": "^2.12.2",
+    "commander": "^2.13.0",
-    "common-tags": "^1.6.0",
+    "common-tags": "^1.7.2",
     "configstore": "^3.1.1",
     "core-js": "^2.5.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.8",
     "dotenv-webpack": "^1.5.4",
     "express": "^4.16.2",
     "file-loader": "^1.1.6",
@@ -57,13 +57,13 @@
     "glamor": "^2.20.40",
     "glamorous": "^4.11.2",
     "global": "^4.3.2",
-    "html-loader": "^0.5.1",
+    "html-loader": "^0.5.4",
     "html-webpack-plugin": "^2.30.1",
     "json-loader": "^0.5.7",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.1",
     "lodash.flattendeep": "^4.4.0",
-    "markdown-loader": "^2.0.1",
+    "markdown-loader": "^2.0.2",
     "npmlog": "^4.1.2",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.10",
@@ -72,9 +72,9 @@
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "serve-favicon": "^2.4.5",
-    "shelljs": "^0.7.8",
+    "shelljs": "^0.8.0",
     "style-loader": "^0.19.1",
-    "uglifyjs-webpack-plugin": "^1.1.5",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",
@@ -83,7 +83,7 @@
     "webpack-hot-middleware": "^2.21.0"
   },
   "devDependencies": {
-    "nodemon": "^1.14.7"
+    "nodemon": "^1.14.11"
   },
   "peerDependencies": {
     "babel-core": "^6.26.0 || ^7.0.0-0",

app/react/src/server/build.js

@@ -54,7 +54,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

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

@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

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

@@ -5,19 +5,12 @@ import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
 
-import {
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
 import babelLoaderConfig from './babel';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -38,7 +31,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -47,7 +40,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

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

@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
@@ -52,6 +52,9 @@ export default function() {
           ie8: false,
           mangle: false,
           warnings: false,
+          compress: {
+            keep_fnames: true,
+          },
           output: {
             comments: false,
           },

app/react/src/server/middleware.js

@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

app/vue/.npmignore

@@ -1,3 +1,2 @@
 docs
-src
 .babelrc

app/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybooks/storybook/tree/master/apps/vue",
   "bugs": {
@@ -23,14 +23,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.4.0-alpha.1",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.4.0-alpha.1",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/channel-postmessage": "^3.3.3",
+    "@storybook/channel-postmessage": "^3.4.0-alpha.1",
-    "@storybook/core": "^3.3.3",
+    "@storybook/core": "^3.4.0-alpha.1",
-    "@storybook/ui": "^3.3.3",
+    "@storybook/ui": "^3.4.0-alpha.1",
     "airbnb-js-shims": "^1.4.0",
-    "autoprefixer": "^7.2.4",
+    "autoprefixer": "^7.2.5",
     "babel-loader": "^7.1.2",
     "babel-plugin-react-docgen": "^1.8.0",
     "babel-plugin-transform-regenerator": "^6.26.0",
@@ -43,20 +43,22 @@
     "babel-runtime": "^6.26.0",
     "case-sensitive-paths-webpack-plugin": "^2.1.1",
     "chalk": "^2.3.0",
-    "commander": "^2.12.2",
+    "commander": "^2.13.0",
-    "common-tags": "^1.6.0",
+    "common-tags": "^1.7.2",
     "configstore": "^3.1.1",
     "core-js": "^2.5.3",
-    "css-loader": "^0.28.7",
+    "css-loader": "^0.28.8",
     "dotenv-webpack": "^1.5.4",
     "express": "^4.16.2",
     "file-loader": "^1.1.6",
     "find-cache-dir": "^1.0.0",
     "global": "^4.3.2",
+    "html-loader": "^0.5.4",
     "html-webpack-plugin": "^2.30.1",
     "json-loader": "^0.5.7",
     "json-stringify-safe": "^5.0.1",
     "json5": "^0.5.1",
+    "markdown-loader": "^2.0.2",
     "postcss-flexbugs-fixes": "^3.2.0",
     "postcss-loader": "^2.0.10",
     "prop-types": "^15.6.0",
@@ -66,9 +68,9 @@
     "redux": "^3.7.2",
     "request": "^2.83.0",
     "serve-favicon": "^2.4.5",
-    "shelljs": "^0.7.8",
+    "shelljs": "^0.8.0",
     "style-loader": "^0.19.1",
-    "uglifyjs-webpack-plugin": "^1.1.5",
+    "uglifyjs-webpack-plugin": "^1.1.6",
     "url-loader": "^0.6.2",
     "util-deprecate": "^1.0.2",
     "uuid": "^3.1.0",
@@ -79,15 +81,15 @@
     "webpack-hot-middleware": "^2.21.0"
   },
   "devDependencies": {
-    "nodemon": "^1.14.7",
+    "nodemon": "^1.14.11",
     "vue": "^2.5.13",
-    "vue-loader": "^13.6.2",
+    "vue-loader": "^13.7.0",
     "vue-template-compiler": "^2.5.13"
   },
   "peerDependencies": {
     "babel-core": "^6.26.0 || ^7.0.0-0",
     "vue": "2.5.13",
-    "vue-loader": "13.6.2",
+    "vue-loader": "13.7.0",
     "vue-template-compiler": "2.5.13"
   }
 }

app/vue/src/server/build.js

@@ -56,7 +56,7 @@ shelljs.cp(path.resolve(__dirname, 'public/favicon.ico'), outputDir);
 // Build the webpack configuration using the `baseConfig`
 // custom `.babelrc` file and `webpack.config.js` files
 // NOTE changes to env should be done before calling `getBaseConfig`
-const config = loadConfig('PRODUCTION', getBaseConfig(), configDir);
+const config = loadConfig('PRODUCTION', getBaseConfig(configDir), configDir);
 config.output.path = path.resolve(outputDir);
 
 // copy all static files

app/vue/src/server/config/utils.js

@@ -33,5 +33,3 @@ export function loadEnv(options = {}) {
     'process.env': env,
   };
 }
-
-export const getConfigDir = () => process.env.SBCONFIG_CONFIG_DIR || './.storybook';

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

@@ -4,19 +4,12 @@ import Dotenv from 'dotenv-webpack';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import WatchMissingNodeModulesPlugin from './WatchMissingNodeModulesPlugin';
-import {
+import { includePaths, excludePaths, nodeModulesPaths, loadEnv, nodePaths } from './utils';
-  getConfigDir,
-  includePaths,
-  excludePaths,
-  nodeModulesPaths,
-  loadEnv,
-  nodePaths,
-} from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import babelLoaderConfig from './babel';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const config = {
     devtool: 'cheap-module-source-map',
     entry: {
@@ -37,7 +30,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -46,7 +39,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),

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

@@ -4,11 +4,11 @@ import UglifyJsPlugin from 'uglifyjs-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 
 import babelLoaderConfig from './babel.prod';
-import { getConfigDir, includePaths, excludePaths, loadEnv, nodePaths } from './utils';
+import { includePaths, excludePaths, loadEnv, nodePaths } from './utils';
 import { getPreviewHeadHtml, getManagerHeadHtml } from '../utils';
 import { version } from '../../../package.json';
 
-export default function() {
+export default function(configDir) {
   const entries = {
     preview: [require.resolve('./polyfills'), require.resolve('./globals')],
     manager: [require.resolve('./polyfills'), path.resolve(__dirname, '../../client/manager')],
@@ -32,7 +32,7 @@ export default function() {
         filename: 'index.html',
         chunks: ['manager'],
         data: {
-          managerHead: getManagerHeadHtml(getConfigDir()),
+          managerHead: getManagerHeadHtml(configDir),
           version,
         },
         template: require.resolve('../index.html.ejs'),
@@ -41,7 +41,7 @@ export default function() {
         filename: 'iframe.html',
         excludeChunks: ['manager'],
         data: {
-          previewHead: getPreviewHeadHtml(getConfigDir()),
+          previewHead: getPreviewHeadHtml(configDir),
         },
         template: require.resolve('../iframe.html.ejs'),
       }),
@@ -52,6 +52,9 @@ export default function() {
           ie8: false,
           mangle: false,
           warnings: false,
+          compress: {
+            keep_fnames: true,
+          },
           output: {
             comments: false,
           },

app/vue/src/server/middleware.js

@@ -17,7 +17,7 @@ export const webpackValid = new Promise((resolve, reject) => {
 export default function(configDir) {
   // Build the webpack configuration using the `getBaseConfig`
   // custom `.babelrc` file and `webpack.config.js` files
-  const config = loadConfig('DEVELOPMENT', getBaseConfig(), configDir);
+  const config = loadConfig('DEVELOPMENT', getBaseConfig(configDir), configDir);
   const middlewareFn = getMiddleware(configDir);
 
   // remove the leading '/'

docs/README.md

@@ -12,4 +12,4 @@ yarn storybook
 
 ### Edit Documentation
 
-Documentation is written in Markdown and located inside the [`pages/`](pages/) directory.
+Documentation is written in Markdown and located inside the [`docs/src/pages`](https://github.com/storybooks/storybook/tree/master/docs/src/pages) directory.

docs/package.json

@@ -18,10 +18,10 @@
     "storybook": "start-storybook -p 9009 -s src/pages"
   },
   "dependencies": {
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.3.8",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.3.8",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.3.8",
-    "@storybook/react": "^3.3.3",
+    "@storybook/react": "^3.3.8",
     "babel-cli": "^6.26.0",
     "babel-core": "^6.26.0",
     "babel-loader": "^6.4.1",
@@ -31,27 +31,27 @@
     "babel-preset-react": "^6.24.1",
     "babel-preset-stage-0": "^6.24.1",
     "bootstrap": "^3.3.7",
-    "gatsby": "^1.9.149",
+    "gatsby": "^1.9.154",
-    "gatsby-link": "^1.6.32",
+    "gatsby-link": "^1.6.34",
     "gatsby-plugin-sharp": "^1.6.24",
     "gatsby-remark-autolink-headers": "^1.4.11",
     "gatsby-remark-copy-linked-files": "^1.5.25",
     "gatsby-remark-images": "^1.5.36",
     "gatsby-remark-smartypants": "^1.4.10",
     "gatsby-source-filesystem": "^1.5.11",
-    "gatsby-transformer-remark": "^1.7.26",
+    "gatsby-transformer-remark": "^1.7.28",
     "gh-pages": "^1.1.0",
     "global": "^4.3.2",
     "highlight.js": "^9.12.0",
     "lodash": "^4.17.2",
-    "marked": "^0.3.7",
+    "marked": "^0.3.12",
     "prop-types": "^15.6.0",
     "react": "^15.6.1",
     "react-document-title": "^2.0.3",
     "react-dom": "^15.6.1",
     "react-helmet": "^5.0.3",
     "react-router": "^4.2.0",
-    "react-stack-grid": "^0.7.0",
+    "react-stack-grid": "^0.7.1",
     "sitemap": "^1.12.0"
   },
   "private": true

docs/src/pages/addons/addon-gallery/index.md

@@ -1,8 +1,7 @@
-* * *
+---
-
 id: 'addon-gallery'
-
+title: 'Addon Gallery'
-## title: 'Addon Gallery'
+---
 
 This is a list of available addons for Storybook.
 

docs/src/pages/addons/api/index.md

@@ -1,8 +1,7 @@
-* * *
+---
-
 id: 'api'
-
+title: 'API'
-## title: 'API'
+---
 
 ## Core Addon API
 

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/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/basics/guide-angular/index.md

@@ -17,7 +17,7 @@ In this guide, we are trying to set up Storybook for your Angular project.
 ## Table of contents
 
 -   [Create Angular project](#create-angular-project)
--   [Add @storybook/angular](#add-storybookangular)
+-   [Add @storybook/angular and babel-core](#add-storybookangular-and-babel-core)
 -   [Create the config file](#create-the-config-file)
 -   [Write your stories](#write-your-stories)
 -   [Run your Storybook](#run-your-storybook)
@@ -32,12 +32,12 @@ ng new your-angular-prj
 cd your-angular-prj
 ```
 
-## Add @storybook/angular
+## Add @storybook/angular and babel-core
 
-Next, install `@storybook/angular` to your project:
+Next, install `@storybook/angular` and `babel-core` (it's a peerDependency) to your project:
 
 ```sh
-npm i --save-dev @storybook/angular
+npm i --save-dev @storybook/angular babel-core
 ```
 
 Then add the following NPM script to your package json in order to start the storybook later in this guide:
@@ -63,19 +63,19 @@ To do that, simply create a file at `.storybook/config.js` with the following co
 import { configure } from '@storybook/angular';
 
 function loadStories() {
-  require('../stories/index.ts');
+  require('../src/stories/index.ts');
 }
 
 configure(loadStories, module);
 ```
 
-That'll load stories in `../stories/index.ts`.
+That'll load stories in `../src/stories/index.ts`.
 
 Just like that, you can load stories from wherever you want to.
 
 ## Write your stories
 
-Now you can write some stories inside the `../stories/index.ts` file, like this:
+Now you can write some stories inside the `../src/stories/index.ts` file, like this:
 
 ```js
 import { storiesOf } from '@storybook/angular';

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

@@ -16,7 +16,7 @@ In this guide, we are trying to set up Storybook for your React project.
 ## Table of contents
 
 -   [Add @storybook/react](#add-storybookreact)
--   [Add react and react-dom](#add-react-and-react-dom)
+-   [Add react, react-dom, and babel-core](#add-react-react-dom-and-babel-core)
 -   [Create the config file](#create-the-config-file)
 -   [Write your stories](#write-your-stories)
 -   [Run your Storybook](#run-your-storybook)
@@ -29,12 +29,13 @@ First of all, you need to add `@storybook/react` to your project. To do that, si
 npm i --save-dev @storybook/react
 ```
 
-## Add react and react-dom
+## Add react, react-dom, and babel-core
 
-Make sure that you have `react` and `react-dom` in your dependencies as well because we list these as a peerDependency:
+Make sure that you have `react`, `react-dom`, and `babel-core` in your dependencies as well because we list these as a peerDependency:
 
 ```sh
 npm i --save react react-dom
+npm i --save-dev babel-core
 ```
 
 Then add the following NPM script to your package json in order to start the storybook later in this guide:

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

@@ -1,8 +1,7 @@
-* * *
+---
-
 id: 'guide-vue'
-
+title: 'Storybook for Vue'
-## title: 'Storybook for Vue'
+---
 
 You may have tried to use our quick start guide to setup your project for Storybook. If you want to set up Storybook manually, this is the guide for you.
 
@@ -18,7 +17,7 @@ In this guide, we are trying to set up Storybook for your Vue project.
 ## Table of contents
 
 -   [Add @storybook/vue](#add-storybookvue)
--   [Add vue](#add-vue)
+-   [Add vue and babel-core](#add-vue-and-babel-core)
 -   [Create the NPM script](#create-the-npm-script)
 -   [Create the config file](#create-the-config-file)
 -   [Write your stories](#write-your-stories)
@@ -32,12 +31,13 @@ First of all, you need to add `@storybook/vue` to your project. To do that, simp
 npm i --save-dev @storybook/vue
 ```
 
-## Add vue
+## Add vue and babel-core
 
-Make sure that you have `vue` in your dependencies as well because we list is as a peerDependency:
+Make sure that you have `vue` and `babel-core` in your dependencies as well because we list is as a peerDependency:
 
 ```sh
 npm i --save vue
+npm i --save-dev babel-core
 ```
 
 ## Create the NPM script

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

@@ -38,7 +38,7 @@ Since this config file stays in the Storybook directory, you need to set the inc
 
 You also need to install the loaders (style, css, and sass) used in above config manually.
 
-> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/configurations/default-config/) other than loading JS files with the Babel loader.
+> Once you create this `webpack.config.js` file, Storybook won't load the [default Webpack config](/configurations/default-config/) other than loading JS files with the Babel loader. This will disable included functionality like svg loading. Read on to learn how to [retain defaults](#full-control-mode--default).
 
 ### Supported Webpack Options
 

docs/src/pages/examples/_examples.yml

@@ -139,3 +139,9 @@ fyndiq-ui:
   description: Fyndiq UI Component library
   source: https://github.com/fyndiq/fyndiq-ui
   demo: https://fyndiq.github.io/fyndiq-ui/
+gumgum:
+  thumbnail: ./thumbnails/gumgum.png
+  title: GumGum
+  description: GumGum (Computer Vision Company) Component library
+  demo: https://storybook.gumgum.com
+  site: https://gumgum.com

docs/yarn.lock

@@ -2,9 +2,9 @@
 # yarn lockfile v1
 
 
-"@storybook/addon-actions@^3.3.3":
+"@storybook/addon-actions@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.3.tgz#468e3426eb8f109825d9b41bf77f206711fa74b3"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-3.3.8.tgz#7efa3d639b35f5b7540ed5befd2fbd80bc49e821"
   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.3":
+"@storybook/addon-links@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.3.tgz#b5fe29f3aa3d5fe812aa9d47240846bf4d040ad1"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-3.3.8.tgz#d760952951c1f51eef280ceb091505d7af84bfb6"
   dependencies:
-    "@storybook/components" "^3.3.3"
+    "@storybook/components" "^3.3.8"
     global "^4.3.2"
     prop-types "^15.5.10"
 
-"@storybook/addons@^3.3.3":
+"@storybook/addons@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.3.tgz#968d98a61957bc30db642b43924c3332dbaec40e"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-3.3.8.tgz#2e36fdc0c03fb6eb9d2245fea1311ee7aaafbf0e"
 
-"@storybook/channel-postmessage@^3.3.3":
+"@storybook/channel-postmessage@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.3.tgz#d3c1a6da0b9bb111eb410419788d2609924f894b"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-3.3.8.tgz#249a25e6f8c1c59e229ecec71a545c8127d59ab8"
   dependencies:
-    "@storybook/channels" "^3.3.3"
+    "@storybook/channels" "^3.3.8"
     global "^4.3.2"
     json-stringify-safe "^5.0.1"
 
-"@storybook/channels@^3.3.3":
+"@storybook/channels@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.3.tgz#ee9a496f984a41c0b12b523a1375d21e1f05eb7d"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-3.3.8.tgz#3989a77c57ae6bf29bc2dcd9a82f364225f595ba"
 
-"@storybook/client-logger@^3.3.3":
+"@storybook/client-logger@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.3.tgz#3fd2a8dc243d9d3d2f171f7a02f58c805c409385"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-3.3.8.tgz#58fc42e31ba10fc54380b324fbb8a16c76370398"
 
-"@storybook/components@^3.3.3":
+"@storybook/components@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.3.tgz#a01adb8eb065a9e9627d85d7268deb270b57d2de"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-3.3.8.tgz#850737561c1d97cfba003ed060db8f0cdf448c94"
   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.3":
+"@storybook/node-logger@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.3.tgz#e22e29a27fc440ea58134e36a85d5a38eca2ee6e"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-3.3.8.tgz#b528bebb5d74156cf51e2c6424ba6da653adefe2"
   dependencies:
     chalk "^2.3.0"
     npmlog "^4.1.2"
@@ -87,17 +87,17 @@
   dependencies:
     babel-runtime "^6.5.0"
 
-"@storybook/react@^3.3.3":
+"@storybook/react@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.3.tgz#fd7f41fa897b82af09bb4026cfbad9684901cbe1"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-3.3.8.tgz#c7d3d4bb20d5ed281f73b118ccb2a22cd91eb0e8"
   dependencies:
-    "@storybook/addon-actions" "^3.3.3"
+    "@storybook/addon-actions" "^3.3.8"
-    "@storybook/addon-links" "^3.3.3"
+    "@storybook/addon-links" "^3.3.8"
-    "@storybook/addons" "^3.3.3"
+    "@storybook/addons" "^3.3.8"
-    "@storybook/channel-postmessage" "^3.3.3"
+    "@storybook/channel-postmessage" "^3.3.8"
-    "@storybook/client-logger" "^3.3.3"
+    "@storybook/client-logger" "^3.3.8"
-    "@storybook/node-logger" "^3.3.3"
+    "@storybook/node-logger" "^3.3.8"
-    "@storybook/ui" "^3.3.3"
+    "@storybook/ui" "^3.3.8"
     airbnb-js-shims "^1.4.0"
     autoprefixer "^7.2.3"
     babel-loader "^7.1.2"
@@ -116,7 +116,7 @@
     common-tags "^1.6.0"
     configstore "^3.1.1"
     core-js "^2.5.3"
-    css-loader "^0.28.7"
+    css-loader "^0.28.8"
     dotenv-webpack "^1.5.4"
     express "^4.16.2"
     file-loader "^1.1.6"
@@ -124,7 +124,7 @@
     glamor "^2.20.40"
     glamorous "^4.11.2"
     global "^4.3.2"
-    html-loader "^0.5.1"
+    html-loader "^0.5.4"
     html-webpack-plugin "^2.30.1"
     json-loader "^0.5.7"
     json-stringify-safe "^5.0.1"
@@ -141,7 +141,7 @@
     serve-favicon "^2.4.5"
     shelljs "^0.7.8"
     style-loader "^0.19.1"
-    uglifyjs-webpack-plugin "^1.1.5"
+    uglifyjs-webpack-plugin "^1.1.6"
     url-loader "^0.6.2"
     util-deprecate "^1.0.2"
     uuid "^3.1.0"
@@ -149,11 +149,11 @@
     webpack-dev-middleware "^1.12.2"
     webpack-hot-middleware "^2.21.0"
 
-"@storybook/ui@^3.3.3":
+"@storybook/ui@^3.3.8":
-  version "3.3.3"
+  version "3.3.8"
-  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.3.tgz#c8eb95a1734c654e082d3909f665ae00ad472d94"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-3.3.8.tgz#fc9e9f3da3d988da8b6e07f78e1f6db0a5c6e1dd"
   dependencies:
-    "@storybook/components" "^3.3.3"
+    "@storybook/components" "^3.3.8"
     "@storybook/mantra-core" "^1.7.2"
     "@storybook/react-komposer" "^2.0.3"
     babel-runtime "^6.26.0"
@@ -254,6 +254,10 @@ ajv-keywords@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.0.tgz#a296e17f7bfae7c1ce4f7e0de53d29cb32162df0"
 
+ajv-keywords@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
+
 ajv@^4.9.1:
   version "4.11.8"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-4.11.8.tgz#82ffb02b29e662ae53bdc20af15947706739c536"
@@ -300,12 +304,6 @@ ansi-html@0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/ansi-html/-/ansi-html-0.0.7.tgz#813584021962a9e9e6fd039f940d12f56ca7859e"
 
-ansi-red@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/ansi-red/-/ansi-red-0.1.1.tgz#8c638f9d1080800a353c9c28c8a81ca4705d946c"
-  dependencies:
-    ansi-wrap "0.1.0"
-
 ansi-regex@^2.0.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-2.1.1.tgz#c3b33ab5ee360d86e0e628f0468ae7ef27d654df"
@@ -324,10 +322,6 @@ ansi-styles@^3.1.0:
   dependencies:
     color-convert "^1.9.0"
 
-ansi-wrap@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
-
 ansi@^0.3.0, ansi@~0.3.1:
   version "0.3.1"
   resolved "https://registry.yarnpkg.com/ansi/-/ansi-0.3.1.tgz#0c42d4fb17160d5a9af1e484bace1c66922c1b21"
@@ -2100,9 +2094,9 @@ bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
 
-cacache@^10.0.0:
+cacache@^10.0.1:
-  version "10.0.1"
+  version "10.0.2"
-  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.1.tgz#3e05f6e616117d9b54665b1b20c8aeb93ea5d36f"
+  resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.2.tgz#105a93a162bbedf3a25da42e1939ed99ffb145f8"
   dependencies:
     bluebird "^3.5.0"
     chownr "^1.0.1"
@@ -2446,10 +2440,6 @@ code-point-at@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
 
-coffee-script@^1.12.4:
-  version "1.12.7"
-  resolved "https://registry.yarnpkg.com/coffee-script/-/coffee-script-1.12.7.tgz#c05dae0cb79591d05b3070a8433a98c9a89ccc53"
-
 collapse-white-space@^1.0.0, collapse-white-space@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.3.tgz#4b906f670e5a963a87b76b0e1689643341b6023c"
@@ -2876,22 +2866,22 @@ css-loader@^0.26.1:
     postcss-modules-values "^1.1.0"
     source-list-map "^0.1.7"
 
-css-loader@^0.28.7:
+css-loader@^0.28.8:
-  version "0.28.7"
+  version "0.28.8"
-  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.7.tgz#5f2ee989dd32edd907717f953317656160999c1b"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5"
   dependencies:
-    babel-code-frame "^6.11.0"
+    babel-code-frame "^6.26.0"
     css-selector-tokenizer "^0.7.0"
-    cssnano ">=2.6.1 <4"
+    cssnano "^3.10.0"
     icss-utils "^2.1.0"
     loader-utils "^1.0.2"
     lodash.camelcase "^4.3.0"
-    object-assign "^4.0.1"
+    object-assign "^4.1.1"
     postcss "^5.0.6"
-    postcss-modules-extract-imports "^1.0.0"
+    postcss-modules-extract-imports "^1.1.0"
-    postcss-modules-local-by-default "^1.0.1"
+    postcss-modules-local-by-default "^1.2.0"
-    postcss-modules-scope "^1.0.0"
+    postcss-modules-scope "^1.1.0"
-    postcss-modules-values "^1.1.0"
+    postcss-modules-values "^1.3.0"
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
@@ -2924,7 +2914,7 @@ cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
 
-"cssnano@>=2.6.1 <4":
+"cssnano@>=2.6.1 <4", cssnano@^3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/cssnano/-/cssnano-3.10.0.tgz#4f38f6cea2b9b17fa01490f23f1dc68ea65c1c38"
   dependencies:
@@ -3613,7 +3603,7 @@ es6-template-strings@^2.0.0:
     es5-ext "^0.10.12"
     esniff "^1.1"
 
-es6-templates@^0.2.2:
+es6-templates@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/es6-templates/-/es6-templates-0.2.3.tgz#5cb9ac9fb1ded6eb1239342b81d792bbb4078ee4"
   dependencies:
@@ -4357,9 +4347,9 @@ gatsby-cli@^1.1.28:
     yargs "^8.0.2"
     yurnalist "^0.2.1"
 
-gatsby-link@^1.6.30, gatsby-link@^1.6.32:
+gatsby-link@^1.6.34:
-  version "1.6.32"
+  version "1.6.34"
-  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.32.tgz#49114e5fc649f274254953e06bfaafebb296ccb8"
+  resolved "https://registry.yarnpkg.com/gatsby-link/-/gatsby-link-1.6.34.tgz#c1ce57cfcb2f693128b2a7d0eff3dde0c6cefec4"
   dependencies:
     babel-runtime "^6.26.0"
     prop-types "^15.5.8"
@@ -4389,9 +4379,9 @@ gatsby-plugin-sharp@^1.6.24:
     sharp "^0.17.3"
     svgo "^0.7.2"
 
-gatsby-react-router-scroll@^1.0.7:
+gatsby-react-router-scroll@^1.0.8:
-  version "1.0.7"
+  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.7.tgz#50be2d6d3857625eb087c14f2a6789672fd73219"
+  resolved "https://registry.yarnpkg.com/gatsby-react-router-scroll/-/gatsby-react-router-scroll-1.0.8.tgz#6cc9d80c139e58ed5189dd35146ac37b46846cd5"
   dependencies:
     babel-runtime "^6.26.0"
     scroll-behavior "^0.9.1"
@@ -4456,13 +4446,13 @@ gatsby-source-filesystem@^1.5.11:
     slash "^1.0.0"
     valid-url "^1.0.9"
 
-gatsby-transformer-remark@^1.7.26:
+gatsby-transformer-remark@^1.7.28:
-  version "1.7.26"
+  version "1.7.28"
-  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.26.tgz#58c273517b6039489b183fc4194ad07ee46e71ff"
+  resolved "https://registry.yarnpkg.com/gatsby-transformer-remark/-/gatsby-transformer-remark-1.7.28.tgz#c99df9cf9d5fdb8a802168c1d49e32ce8be5895b"
   dependencies:
     babel-runtime "^6.26.0"
     bluebird "^3.5.0"
-    gray-matter "^2.1.0"
+    gray-matter "^3.0.0"
     hast-util-to-html "^3.0.0"
     lodash "^4.17.4"
     mdast-util-to-hast "^2.4.0"
@@ -4478,9 +4468,9 @@ gatsby-transformer-remark@^1.7.26:
     unist-util-select "^1.5.0"
     unist-util-visit "^1.1.1"
 
-gatsby@^1.9.149:
+gatsby@^1.9.154:
-  version "1.9.149"
+  version "1.9.154"
-  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.149.tgz#4c0f776b634a8c291254abedae22e6265bfbcde4"
+  resolved "https://registry.yarnpkg.com/gatsby/-/gatsby-1.9.154.tgz#d4eb3385d88483c8f434a0275374c4c995f685c2"
   dependencies:
     async "^2.1.2"
     babel-code-frame "^6.22.0"
@@ -4521,9 +4511,9 @@ gatsby@^1.9.149:
     fs-extra "^4.0.1"
     gatsby-1-config-css-modules "^1.0.8"
     gatsby-cli "^1.1.28"
-    gatsby-link "^1.6.30"
+    gatsby-link "^1.6.34"
     gatsby-module-loader "^1.0.9"
-    gatsby-react-router-scroll "^1.0.7"
+    gatsby-react-router-scroll "^1.0.8"
     glob "^7.1.1"
     graphql "^0.11.7"
     graphql-relay "^0.5.1"
@@ -4577,6 +4567,7 @@ gatsby@^1.9.149:
     style-loader "^0.13.0"
     type-of "^2.0.1"
     url-loader "^0.5.7"
+    v8-compile-cache "^1.1.0"
     webpack "^1.13.3"
     webpack-configurator "^0.3.0"
     webpack-dev-middleware "^1.8.4"
@@ -4903,15 +4894,14 @@ graphql@^0.11.3, graphql@^0.11.7:
   dependencies:
     iterall "1.1.3"
 
-gray-matter@^2.1.0:
+gray-matter@^3.0.0:
-  version "2.1.1"
+  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-2.1.1.tgz#3042d9adec2a1ded6a7707a9ed2380f8a17a430e"
+  resolved "https://registry.yarnpkg.com/gray-matter/-/gray-matter-3.1.1.tgz#101f80d9e69eeca6765cdce437705b18f40876ac"
   dependencies:
-    ansi-red "^0.1.1"
-    coffee-script "^1.12.4"
     extend-shallow "^2.0.1"
-    js-yaml "^3.8.1"
+    js-yaml "^3.10.0"
-    toml "^2.3.2"
+    kind-of "^5.0.2"
+    strip-bom-string "^1.0.0"
 
 gulp-decompress@^1.2.0:
   version "1.2.0"
@@ -5213,17 +5203,17 @@ html-entities@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
-html-loader@^0.5.1:
+html-loader@^0.5.4:
-  version "0.5.1"
+  version "0.5.4"
-  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.1.tgz#4f1e8396a1ea6ab42bedc987dfac058070861ebe"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.4.tgz#70f36e30a923cc52536fdc812cec6f556aeb47a4"
   dependencies:
-    es6-templates "^0.2.2"
+    es6-templates "^0.2.3"
     fastparse "^1.1.1"
-    html-minifier "^3.0.1"
+    html-minifier "^3.5.8"
-    loader-utils "^1.0.2"
+    loader-utils "^1.1.0"
-    object-assign "^4.1.0"
+    object-assign "^4.1.1"
 
-html-minifier@^3.0.1, html-minifier@^3.2.3:
+html-minifier@^3.2.3, html-minifier@^3.5.8:
   version "3.5.8"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
   dependencies:
@@ -5993,7 +5983,7 @@ js-tokens@^3.0.0, js-tokens@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
 
-js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.2, js-yaml@^3.8.1:
+js-yaml@^3.10.0, js-yaml@^3.4.3, js-yaml@^3.4.6, js-yaml@^3.5.2:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.10.0.tgz#2e78441646bd4682e963f22b6e92823c309c62dc"
   dependencies:
@@ -6630,14 +6620,14 @@ markdown-table@^1.1.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.1.tgz#4b3dd3a133d1518b8ef0dbc709bf2a1b4824bc8c"
 
+marked@^0.3.12:
+  version "0.3.12"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.12.tgz#7cf25ff2252632f3fe2406bde258e94eee927519"
+
 marked@^0.3.6:
   version "0.3.9"
   resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.9.tgz#54ce6a57e720c3ac6098374ec625fcbcc97ff290"
 
-marked@^0.3.7:
-  version "0.3.7"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.7.tgz#80ef3bbf1bd00d1c9cfebe42ba1b8c85da258d0d"
-
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"
@@ -8159,21 +8149,27 @@ postcss-modules-extract-imports@^1.0.0:
   dependencies:
     postcss "^6.0.1"
 
-postcss-modules-local-by-default@^1.0.1:
+postcss-modules-extract-imports@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.1.0.tgz#b614c9720be6816eaee35fb3a5faa1dba6a05ddb"
+  dependencies:
+    postcss "^6.0.1"
+
+postcss-modules-local-by-default@^1.0.1, postcss-modules-local-by-default@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-scope@^1.0.0:
+postcss-modules-scope@^1.0.0, postcss-modules-scope@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-1.1.0.tgz#d6ea64994c79f97b62a72b426fbe6056a194bb90"
   dependencies:
     css-selector-tokenizer "^0.7.0"
     postcss "^6.0.1"
 
-postcss-modules-values@^1.1.0:
+postcss-modules-values@^1.1.0, postcss-modules-values@^1.3.0:
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-1.3.0.tgz#ecffa9d7e192518389f42ad0e83f72aec456ea20"
   dependencies:
@@ -8763,9 +8759,9 @@ react-split-pane@^0.1.74:
     prop-types "^15.5.10"
     react-style-proptype "^3.0.0"
 
-react-stack-grid@^0.7.0:
+react-stack-grid@^0.7.1:
-  version "0.7.0"
+  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/react-stack-grid/-/react-stack-grid-0.7.0.tgz#396109b811ae8a43920ce8b67421ed9978a8b677"
+  resolved "https://registry.yarnpkg.com/react-stack-grid/-/react-stack-grid-0.7.1.tgz#cbf7353ce6c2acf712b827c36b0be234af84bee9"
   dependencies:
     easy-css-transform-builder "^0.0.2"
     exenv "^1.2.1"
@@ -9543,6 +9539,13 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
+schema-utils@^0.4.2:
+  version "0.4.3"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
+  dependencies:
+    ajv "^5.0.0"
+    ajv-keywords "^2.1.0"
+
 scroll-behavior@^0.9.1:
   version "0.9.4"
   resolved "https://registry.yarnpkg.com/scroll-behavior/-/scroll-behavior-0.9.4.tgz#73b4a0eae3e59c0b8f3b6fc1ff78f054a513e79c"
@@ -10257,6 +10260,10 @@ strip-bom-stream@^1.0.0:
     first-chunk-stream "^1.0.0"
     strip-bom "^2.0.0"
 
+strip-bom-string@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/strip-bom-string/-/strip-bom-string-1.0.0.tgz#e5211e9224369fbb81d633a2f00044dc8cedad92"
+
 strip-bom@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/strip-bom/-/strip-bom-2.0.0.tgz#6219a85616520491f35788bdbf1447a99c7e6b0e"
@@ -10564,10 +10571,6 @@ to-regex@^3.0.1:
     extend-shallow "^2.0.1"
     regex-not "^1.0.0"
 
-toml@^2.3.2:
-  version "2.3.3"
-  resolved "https://registry.yarnpkg.com/toml/-/toml-2.3.3.tgz#8d683d729577cb286231dfc7a8affe58d31728fb"
-
 topo@2.x.x:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/topo/-/topo-2.0.2.tgz#cd5615752539057c0dc0491a621c3bc6fbe1d182"
@@ -10661,9 +10664,9 @@ ua-parser-js@^0.7.9:
   version "0.7.17"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac"
 
-uglify-es@3.2.2:
+uglify-es@^3.3.4:
-  version "3.2.2"
+  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.2.2.tgz#15c62b7775002c81b7987a1c49ecd3f126cace73"
+  resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.4.tgz#2d592678791e5310456bbc95e952139e3b13167a"
   dependencies:
     commander "~2.12.1"
     source-map "~0.6.1"
@@ -10705,18 +10708,18 @@ uglifyjs-webpack-plugin@^0.4.6:
     uglify-js "^2.8.29"
     webpack-sources "^1.0.1"
 
-uglifyjs-webpack-plugin@^1.1.5:
+uglifyjs-webpack-plugin@^1.1.6:
-  version "1.1.5"
+  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.5.tgz#5ec4a16da0fd10c96538f715caed10dbdb180875"
+  resolved "https://registry.yarnpkg.com/uglifyjs-webpack-plugin/-/uglifyjs-webpack-plugin-1.1.6.tgz#f4ba8449edcf17835c18ba6ae99b9d610857fb19"
   dependencies:
-    cacache "^10.0.0"
+    cacache "^10.0.1"
     find-cache-dir "^1.0.0"
-    schema-utils "^0.3.0"
+    schema-utils "^0.4.2"
     serialize-javascript "^1.4.0"
     source-map "^0.6.1"
-    uglify-es "3.2.2"
+    uglify-es "^3.3.4"
-    webpack-sources "^1.0.1"
+    webpack-sources "^1.1.0"
-    worker-farm "^1.4.1"
+    worker-farm "^1.5.2"
 
 uid-number@^0.0.6:
   version "0.0.6"
@@ -11025,6 +11028,10 @@ uws@~0.14.4:
   version "0.14.5"
   resolved "https://registry.yarnpkg.com/uws/-/uws-0.14.5.tgz#67aaf33c46b2a587a5f6666d00f7691328f149dc"
 
+v8-compile-cache@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-1.1.0.tgz#1dc2a340fb8e5f800a32bcdbfb8c23cd747021b9"
+
 v8flags@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/v8flags/-/v8flags-2.1.1.tgz#aab1a1fa30d45f88dd321148875ac02c0b55e5b4"
@@ -11293,6 +11300,13 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
+webpack-sources@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.1.0.tgz#a101ebae59d6507354d71d8013950a3a8b7a5a54"
+  dependencies:
+    source-list-map "^2.0.0"
+    source-map "~0.6.1"
+
 webpack-stats-plugin@^0.1.4:
   version "0.1.5"
   resolved "https://registry.yarnpkg.com/webpack-stats-plugin/-/webpack-stats-plugin-0.1.5.tgz#29e5f12ebfd53158d31d656a113ac1f7b86179d9"
@@ -11421,7 +11435,7 @@ wordwrap@~0.0.2:
   version "0.0.3"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
 
-worker-farm@^1.4.1:
+worker-farm@^1.5.2:
   version "1.5.2"
   resolved "https://registry.yarnpkg.com/worker-farm/-/worker-farm-1.5.2.tgz#32b312e5dc3d5d45d79ef44acc2587491cd729ae"
   dependencies:

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

@@ -1,6 +1,8 @@
-/* eslint-disable import/no-extraneous-dependencies, import/no-unresolved, import/extensions */
-
 import { configure } from '@storybook/angular';
+import addCssWarning from '../src/cssWarning';
+import '../src/assets/common.css'
+
+addCssWarning();
 
 function loadStories() {
   // put welcome screen at the top of the list so it's the first one displayed

examples/angular-cli/.storybook/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../tsconfig.json",
+  "exclude": [
+    "../src/test.ts",
+    "../src/**/*.spec.ts"
+  ],
+  "include": [
+    "../src/**/*"
+  ]
+}

examples/angular-cli/e2e/app.e2e-spec.ts

@@ -10,6 +10,6 @@ describe('ng5test App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(<any>(page.getParagraphText())).toEqual('Welcome to app!');
+    expect(<any>page.getParagraphText()).toEqual('Welcome to app!');
   });
 });

examples/angular-cli/package.json

@@ -1,13 +1,12 @@
 {
   "name": "angular-cli",
-  "version": "3.3.3",
+  "version": "3.4.0-alpha.1",
   "license": "MIT",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
     "build": "ng build",
     "test": "ng test",
-    "lint": "ng lint",
     "e2e": "ng e2e",
     "storybook": "start-storybook -p 9008 -s src/assets",
     "build-storybook": "build-storybook -s src"
@@ -25,20 +24,20 @@
     "@angular/router": "^5.1.3",
     "core-js": "^2.4.1",
     "rxjs": "^5.4.2",
-    "zone.js": "^0.8.19"
+    "zone.js": "^0.8.20"
   },
   "devDependencies": {
-    "@angular/cli": "1.6.3",
+    "@angular/cli": "1.6.4",
     "@angular/compiler-cli": "^5.1.3",
     "@angular/language-service": "^5.1.3",
-    "@storybook/addon-actions": "^3.3.3",
+    "@storybook/addon-actions": "^3.4.0-alpha.1",
-    "@storybook/addon-links": "^3.3.3",
+    "@storybook/addon-links": "^3.4.0-alpha.1",
-    "@storybook/addon-notes": "^3.3.3",
+    "@storybook/addon-notes": "^3.4.0-alpha.1",
-    "@storybook/addons": "^3.3.3",
+    "@storybook/addons": "^3.4.0-alpha.1",
-    "@storybook/angular": "^3.3.3",
+    "@storybook/angular": "^3.4.0-alpha.1",
     "@types/jasmine": "~2.8.3",
-    "@types/node": "~6.0.60",
+    "@types/node": "~6.0.96",
-    "codelyzer": "^3.1.2",
+    "global": "^4.3.2",
     "jasmine-core": "~2.8.0",
     "jasmine-spec-reporter": "~4.2.1",
     "karma": "~1.7.0",
@@ -49,7 +48,7 @@
     "karma-jasmine-html-reporter": "^0.2.2",
     "protractor": "~5.2.2",
     "ts-node": "~3.3.0",
-    "tslint": "~5.8.0",
     "typescript": "^2.4.0"
   }
 }
+

examples/angular-cli/src/app/app.component.html

@@ -1,4 +1,7 @@
 <!--The content below is only a placeholder and can be replaced.-->
+<div class="hide" style="color: red; font-size: 30px; text-align: center;">
+  This should be hidden, if not - scss is not loaded as needed.
+</div>
 <div style="text-align:center">
   <h1>
     Welcome to {{title}}!

examples/angular-cli/src/app/app.component.scss

@@ -0,0 +1,5 @@
+$display: none;
+
+.hide {
+  display: $display;
+}

examples/angular-cli/src/app/app.component.spec.ts

@@ -4,30 +4,39 @@ import 'jasmine';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(
+    async(() => {
       TestBed.configureTestingModule({
-      declarations: [
+        declarations: [AppComponent],
-        AppComponent
-      ],
       }).compileComponents();
-  }));
+    })
+  );
 
-  it('should create the app', async(() => {
+  it(
+    'should create the app',
+    async(() => {
       const fixture = TestBed.createComponent(AppComponent);
       const app = fixture.debugElement.componentInstance;
       expect(app).toBeTruthy();
-  }));
+    })
+  );
 
-  it(`should have as title 'app'`, async(() => {
+  it(
+    `should have as title 'app'`,
+    async(() => {
       const fixture = TestBed.createComponent(AppComponent);
       const app = fixture.debugElement.componentInstance;
       expect(app.title).toEqual('app');
-  }));
+    })
+  );
 
-  it('should render title in a h1 tag', async(() => {
+  it(
+    'should render title in a h1 tag',
+    async(() => {
       const fixture = TestBed.createComponent(AppComponent);
       fixture.detectChanges();
       const compiled = fixture.debugElement.nativeElement;
       expect(compiled.querySelector('h1').textContent).toContain('Welcome to app!');
-  }));
+    })
+  );
 });

examples/angular-cli/src/app/app.component.ts

@@ -1,9 +1,9 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'app-root',
+  selector: 'storybook-app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
   title = 'app';

examples/angular-cli/src/app/app.module.ts

@@ -4,13 +4,9 @@ import { NgModule } from '@angular/core';
 import { AppComponent } from './app.component';
 
 @NgModule({
-  declarations: [
+  declarations: [AppComponent],
-    AppComponent
+  imports: [BrowserModule],
-  ],
-  imports: [
-    BrowserModule
-  ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

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

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

examples/angular-cli/src/cssWarning.js

@@ -0,0 +1,10 @@
+import { document } from 'global';
+
+export default function addCssWarning() {
+  const warning = document.createElement('h1');
+  warning.textContent = 'CSS rules are not configured as needed';
+  warning.className = 'css-rules-warning';
+  warning.style.color = 'red';
+
+  document.body.insertBefore(warning, document.body.firstChild);
+}

examples/angular-cli/src/environments/environment.prod.ts

@@ -1,3 +1,3 @@
 export const environment = {
-  production: true
+  production: true,
 };

examples/angular-cli/src/environments/environment.ts

@@ -4,5 +4,5 @@
 // The list of which env maps to which file can be found in `.angular-cli.json`.
 
 export const environment = {
-  production: false
+  production: false,
 };

examples/angular-cli/src/polyfills.ts

@@ -41,22 +41,17 @@
 import 'core-js/es6/reflect';
 import 'core-js/es7/reflect';
 
-
 /**
  * Required to support Web Animations `@angular/animation`.
  * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation
  **/
 // import 'web-animations-js';  // Run `npm install --save web-animations-js`.
 
-
-
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
 import 'zone.js/dist/zone'; // Included with Angular CLI.
 
-
-
 /***************************************************************************************************
  * APPLICATION IMPORTS
  */

examples/angular-cli/src/stories/addon-actions.stories.ts

@@ -7,8 +7,8 @@ storiesOf('Addon Actions', module)
     component: Button,
     props: {
       text: 'Action only',
-      onClick: action('log 1')
+      onClick: action('log 1'),
-    }
+    },
   }))
   .add('Action and method', () => ({
     component: Button,
@@ -18,6 +18,6 @@ storiesOf('Addon Actions', module)
         console.log(e);
         e.preventDefault();
         action('log2')(e.target);
-      }
+      },
-    }
+    },
   }));

examples/angular-cli/src/stories/addon-knobs.stories.ts

@@ -19,20 +19,22 @@ import { AllKnobsComponent } from './all-knobs.component';
 storiesOf('Addon Knobs', module)
   .addDecorator(withKnobs)
   .add('Simple', () => {
-    const name = text('Name', 'John Doe');
+    const name = text('name', 'John Doe');
-    const age = number('Age', 44);
+    const age = number('age', 44);
+    const phoneNumber = text('phoneNumber', '555-55-55');
 
     return {
       component: SimpleKnobsComponent,
       props: {
         name,
-        age
+        age,
-      }
+        phoneNumber,
+      },
     };
   })
   .add('All knobs', () => {
-    const name = text('Name', 'Jane');
+    const name = text('name', 'Jane');
-    const stock = number('Stock', 20, {
+    const stock = number('stock', 20, {
       range: true,
       min: 0,
       max: 30,
@@ -43,13 +45,13 @@ storiesOf('Addon Knobs', module)
       bananas: 'Banana',
       cherries: 'Cherry',
     };
-    const fruit = select('Fruit', fruits, 'apple');
+    const fruit = select('fruit', fruits, 'apple');
-    const price = number('Price', 2.25);
+    const price = number('price', 2.25);
 
-    const border = color('Border', 'deeppink');
+    const border = color('border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017'));
+    const today = date('today', new Date('Jan 20 2017'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+    const items = array('items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+    const nice = boolean('nice', true);
     button('Arbitrary action', action('You clicked it!'));
 
     return {
@@ -57,13 +59,12 @@ storiesOf('Addon Knobs', module)
       props: {
         name,
         stock,
-        fruits,
         fruit,
         price,
         border,
         today,
         items,
-        nice
+        nice,
-      }
+      },
     };
   });

examples/angular-cli/src/stories/addon-notes.stories.ts

@@ -10,7 +10,7 @@ storiesOf('Addon Notes', module)
       props: {
         text: 'Notes on some Button',
         onClick: () => {},
-      }
+      },
     }))
   )
   .add(
@@ -28,6 +28,6 @@ storiesOf('Addon Notes', module)
       props: {
         text: 'Notes with HTML',
         onClick: () => {},
-      }
+      },
     }))
   );

examples/angular-cli/src/stories/all-knobs.component.ts

@@ -1,8 +1,7 @@
-import { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, Input, OnInit, OnChanges, SimpleChanges } from '@angular/core';
-import { NgStyle } from '@angular/common';
 
 @Component({
-  selector: 'simple-knobs-component',
+  selector: 'storybook-simple-knobs-component',
   template: `
     <div [ngStyle]="{ 'border': '2px dotted ' + border, 'padding.px': '8 22', 'border-radius.px': '8'}">
       <h1>My name is {{ name }},</h1>
@@ -18,16 +17,9 @@ import { NgStyle } from '@angular/common';
       <p *ngIf="nice">Nice to meet you!</p>
       <p *ngIf="!nice">Leave me alone!</p>
     </div>
-  `
+  `,
 })
 export class AllKnobsComponent implements OnChanges, OnInit {
-  ngOnInit(): void {
-    console.log('on init, user component');
-  }
-  ngOnChanges(changes: SimpleChanges): void {
-    console.log(changes);
-  }
-  @Input() text;
   @Input() price;
   @Input() border;
   @Input() fruit;
@@ -40,4 +32,11 @@ export class AllKnobsComponent implements OnChanges, OnInit {
   constructor() {
     console.log('constructor');
   }
+
+  ngOnInit(): void {
+    console.log('on init, user component');
+  }
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log(changes);
+  }
 }