Merge remote-tracking branch 'origin/master' into move-server-config-to-core

# Conflicts: # addons/storyshots/package.json # lib/core/package.json
2025-04-04 13:01:07 +08:00 · 2018-04-02 18:02:33 +03:00 · 2018-04-02 18:02:33 +03:00 · a1a91dd4b2
commit a1a91dd4b2
parent 66c268253b eb4bc2ab5f
129 changed files with 2371 additions and 1221 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -213,6 +213,11 @@ jobs:
          key: docs-dependencies-{{ checksum "docs/yarn.lock" }}
          paths:
            - docs/node_modules
+      - save_cache:
+          name: "Cache built docs"
+          key: built-docs-{{ .Revision }}
+          paths:
+            - docs/public
  lint:
    <<: *defaults
    steps:
@ -293,10 +298,25 @@ jobs:
  deploy:
    <<: *defaults
    steps:
+      - checkout
+      - restore_cache:
+          name: "Restore docs dependencies cache"
+          keys:
+            - docs-dependencies-{{ checksum "docs/yarn.lock" }}
+      - restore_cache:
+          name: "Restore built docs"
+          keys:
+            - built-docs-{{ .Revision }}
+      - add_ssh_keys:
+          fingerprints:
+            - "35:aa:b9:c3:b8:1c:27:1f:02:0a:73:1a:ac:58:77:df"
      - run:
          name: "Deploy"
          command: |
-            echo "TODO"
+            cd docs
+            git config --global user.email "gh-pages@localhost"
+            git config --global user.name "npm gh-pages"
+            yarn deploy:ci
 workflows:
  version: 2
  build_accept_deploy:
@ -328,3 +348,10 @@ workflows:
      - cli-latest-cra:
          requires:
            - build
+      - deploy:
+          requires:
+            - docs
+          filters:
+            branches:
+              only:
+                - release/3.4
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -37,7 +37,7 @@
 /lib/channel-postmessage/ @mnmtanish @ndelangen
 /lib/channel-websocket/ @mnmtanish @ndelangen
 /lib/channels/ @mnmtanish @ndelangen
-/lib/cli/ @hypnosphi @ndelangen @danielduan @shilman @stijnkoopal
+/lib/cli/ @hypnosphi @ndelangen @shilman @stijnkoopal
 /lib/client-logger/ @dangreenisrael
 /lib/codemod/ @aaronmcadam @ndelangen
 /lib/components/ @ndelangen @hypnosphi @tmeasday
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,327 @@
+# 4.0.0-alpha.1
+
+2018-March-29
+
+#### Bug Fixes
+
+-   [Hotfix]  Use published webpack 4 compatible fork of react-dev-utils [#3312](https://github.com/storybooks/storybook/pull/3312)
+
+# 4.0.0-alpha.0
+
+2018-March-28
+
+#### Breaking Changes
+
+-   Webpack 4 [#3148](https://github.com/storybooks/storybook/pull/3148)
+
+#### Features
+
+-   Viewport-addon Allow setting callback to be called whenever viewport changes [#3283](https://github.com/storybooks/storybook/pull/3283)
+-   App for Mithril [#3244](https://github.com/storybooks/storybook/pull/3244)
+-   Feature request: adding aXe configuration for a11y addon [#3285](https://github.com/storybooks/storybook/pull/3285)
+-   files knob [#2860](https://github.com/storybooks/storybook/pull/2860)
+-   Using svg-url-loader for webpack configs that accept svgs [#3221](https://github.com/storybooks/storybook/pull/3221)
+-   Addon Storysource typescript support [#3253](https://github.com/storybooks/storybook/pull/3253)
+-   addon-options: Make shortcuts in storybook optional [#3237](https://github.com/storybooks/storybook/pull/3237)
+-   Add parameters to stories in the story store, and render them in app layers [#2679](https://github.com/storybooks/storybook/pull/2679)
+-   Add min, value, and max labels to range knob [#3128](https://github.com/storybooks/storybook/pull/3128)
+-   viewport-addon: Make the addon configurable [#3099](https://github.com/storybooks/storybook/pull/3099)
+-   Bind window access if `window` is defined; add `addons channel` access too [#3243](https://github.com/storybooks/storybook/pull/3243)
+
+#### Bug Fixes
+
+-   Update react-native symlink resolving and add support for flow [#3306](https://github.com/storybooks/storybook/pull/3306)
+-   [Addon-storyshots] Remove default options on "goto" call [#3298](https://github.com/storybooks/storybook/pull/3298)
+-   Remove onDeviceUI animation to support Detox screenshots [#3272](https://github.com/storybooks/storybook/pull/3272)
+-   Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251)
+
+#### Maintenance
+
+-   Create CODEOWNERS from git history [#3296](https://github.com/storybooks/storybook/pull/3296)
+-   Close inactive issues in 30 days [#3273](https://github.com/storybooks/storybook/pull/3273)
+-   Refactor all startup code into `@storybook/core` also [#3259](https://github.com/storybooks/storybook/pull/3259)
+-   Update ISSUE_TEMPLATE to help define work to be done [#3257](https://github.com/storybooks/storybook/pull/3257)
+
+#### Dependency Upgrades
+
+<details>
+<summary>
+64 Updates
+</summary>
+
+-   Update gatsby-transformer-remark in /docs from 1.7.38 to 1.7.39 [#3310](https://github.com/storybooks/storybook/pull/3310)
+-   Upgraded `@types/react` in `addons/notes` from "16.0.41" to "16.1.0" [#3311](https://github.com/storybooks/storybook/pull/3311)
+-   Upgraded `react-chromatic` in `examples/official-storybook` from "0.7.11" to "0.8.1" [#3311](https://github.com/storybooks/storybook/pull/3311)
+-   Major upgrades for devDependencies [#3304](https://github.com/storybooks/storybook/pull/3304)
+-   Upgraded `typescript` in `/` from "2.7.2" to "2.8.1" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `core-js` in `app/react` from "2.5.3" to "2.5.4" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `core-js` in `app/angular` from "2.5.3" to "2.5.4" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `core-js` in `app/polymer` from "2.5.3" to "2.5.4" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `core-js` in `app/vue` from "2.5.3" to "2.5.4" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `core-js` in `examples/angular-cli` from "2.5.3" to "2.5.4" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `typescript` in `examples/angular-cli` from "2.7.2" to "2.8.1" [#3303](https://github.com/storybooks/storybook/pull/3303)
+-   Upgraded `gatsby-link` in `/docs` from "1.6.39" to "1.6.40" [#3300](https://github.com/storybooks/storybook/pull/3300)
+-   Upgraded `gatsby-remark-images` in `/docs` from "1.5.59" to "1.5.60" [#3300](https://github.com/storybooks/storybook/pull/3300)
+-   Upgraded `gatsby-transformer-remark` in `/docs` from "1.7.37" to "1.7.38" [#3300](https://github.com/storybooks/storybook/pull/3300)
+-   Upgraded `gatsby` in `/docs` from "1.9.241" to "1.9.243" [#3300](https://github.com/storybooks/storybook/pull/3300)
+-   Upgraded `webpack` in `app/react` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `lib/core` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack-dev-middleware` in `lib/core` from "3.0.1" to "3.1.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `app/angular` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `app/polymer` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `app/react-native` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack-dev-middleware` in `app/react-native` from "3.0.1" to "3.1.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `app/vue` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `examples/cra-kitchen-sink` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `rxjs` in `examples/angular-cli` from "5.5.7" to "5.5.8" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `examples/polymer-cli` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `webpack` in `examples/vue-kitchen-sink` from "4.2.0" to "4.3.0" [#3299](https://github.com/storybooks/storybook/pull/3299)
+-   Upgraded `inquirer` in `/` from "5.1.0" to "5.2.0" [#3294](https://github.com/storybooks/storybook/pull/3294)
+-   Upgraded `marked` in `addons/notes` from "0.3.18" to "0.3.19" [#3294](https://github.com/storybooks/storybook/pull/3294)
+-   Upgraded `update-notifier` in `lib/cli` from "2.3.0" to "2.4.0" [#3294](https://github.com/storybooks/storybook/pull/3294)
+-   Update marked in /docs from 0.3.18 to 0.3.19 [#3292](https://github.com/storybooks/storybook/pull/3292)
+-   Update gatsby in /docs from 1.9.240 to 1.9.241 [#3281](https://github.com/storybooks/storybook/pull/3281)
+-   Update @types/react in addons/notes from 16.0.40 to 16.0.41 [#3282](https://github.com/storybooks/storybook/pull/3282)
+-   Upgraded `gatsby-remark-images` in `/docs` from "1.5.56" to "1.5.59" [#3276](https://github.com/storybooks/storybook/pull/3276)
+-   Upgraded `gatsby` in `/docs` from "1.9.239" to "1.9.240" [#3276](https://github.com/storybooks/storybook/pull/3276)
+-   Upgraded `vue-loader` in `app/vue` from "14.2.1" to "14.2.2" [#3277](https://github.com/storybooks/storybook/pull/3277)
+-   Upgraded `vue-loader` in `examples/vue-kitchen-sink` from "14.2.1" to "14.2.2" [#3277](https://github.com/storybooks/storybook/pull/3277)
+-   Upgraded `eslint` in `/` from "4.19.0" to "4.19.1" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `marked` in `addons/notes` from "0.3.17" to "0.3.18" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `autoprefixer` in `lib/core` from "8.1.0" to "8.2.0" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `@webcomponents/webcomponentsjs` in `app/polymer` from "1.1.0" to "1.1.1" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `@types/node` in `examples/angular-cli` from "9.4.7" to "9.6.0" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `@polymer/polymer` in `examples/polymer-cli` from "2.5.0" to "2.6.0" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Upgraded `@webcomponents/webcomponentsjs` in `examples/polymer-cli` from "1.1.0" to "1.1.1" [#3265](https://github.com/storybooks/storybook/pull/3265)
+-   Update marked in /docs from 0.3.17 to 0.3.18 [#3264](https://github.com/storybooks/storybook/pull/3264)
+-   Update gatsby in /docs from 1.9.238 to 1.9.239 [#3262](https://github.com/storybooks/storybook/pull/3262)
+-   Upgraded `danger` in `/` from "3.3.0" to "3.3.2" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest` in `/` from "22.4.2" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest-cli` in `/` from "22.4.2" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest-config` in `/` from "22.4.2" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest-diff` in `/` from "22.4.0" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest-environment-jsdom` in `/` from "22.4.1" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `jest-jasmine2` in `/` from "22.4.2" to "22.4.3" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `keycode` in `lib/ui` from "2.1.9" to "2.2.0" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `autoprefixer` in `lib/core` from "8.0.0" to "8.1.0" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `babel-preset-vue` in `examples/vue-kitchen-sink` from "2.0.1" to "2.0.2" [#3254](https://github.com/storybooks/storybook/pull/3254)
+-   Upgraded `commander` in `/` from "2.15.0" to "2.15.1" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Upgraded `danger` in `/` from "3.2.0" to "3.3.0" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Upgraded `commander` in `lib/core` from "2.15.0" to "2.15.1" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Upgraded `postcss-loader` in `lib/core` from "2.1.2" to "2.1.3" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Upgraded `commander` in `app/react-native` from "2.15.0" to "2.15.1" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Upgraded `commander` in `lib/cli` from "2.15.0" to "2.15.1" [#3250](https://github.com/storybooks/storybook/pull/3250)
+-   Core: upgrade autoprefixer from 7.2.6 to 8.0.0 & allow configuring browser list externally [#3076](https://github.com/storybooks/storybook/pull/3076)
+-   Update gatsby in /docs from 1.9.236 to 1.9.238 [#3249](https://github.com/storybooks/storybook/pull/3249)
+
+</details>
+# 3.4.0
+
+2018-March-30
+
+Welcome to Storybook 3.4 with the following key improvements:
+
+-   Polymer 2 support [#2225](https://github.com/storybooks/storybook/pull/2225)
+-   Angular and Vue storyshots [#2564](https://github.com/storybooks/storybook/pull/2564)
+-   Add image snapshots to addon-storyshots [#2413](https://github.com/storybooks/storybook/pull/2413)
+-   Multiple story hierarchies [#2452](https://github.com/storybooks/storybook/pull/2452)
+-   Addon-storysource: story source in addon pane [#2885](https://github.com/storybooks/storybook/pull/2885)
+
+Read on for more improvements, fixes, 1In addition, there are hundreds of dependency upgrades in the 3.4 release, so to see the details, please see the changelogs for `3.4.0-rc.*` and  `3.4.0-alpha.*`.
+
+#### Features
+
+-   Bind window access if `window` is defined; add `addons channel` access too [#3243](https://github.com/storybooks/storybook/pull/3243)
+-   Fix screenshots tests & add getScreenshotOption to storyshots [#3102](https://github.com/storybooks/storybook/pull/3102)
+-   Add `__STORYBOOK_CLIENT_API__` for external tools [#3058](https://github.com/storybooks/storybook/pull/3058)
+-   Addon storysource: select stories from inside of the StoryPanel [#3154](https://github.com/storybooks/storybook/pull/3154)
+-   Storyshots: env.NODE_PATH support [#2873](https://github.com/storybooks/storybook/pull/2873)
+-   Knobs: Select knob key/value ordering [#1745](https://github.com/storybooks/storybook/pull/1745)
+-   Angular: Add option to pass custom styles for ng components [#2856](https://github.com/storybooks/storybook/pull/2856)
+-   Core: Add watch mode for build-storybook [#2866](https://github.com/storybooks/storybook/pull/2866)
+-   Core: Add `__dirname` support [#2791](https://github.com/storybooks/storybook/pull/2791)
+-   Pass default webpack config as third argument in Full Control Mode [#2796](https://github.com/storybooks/storybook/pull/2796)
+-   Angular and Vue storyshots [#2564](https://github.com/storybooks/storybook/pull/2564)
+-   Addon-info: Added "Copy button" for code example [#2713](https://github.com/storybooks/storybook/pull/2713)
+-   Angular: Serve styles and assets using .angular-cli webpack configuration [#2735](https://github.com/storybooks/storybook/pull/2735)
+-   API: Added an event that is emitted when a channel is created. [#2711](https://github.com/storybooks/storybook/pull/2711)
+-   Addon-a11y: Handle components with delayed rendering [#2651](https://github.com/storybooks/storybook/pull/2651)
+-   Polymer 2 support [#2225](https://github.com/storybooks/storybook/pull/2225)
+-   Add image snapshots to addon-storyshots [#2413](https://github.com/storybooks/storybook/pull/2413)
+-   Angular template support for Storybook [#2690](https://github.com/storybooks/storybook/pull/2690)
+-   Custom tsconfig.json for angular apps. [#2669](https://github.com/storybooks/storybook/pull/2669)
+-   Multiple story 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)
+
+#### Bug Fixes
+
+-   [Addon-storyshots] Remove default options on "goto" call [#3298](https://github.com/storybooks/storybook/pull/3298)
+-   CLI: add error handling for latest_version helper [#3297](https://github.com/storybooks/storybook/pull/3297     
+-   Refactor CLI to use `npm` and `yarn` instead of third party packages [#3275](https://github.com/storybooks/storybook/pull/3275)
+-   Fix issue when extending webpack config [#3279](https://github.com/storybooks/storybook/pull/3279)
+-   Object proptype is shown in addon-info proptable [#3255](https://github.com/storybooks/storybook/pull/3255)
+-   Fix storyshots renderer and serializer options [#3252](https://github.com/storybooks/storybook/pull/3252)
+-   Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251)
+-   Delaying update of height and width in Layout [#3180](https://github.com/storybooks/storybook/pull/3180)
+-   Add 'waitUntil' option to puppeteer of storyshots [#3156](https://github.com/storybooks/storybook/pull/3156)
+-   Move polymer loader to peerDependencies [#3161](https://github.com/storybooks/storybook/pull/3161)
+-   Addons: avoid mixing manager and preview code together [#3068](https://github.com/storybooks/storybook/pull/3068)
+-   React-Native: Fix by moving managerPath export to `server.js` [#2947](https://github.com/storybooks/storybook/pull/2947)
+-   Addon-Info: Add type check to PropType on OneOf [#2653](https://github.com/storybooks/storybook/pull/2653)
+-   Vue: Support .vue extension resolving [#2896](https://github.com/storybooks/storybook/pull/2896)
+-   UI: remove zero on story loading [#2857](https://github.com/storybooks/storybook/pull/2857)
+-   Angular: remove entryComponents prop from metadata [#2790](https://github.com/storybooks/storybook/pull/2790)
+-   Use process.exitCode instead of process.exit() [#2717](https://github.com/storybooks/storybook/pull/2717)
+-   Angular: knobs with template [#2766](https://github.com/storybooks/storybook/pull/2766)
+-   Remove polymer-cli dependency [#2741](https://github.com/storybooks/storybook/pull/2741)
+-   Add scss for components in angular apps by default. [#2703](https://github.com/storybooks/storybook/pull/2703)
+
+#### Documentation
+
+-   Add example for @ngrx/store [#3233](https://github.com/storybooks/storybook/pull/3233)
+-   Fix missing declaration in Angular example [#3213](https://github.com/storybooks/storybook/pull/3213)
+-   Update ADDONS_SUPPORT.md [#3114](https://github.com/storybooks/storybook/pull/3114)
+-   StoryShots: Document ref mocking [#2869](https://github.com/storybooks/storybook/pull/2869)
+-   Extending webpack section is no longer needed for the common usage [#2826](https://github.com/storybooks/storybook/pull/2826)
+-   Updating Vue Jest Config [#2821](https://github.com/storybooks/storybook/pull/2821)
+-   Angular inheritance example [#2787](https://github.com/storybooks/storybook/pull/2787)
+-   Revisit addon/framework support [#3046](https://github.com/storybooks/storybook/pull/3046)
+-   Docs live examples [#3019](https://github.com/storybooks/storybook/pull/3019)
+-   Mention new supported frameworks [#2895](https://github.com/storybooks/storybook/pull/2895)
+-   Update writing addons documentation [#2951](https://github.com/storybooks/storybook/pull/2951)
+-   Update docs on LinkTo in addon-links [#2926](https://github.com/storybooks/storybook/pull/2926)
+
+#### Maintenance
+
+-   Fix errors on starting example Angular app [#3078](https://github.com/storybooks/storybook/pull/3078)
+-   Use WatchMissingNodeModulesPlugin from react-dev-utils package [#3141](https://github.com/storybooks/storybook/pull/3141)
+-   Don't use exact versions in peerDependencies [#3073](https://github.com/storybooks/storybook/pull/3073)
+-   Remove integration tests [#3052](https://github.com/storybooks/storybook/pull/3052)
+-   Fix "dev" script to be cross-platform [#2922](https://github.com/storybooks/storybook/pull/2922)
+-   Typescript distribution [#2846](https://github.com/storybooks/storybook/pull/2846)
+-   Use UTC timezone in formatting too for knobs test [#2861](https://github.com/storybooks/storybook/pull/2861)
+-   ADD autolabeler.yml for <https://github.com/probot/autolabeler> [#2809](https://github.com/storybooks/storybook/pull/2809)
+-   Fix css warning in angular-cli example [#2789](https://github.com/storybooks/storybook/pull/2789)
+-   Move more things to core [#2788](https://github.com/storybooks/storybook/pull/2788)
+-   Change ng stories dir [#2672](https://github.com/storybooks/storybook/pull/2672)
+-   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)
+# 3.4.0
+
+2018-March-30
+
+Welcome to Storybook 3.4 with the following key improvements:
+
+-   Polymer 2 support [#2225](https://github.com/storybooks/storybook/pull/2225)
+-   Angular and Vue storyshots [#2564](https://github.com/storybooks/storybook/pull/2564)
+-   Add image snapshots to addon-storyshots [#2413](https://github.com/storybooks/storybook/pull/2413)
+-   Multiple story hierarchies [#2452](https://github.com/storybooks/storybook/pull/2452)
+-   Addon-storysource: story source in addon pane [#2885](https://github.com/storybooks/storybook/pull/2885)
+
+Read on for more improvements, fixes, 1In addition, there are hundreds of dependency upgrades in the 3.4 release, so to see the details, please see the changelogs for `3.4.0-rc.*` and  `3.4.0-alpha.*`.
+
+#### Features
+
+-   Bind window access if `window` is defined; add `addons channel` access too [#3243](https://github.com/storybooks/storybook/pull/3243)
+-   Fix screenshots tests & add getScreenshotOption to storyshots [#3102](https://github.com/storybooks/storybook/pull/3102)
+-   Add `__STORYBOOK_CLIENT_API__` for external tools [#3058](https://github.com/storybooks/storybook/pull/3058)
+-   Addon storysource: select stories from inside of the StoryPanel [#3154](https://github.com/storybooks/storybook/pull/3154)
+-   Storyshots: env.NODE_PATH support [#2873](https://github.com/storybooks/storybook/pull/2873)
+-   Knobs: Select knob key/value ordering [#1745](https://github.com/storybooks/storybook/pull/1745)
+-   Angular: Add option to pass custom styles for ng components [#2856](https://github.com/storybooks/storybook/pull/2856)
+-   Core: Add watch mode for build-storybook [#2866](https://github.com/storybooks/storybook/pull/2866)
+-   Core: Add `__dirname` support [#2791](https://github.com/storybooks/storybook/pull/2791)
+-   Pass default webpack config as third argument in Full Control Mode [#2796](https://github.com/storybooks/storybook/pull/2796)
+-   Angular and Vue storyshots [#2564](https://github.com/storybooks/storybook/pull/2564)
+-   Addon-info: Added "Copy button" for code example [#2713](https://github.com/storybooks/storybook/pull/2713)
+-   Angular: Serve styles and assets using .angular-cli webpack configuration [#2735](https://github.com/storybooks/storybook/pull/2735)
+-   API: Added an event that is emitted when a channel is created. [#2711](https://github.com/storybooks/storybook/pull/2711)
+-   Addon-a11y: Handle components with delayed rendering [#2651](https://github.com/storybooks/storybook/pull/2651)
+-   Polymer 2 support [#2225](https://github.com/storybooks/storybook/pull/2225)
+-   Add image snapshots to addon-storyshots [#2413](https://github.com/storybooks/storybook/pull/2413)
+-   Angular template support for Storybook [#2690](https://github.com/storybooks/storybook/pull/2690)
+-   Custom tsconfig.json for angular apps. [#2669](https://github.com/storybooks/storybook/pull/2669)
+-   Multiple story 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)
+
+#### Bug Fixes
+
+-   [Addon-storyshots] Remove default options on "goto" call [#3298](https://github.com/storybooks/storybook/pull/3298)
+-   CLI: add error handling for latest_version helper [#3297](https://github.com/storybooks/storybook/pull/3297     
+-   Refactor CLI to use `npm` and `yarn` instead of third party packages [#3275](https://github.com/storybooks/storybook/pull/3275)
+-   Fix issue when extending webpack config [#3279](https://github.com/storybooks/storybook/pull/3279)
+-   Object proptype is shown in addon-info proptable [#3255](https://github.com/storybooks/storybook/pull/3255)
+-   Fix storyshots renderer and serializer options [#3252](https://github.com/storybooks/storybook/pull/3252)
+-   Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251)
+-   Delaying update of height and width in Layout [#3180](https://github.com/storybooks/storybook/pull/3180)
+-   Add 'waitUntil' option to puppeteer of storyshots [#3156](https://github.com/storybooks/storybook/pull/3156)
+-   Move polymer loader to peerDependencies [#3161](https://github.com/storybooks/storybook/pull/3161)
+-   Addons: avoid mixing manager and preview code together [#3068](https://github.com/storybooks/storybook/pull/3068)
+-   React-Native: Fix by moving managerPath export to `server.js` [#2947](https://github.com/storybooks/storybook/pull/2947)
+-   Addon-Info: Add type check to PropType on OneOf [#2653](https://github.com/storybooks/storybook/pull/2653)
+-   Vue: Support .vue extension resolving [#2896](https://github.com/storybooks/storybook/pull/2896)
+-   UI: remove zero on story loading [#2857](https://github.com/storybooks/storybook/pull/2857)
+-   Angular: remove entryComponents prop from metadata [#2790](https://github.com/storybooks/storybook/pull/2790)
+-   Use process.exitCode instead of process.exit() [#2717](https://github.com/storybooks/storybook/pull/2717)
+-   Angular: knobs with template [#2766](https://github.com/storybooks/storybook/pull/2766)
+-   Remove polymer-cli dependency [#2741](https://github.com/storybooks/storybook/pull/2741)
+-   Add scss for components in angular apps by default. [#2703](https://github.com/storybooks/storybook/pull/2703)
+
+#### Documentation
+
+-   Add example for @ngrx/store [#3233](https://github.com/storybooks/storybook/pull/3233)
+-   Fix missing declaration in Angular example [#3213](https://github.com/storybooks/storybook/pull/3213)
+-   Update ADDONS_SUPPORT.md [#3114](https://github.com/storybooks/storybook/pull/3114)
+-   StoryShots: Document ref mocking [#2869](https://github.com/storybooks/storybook/pull/2869)
+-   Extending webpack section is no longer needed for the common usage [#2826](https://github.com/storybooks/storybook/pull/2826)
+-   Updating Vue Jest Config [#2821](https://github.com/storybooks/storybook/pull/2821)
+-   Angular inheritance example [#2787](https://github.com/storybooks/storybook/pull/2787)
+-   Revisit addon/framework support [#3046](https://github.com/storybooks/storybook/pull/3046)
+-   Docs live examples [#3019](https://github.com/storybooks/storybook/pull/3019)
+-   Mention new supported frameworks [#2895](https://github.com/storybooks/storybook/pull/2895)
+-   Update writing addons documentation [#2951](https://github.com/storybooks/storybook/pull/2951)
+-   Update docs on LinkTo in addon-links [#2926](https://github.com/storybooks/storybook/pull/2926)
+
+#### Maintenance
+
+-   Fix errors on starting example Angular app [#3078](https://github.com/storybooks/storybook/pull/3078)
+-   Use WatchMissingNodeModulesPlugin from react-dev-utils package [#3141](https://github.com/storybooks/storybook/pull/3141)
+-   Don't use exact versions in peerDependencies [#3073](https://github.com/storybooks/storybook/pull/3073)
+-   Remove integration tests [#3052](https://github.com/storybooks/storybook/pull/3052)
+-   Fix "dev" script to be cross-platform [#2922](https://github.com/storybooks/storybook/pull/2922)
+-   Typescript distribution [#2846](https://github.com/storybooks/storybook/pull/2846)
+-   Use UTC timezone in formatting too for knobs test [#2861](https://github.com/storybooks/storybook/pull/2861)
+-   ADD autolabeler.yml for <https://github.com/probot/autolabeler> [#2809](https://github.com/storybooks/storybook/pull/2809)
+-   Fix css warning in angular-cli example [#2789](https://github.com/storybooks/storybook/pull/2789)
+-   Move more things to core [#2788](https://github.com/storybooks/storybook/pull/2788)
+-   Change ng stories dir [#2672](https://github.com/storybooks/storybook/pull/2672)
+-   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)
+>>>>>>> ea4634b1d... 3.4.0 changelog
+
+# 3.4.0-rc.4
+
+2018-March-28
+
+#### Bug Fixes
+
+-   CLI: add error handling for latest_version helper [#3297](https://github.com/storybooks/storybook/pull/3297)
+-   Refactor CLI to use `npm` and `yarn` instead of third party packages [#3275](https://github.com/storybooks/storybook/pull/3275)
+-   Fix issue when extending webpack config [#3279](https://github.com/storybooks/storybook/pull/3279)
+-   Object proptype is shown in addon-info proptable [#3255](https://github.com/storybooks/storybook/pull/3255)
+-   Fix storyshots renderer and serializer options [#3252](https://github.com/storybooks/storybook/pull/3252)
+-   Angular: use resolveLoader from cliCommonConfig [#3251](https://github.com/storybooks/storybook/pull/3251)
+
 # 3.4.0-rc.3

 2018-March-19
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -2,6 +2,7 @@

 ## Table of contents

+-   [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
 -   [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
    -   [Refactored Knobs](#refactored-knobs)
    -   [Storyshots Jest configuration](#storyshots-jest-configuration)
@ -16,6 +17,10 @@
    -   [Packages renaming](#packages-renaming)
    -   [Deprecated embedded addons](#deprecated-embedded-addons)

+## From version 3.3.x to 3.4.x
+
+There are no expected breaking changes in the 3.4.x release, but 3.4 contains a major refactor to make it easier to support new frameworks, and we will document any breaking changes here if they arise.
+
 ## From version 3.2.x to 3.3.x

 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.
--- a/README.md
+++ b/README.md
@ -71,7 +71,7 @@ For additional help, join us [in our Slack](https://now-examples-slackin-rrirkqo
 -   [React Native](app/react-native)
 -   [Vue](app/vue)
 -   [Angular](app/angular)
-   [Polymer](app/polymer) <sup>alpha</sup>
+-   [Polymer](app/polymer) <sup>release candidate</sup>
 -   [Mithril](app/mithril) <sup>alpha</sup>

 ### Sub Projects
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -25,15 +25,15 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
-    "axe-core": "^2.6.1",
+    "@storybook/components": "4.0.0-alpha.1",
+    "axe-core": "^3.0.0",
    "babel-runtime": "^6.26.0",
    "glamor": "^2.20.40",
    "glamorous": "^4.12.1",
    "prop-types": "^15.6.1"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/react": "4.0.0-alpha.1",
    "faker": "^4.1.0"
  },
  "peerDependencies": {
--- a/addons/a11y/src/components/WrapStory.js
+++ b/addons/a11y/src/components/WrapStory.js
@ -41,7 +41,7 @@ class WrapStory extends Component {
    if (wrapper !== null) {
      axe.reset();
      axe.configure(axeOptions);
-      axe.a11yCheck(wrapper, {}, results => {
+      axe.run(wrapper, {}, results => {
        channel.emit('addon:a11y:check', results);
      });
    }
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -20,7 +20,7 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "deep-equal": "^1.0.1",
    "glamor": "^2.20.40",
--- a/addons/background/package.json
+++ b/addons/background/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -26,7 +26,8 @@
  "dependencies": {
    "babel-runtime": "^6.26.0",
    "global": "^4.3.2",
-    "prop-types": "^15.6.1"
+    "prop-types": "^15.6.1",
+    "react-lifecycles-compat": "^1.1.0"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/background/src/BackgroundPanel.js
+++ b/addons/background/src/BackgroundPanel.js
@ -63,7 +63,7 @@ export default class BackgroundPanel extends Component {
  constructor(props) {
    super(props);

-    const { channel, api } = props;
+    const { channel } = props;

    // A channel is explicitly passed in for testing
    if (channel) {
@ -73,6 +73,20 @@ export default class BackgroundPanel extends Component {
    }

    this.state = { backgrounds: [] };
+  }
+
+  componentDidMount() {
+    this.iframe = document.getElementById(storybookIframe);
+
+    if (!this.iframe) {
+      throw new Error('Cannot find Storybook iframe');
+    }
+
+    Object.keys(style.iframe).forEach(prop => {
+      this.iframe.style[prop] = style.iframe[prop];
+    });
+
+    const { api } = this.props;

    this.channel.on('background-set', backgrounds => {
      this.setState({ backgrounds });
@ -88,23 +102,10 @@ export default class BackgroundPanel extends Component {

    this.channel.on('background-unset', () => {
      this.setState({ backgrounds: [] });
-      api.setQueryParams({ background: null });
      this.updateIframe('none');
    });
  }

-  componentDidMount() {
-    this.iframe = document.getElementById(storybookIframe);
-
-    if (!this.iframe) {
-      throw new Error('Cannot find Storybook iframe');
-    }
-
-    Object.keys(style.iframe).forEach(prop => {
-      this.iframe.style[prop] = style.iframe[prop];
-    });
-  }
-
  setBackgroundFromSwatch = background => {
    this.updateIframe(background);
    this.props.api.setQueryParams({ background });
--- a/addons/background/src/tests/BackgroundPanel.js
+++ b/addons/background/src/tests/BackgroundPanel.js
@ -54,12 +54,12 @@ describe('Background Panel', () => {
    expect(mockedApi.getQueryParam).toBeCalledWith('background');
  });

-  it('should unset the query string', () => {
+  it('should not unset the query string', () => {
    const SpiedChannel = new EventEmitter();
    mount(<BackgroundPanel channel={SpiedChannel} api={mockedApi} />);
    SpiedChannel.emit('background-unset', []);

-    expect(mockedApi.setQueryParams).toBeCalledWith({ background: null });
+    expect(mockedApi.setQueryParams).not.toHaveBeenCalled();
  });

  it('should accept colors through channel and render the correct swatches with a default swatch', () => {
--- a/addons/background/src/index.js
+++ b/addons/background/src/index.js
@ -1,4 +1,5 @@
 import React from 'react';
+import polyfill from 'react-lifecycles-compat';
 import PropTypes from 'prop-types';

 import addons from '@storybook/addons';
@ -7,7 +8,7 @@ export class BackgroundDecorator extends React.Component {
  constructor(props) {
    super(props);

-    const { channel, story } = props;
+    const { channel } = props;

    // A channel is explicitly passed in for testing
    if (channel) {
@ -16,27 +17,32 @@ export class BackgroundDecorator extends React.Component {
      this.channel = addons.getChannel();
    }

-    this.story = story();
+    this.state = {};
  }

-  componentWillMount() {
+  componentDidMount() {
    this.channel.emit('background-set', this.props.backgrounds);
  }

-  componentWillReceiveProps(nextProps) {
-    if (nextProps.story !== this.props.story) {
-      this.story = nextProps.story();
-    }
-  }
-
  componentWillUnmount() {
    this.channel.emit('background-unset');
  }

  render() {
-    return this.story;
+    return this.state.story;
  }
 }
+
+BackgroundDecorator.getDerivedStateFromProps = ({ story }, { prevStory }) => {
+  if (story !== prevStory) {
+    return {
+      story: story(),
+      prevStory: story,
+    };
+  }
+  return null;
+};
+
 BackgroundDecorator.propTypes = {
  backgrounds: PropTypes.arrayOf(PropTypes.object),
  channel: PropTypes.shape({
@ -44,13 +50,17 @@ BackgroundDecorator.propTypes = {
    on: PropTypes.func,
    removeListener: PropTypes.func,
  }),
+  // eslint-disable-next-line react/no-unused-prop-types
  story: PropTypes.func.isRequired,
 };
+
 BackgroundDecorator.defaultProps = {
  backgrounds: [],
  channel: undefined,
 };

+polyfill(BackgroundDecorator);
+
 export default backgrounds => story => (
  <BackgroundDecorator story={story} backgrounds={backgrounds} />
 );
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook decorator to center components",
  "license": "MIT",
  "author": "Muhammed Thanish <mnmtanish@gmail.com>",
@ -14,7 +14,7 @@
    "global": "^4.3.2"
  },
  "devDependencies": {
-    "react-dom": "^16.2.0"
+    "react-dom": "^16.3.0"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -24,7 +24,8 @@
    "babel-runtime": "^6.26.0",
    "format-json": "^1.0.3",
    "prop-types": "^15.6.1",
-    "react-textarea-autosize": "^5.2.1"
+    "react-lifecycles-compat": "^1.1.0",
+    "react-textarea-autosize": "^6.1.0-0"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/events/src/components/Event.js
+++ b/addons/events/src/components/Event.js
@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import polyfill from 'react-lifecycles-compat';
 import json from 'format-json';
 import Textarea from 'react-textarea-autosize';
 import PropTypes from 'prop-types';
@ -65,12 +66,12 @@ const styles = {
  },
 };

-export default class Item extends Component {
+class Item extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    onEmit: PropTypes.func.isRequired,
-    payload: PropTypes.any, // eslint-disable-line react/forbid-prop-types
+    payload: PropTypes.any, // eslint-disable-line react/forbid-prop-types, react/no-unused-prop-types
  };

  static defaultProps = {
@ -85,18 +86,23 @@ export default class Item extends Component {
    }
  }

-  state = {};
+  static getDerivedStateFromProps = ({ payload }, { prevPayload }) => {
+    if (payload !== prevPayload) {
+      const payloadString = json.plain(payload);

-  componentWillMount() {
-    const payloadString = json.plain(this.props.payload);
+      return {
+        failed: false,
+        payload: Item.getJSONFromString(payloadString),
+        payloadString,
+        prevPayload,
+      };
+    }
+    return null;
+  };

-    this.setState({
-      failed: false,
-      payload: Item.getJSONFromString(payloadString),
-      payloadString,
-      isTextAreaShowed: false,
-    });
-  }
+  state = {
+    isTextAreaShowed: false,
+  };

  onChange = ({ target: { value } }) => {
    const newState = {
@ -172,3 +178,7 @@ export default class Item extends Component {
    );
  }
 }
+
+polyfill(Item);
+
+export default Item;
--- a/addons/events/src/preview.js
+++ b/addons/events/src/preview.js
@ -27,8 +27,8 @@ export default class WithEvents extends Component {
    this.channel.emit(EVENTS.ADD, events);
  }

-  componentWillReceiveProps(nextProps) {
-    const { events } = nextProps;
+  componentDidUpdate() {
+    const { events } = this.props;

    this.channel.emit(EVENTS.ADD, events);
  }
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "storybook"
@ -29,7 +29,7 @@
    "prop-types": "^15.6.1"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3"
+    "@storybook/react": "4.0.0-alpha.1"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-info",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "A Storybook addon to show additional information for your stories.",
  "license": "MIT",
  "main": "dist/index.js",
@ -15,8 +15,8 @@
    "storybook": "start-storybook -p 9010"
  },
  "dependencies": {
-    "@storybook/client-logger": "3.4.0-rc.3",
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/client-logger": "4.0.0-alpha.1",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "glamor": "^2.20.40",
    "glamorous": "^4.12.1",
@ -25,12 +25,13 @@
    "nested-object-assign": "^1.0.1",
    "prop-types": "^15.6.1",
    "react-addons-create-fragment": "^15.5.3",
+    "react-lifecycles-compat": "^1.1.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/react": "3.4.0-rc.3",
-    "react-test-renderer": "^16.1.0"
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/react": "4.0.0-alpha.1",
+    "react-test-renderer": "^16.3.0"
  },
  "peerDependencies": {
    "react": "*",
--- a/addons/info/src/components/Story.js
+++ b/addons/info/src/components/Story.js
@ -1,6 +1,7 @@
 /* eslint no-underscore-dangle: 0 */

 import React, { createElement } from 'react';
+import polyfill from 'react-lifecycles-compat';
 import PropTypes from 'prop-types';
 import global from 'global';
 import { baseFonts } from '@storybook/components';
@ -101,12 +102,11 @@ const stylesheet = {
  },
 };

-export default class Story extends React.Component {
+class Story extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      open: false,
-      stylesheet: this.props.styles(stylesheet),
    };
    this.marksy = marksy({
      createElement,
@ -114,12 +114,6 @@ export default class Story extends React.Component {
    });
  }

-  componentWillReceiveProps(nextProps) {
-    this.setState({
-      stylesheet: nextProps.styles(stylesheet),
-    });
-  }
-
  _renderStory() {
    return <div style={this.state.stylesheet.infoStory}>{this.props.children}</div>;
  }
@ -372,6 +366,8 @@ export default class Story extends React.Component {
  }
 }

+Story.getDerivedStateFromProps = ({ styles }) => ({ stylesheet: styles(stylesheet) });
+
 Story.displayName = 'Story';

 Story.propTypes = {
@ -385,6 +381,7 @@ Story.propTypes = {
  showInline: PropTypes.bool,
  showHeader: PropTypes.bool,
  showSource: PropTypes.bool,
+  // eslint-disable-next-line react/no-unused-prop-types
  styles: PropTypes.func.isRequired,
  children: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  components: PropTypes.shape({}),
@ -393,6 +390,7 @@ Story.propTypes = {
  maxPropArrayLength: PropTypes.number.isRequired,
  maxPropStringLength: PropTypes.number.isRequired,
 };
+
 Story.defaultProps = {
  context: null,
  info: '',
@ -404,3 +402,7 @@ Story.defaultProps = {
  showSource: true,
  components: {},
 };
+
+polyfill(Story);
+
+export default Story;
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.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.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "glamor": "^2.20.40",
    "glamorous": "^4.12.1",
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook Addon Prop Editor Component",
  "license": "MIT",
  "main": "dist/index.js",
@ -15,7 +15,7 @@
    "storybook": "start-storybook -p 9010"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "deep-equal": "^1.0.1",
    "global": "^4.3.2",
@ -25,11 +25,12 @@
    "prop-types": "^15.6.1",
    "react-color": "^2.14.0",
    "react-datetime": "^2.14.0",
-    "react-textarea-autosize": "^5.2.1",
+    "react-lifecycles-compat": "^1.1.0",
+    "react-textarea-autosize": "^6.1.0-0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/react": "4.0.0-alpha.1",
    "raw-loader": "^0.5.1",
    "style-loader": "^0.20.3",
    "vue": "^2.5.16"
--- a/addons/knobs/src/components/Panel.js
+++ b/addons/knobs/src/components/Panel.js
@ -60,6 +60,9 @@ export default class Panel extends React.Component {

    this.lastEdit = getTimestamp();
    this.loadedFromUrl = false;
+  }
+
+  componentDidMount() {
    this.props.channel.on('addon:knobs:setKnobs', this.setKnobs);
    this.props.channel.on('addon:knobs:setOptions', this.setOptions);

--- a/addons/knobs/src/components/types/Number.js
+++ b/addons/knobs/src/components/types/Number.js
@ -23,6 +23,8 @@ const styles = {
  rangeLabel: {
    paddingLeft: 5,
    paddingRight: 5,
+    fontSize: 12,
+    whiteSpace: 'nowrap',
  },
  rangeWrapper: {
    display: 'flex',
--- a/addons/knobs/src/react/WrapStory.js
+++ b/addons/knobs/src/react/WrapStory.js
@ -2,8 +2,9 @@

 import PropTypes from 'prop-types';
 import React from 'react';
+import polyfill from 'react-lifecycles-compat';

-export default class WrapStory extends React.Component {
+class WrapStory extends React.Component {
  constructor(props) {
    super(props);
    this.knobChanged = this.knobChanged.bind(this);
@ -11,7 +12,7 @@ export default class WrapStory extends React.Component {
    this.resetKnobs = this.resetKnobs.bind(this);
    this.setPaneKnobs = this.setPaneKnobs.bind(this);
    this._knobsAreReset = false;
-    this.state = { storyContent: this.props.initialContent };
+    this.state = {};
  }

  componentDidMount() {
@ -28,10 +29,6 @@ export default class WrapStory extends React.Component {
    this.setPaneKnobs();
  }

-  componentWillReceiveProps(props) {
-    this.setState({ storyContent: props.initialContent });
-  }
-
  componentWillUnmount() {
    this.props.channel.removeListener('addon:knobs:knobChange', this.knobChanged);
    this.props.channel.removeListener('addon:knobs:knobClick', this.knobClicked);
@ -72,6 +69,16 @@ export default class WrapStory extends React.Component {
  }
 }

+WrapStory.getDerivedStateFromProps = ({ initialContent }, { prevContent }) => {
+  if (initialContent !== prevContent) {
+    return {
+      storyContent: initialContent,
+      prevContent: initialContent,
+    };
+  }
+  return null;
+};
+
 WrapStory.defaultProps = {
  context: {},
  initialContent: {},
@ -94,5 +101,9 @@ WrapStory.propTypes = {
    subscribe: PropTypes.func,
    unsubscribe: PropTypes.func,
  }).isRequired,
-  initialContent: PropTypes.object, // eslint-disable-line react/forbid-prop-types
+  initialContent: PropTypes.object, // eslint-disable-line react/forbid-prop-types, react/no-unused-prop-types
 };
+
+polyfill(WrapStory);
+
+export default WrapStory;
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Story Links addon for storybook",
  "keywords": [
    "storybook"
@ -22,16 +22,16 @@
    "storybook": "start-storybook -p 9001"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "global": "^4.3.2",
    "prop-types": "^15.6.1"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/react": "4.0.0-alpha.1",
    "enzyme": "^3.3.0",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/links/src/react/components/snapshots/link.test.js.snap
+++ b/addons/links/src/react/components/snapshots/link.test.js.snap
@ -2,7 +2,7 @@

 exports[`LinkTo render should render a link 1`] = `
 <RoutedLink
-  href="?selectedKind=undefined&selectedStory=undefined"
+  href="?selectedKind=foo&selectedStory=bar"
  onClick={[Function]}
 />
 `;
--- a/addons/links/src/react/components/link.js
+++ b/addons/links/src/react/components/link.js
@ -16,17 +16,18 @@ export default class LinkTo extends PureComponent {
  }

  componentDidMount() {
-    this.updateHref(this.props);
+    this.updateHref();
  }

-  componentWillReceiveProps(props) {
-    if (props.kind !== this.props.kind || props.story !== this.props.story) {
-      this.updateHref(props);
+  componentDidUpdate(prevProps) {
+    if (prevProps.kind !== this.props.kind || prevProps.story !== this.props.story) {
+      this.updateHref();
    }
  }

-  async updateHref(props) {
-    const href = await hrefTo(props.kind, props.story);
+  async updateHref() {
+    const { kind, story } = this.props;
+    const href = await hrefTo(kind, story);
    this.setState({ href });
  }

--- a/addons/notes/README.md
+++ b/addons/notes/README.md
@ -18,7 +18,7 @@ Storybook Addon Notes allows you to write notes (text or HTML) for your stories
 ### Getting Started

 ```sh
-npm i --save-dev @storybook/addon-notes
+yarn add -D @storybook/addon-notes
 ```

 Then create a file called `addons.js` in your storybook config.
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-notes",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Write notes for your Storybook stories.",
  "keywords": [
    "addon",
@ -26,8 +26,8 @@
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3",
-    "@types/react": "^16.0.41"
+    "@storybook/react": "4.0.0-alpha.1",
+    "@types/react": "^16.1.0"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/notes/src/index.js
+++ b/addons/notes/src/index.js
@ -3,10 +3,10 @@ import addons from '@storybook/addons';
 import marked from 'marked';
 import { WithNotes as ReactWithNotes } from './react';

-export const withMarkdownNotes = text => {
+export const withMarkdownNotes = (text, options) => {
  const channel = addons.getChannel();
-
  return getStory => context => {
+    marked.setOptions({ ...marked.defaults, options });
    // send the notes to the channel before the story is rendered
    channel.emit('storybook/notes/add_notes', marked(text));
    return getStory(context);
--- a/addons/options/package.json
+++ b/addons/options/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-options",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Options addon for storybook",
  "keywords": [
    "storybook"
@ -23,7 +23,7 @@
    "babel-runtime": "^6.26.0"
  },
  "devDependencies": {
-    "@storybook/react": "3.4.0-rc.3"
+    "@storybook/react": "4.0.0-alpha.1"
  },
  "peerDependencies": {
    "@storybook/addons": "^3.3.0",
--- a/addons/storyshots/package.json
+++ b/addons/storyshots/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
  "license": "MIT",
  "main": "dist/index.js",
@ -16,8 +16,8 @@
    "storybook": "start-storybook -p 6006"
  },
  "dependencies": {
-    "@storybook/channels": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
+    "@storybook/channels": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "glob": "^7.1.2",
    "global": "^4.3.2",
@ -27,17 +27,17 @@
    "read-pkg-up": "^3.0.0"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/react": "4.0.0-alpha.1",
    "enzyme-to-json": "^3.3.3",
-    "react": "^16.1.0",
-    "react-dom": "^16.1.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0"
  },
  "peerDependencies": {
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
    "babel-core": "^6.26.0 || ^7.0.0-0"
  }
 }
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Stories addon for storybook",
  "keywords": [
    "storybook"
@ -20,7 +20,7 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "estraverse": "^4.2.0",
    "loader-utils": "^1.1.0",
--- a/addons/storysource/src/StoryPanel.js
+++ b/addons/storysource/src/StoryPanel.js
@ -46,7 +46,13 @@ export default class StoryPanel extends Component {

    this.state = { source: '// Here will be dragons 🐉' };

-    const { channel } = props;
+    this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
+    this.lineRenderer = this.lineRenderer.bind(this);
+    this.clickOnStory = this.clickOnStory.bind(this);
+  }
+
+  componentDidMount() {
+    const { channel } = this.props;

    channel.on(EVENT_ID, ({ source, currentLocation, locationsMap }) => {
      const locationsKeys = StoryPanel.getLocationKeys(locationsMap);
@ -58,10 +64,6 @@ export default class StoryPanel extends Component {
        locationsKeys,
      });
    });
-
-    this.setSelectedStoryRef = this.setSelectedStoryRef.bind(this);
-    this.lineRenderer = this.lineRenderer.bind(this);
-    this.clickOnStory = this.clickOnStory.bind(this);
  }

  componentDidUpdate() {
--- a/addons/viewport/README.md
+++ b/addons/viewport/README.md
@ -31,7 +31,53 @@ Setting this property to, let say `iphone6`, will make `iPhone 6` the default de

 ### viewports : Object
 ----
-A key-value pair of viewport's key and properties for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
+A key-value pair of viewport's key and properties (see `Viewport` definition below) for all viewports to be displayed. Default is [`INITIAL_VIEWPORTS`](src/shared/index.js)
+
+#### Viewport Model
+```js
+{
+  /**
+   * name to display in the dropdown
+   * @type {String}
+   */
+  name: 'Responsive',
+
+  /**
+   * Inline styles to be applied to the story (iframe).
+   * styles is an object whose key is the camelCased version of the style name, and whose
+   * value is the style’s value, usually a string
+   * @type {Object}
+   */
+  styles: {
+    width: '100%',
+    height: '100%',
+  },
+
+  /**
+   * type of the device (e.g. desktop, mobile, or tablet)
+   * @type {String}
+   */
+  type: 'desktop',
+}
+```
+
+## Decorators
+
+Sometimes you want to show collection of mobile stories, and you know those stories look horible on desktop (`responsive`), so you think you need to change the default viewport only for those?
+
+Here is the answer, with `withViewport` decorator, you can change the default viewport of single, multiple, or all stories.
+
+`withViewport` accepts either
+* A `String`, which represents the default viewport, or
+* An `Object`, which looks like
+```js
+{
+  name: 'iphone6', // default viewport
+  onViewportChange({ viewport }) { // called whenever different viewport is selected from the dropdown
+
+  }
+}
+```

 ## Examples

@ -120,3 +166,56 @@ configure({
  defaultViewport: 'iphone6'
 });
 ```
+
+## withViewport Decorator
+
+Change the default viewport for single/multiple/global stories, or listen to viewport selection changes
+
+```js
+import React from 'react';
+import { storiesOf, addDecorator } from '@storybook/react';
+import { withViewport } from '@storybook/addon-viewport';
+
+// Globablly
+addDecorator(withViewport('iphone5'));
+
+// Collection
+storiesOf('Decorator with string', module)
+  .addDecorator(withViewport('iphone6'))
+  .add('iPhone 6', () => (
+    <h1>
+      Do I look good on <b>iPhone 6</b>?
+    </h1>
+  ));
+
+storiesOf('Decorator with object', module)
+  .addDecorator(
+    withViewport({
+      onViewportChange({ viewport }) {
+        console.log(`Viewport changed: ${viewport.name} (${viewport.type})`); // e.g. Viewport changed: iphone6 (mobile)
+      },
+    })
+  )
+  .add('onViewportChange', () => <MobileFirstComponent />);
+
+```
+
+## Viewport Component
+
+You can also change the default viewport for a single story using `Viewport` component
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { Viewport } from '@storybook/addon-viewport';
+
+// Collection
+storiesOf('Custom Default', module)
+  .add('iphone6p', () => (
+    <Viewport name="iphone6p">
+      <h1>
+        Do I look good on <b>iPhone 6 Plus</b>?
+      </h1>
+    </Viewport>
+  ));
+```
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook addon to change the viewport size to mobile",
  "keywords": [
    "storybook"
@ -11,9 +11,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/components": "3.4.0-rc.3",
+    "@storybook/components": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "global": "^4.3.2",
+    "lodash.debounce": "^4.0.8",
    "prop-types": "^15.6.1"
  },
  "peerDependencies": {
--- a/addons/viewport/src/manager/components/Panel.js
+++ b/addons/viewport/src/manager/components/Panel.js
@ -2,15 +2,16 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { baseFonts } from '@storybook/components';
 import { document } from 'global';
+import debounce from 'lodash.debounce';

 import { resetViewport, viewportsTransformer } from './viewportInfo';
 import { SelectViewport } from './SelectViewport';
 import { RotateViewport } from './RotateViewport';
 import {
  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
-  UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
  CONFIGURE_VIEWPORT_EVENT_ID,
  UPDATE_VIEWPORT_EVENT_ID,
+  VIEWPORT_CHANGED_EVENT_ID,
  INITIAL_VIEWPORTS,
  DEFAULT_VIEWPORT,
 } from '../../shared';
@ -31,6 +32,8 @@ const getDefaultViewport = (viewports, candidateViewport) =>
 const getViewports = viewports =>
  Object.keys(viewports).length > 0 ? viewports : INITIAL_VIEWPORTS;

+const setStoryDefaultViewportWait = 100;
+
 export class Panel extends Component {
  static propTypes = {
    channel: PropTypes.shape({}).isRequired,
@ -50,6 +53,13 @@ export class Panel extends Component {
      viewports: viewportsTransformer(INITIAL_VIEWPORTS),
      isLandscape: false,
    };
+
+    this.previousViewport = DEFAULT_VIEWPORT;
+
+    this.setStoryDefaultViewport = debounce(
+      this.setStoryDefaultViewport,
+      setStoryDefaultViewportWait
+    );
  }

  componentDidMount() {
@ -60,10 +70,9 @@ export class Panel extends Component {
    channel.on(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
    channel.on(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
    channel.on(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
-    channel.on(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);

    this.unsubscribeFromOnStory = api.onStory(() => {
-      this.changeViewport(this.state.defaultViewport);
+      this.setStoryDefaultViewport(this.state.defaultViewport);
    });
  }

@ -77,30 +86,16 @@ export class Panel extends Component {
    channel.removeListener(UPDATE_VIEWPORT_EVENT_ID, this.changeViewport);
    channel.removeListener(CONFIGURE_VIEWPORT_EVENT_ID, this.configure);
    channel.removeListener(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.setStoryDefaultViewport);
-    channel.removeListener(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.unsetStoryDefaultViewport);
  }

  setStoryDefaultViewport = viewport => {
    const { viewports } = this.state;
    const defaultViewport = getDefaultViewport(viewports, viewport);

-    this.setState(
-      {
-        storyDefaultViewport: defaultViewport,
-        viewport: defaultViewport,
-      },
-      this.updateIframe
-    );
-  };
-
-  unsetStoryDefaultViewport = () => {
-    this.setState(
-      {
-        storyDefaultViewport: undefined,
-        viewport: this.state.defaultViewport,
-      },
-      this.updateIframe
-    );
+    this.setState({
+      storyDefaultViewport: defaultViewport,
+    });
+    this.changeViewport(defaultViewport);
  };

  configure = (options = Panel.defaultOptions) => {
@ -128,11 +123,31 @@ export class Panel extends Component {
          viewport,
          isLandscape: false,
        },
-        this.updateIframe
+        () => {
+          this.updateIframe();
+          this.emitViewportChanged();
+        }
      );
    }
  };

+  emitViewportChanged = () => {
+    const { channel } = this.props;
+    const { viewport, viewports } = this.state;
+
+    if (!this.shouldNotify()) {
+      return;
+    }
+
+    this.previousViewport = viewport;
+
+    channel.emit(VIEWPORT_CHANGED_EVENT_ID, {
+      viewport: viewports[viewport],
+    });
+  };
+
+  shouldNotify = () => this.previousViewport !== this.state.viewport;
+
  toggleLandscape = () => {
    const { isLandscape } = this.state;

--- a/addons/viewport/src/manager/components/tests/Panel.test.js
+++ b/addons/viewport/src/manager/components/tests/Panel.test.js
@ -8,11 +8,15 @@ import * as styles from '../styles';
 import { DEFAULT_VIEWPORT, INITIAL_VIEWPORTS } from '../../../shared';

 const initialViewportAt = index => Object.keys(INITIAL_VIEWPORTS)[index];
+const transformedInitialViewports = viewportsTransformer(INITIAL_VIEWPORTS);
+
+jest.mock('lodash.debounce', () => jest.fn(fn => fn));

 describe('Viewport/Panel', () => {
  const props = {
    channel: {
      on: jest.fn(),
+      emit: jest.fn(),
      removeListener: jest.fn(),
    },
    api: {
@ -31,7 +35,7 @@ describe('Viewport/Panel', () => {
      expect(subject.instance().state).toEqual({
        viewport: DEFAULT_VIEWPORT,
        defaultViewport: DEFAULT_VIEWPORT,
-        viewports: viewportsTransformer(INITIAL_VIEWPORTS),
+        viewports: transformedInitialViewports,
        isLandscape: false,
      });
    });
@ -75,13 +79,6 @@ describe('Viewport/Panel', () => {
        subject.instance().setStoryDefaultViewport
      );
    });
-
-    it('listens on `unsetStoryDefaultViewport` channel', () => {
-      expect(props.channel.on).toHaveBeenCalledWith(
-        'addon:viewport:unsetStoryDefaultViewport',
-        subject.instance().unsetStoryDefaultViewport
-      );
-    });
  });

  describe('componentWillUnmount', () => {
@ -109,13 +106,6 @@ describe('Viewport/Panel', () => {
        subject.instance().setStoryDefaultViewport
      );
    });
-
-    it('removes `unsetStoryDefaultViewport` channel listener', () => {
-      expect(props.channel.removeListener).toHaveBeenCalledWith(
-        'addon:viewport:unsetStoryDefaultViewport',
-        subject.instance().unsetStoryDefaultViewport
-      );
-    });
  });

  describe('configure', () => {
@ -175,7 +165,7 @@ describe('Viewport/Panel', () => {
        {
          defaultViewport: DEFAULT_VIEWPORT,
          viewport: DEFAULT_VIEWPORT,
-          viewports: viewportsTransformer(INITIAL_VIEWPORTS),
+          viewports: transformedInitialViewports,
        },
        subject.instance().updateIframe
      );
@ -194,13 +184,10 @@ describe('Viewport/Panel', () => {
      });

      it('sets the state with the new information', () => {
-        expect(subject.instance().setState).toHaveBeenCalledWith(
-          {
-            viewport: initialViewportAt(1),
-            isLandscape: false,
-          },
-          subject.instance().updateIframe
-        );
+        expect(subject.instance().setState.mock.calls[0][0]).toEqual({
+          viewport: initialViewportAt(1),
+          isLandscape: false,
+        });
      });
    });

@ -219,35 +206,62 @@ describe('Viewport/Panel', () => {
    beforeEach(() => {
      subject.instance().setState = jest.fn();
      subject.instance().updateIframe = jest.fn();
+      subject.instance().emitViewportChanged = jest.fn();
      subject.instance().setStoryDefaultViewport(initialViewportAt(1));
    });

    it('sets the state with the new information', () => {
-      expect(subject.instance().setState).toHaveBeenCalledWith(
-        {
-          viewport: initialViewportAt(1),
-          storyDefaultViewport: initialViewportAt(1),
-        },
-        subject.instance().updateIframe
-      );
+      expect(subject.instance().setState.mock.calls).toHaveLength(2);
+      expect(subject.instance().setState.mock.calls[0][0]).toEqual({
+        storyDefaultViewport: 'iphone5',
+      });
+
+      expect(subject.instance().setState.mock.calls[1][0]).toEqual({
+        viewport: initialViewportAt(1),
+        isLandscape: false,
+      });
+      expect(typeof subject.instance().setState.mock.calls[1][1]).toEqual('function');
+
+      const updaterFunction = subject.instance().setState.mock.calls[1][1];
+      updaterFunction();
+
+      expect(subject.instance().updateIframe).toHaveBeenCalled();
+      expect(subject.instance().emitViewportChanged).toHaveBeenCalled();
    });
  });

-  describe('unsetStoryDefaultViewport', () => {
+  describe('emitViewportChanged', () => {
    beforeEach(() => {
      subject.instance().setState = jest.fn();
      subject.instance().updateIframe = jest.fn();
-      subject.instance().unsetStoryDefaultViewport();
    });

-    it('resets the state', () => {
-      expect(subject.instance().setState).toHaveBeenCalledWith(
-        {
-          viewport: DEFAULT_VIEWPORT,
-          storyDefaultViewport: undefined,
-        },
-        subject.instance().updateIframe
-      );
+    describe('new viewport', () => {
+      beforeEach(() => {
+        subject.instance().state = {
+          ...subject.instance().state,
+          viewport: initialViewportAt(1),
+        };
+        subject.instance().emitViewportChanged();
+      });
+
+      it('emits viewport changed event', () => {
+        const viewport = transformedInitialViewports[initialViewportAt(1)];
+
+        expect(props.channel.emit).toHaveBeenCalledWith('addon:viewport:viewportChanged', {
+          viewport,
+        });
+      });
+    });
+
+    describe('same as previous viewport', () => {
+      beforeEach(() => {
+        subject.instance().emitViewportChanged();
+      });
+
+      it('does not emit viewport changed event', () => {
+        expect(props.channel.emit).not.toHaveBeenCalled();
+      });
    });
  });

@ -365,7 +379,7 @@ describe('Viewport/Panel', () => {
      it('passes the INITIAL_VIEWPORTS', () => {
        expect(select.props()).toEqual(
          expect.objectContaining({
-            viewports: viewportsTransformer(INITIAL_VIEWPORTS),
+            viewports: transformedInitialViewports,
          })
        );
      });
--- a/addons/viewport/src/preview/components/Viewport.js
+++ b/addons/viewport/src/preview/components/Viewport.js
@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import addons from '@storybook/addons';
+import {
+  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
+  VIEWPORT_CHANGED_EVENT_ID,
+  DEFAULT_VIEWPORT,
+} from '../../shared';
+
+const noop = () => {};
+
+export default class Viewport extends React.Component {
+  static propTypes = {
+    name: PropTypes.string,
+    children: PropTypes.node.isRequired,
+    onViewportChange: PropTypes.func,
+  };
+
+  static defaultProps = {
+    name: DEFAULT_VIEWPORT,
+    onViewportChange: noop,
+  };
+
+  constructor(props) {
+    super(props);
+
+    this.channel = addons.getChannel();
+    const { onViewportChange } = props;
+
+    if (typeof this.props.onViewportChange === 'function') {
+      this.onViewportChange = onViewportChange;
+    }
+  }
+
+  componentDidMount() {
+    if (this.onViewportChange) {
+      this.channel.on(VIEWPORT_CHANGED_EVENT_ID, this.onViewportChange);
+    }
+
+    this.channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.props.name);
+  }
+
+  componentWillUnmount() {
+    if (this.onViewportChange) {
+      this.channel.removeListener(VIEWPORT_CHANGED_EVENT_ID, this.onViewportChange);
+    }
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
--- a/addons/viewport/src/preview/components/tests/Viewport.test.js
+++ b/addons/viewport/src/preview/components/tests/Viewport.test.js
@ -0,0 +1,93 @@
+import React from 'react';
+import addons from '@storybook/addons';
+import { shallow } from 'enzyme';
+import { EventEmitter } from 'events';
+import Viewport from '../Viewport';
+import { VIEWPORT_CHANGED_EVENT_ID, INITIAL_VIEWPORTS } from '../../../shared';
+
+jest.mock('@storybook/addons');
+
+const noop = () => {};
+
+describe('Viewport', () => {
+  const channel = {
+    emit: jest.fn(),
+    on: jest.fn(),
+    removeListener: jest.fn(),
+  };
+
+  addons.getChannel.mockReturnValue(channel);
+
+  const props = {
+    name: 'iphone6',
+    children: '1337',
+  };
+
+  let subject;
+
+  beforeEach(() => {
+    subject = shallow(<Viewport {...props} />);
+  });
+
+  afterEach(() => {
+    channel.emit.mockReset();
+    channel.on.mockReset();
+    channel.removeListener.mockReset();
+  });
+
+  describe('componentDidMount', () => {
+    it('publishes `set` event with `iphone6`', () => {
+      expect(channel.emit).toHaveBeenCalledTimes(1);
+      expect(channel.emit).toHaveBeenCalledWith(
+        'addon:viewport:setStoryDefaultViewport',
+        'iphone6'
+      );
+    });
+
+    it('should listen to viewport changes', () => {
+      channel.on.mockReset();
+      subject = shallow(<Viewport {...props} onViewportChange={noop} />);
+
+      expect(channel.on).toHaveBeenCalledTimes(1);
+      expect(channel.on).toHaveBeenCalledWith('addon:viewport:viewportChanged', noop);
+    });
+  });
+
+  describe('componentWillUnmount', () => {
+    it('removes viewport changes listener', () => {
+      subject = shallow(<Viewport {...props} onViewportChange={noop} />);
+      subject.unmount();
+
+      expect(channel.removeListener).toHaveBeenCalledTimes(1);
+      expect(channel.removeListener).toHaveBeenCalledWith('addon:viewport:viewportChanged', noop);
+    });
+  });
+
+  describe('onViewportChange', () => {
+    const emitter = new EventEmitter();
+    const propsWithCallback = {
+      name: 'unknown',
+      children: 'do not exist',
+      onViewportChange: jest.fn(),
+    };
+
+    beforeAll(() => {
+      addons.getChannel.mockReturnValue(emitter);
+    });
+
+    beforeEach(() => {
+      subject = shallow(<Viewport {...propsWithCallback} />);
+    });
+
+    it('calls onViewportChange with the newly selected viewport', () => {
+      emitter.emit(VIEWPORT_CHANGED_EVENT_ID, {
+        viewport: INITIAL_VIEWPORTS.iphone5,
+      });
+
+      expect(propsWithCallback.onViewportChange).toHaveBeenCalled();
+      expect(propsWithCallback.onViewportChange).toHaveBeenCalledWith({
+        viewport: INITIAL_VIEWPORTS.iphone5,
+      });
+    });
+  });
+});
--- a/addons/viewport/src/preview/index.js
+++ b/addons/viewport/src/preview/index.js
@ -1,13 +1,9 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import addons from '@storybook/addons';
-import {
-  CONFIGURE_VIEWPORT_EVENT_ID,
-  SET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
-  UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID,
-} from '../shared';
+import { CONFIGURE_VIEWPORT_EVENT_ID } from '../shared';

 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../shared';
+export { default as withViewport } from './withViewport';
+export { default as Viewport } from './components/Viewport';

 export function configure(configs = {}) {
  const channel = addons.getChannel();
@ -16,32 +12,3 @@ export function configure(configs = {}) {
    channel.emit(CONFIGURE_VIEWPORT_EVENT_ID, configs);
  }
 }
-
-export function withViewport(name) {
-  return getStory => <Viewport name={name}>{getStory()}</Viewport>;
-}
-
-export class Viewport extends React.Component {
-  static propTypes = {
-    name: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired,
-  };
-
-  constructor(props) {
-    super(props);
-
-    this.channel = addons.getChannel();
-  }
-
-  componentWillMount() {
-    this.channel.emit(SET_STORY_DEFAULT_VIEWPORT_EVENT_ID, this.props.name);
-  }
-
-  componentWillUnmount() {
-    this.channel.emit(UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID);
-  }
-
-  render() {
-    return this.props.children;
-  }
-}
--- a/addons/viewport/src/preview/tests/index.test.js
+++ b/addons/viewport/src/preview/tests/index.test.js
@ -1,13 +1,12 @@
-import React from 'react';
 import addons from '@storybook/addons';
-import { shallow } from 'enzyme';
-import { configure, Viewport } from '../';
+import { configure } from '../';

 jest.mock('@storybook/addons');

 describe('Viewport preview', () => {
  const channel = {
    emit: jest.fn(),
+    on: jest.fn(),
  };
  addons.getChannel.mockReturnValue(channel);

@ -26,39 +25,4 @@ describe('Viewport preview', () => {
      });
    });
  });
-
-  describe('Viewport', () => {
-    const props = {
-      name: 'iphone6',
-      children: '1337',
-    };
-
-    let subject;
-
-    beforeEach(() => {
-      subject = shallow(<Viewport {...props} />);
-    });
-
-    describe('componentWillMount', () => {
-      it('publishes `set` event with `iphone6`', () => {
-        expect(channel.emit).toHaveBeenCalledTimes(1);
-        expect(channel.emit).toHaveBeenCalledWith(
-          'addon:viewport:setStoryDefaultViewport',
-          'iphone6'
-        );
-      });
-    });
-
-    describe('componentWillUnmount', () => {
-      beforeEach(() => {
-        channel.emit.mockReset();
-        subject.unmount();
-      });
-
-      it('publishes `unset` event', () => {
-        expect(channel.emit).toHaveBeenCalledTimes(1);
-        expect(channel.emit).toHaveBeenCalledWith('addon:viewport:unsetStoryDefaultViewport');
-      });
-    });
-  });
 });
--- a/addons/viewport/src/preview/withViewport.js
+++ b/addons/viewport/src/preview/withViewport.js
@ -0,0 +1,20 @@
+import React from 'react';
+
+import Viewport from './components/Viewport';
+
+export default function withViewport(nameOrOptions) {
+  const options = typeof nameOrOptions === 'string' ? { name: nameOrOptions } : nameOrOptions;
+
+  const decorator = getStory => context => (
+    <Viewport context={context} {...options}>
+      {getStory()}
+    </Viewport>
+  );
+
+  return (getStory, context) => {
+    if (typeof context === 'undefined') {
+      return decorator(getStory);
+    }
+    return decorator(getStory)(context);
+  };
+}
--- a/addons/viewport/src/shared/index.js
+++ b/addons/viewport/src/shared/index.js
@ -3,7 +3,7 @@ export const PANEL_ID = `${ADDON_ID}/addon-panel`;
 export const UPDATE_VIEWPORT_EVENT_ID = 'addon:viewport:update';
 export const CONFIGURE_VIEWPORT_EVENT_ID = 'addon:viewport:configure';
 export const SET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:setStoryDefaultViewport';
-export const UNSET_STORY_DEFAULT_VIEWPORT_EVENT_ID = 'addon:viewport:unsetStoryDefaultViewport';
+export const VIEWPORT_CHANGED_EVENT_ID = 'addon:viewport:viewportChanged';
 export const INITIAL_VIEWPORTS = {
  responsive: {
    name: 'Responsive',
@ -15,6 +15,7 @@ export const INITIAL_VIEWPORTS = {
      margin: '0',
      boxShadow: 'none',
    },
+    type: 'desktop',
  },
  iphone5: {
    name: 'iPhone 5',
@ -22,6 +23,7 @@ export const INITIAL_VIEWPORTS = {
      height: '568px',
      width: '320px',
    },
+    type: 'mobile',
  },
  iphone6: {
    name: 'iPhone 6',
@ -29,6 +31,7 @@ export const INITIAL_VIEWPORTS = {
      height: '667px',
      width: '375px',
    },
+    type: 'mobile',
  },
  iphone6p: {
    name: 'iPhone 6 Plus',
@ -36,6 +39,7 @@ export const INITIAL_VIEWPORTS = {
      height: '736px',
      width: '414px',
    },
+    type: 'mobile',
  },
  ipad: {
    name: 'iPad',
@ -43,6 +47,7 @@ export const INITIAL_VIEWPORTS = {
      height: '1024px',
      width: '768px',
    },
+    type: 'tablet',
  },
  galaxys5: {
    name: 'Galaxy S5',
@ -50,6 +55,7 @@ export const INITIAL_VIEWPORTS = {
      height: '640px',
      width: '360px',
    },
+    type: 'mobile',
  },
  nexus5x: {
    name: 'Nexus 5X',
@ -57,6 +63,7 @@ export const INITIAL_VIEWPORTS = {
      height: '660px',
      width: '412px',
    },
+    type: 'mobile',
  },
  nexus6p: {
    name: 'Nexus 6P',
@ -64,6 +71,7 @@ export const INITIAL_VIEWPORTS = {
      height: '732px',
      width: '412px',
    },
+    type: 'mobile',
  },
 };
 export const DEFAULT_VIEWPORT = 'responsive';
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.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,11 +23,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "airbnb-js-shims": "^1.4.1",
    "angular2-template-loader": "^0.6.2",
    "babel-loader": "^7.1.4",
@ -47,12 +48,11 @@
    "node-sass": "^4.8.3",
    "raw-loader": "^0.5.1",
    "react": "^16.0.0",
-    "react-dev-utils": "^5.0.0",
    "react-dom": "^16.0.0",
    "sass-loader": "^6.0.7",
    "ts-loader": "^4.1.0",
    "util-deprecate": "^1.0.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-hot-middleware": "^2.21.2",
    "zone.js": "^0.8.20"
  },
--- a/app/angular/src/server/config/webpack.config.js
+++ b/app/angular/src/server/config/webpack.config.js
@ -1,8 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
@ -32,6 +32,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -41,6 +42,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/angular/src/server/config/webpack.config.prod.js
+++ b/app/angular/src/server/config/webpack.config.prod.js
@ -1,7 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';

@ -33,6 +33,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -42,6 +43,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/mithril",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
  "homepage": "https://github.com/storybooks/storybook/tree/master/app/mithril",
  "bugs": {
@ -23,12 +23,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/client-logger": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/client-logger": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "airbnb-js-shims": "^1.4.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-macros": "^2.2.0",
@ -48,11 +49,10 @@
    "html-webpack-plugin": "^3.1.0",
    "json5": "^0.5.1",
    "markdown-loader": "^2.0.2",
-    "react": "^16.2.0",
-    "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
    "util-deprecate": "^1.0.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-hot-middleware": "^2.21.2"
  },
  "devDependencies": {
--- a/app/mithril/src/server/config/webpack.config.js
+++ b/app/mithril/src/server/config/webpack.config.js
@ -1,8 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath } from '@storybook/core/server';
@ -33,6 +33,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -42,6 +43,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/mithril/src/server/config/webpack.config.prod.js
+++ b/app/mithril/src/server/config/webpack.config.prod.js
@ -1,6 +1,6 @@
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath } from '@storybook/core/server';
 import babelLoaderConfig from './babel.prod';
@ -32,6 +32,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -41,6 +42,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/polymer",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybooks/storybook/tree/master/apps/polymer",
  "bugs": {
@ -22,12 +22,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/client-logger": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/client-logger": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "@webcomponents/webcomponentsjs": "^1.1.1",
    "airbnb-js-shims": "^1.4.1",
    "babel-loader": "^7.1.4",
@ -48,11 +49,10 @@
    "global": "^4.3.2",
    "html-webpack-plugin": "^3.1.0",
    "json5": "^0.5.1",
-    "react": "^16.0.0",
-    "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
    "util-deprecate": "^1.0.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-hot-middleware": "^2.21.2"
  },
  "devDependencies": {
--- a/app/polymer/src/server/config/webpack.config.js
+++ b/app/polymer/src/server/config/webpack.config.js
@ -1,8 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
@ -33,6 +33,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -42,6 +43,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/polymer/src/server/config/webpack.config.prod.js
+++ b/app/polymer/src/server/config/webpack.config.prod.js
@ -1,6 +1,6 @@
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
@ -32,6 +32,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -41,6 +42,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/react-native/docs/manual-setup.md
+++ b/app/react-native/docs/manual-setup.md
@ -3,7 +3,7 @@
 First, install the `@storybook/react-native` module

 ```sh
-npm install @storybook/react-native --save-dev
+npm install @storybook/react-native
 ```

 Create a new directory called `storybook` in your project root and create an entry file (index.ios.js or index.android.js) as given below. (Don't forget to replace "MyApplicationName" with your app name).
@ -25,7 +25,7 @@ const StorybookUI = getStorybookUI({
 AppRegistry.registerComponent('MyApplicationName', () => StorybookUI);
 ```

-Create a file named `addons.js` file in `storybook` directory to use default set of addons.
+Create a file named `addons.js` file in `storybook` directory to use addons. Here is a list of default addons:

 ```js
 import '@storybook/addon-actions';
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-native",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "A better way to develop React Native Components for your app",
  "keywords": [
    "react",
@ -25,12 +25,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-websocket": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-websocket": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-macros": "^2.2.0",
    "babel-plugin-syntax-async-functions": "^6.13.0",
@ -40,11 +41,14 @@
    "babel-plugin-transform-regenerator": "^6.26.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.1",
+    "babel-preset-flow": "^6.23.0",
    "babel-preset-minify": "^0.3.0",
    "babel-preset-react": "^6.24.1",
+    "babel-register": "^6.26.0",
    "babel-runtime": "^6.26.0",
    "case-sensitive-paths-webpack-plugin": "^2.1.2",
    "commander": "^2.15.1",
+    "dotenv-webpack": "^1.5.5",
    "express": "^4.16.3",
    "find-cache-dir": "^1.0.0",
    "global": "^4.3.2",
@ -53,17 +57,16 @@
    "json5": "^0.5.1",
    "markdown-loader": "^2.0.2",
    "prop-types": "^15.6.1",
-    "react-dev-utils": "^5.0.0",
    "react-native-compat": "^1.0.0",
    "react-native-iphone-x-helper": "^1.0.2",
    "shelljs": "^0.8.1",
    "url-parse": "^1.1.9",
    "util-deprecate": "^1.0.2",
    "uuid": "^3.2.1",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-dev-middleware": "^3.1.0",
    "webpack-hot-middleware": "^2.21.2",
-    "ws": "^4.1.0"
+    "ws": "^5.1.0"
  },
  "devDependencies": {
    "react-native": "^0.52.2"
--- a/app/react-native/src/bin/storybook-start.js
+++ b/app/react-native/src/bin/storybook-start.js
@ -59,15 +59,23 @@ if (!program.skipPackager) {
  }

  try {
-    const findSymlinksPaths = require('react-native/local-cli/util/findSymlinksPaths'); // eslint-disable-line global-require
-    symlinks = findSymlinksPaths(path.join(projectDir, 'node_modules'), [projectDir]);
+    // eslint-disable-next-line global-require
+    require('babel-register')({
+      presets: ['flow'],
+      ignore: false,
+      babelrc: false,
+    });
+
+    // eslint-disable-next-line global-require
+    const findSymlinkedModules = require('react-native/local-cli/util/findSymlinkedModules');
+    symlinks = roots.reduce((arr, rootPath) => arr.concat(findSymlinkedModules(rootPath, roots)), [
+      ...roots,
+    ]);
  } catch (e) {
-    console.warn(`Unable to load findSymlinksPaths: ${e.message}`);
+    console.warn(`Unable to load findSymlinksPaths: ${e.message}`, e);
  }

-  let projectRoots = (configDir === projectDir ? [configDir] : [configDir, projectDir]).concat(
-    symlinks
-  );
+  let projectRoots = (configDir === projectDir ? [] : [configDir]).concat(symlinks);

  if (program.projectRoots) {
    projectRoots = projectRoots.concat(
@ -85,7 +93,6 @@ if (!program.skipPackager) {
    [
      cliCommand,
      `--projectRoots ${projectRoots.join(',')}`,
-      `--root ${roots.join(',')}`,
      program.resetCache && '--reset-cache',
      program.packagerPort && `--port=${program.packagerPort}`,
    ]
--- a/app/react-native/src/preview/components/OnDeviceUI/index.js
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.js
@ -32,19 +32,16 @@ export default class OnDeviceUI extends Component {
    };
  }

-  componentWillMount = () => {
+  componentDidMount() {
    Dimensions.addEventListener('change', this.handleDeviceRotation);
    this.props.events.on('story', this.handleStoryChange);
-  };
-
-  componentDidMount() {
    StatusBar.setHidden(true);
  }

-  componentWillUnmount = () => {
+  componentWillUnmount() {
    Dimensions.removeEventListener('change', this.handleDeviceRotation);
    this.props.events.removeListener('story', this.handleStoryChange);
-  };
+  }

  handleDeviceRotation = () => {
    this.setState({
--- a/app/react-native/src/server/config/webpack.config.js
+++ b/app/react-native/src/server/config/webpack.config.js
@ -1,6 +1,7 @@
 import path from 'path';
 import webpack from 'webpack';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import Dotenv from 'dotenv-webpack';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { includePaths, excludePaths, nodeModulesPaths } from './utils';
@ -27,6 +28,7 @@ const getConfig = options => ({
    new webpack.HotModuleReplacementPlugin(),
    new CaseSensitivePathsPlugin(),
    new WatchMissingNodeModulesPlugin(nodeModulesPaths),
+    new Dotenv({ silent: true }),
  ],
  module: {
    rules: [
--- a/app/react-native/src/server/config/webpack.config.prod.js
+++ b/app/react-native/src/server/config/webpack.config.prod.js
@ -1,5 +1,6 @@
 import path from 'path';
 import webpack from 'webpack';
+import Dotenv from 'dotenv-webpack';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { includePaths, excludePaths } from './utils';

@ -31,6 +32,7 @@ const getConfig = options => {
      }),
      new webpack.DefinePlugin({ 'process.env.NODE_ENV': '"production"' }),
      new webpack.optimize.DedupePlugin(),
+      new Dotenv({ silent: true }),
    ],
    module: {
      rules: [
--- a/app/react-native/src/server/index.js
+++ b/app/react-native/src/server/index.js
@ -24,13 +24,6 @@ export default class Server {
      }
    }

-    // see https://github.com/websockets/ws/issues/1256#issuecomment-364988689
-    socket.on('error', err => {
-      // Ignore network errors like `ECONNRESET`, `EPIPE`, etc.
-      if (err.errno) return;
-      throw err;
-    });
-
    socket.on('message', data => {
      this.wsServer.clients.forEach(c => {
        if (!this.options.manualId || (socket.pairedId && socket.pairedId === c.pairedId)) {
--- a/app/react/package.json
+++ b/app/react/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.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,14 +23,15 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/client-logger": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/client-logger": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "airbnb-js-shims": "^1.4.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-macros": "^2.2.0",
@ -56,9 +57,8 @@
    "lodash.flattendeep": "^4.4.0",
    "markdown-loader": "^2.0.2",
    "prop-types": "^15.6.1",
-    "react-dev-utils": "^5.0.0",
    "util-deprecate": "^1.0.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-hot-middleware": "^2.21.2"
  },
  "devDependencies": {
@ -67,7 +67,7 @@
  "peerDependencies": {
    "babel-core": "^6.26.0 || ^7.0.0-0",
    "babel-runtime": ">=6.0.0",
-    "react": ">=15.0.0 || ^16.0.0",
-    "react-dom": ">=15.0.0 || ^16.0.0"
+    "react": ">=15.0.0",
+    "react-dom": ">=15.0.0"
  }
 }
--- a/app/react/src/client/preview/render.js
+++ b/app/react/src/client/preview/render.js
@ -19,12 +19,19 @@ if (isBrowser) {
  rootEl = document.getElementById('root');
 }

+function render(node, el) {
+  ReactDOM.render(
+    process.env.STORYBOOK_EXAMPLE_APP ? <React.StrictMode>{node}</React.StrictMode> : node,
+    el
+  );
+}
+
 export function renderError(error) {
  const properError = new Error(error.title);
  properError.stack = error.description;

  const redBox = <ErrorDisplay error={properError} />;
-  ReactDOM.render(redBox, rootEl);
+  render(redBox, rootEl);
 }

 export function renderException(error) {
@ -33,7 +40,7 @@ export function renderException(error) {
  const realError = new Error(error.message);
  realError.stack = error.stack;
  const redBox = <ErrorDisplay error={realError} />;
-  ReactDOM.render(redBox, rootEl);
+  render(redBox, rootEl);

  // Log the stack to the console. So, user could check the source code.
  logger.error(error.stack);
@ -49,7 +56,7 @@ export function renderMain(data, storyStore, forceRender) {
  const revision = storyStore.getRevision();
  const story = storyStore.getStoryWithContext(selectedKind, selectedStory);
  if (!story) {
-    ReactDOM.render(noPreview, rootEl);
+    render(noPreview, rootEl);
    return null;
  }

@ -101,7 +108,7 @@ export function renderMain(data, storyStore, forceRender) {
    return renderError(error);
  }

-  ReactDOM.render(element, rootEl);
+  render(element, rootEl);
  return null;
 }

--- a/app/react/src/server/config/webpack.config.js
+++ b/app/react/src/server/config/webpack.config.js
@ -1,8 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
@ -32,6 +32,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -41,6 +42,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/react/src/server/config/webpack.config.prod.js
+++ b/app/react/src/server/config/webpack.config.prod.js
@ -1,6 +1,6 @@
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
 import babelLoaderConfig from './babel.prod';
@ -31,6 +31,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -40,6 +41,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/vue/package.json
+++ b/app/vue/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.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,10 +23,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/core": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/core": "4.0.0-alpha.1",
+    "@storybook/react-dev-utils": "^5.0.0",
+    "@storybook/ui": "4.0.0-alpha.1",
    "airbnb-js-shims": "^1.4.1",
    "babel-loader": "^7.1.4",
    "babel-plugin-macros": "^2.2.0",
@ -46,11 +47,10 @@
    "html-webpack-plugin": "^3.1.0",
    "json5": "^0.5.1",
    "markdown-loader": "^2.0.2",
-    "react": "^16.2.0",
-    "react-dev-utils": "^5.0.0",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
    "util-deprecate": "^1.0.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-hot-middleware": "^2.21.2"
  },
  "devDependencies": {
--- a/app/vue/src/server/config/webpack.config.js
+++ b/app/vue/src/server/config/webpack.config.js
@ -1,8 +1,8 @@
 import path from 'path';
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
-import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModulesPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
+import WatchMissingNodeModulesPlugin from '@storybook/react-dev-utils/WatchMissingNodeModulesPlugin';
 import CaseSensitivePathsPlugin from 'case-sensitive-paths-webpack-plugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
@ -32,6 +32,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -41,6 +42,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/app/vue/src/server/config/webpack.config.prod.js
+++ b/app/vue/src/server/config/webpack.config.prod.js
@ -1,6 +1,6 @@
 import webpack from 'webpack';
 import Dotenv from 'dotenv-webpack';
-import InterpolateHtmlPlugin from 'react-dev-utils/InterpolateHtmlPlugin';
+import InterpolateHtmlPlugin from '@storybook/react-dev-utils/InterpolateHtmlPlugin';
 import HtmlWebpackPlugin from 'html-webpack-plugin';
 import { managerPath, getPreviewHeadHtml, getManagerHeadHtml } from '@storybook/core/server';
 import babelLoaderConfig from './babel.prod';
@ -31,6 +31,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          managerHead: getManagerHeadHtml(configDir),
          version,
@ -40,6 +41,7 @@ export default function(configDir) {
      new HtmlWebpackPlugin({
        filename: 'iframe.html',
        excludeChunks: ['manager'],
+        chunksSortMode: 'none',
        data: {
          previewHead: getPreviewHeadHtml(configDir),
        },
--- a/docs/package.json
+++ b/docs/package.json
@ -18,21 +18,21 @@
    "storybook": "start-storybook -p 9009 -s src/pages"
  },
  "dependencies": {
-    "@storybook/addon-actions": "^3.3.15",
-    "@storybook/addon-links": "^3.3.15",
-    "@storybook/addons": "^3.3.15",
-    "@storybook/react": "^3.3.15",
+    "@storybook/addon-actions": "^3.4.0",
+    "@storybook/addon-links": "^3.4.0",
+    "@storybook/addons": "^3.4.0",
+    "@storybook/react": "^3.4.0",
    "babel-loader": "^6.4.1",
    "bootstrap": "^3.3.7",
    "gatsby": "^1.9.243",
    "gatsby-link": "^1.6.40",
    "gatsby-plugin-sharp": "^1.6.41",
-    "gatsby-remark-autolink-headers": "^1.4.13",
+    "gatsby-remark-autolink-headers": "^1.4.15",
    "gatsby-remark-copy-linked-files": "^1.5.30",
    "gatsby-remark-images": "^1.5.60",
    "gatsby-remark-smartypants": "^1.4.12",
    "gatsby-source-filesystem": "^1.5.27",
-    "gatsby-transformer-remark": "^1.7.38",
+    "gatsby-transformer-remark": "^1.7.39",
    "gh-pages": "^1.1.0",
    "global": "^4.3.2",
    "highlight.js": "^9.12.0",
--- a/docs/src/pages/addons/using-addons/index.md
+++ b/docs/src/pages/addons/using-addons/index.md
@ -12,7 +12,7 @@ We are going to use an addon called [Notes](https://github.com/storybooks/storyb
 First, we need to install the addons:

 ```sh
-npm i --save-dev @storybook/addons @storybook/addon-actions @storybook/addon-links @storybook/addon-notes
+yarn add -D @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:
@ -38,9 +38,7 @@ import Button from './Button';

 storiesOf('Button', module)
  .add('with some emoji', () => (
-    <WithNotes notes={'Here we use some emoji as the Button text. Doesn&apos;t it look nice?'}>
-      <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>
-    </WithNotes>
+     withNotes('A very simple component')(() => <Button onClick={action('clicked')}><span role="img" aria-label="so cool">😀 😎 👍 💯</span></Button>));
  ));
 ```

--- a/docs/yarn.lock
+++ b/docs/yarn.lock
--- a/examples/angular-cli/.env
+++ b/examples/angular-cli/.env
@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "angular-cli",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "license": "MIT",
  "scripts": {
@ -27,17 +27,18 @@
  "devDependencies": {
    "@angular/cli": "1.7.3",
    "@angular/compiler-cli": "^5.2.9",
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addon-storysource": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/angular": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addon-storysource": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/angular": "4.0.0-alpha.1",
    "@types/jasmine": "~2.8.6",
-    "@types/node": "~9.6.0",
+    "@types/node": "~9.6.1",
+    "babel-core": "^6.26.0",
    "global": "^4.3.2",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@ -1,6 +1,6 @@
 {
  "name": "cra-kitchen-sink",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "scripts": {
    "build": "react-scripts build",
@ -13,31 +13,32 @@
  "dependencies": {
    "global": "^4.3.2",
    "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-dom": "^16.2.0"
+    "react": "^16.3.0",
+    "react-dom": "^16.3.0",
+    "react-lifecycles-compat": "^1.1.0"
  },
  "devDependencies": {
-    "@storybook/addon-a11y": "3.4.0-rc.3",
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-backgrounds": "3.4.0-rc.3",
-    "@storybook/addon-centered": "3.4.0-rc.3",
-    "@storybook/addon-events": "3.4.0-rc.3",
-    "@storybook/addon-info": "3.4.0-rc.3",
-    "@storybook/addon-jest": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/client-logger": "3.4.0-rc.3",
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/addon-a11y": "4.0.0-alpha.1",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.1",
+    "@storybook/addon-centered": "4.0.0-alpha.1",
+    "@storybook/addon-events": "4.0.0-alpha.1",
+    "@storybook/addon-info": "4.0.0-alpha.1",
+    "@storybook/addon-jest": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/client-logger": "4.0.0-alpha.1",
+    "@storybook/react": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "enzyme": "^3.3.0",
    "enzyme-adapter-react-16": "^1.1.0",
    "enzyme-to-json": "^3.3.3",
    "jest": "^20.0.4",
    "react-scripts": "^1.1.1",
-    "webpack": "^4.3.0"
+    "webpack": "^4.4.1"
  }
 }
--- a/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
+++ b/examples/cra-kitchen-sink/src/components/LifecycleLogger.js
@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import polyfill from 'react-lifecycles-compat';
 import { logger } from '@storybook/client-logger';

 function log(name) {
@ -7,22 +8,18 @@ function log(name) {

 // A component that logs its lifecycle so we can check that things happen
 // the right number of times (i.e. we are using React properly)
-export default class LifecycleLogger extends Component {
+class LifecycleLogger extends Component {
  constructor() {
    super();
-    log('contructor');
-  }
-  componentWillMount() {
-    log('componentWillMount');
+    log('constructor');
+    this.state = {};
  }
  componentDidMount() {
    log('componentDidMount');
  }
-  componentWillReceiveProps() {
-    log('componentWillReceiveProps');
-  }
-  componentWillUpdate() {
-    log('componentWillUpdate');
+  // eslint-disable-next-line react/sort-comp
+  getSnapshotBeforeUpdate() {
+    log('getSnapshotBeforeUpdate');
  }
  componentDidUpdate() {
    log('componentDidUpdate');
@ -38,3 +35,12 @@ export default class LifecycleLogger extends Component {
    return <div>Lifecycle methods are logged to the console</div>;
  }
 }
+
+LifecycleLogger.getDerivedStateFromProps = () => {
+  log('getDerivedStateFromProps');
+  return null;
+};
+
+polyfill(LifecycleLogger);
+
+export default LifecycleLogger;
--- a/examples/crna-kitchen-sink/.env
+++ b/examples/crna-kitchen-sink/.env
@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/mithril-kitchen-sink/.env
+++ b/examples/mithril-kitchen-sink/.env
@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/mithril-kitchen-sink/.gitignore
+++ b/examples/mithril-kitchen-sink/.gitignore
@ -11,5 +11,4 @@ build

 # misc
 .DS_Store
-.env
 npm-debug.log
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@ -1,6 +1,6 @@
 {
  "name": "mithril-example",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "scripts": {
    "build-storybook": "build-storybook",
@ -10,20 +10,20 @@
    "mithril": "^1.1.6"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-backgrounds": "3.4.0-rc.3",
-    "@storybook/addon-centered": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addon-storysource": "3.4.0-rc.3",
-    "@storybook/addon-viewport": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/mithril": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.1",
+    "@storybook/addon-centered": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addon-storysource": "4.0.0-alpha.1",
+    "@storybook/addon-viewport": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/mithril": "4.0.0-alpha.1",
    "babel-core": "^6.26.0",
    "babel-plugin-transform-react-jsx": "^6.24.1",
-    "webpack": "^4.3.0"
+    "webpack": "^4.4.1"
  }
 }
--- a/examples/official-storybook/.env
+++ b/examples/official-storybook/.env
@ -1 +1,2 @@
 DISPLAY_WARNING=none
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/official-storybook/components/DelayedRender.js
+++ b/examples/official-storybook/components/DelayedRender.js
@ -10,12 +10,17 @@ export default class DelayedRender extends Component {
  };

  componentDidMount() {
-    setTimeout(() => {
+    this.showTO = setTimeout(() => {
      this.setState({
        show: true,
      });
    }, 1000);
  }
+
+  componentWillUnmount() {
+    clearTimeout(this.showTO);
+  }
+
  render() {
    return this.state.show ? this.props.children : <div />;
  }
--- a/examples/official-storybook/extra-viewports.json
+++ b/examples/official-storybook/extra-viewports.json
@ -4,13 +4,15 @@
    "styles": {
      "width": "600px",
      "height": "963px"
-    }
+    },
+    "type": "tablet"
  },
  "kindleFireHD": {
    "name": "Kindle Fire HD",
    "styles": {
      "width": "533px",
      "height": "801px"
-    }
+    },
+    "type": "tablet"
  }
 }
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@ -1,6 +1,6 @@
 {
  "name": "official-storybook",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "scripts": {
    "build-storybook": "build-storybook -c ./ -s built-storybooks",
@ -11,23 +11,23 @@
    "storybook": "start-storybook -p 9011 -c ./ -s built-storybooks"
  },
  "devDependencies": {
-    "@storybook/addon-a11y": "3.4.0-rc.3",
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-backgrounds": "3.4.0-rc.3",
-    "@storybook/addon-events": "3.4.0-rc.3",
-    "@storybook/addon-info": "3.4.0-rc.3",
-    "@storybook/addon-jest": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addon-storysource": "3.4.0-rc.3",
-    "@storybook/addon-viewport": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/components": "3.4.0-rc.3",
-    "@storybook/node-logger": "3.4.0-rc.3",
-    "@storybook/react": "3.4.0-rc.3",
+    "@storybook/addon-a11y": "4.0.0-alpha.1",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-backgrounds": "4.0.0-alpha.1",
+    "@storybook/addon-events": "4.0.0-alpha.1",
+    "@storybook/addon-info": "4.0.0-alpha.1",
+    "@storybook/addon-jest": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addon-storysource": "4.0.0-alpha.1",
+    "@storybook/addon-viewport": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/components": "4.0.0-alpha.1",
+    "@storybook/node-logger": "4.0.0-alpha.1",
+    "@storybook/react": "4.0.0-alpha.1",
    "babel-runtime": "^6.26.0",
    "enzyme-to-json": "^3.3.3",
    "eventemitter3": "^3.0.1",
@ -35,9 +35,9 @@
    "global": "^4.3.2",
    "paths.macro": "^2.0.2",
    "prop-types": "^15.6.1",
-    "react": "^16.2.0",
-    "react-chromatic": "^0.7.11",
-    "react-dom": "^16.2.0",
+    "react": "^16.3.0",
+    "react-chromatic": "^0.8.1",
+    "react-dom": "^16.3.0",
    "uuid": "^3.2.1"
  }
 }
--- a/examples/official-storybook/stories/Logger.js
+++ b/examples/official-storybook/stories/Logger.js
@ -2,16 +2,8 @@ import React, { Component } from 'react';
 import json from 'format-json';
 import PropTypes from 'prop-types';
 import EventEmitter from 'eventemitter3';
-
 import uuid from 'uuid/v4';

-const EVENTS = {
-  TEST_EVENT_1: 'test-event-1',
-  TEST_EVENT_2: 'test-event-2',
-  TEST_EVENT_3: 'test-event-3',
-  TEST_EVENT_4: 'test-event-4',
-};
-
 const styles = {
  wrapper: {
    padding: 20,
@ -21,6 +13,9 @@ const styles = {
    `,
    color: 'rgb(51, 51, 51)',
  },
+  title: {
+    margin: 0,
+  },
  item: {
    listStyle: 'none',
    marginBottom: 10,
@ -28,24 +23,30 @@ const styles = {
 };

 export default class Logger extends Component {
+  static LOG_EVENT = 'Logger:log';
+
  static propTypes = {
    emitter: PropTypes.instanceOf(EventEmitter).isRequired,
+    title: PropTypes.string,
+  };
+
+  static defaultProps = {
+    title: 'Logger',
  };

  state = {
    events: [],
  };

-  componentWillMount() {
-    const { emitter } = this.props;
-
-    emitter.on(EVENTS.TEST_EVENT_1, this.onEventHandler(EVENTS.TEST_EVENT_1));
-    emitter.on(EVENTS.TEST_EVENT_2, this.onEventHandler(EVENTS.TEST_EVENT_2));
-    emitter.on(EVENTS.TEST_EVENT_3, this.onEventHandler(EVENTS.TEST_EVENT_3));
-    emitter.on(EVENTS.TEST_EVENT_4, this.onEventHandler(EVENTS.TEST_EVENT_4));
+  componentDidMount() {
+    this.props.emitter.on(Logger.LOG_EVENT, this.onEventHandler);
  }

-  onEventHandler = name => payload => {
+  componentWillUnmount() {
+    this.props.emitter.removeListener(Logger.LOG_EVENT, this.onEventHandler);
+  }
+
+  onEventHandler = ({ name, payload }) => {
    this.setState(({ events }) => ({
      events: [...events, { name, id: uuid(), payload }],
    }));
@ -53,10 +54,11 @@ export default class Logger extends Component {

  render() {
    const { events } = this.state;
+    const { title } = this.props;

    return (
      <div style={styles.wrapper}>
-        <h1>Logger</h1>
+        <h1 style={styles.title}>{title}</h1>
        <dl>
          {events.map(({ id, name, payload }) => (
            <div style={styles.item} key={id}>
--- a/examples/official-storybook/stories/snapshots/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-events.stories.storyshot
@ -5,7 +5,9 @@ exports[`Storyshots Addons|Events Logger 1`] = `
  style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
      \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
 >
-  <h1>
+  <h1
+    style="margin:0"
+  >
    Logger
  </h1>
  <dl />
--- a/examples/official-storybook/stories/snapshots/addon-links.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-links.stories.storyshot
@ -34,6 +34,36 @@ exports[`Storyshots Addons|Links.Link Second 1`] = `
 </a>
 `;

+exports[`Storyshots Addons|Links.Scroll position First 1`] = `
+Array [
+  <div
+    style="margin-bottom:100vh"
+  >
+    Scroll down to see the link
+  </div>,
+  <a
+    href="/"
+  >
+    Go to Second
+  </a>,
+]
+`;
+
+exports[`Storyshots Addons|Links.Scroll position Second 1`] = `
+Array [
+  <div
+    style="margin-bottom:100vh"
+  >
+    Scroll down to see the link
+  </div>,
+  <a
+    href="/"
+  >
+    Go to First
+  </a>,
+]
+`;
+
 exports[`Storyshots Addons|Links.Select First 1`] = `
 <a
  href="/"
--- a/examples/official-storybook/stories/snapshots/addon-viewport.stories.storyshot
+++ b/examples/official-storybook/stories/snapshots/addon-viewport.stories.storyshot
@ -20,7 +20,19 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
 </div>
 `;

-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden 1`] = `
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "Viewport" component 1`] = `
+<div
+  style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
+>
+  I respect my parents but I should be looking good on 
+  <b>
+    iPhone 6 Plus
+  </b>
+  .
+</div>
+`;
+
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" decorator 1`] = `
 <div
  style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased"
 >
@ -31,3 +43,17 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden 1`
  .
 </div>
 `;
+
+exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
+<div
+  style="padding:20px;font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", \\"Roboto\\",
+      \\"Segoe UI\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", sans-serif;color:rgb(51, 51, 51)"
+>
+  <h1
+    style="margin:0"
+  >
+    Select device/viewport
+  </h1>
+  <dl />
+</div>
+`;
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@ -15,6 +15,10 @@ const EVENTS = {
 const emitter = new EventEmitter();
 const emit = emitter.emit.bind(emitter);

+const eventHandler = name => payload => emit(Logger.LOG_EVENT, { name, payload });
+
+Object.keys(EVENTS).forEach(event => emitter.on(EVENTS[event], eventHandler(EVENTS[event])));
+
 storiesOf('Addons|Events', module)
  .addDecorator(getStory => (
    <WithEvents
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ b/examples/official-storybook/stories/addon-links.stories.js
@ -34,3 +34,13 @@ storiesOf('Addons|Links.Href', module).add('log', () => {

  return <span>See action logger</span>;
 });
+
+storiesOf('Addons|Links.Scroll position', module)
+  .addDecorator(story => (
+    <React.Fragment>
+      <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
+      {story()}
+    </React.Fragment>
+  ))
+  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
+  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
--- a/examples/official-storybook/stories/addon-viewport.stories.js
+++ b/examples/official-storybook/stories/addon-viewport.stories.js
@ -1,8 +1,10 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { baseFonts } from '@storybook/components';
+import { Viewport, withViewport } from '@storybook/addon-viewport';
+import EventEmitter from 'eventemitter3';

-import { withViewport, Viewport } from '@storybook/addon-viewport';
+import Logger from './Logger';

 // eslint-disable-next-line react/prop-types
 const Panel = ({ children }) => <div style={baseFonts}>{children}</div>;
@ -18,10 +20,33 @@ storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
    </Panel>
  ))
-  .add('Overridden', () => (
-    <Viewport name="iphone6">
+  .add(
+    'Overridden via "withViewport" decorator',
+    withViewport('iphone6')(() => (
      <Panel>
        I respect my parents but I should be looking good on <b>iPhone 6</b>.
      </Panel>
+    ))
+  )
+  .add('Overridden via "Viewport" component', () => (
+    <Viewport name="iphone6p">
+      <Panel>
+        I respect my parents but I should be looking good on <b>iPhone 6 Plus</b>.
+      </Panel>
    </Viewport>
  ));
+
+const emitter = new EventEmitter();
+
+storiesOf('Addons|Viewport.withViewport', module)
+  .addDecorator(
+    withViewport({
+      onViewportChange({ viewport }) {
+        emitter.emit(Logger.LOG_EVENT, {
+          name: 'Viewport Changed',
+          payload: `${viewport.name} (${viewport.type})`,
+        });
+      },
+    })
+  )
+  .add('onViewportChange', () => <Logger title="Select device/viewport" emitter={emitter} />);
--- a/examples/polymer-cli/.env
+++ b/examples/polymer-cli/.env
@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "polymer-cli",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "scripts": {
    "build-storybook": "build-storybook",
@ -9,18 +9,18 @@
  },
  "dependencies": {
    "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storysource": "3.4.0-rc.3",
-    "@storybook/addon-viewport": "3.4.0-rc.3",
-    "@storybook/polymer": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storysource": "4.0.0-alpha.1",
+    "@storybook/addon-viewport": "4.0.0-alpha.1",
+    "@storybook/polymer": "4.0.0-alpha.1",
    "@webcomponents/webcomponentsjs": "^1.1.1",
    "global": "^4.3.2",
    "polymer-webpack-loader": "^2.0.2",
-    "webpack": "^4.3.0"
+    "webpack": "^4.4.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
--- a/examples/react-native-vanilla/.env
+++ b/examples/react-native-vanilla/.env
@ -0,0 +1 @@
+STORYBOOK_EXAMPLE_APP=true
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@ -1,6 +1,6 @@
 {
  "name": "vue-example",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "private": true,
  "scripts": {
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@ -13,17 +13,17 @@
    "vuex": "^3.0.0"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-centered": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addon-storysource": "3.4.0-rc.3",
-    "@storybook/addon-viewport": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/vue": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-centered": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addon-storysource": "4.0.0-alpha.1",
+    "@storybook/addon-viewport": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/vue": "4.0.0-alpha.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.4",
    "babel-preset-env": "^1.6.0",
@ -32,7 +32,7 @@
    "file-loader": "^1.1.11",
    "svg-url-loader": "^2.3.2",
    "vue-loader": "^14.2.2",
-    "webpack": "^4.3.0",
+    "webpack": "^4.4.1",
    "webpack-dev-server": "^3.1.1"
  }
 }
--- a/lerna.json
+++ b/lerna.json
@ -7,5 +7,5 @@
    }
  },
  "concurrency": 1,
-  "version": "3.4.0-rc.3"
+  "version": "4.0.0-alpha.1"
 }
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addons",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook addons store",
  "keywords": [
    "storybook"
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-postmessage",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
@ -9,7 +9,7 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/channels": "3.4.0-rc.3",
+    "@storybook/channels": "4.0.0-alpha.1",
    "global": "^4.3.2",
    "json-stringify-safe": "^5.0.1"
  }
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channel-websocket",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
@ -9,7 +9,7 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/channels": "3.4.0-rc.3",
+    "@storybook/channels": "4.0.0-alpha.1",
    "global": "^4.3.2"
  }
 }
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/channels",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "",
  "license": "MIT",
  "main": "dist/index.js",
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/cli",
-  "version": "3.4.0-rc.3",
+  "version": "4.0.0-alpha.1",
  "description": "Storybook's CLI - easiest method of adding storybook to your projects",
  "keywords": [
    "cli",
@ -25,7 +25,7 @@
    "test-latest-cra": "cd test && ./test_latest_cra.sh"
  },
  "dependencies": {
-    "@storybook/codemod": "3.4.0-rc.3",
+    "@storybook/codemod": "4.0.0-alpha.1",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-register": "^6.26.0",
@ -42,26 +42,26 @@
    "update-notifier": "^2.4.0"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "3.4.0-rc.3",
-    "@storybook/addon-centered": "3.4.0-rc.3",
-    "@storybook/addon-graphql": "3.4.0-rc.3",
-    "@storybook/addon-info": "3.4.0-rc.3",
-    "@storybook/addon-knobs": "3.4.0-rc.3",
-    "@storybook/addon-links": "3.4.0-rc.3",
-    "@storybook/addon-notes": "3.4.0-rc.3",
-    "@storybook/addon-options": "3.4.0-rc.3",
-    "@storybook/addon-storyshots": "3.4.0-rc.3",
-    "@storybook/addons": "3.4.0-rc.3",
-    "@storybook/angular": "3.4.0-rc.3",
-    "@storybook/channel-postmessage": "3.4.0-rc.3",
-    "@storybook/channel-websocket": "3.4.0-rc.3",
-    "@storybook/channels": "3.4.0-rc.3",
-    "@storybook/mithril": "3.4.0-rc.3",
-    "@storybook/polymer": "3.4.0-rc.3",
-    "@storybook/react": "3.4.0-rc.3",
-    "@storybook/react-native": "3.4.0-rc.3",
-    "@storybook/ui": "3.4.0-rc.3",
-    "@storybook/vue": "3.4.0-rc.3",
+    "@storybook/addon-actions": "4.0.0-alpha.1",
+    "@storybook/addon-centered": "4.0.0-alpha.1",
+    "@storybook/addon-graphql": "4.0.0-alpha.1",
+    "@storybook/addon-info": "4.0.0-alpha.1",
+    "@storybook/addon-knobs": "4.0.0-alpha.1",
+    "@storybook/addon-links": "4.0.0-alpha.1",
+    "@storybook/addon-notes": "4.0.0-alpha.1",
+    "@storybook/addon-options": "4.0.0-alpha.1",
+    "@storybook/addon-storyshots": "4.0.0-alpha.1",
+    "@storybook/addons": "4.0.0-alpha.1",
+    "@storybook/angular": "4.0.0-alpha.1",
+    "@storybook/channel-postmessage": "4.0.0-alpha.1",
+    "@storybook/channel-websocket": "4.0.0-alpha.1",
+    "@storybook/channels": "4.0.0-alpha.1",
+    "@storybook/mithril": "4.0.0-alpha.1",
+    "@storybook/polymer": "4.0.0-alpha.1",
+    "@storybook/react": "4.0.0-alpha.1",
+    "@storybook/react-native": "4.0.0-alpha.1",
+    "@storybook/ui": "4.0.0-alpha.1",
+    "@storybook/vue": "4.0.0-alpha.1",
    "check-node-version": "3.2.0",
    "npx": "10.0.1"
  }
--- a/lib/cli/test/snapshots/angular-cli/package.json
+++ b/lib/cli/test/snapshots/angular-cli/package.json
@ -44,10 +44,10 @@
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.4.0",
-    "@storybook/angular": "^3.4.0-rc.3",
-    "@storybook/addon-notes": "^3.4.0-rc.3",
-    "@storybook/addon-actions": "^3.4.0-rc.3",
-    "@storybook/addon-links": "^3.4.0-rc.3",
-    "@storybook/addons": "^3.4.0-rc.3"
+    "@storybook/angular": "^4.0.0-alpha.1",
+    "@storybook/addon-notes": "^4.0.0-alpha.1",
+    "@storybook/addon-actions": "^4.0.0-alpha.1",
+    "@storybook/addon-links": "^4.0.0-alpha.1",
+    "@storybook/addons": "^4.0.0-alpha.1"
  }
 }
--- a/Show More
+++ b/Show More