diff --git a/.babelrc.js b/.babelrc.js
index 9533d25af29..b60cfbe892d 100644
--- a/.babelrc.js
+++ b/.babelrc.js
@@ -13,6 +13,7 @@ const withTests = {
 };
 
 module.exports = {
+  ignore: ['./lib/codemod/src/transforms/__testfixtures__'],
   presets: [
     ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
     '@babel/preset-typescript',
@@ -53,6 +54,7 @@ module.exports = {
     },
     {
       test: './lib',
+      exclude: './addons/storysource/src/loader',
       presets: [
         ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
         '@babel/preset-react',
@@ -76,6 +78,7 @@ module.exports = {
         './lib/core/src/server',
         './lib/node-logger',
         './lib/codemod',
+        './lib/source-loader/src',
         './addons/storyshots',
         './addons/storysource/src/loader',
         './app/**/src/server/**',
diff --git a/.eslintignore b/.eslintignore
index 73cb24becbf..af5321f2b3b 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -10,6 +10,7 @@ lib/cli/test
 scripts/storage
 *.bundle.js
 *.js.map
+*.d.ts
 
 !.remarkrc.js
 !.babelrc.js
@@ -18,7 +19,3 @@ scripts/storage
 !.jest.config.js
 !.storybook
 
-REACT_NATIVE
-examples-native
-react-native
-ondevice-*
\ No newline at end of file
diff --git a/.github/automention.yml b/.github/automention.yml
index 59c65111e0f..b137b453dbc 100644
--- a/.github/automention.yml
+++ b/.github/automention.yml
@@ -7,7 +7,7 @@
 'app: react-native': ['benoitdion', 'gongreg']
 'app: react-native-server': ['benoitdion', 'igor-dv']
 'app: svelte': ['cam-stitt', 'plumpNation']
-'app: vue': ['backbone87', 'elevatebart']
+'app: vue': ['backbone87', 'elevatebart', 'pksunkara']
 'api: addons': ['ndelangen']
 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
 'addon: contexts': ['leoyli']
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d8126d9c7a..33f5529becb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,188 @@
+## 5.2.0-alpha.32 (June 29, 2019)
+
+### Features
+
+* Addon-docs: Add .story.mdx support to preset ([#7229](https://github.com/storybookjs/storybook/pull/7229))
+
+### Bug Fixes
+
+* React-native: Fix react native server ([#7187](https://github.com/storybookjs/storybook/pull/7187))
+* Addon-docs: Fix source-loader in monorepo examples ([#7214](https://github.com/storybookjs/storybook/pull/7214))
+
+### Maintenance
+
+* Addon-docs: Convert repo stories to new module format ([#7175](https://github.com/storybookjs/storybook/pull/7175))
+
+## 5.2.0-alpha.31 (June 27, 2019)
+
+### Breaking Changes
+
+* Module format: story field for name/parameters annotation ([#7202](https://github.com/storybookjs/storybook/pull/7202))
+
+### Features
+
+* Core: Story sorting ([#6472](https://github.com/storybookjs/storybook/pull/6472))
+
+### Maintenance
+
+* Addon-docs: Fix source-loader CI errors ([#7203](https://github.com/storybookjs/storybook/pull/7203))
+
+## 5.2.0-alpha.30 (June 25, 2019)
+
+This release merges `release/docs-technical-preview` branch back into `next` through a series of PRs. It also contains other changes that came in on `next` since the last alpha.
+
+### Features
+
+* CLI: Add info command to print environment information ([#6937](https://github.com/storybookjs/storybook/pull/6937))
+* CLI: Use process.env.CI if available ([#7118](https://github.com/storybookjs/storybook/pull/7118))
+* Addon-docs: Source loader library ([#7117](https://github.com/storybookjs/storybook/pull/7117))
+* Addon-docs: Support non-story exports in MDX ([#7188](https://github.com/storybookjs/storybook/pull/7188))
+* Addon-docs: Support non-story exports in module format ([#7185](https://github.com/storybookjs/storybook/pull/7185))
+* Addon-docs: Docs mode with `--docs` flag ([#7154](https://github.com/storybookjs/storybook/pull/7154))
+* Addon-docs: Convert to module format codemod ([#7174](https://github.com/storybookjs/storybook/pull/7174))
+* Addon-docs: MDX support ([#7145](https://github.com/storybookjs/storybook/pull/7145))
+* Addon-docs: Component parameter codemod ([#7155](https://github.com/storybookjs/storybook/pull/7155))
+* Addon-docs: DocsPage and doc blocks ([#7119](https://github.com/storybookjs/storybook/pull/7119))
+* Addon-docs: Module story format & framework param ([#7110](https://github.com/storybookjs/storybook/pull/7110))
+* Addon-docs: Basic skeleton, UI viewMode handling ([#7107](https://github.com/storybookjs/storybook/pull/7107))
+
+### Bug Fixes
+
+* Addon-backgrounds: Fix unstretched preview background wrapper ([#7173](https://github.com/storybookjs/storybook/pull/7173))
+* Addon-notes/info: Fix indenting on markdown code blocks ([#7158](https://github.com/storybookjs/storybook/pull/7158))
+* Core: Improve HMR error reporting, no refreshes needed for error recovery ([#6972](https://github.com/storybookjs/storybook/pull/6972))
+* Addon-info: change stylesheetBase info height from 110vh to 100vh ([#7141](https://github.com/storybookjs/storybook/pull/7141))
+
+### Maintenance
+
+* Typescript: Migrate addon viewport ([#7177](https://github.com/storybookjs/storybook/pull/7177))
+
+### Dependency Upgrades
+
+* Bump css-loader from 2.1.1 to 3.0.0 ([#7122](https://github.com/storybookjs/storybook/pull/7122))
+* Upgrade core-js to 3.x in devkits ([#7171](https://github.com/storybookjs/storybook/pull/7171))
+* UPGRADE lazy-universal-dotenv ([#7151](https://github.com/storybookjs/storybook/pull/7151))
+
+## 5.1.9 (June 20, 2019)
+
+### Bug Fixes
+
+* Core: Fix JSON babel config error reporting ([#7104](https://github.com/storybookjs/storybook/pull/7104))
+* UI: Fix about page version check message ([#7105](https://github.com/storybookjs/storybook/pull/7105))
+
+### Dependency Upgrades
+
+* Add missing dependencies to ui/react ([#7081](https://github.com/storybookjs/storybook/pull/7081))
+* UPGRADE lazy-universal-dotenv ([#7151](https://github.com/storybookjs/storybook/pull/7151))
+* Make compatible with yarn Pnp ([#6922](https://github.com/storybookjs/storybook/pull/6922))
+
+## 5.2.0-alpha.29 (June 17, 2019)
+
+### Features
+
+* Addon-notes: enable multiple sections in notes panel ([#6861](https://github.com/storybookjs/storybook/pull/6861))
+* Addon-context: title fallback ([#7078](https://github.com/storybookjs/storybook/pull/7078))
+* Addon-info: Fix rendering of code block ([#6016](https://github.com/storybookjs/storybook/pull/6016))
+
+### Bug Fixes
+
+* Core: Fix JSON babel config error reporting ([#7104](https://github.com/storybookjs/storybook/pull/7104))
+* UI: Fix about page version check message ([#7105](https://github.com/storybookjs/storybook/pull/7105))
+
+### Maintenance
+
+* Core: Refactor story_store ([#6382](https://github.com/storybookjs/storybook/pull/6382))
+* Core: Make compatible with yarn Pnp ([#6922](https://github.com/storybookjs/storybook/pull/6922))
+
+### Dependency Upgrades
+
+* Bump jest-expo from 32.0.1 to 33.0.2 ([#6996](https://github.com/storybookjs/storybook/pull/6996))
+
+## 5.2.0-alpha.28 (June 17, 2019)
+
+Publish failed
+
+## 5.2.0-alpha.27 (June 17, 2019)
+
+* CLI: improve bootstrap list ([#6993](https://github.com/storybookjs/storybook/pull/6993))
+* CLI: replaced merge-dirs dependency by fs-extra ([#7100](https://github.com/storybookjs/storybook/pull/7100))
+
+## 5.1.8 (June 14, 2019)
+
+### Bug Fixes
+
+* CLI: Fix RN template to not import addons ([#7096](https://github.com/storybookjs/storybook/pull/7096))
+
+## 5.1.7 (June 14, 2019)
+
+### Bug Fixes
+
+* UI: Fix warning of loading prop not being a string ([#7080](https://github.com/storybookjs/storybook/pull/7080))
+
+## 5.1.6 (June 14, 2019)
+
+Publish failed
+
+## 5.1.5 (June 14, 2019)
+
+### Bug Fixes
+
+* Core: Upgrade plugin core-js fix ([#7086](https://github.com/storybookjs/storybook/pull/7086))
+* UI: Fix sidebar loading visibility ([#7073](https://github.com/storybookjs/storybook/pull/7073))
+* UI: Fix unnecessary large bundlesize ([#7091](https://github.com/storybookjs/storybook/pull/7091))
+* Addon-contexts, RN-server: Add core-js dep ([#7094](https://github.com/storybookjs/storybook/pull/7094))
+
+## 5.2.0-alpha.26 (June 14, 2019)
+
+- Merge in changes from 5.1.7/next branch.
+- Fix earlier merge problems relating to addon-docs:
+  - Restore `--docs` command-line functionality
+  - Fix refreshing docs page bug
+
+## 5.2.0-alpha.25 (June 14, 2019)
+
+Publish failed
+
+## 5.1.4 (June 13, 2019)
+
+### Bug Fixes
+
+* Core: Fix core-js 3 errors ([#7051](https://github.com/storybookjs/storybook/pull/7051))
+* UI: Fix syntax highlighter plain text not visible ([#7057](https://github.com/storybookjs/storybook/pull/7057))
+* Addon-actions: Add default options to action(s) ([#6438](https://github.com/storybookjs/storybook/pull/6438))
+
+### Dependency Upgrades
+
+* fix: add missing core-js dependency ([#7016](https://github.com/storybookjs/storybook/pull/7016))
+* chore: set react version to 16.8.3 to match react native ([#7008](https://github.com/storybookjs/storybook/pull/7008))
+
+## 5.2.0-alpha.24 (June 13, 2019)
+
+Merge in changes from 5.1.3/next branch.
+
+## 5.2.0-alpha.23 (June 10, 2019)
+
+Merge in changes from 5.1.3/next branch. Releasing from the addon-docs branch to keep things moving until we can merge addon-docs into next.
+
+## 5.2.0-alpha.22 (June 7, 2019)
+
+- Merge in changes from 5.1.1
+- Addon-docs:
+  - Inline stories respect height prop
+  - Export Description block
+
+## 5.1.3 (June 6, 2019)
+
+### Bug Fixes
+
+* UI: Fix links that are not working with plain left click ([#6970](https://github.com/storybookjs/storybook/pull/6970))
+* Core: Don't redefine `process` variable ([#6991](https://github.com/storybookjs/storybook/pull/6991))
+* Core: Don't mutate user's babel config ([#6987](https://github.com/storybookjs/storybook/pull/6987))
+
+## 5.1.2 (June 6, 2019)
+
+Publish failed
+
 ## 5.1.1 (June 5, 2019)
 
 Storybook 5.1 is a juicy upgrade including:
@@ -42,6 +227,16 @@ Publish failed
 * Core: Fix webpack `process.*` variable definitions ([#6946](https://github.com/storybookjs/storybook/pull/6946))
 * Angular: Fix tsconfig.app.json detection for Angular 8 ([#6940](https://github.com/storybookjs/storybook/pull/6940))
 
+## 5.2.0-alpha.21 (June 2, 2019)
+
+- Core: Convert module format to use default export for metadata
+- Addon-docs: Compile MDX to default export modules format
+- Source-loader: Support parameter injection for default export metadata
+
+## 5.2.0-alpha.20 (May 31, 2019)
+
+- Addon-docs: Use Meta doc block instead of exporting componentMeta
+
 ## 5.1.0-rc.3 (May 29, 2019)
 
 ### Features
@@ -62,12 +257,46 @@ Publish failed
 * Bump ts-node from 8.1.0 to 8.2.0 ([#6890](https://github.com/storybookjs/storybook/pull/6890))
 * Bump svelte from 3.4.2 to 3.4.4 ([#6892](https://github.com/storybookjs/storybook/pull/6892))
 
+## 5.2.0-alpha.19 (May 28, 2019)
+
+- Source-loader: Fix bad package dependencies
+
 ## 5.1.0-rc.2 (May 27, 2019)
 
 ### Bug Fixes
 
 * Core: Fix JS/JSON loading babel config ([#6878](https://github.com/storybookjs/storybook/pull/6878))
 
+## 5.2.0-alpha.18 (May 26, 2019)
+
+- Addon-docs: Codemod for adding component parameters
+- Core: Babel config loading bugfix ([#6878](https://github.com/storybookjs/storybook/pull/6878))
+
+## 5.2.0-alpha.17 (May 26, 2019)
+
+- Addon-docs: Refer to selected story/component with `id="."` / `of="."`
+
+## 5.2.0-alpha.16 (May 25, 2019)
+
+- Addon-docs: Auto-configure `inlineStories` & `getPropDefs` based on framework
+
+## 5.2.0-alpha.15 (May 25, 2019)
+
+- Addon-docs: Expanded Vue support
+  - Props table support
+  - iframeHeight configuration parameter
+
+## 5.2.0-alpha.14 (May 25, 2019)
+
+- Addon-docs: Expanded source formats via `@storybook/source-loader`
+  - Legacy `storiesOf` format x (JS / TSX)
+  - Component modules format x (JS / TSX)
+  - Component MDX format
+
+## 5.2.0-alpha.13 (May 24, 2019)
+
+- Addon-docs: Add documentation-only `--docs` option to build storybook
+
 ## 5.1.0-rc.1 (May 24, 2019)
 
 ### Features
@@ -122,6 +351,29 @@ Publish failed
 * Bump svelte from 3.4.1 to 3.4.2 ([#6838](https://github.com/storybookjs/storybook/pull/6838))
 * Misc upgrades ([#6820](https://github.com/storybookjs/storybook/pull/6820))
 
+## 5.2.0-alpha.12 (May 21, 2019)
+
+- Addon-docs: Fix regression in preview source for legacy stories
+
+## 5.2.0-alpha.11 (May 21, 2019)
+
+- Addon-docs:
+  - Source refer to stories by name
+  - Source support for multi-story previews
+  - Fix loader bug for plaintext stories
+
+## 5.2.0-alpha.10 (May 19, 2019)
+
+- Addon-docs: Display source dropdown in preview component
+
+## 5.2.0-alpha.9 (May 17, 2019)
+
+- Addon-docs bugfixes:
+  - Fix broken components stories
+  - Fix regression in iframe preview
+  - Fix docgen props block
+  - Fix margin styling on docs page
+
 ## 5.1.0-beta.1 (May 16, 2019)
 
 ### Bug Fixes
@@ -139,6 +391,49 @@ Publish failed
 
 * Bump fs-extra from 7.0.1 to 8.0.1 ([#6776](https://github.com/storybookjs/storybook/pull/6776))
 
+## 5.2.0-alpha.8 (May 15, 2019)
+
+- Addon-docs: Optimize docs pane rerendering
+
+## 5.2.0-alpha.7 (May 15, 2019)
+
+- Addon-docs: Docs page bugfix
+- Addon-docs: Fix source block for legacy stories
+
+NOTE: use `@storybook/addon-storysource/loader` with option `injectParameters: true` for legacy source
+
+## 5.2.0-alpha.6 (May 14, 2019)
+
+- Addon-docs: Docs page content update
+- Addon-docs: Preview component redefinition
+
+#### Breaking changes
+
+Preview behavior has been updated. Docs page content has been updated.
+
+Before:
+
+- `<Story name="a">` defines a story, `<Preview id="x--a"/>` references it
+
+After:
+
+- `<Story name="a">` defines a story, `<Story id="x--a"/>` references it
+- `<Preview><Story .../><Story .../><Component/></Preview>` shows one or more stories in a grid
+
+## 5.2.0-alpha.5 (May 12, 2019)
+
+- Addon-docs: Description block refactor and bugfixes
+
+## 5.2.0-alpha.4 (May 11, 2019)
+
+- Addon-docs: Source, Props, DocsPage doc blocks
+
+#### Breaking changes
+
+- Doc blocks & presets have moved. Update your MDX stories and `presets.js` file accordingly:
+  - `import { Preview, Story } from '@storybook/addon-docs/blocks';
+  - `module.exports = ['@storybook/addon-docs/common/preset'];`
+
 ## 5.1.0-beta.0 (May 10, 2019)
 
 Welcome to the 5.1 beta! Feature development's done; `beta.0` kicks off the stabilization process for the 5.1 final release. 🚀
@@ -204,6 +499,25 @@ Failed publish
 
 - CLI: Refactor how we install dev dependencies in cli ([#6695](https://github.com/storybookjs/storybook/pull/6695))
 
+## 5.2.0-alpha.3 (May 1, 2019)
+
+- Addon-docs: Add Story decorator and parameter support
+- Addon-docs: Remove need for extra project babelrc
+
+## 5.2.0-alpha.2 (April 30, 2019)
+
+- Addon-docs: Streamline setup, fix MDX dependencies, improve MDX import, and update guide
+
+## 5.2.0-alpha.0 (April 29, 2019)
+
+Storybook Docs technical preview:
+
+- Docs addon
+- MDX story format
+- Module story format
+- Load API
+- [Guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+
 ## 5.0.11 (April 28, 2019)
 
 ### Bug Fixes
diff --git a/MIGRATION.md b/MIGRATION.md
index e768f1ba27e..593bc601f8e 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,5 +1,7 @@
 # Migration
 
+- [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
+  - [Docs mode docgen](#docs-mode-docgen)
 - [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
   - [React native server](#react-native-server)
   - [Angular 7](#angular-7)
@@ -56,6 +58,15 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 5.1.x to 5.2.x
+
+### Docs mode docgen
+
+This isn't a breaking change per se, because `addon-docs` is a new feature. However it's intended to replace `addon-info`, so if you're migrating from `addon-info` there are a few things you should know:
+
+1. Support for only one prop table
+2. Prop table docgen info should be stored on the component and not in the global variable `STORYBOOK_REACT_CLASSES` as before.
+
 ## From version 5.0.x to 5.1.x
 
 ### React native server
diff --git a/addons/a11y/package.json b/addons/a11y/package.json
index 6462f86c1a8..b7e59233771 100644
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -26,12 +26,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "axe-core": "^3.2.2",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
diff --git a/addons/actions/package.json b/addons/actions/package.json
index b13d06ce7f8..eb73971c4b6 100644
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -21,12 +21,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
diff --git a/addons/backgrounds/package.json b/addons/backgrounds/package.json
index 273d598a0d1..b8ffa4dbaee 100644
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-backgrounds",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -25,12 +25,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "memoizerific": "^1.11.3",
     "react": "^16.8.3",
diff --git a/addons/centered/package.json b/addons/centered/package.json
index da975b3c42a..2201adb31f4 100644
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-centered",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook decorator to center components",
   "keywords": [
     "addon",
diff --git a/addons/contexts/package.json b/addons/contexts/package.json
index 440d6de19e6..674e665bbc5 100644
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-contexts",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook Addon Contexts",
   "keywords": [
     "storybook",
@@ -28,10 +28,10 @@
     "dev:check-types": "tsc --noEmit"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^3.0.1"
   },
   "peerDependencies": {
diff --git a/addons/cssresources/package.json b/addons/cssresources/package.json
index 2acdafdd173..3f427876f14 100644
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-cssresources",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A storybook addon to switch between css resources at runtime for your story",
   "keywords": [
     "addon",
@@ -25,10 +25,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3"
diff --git a/addons/design-assets/package.json b/addons/design-assets/package.json
index 659b71f4053..fe792527836 100644
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-design-assets",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Design asset preview for storybook",
   "keywords": [
     "addon",
@@ -11,13 +11,13 @@
     "files",
     "viewer"
   ],
-  "homepage": "https://github.com/storybooks/storybook#readme",
+  "homepage": "https://github.com/storybookjs/storybook#readme",
   "bugs": {
-    "url": "https://github.com/storybooks/storybook/issues"
+    "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/storybooks/storybook.git",
+    "url": "git+https://github.com/storybookjs/storybook.git",
     "directory": "addons/design-assets"
   },
   "license": "MIT",
@@ -27,14 +27,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
-    "core-js": "^2.6.5",
+    "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
     "use-image": "^1.0.3"
diff --git a/addons/docs/README.md b/addons/docs/README.md
index 5946e6cc71d..57252453dc0 100644
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@@ -1,3 +1,88 @@
 # Storybook Docs
 
 Living documentation for your components.
+
+- [Sneak peak article](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
+
+## View layer support
+
+Docs supports all view layers that Storybook supports except for React Native (currently). There are some view-layer specific
+features as well. This chart captures the current state of support
+
+|                | React | Vue | Angular | Polymer | Mithril | HTML | Marko | Svelte | Riot | Ember | Preact |
+| -------------- | :---: | :-: | :-----: | :-----: | :-----: | :--: | :---: | :----: | :--: | :---: | :----: |
+| MDX stories    |   +   |  +  |    +    |    +    |    +    |  +   |   +   |   +    |  +   |   +   |   +    |
+| Module stories |   +   |  +  |    +    |    +    |    +    |  +   |   +   |   +    |  +   |   +   |   +    |
+| Legacy stories |   +   |  +  |    +    |    +    |    +    |  +   |   +   |   +    |  +   |   +   |   +    |
+| Source \*      |   +   |  +  |    +    |    +    |    +    |  +   |   +   |   +    |  +   |   +   |   +    |
+| Notes / Info   |   +   |  +  |    +    |    +    |    +    |  +   |   +   |   +    |  +   |   +   |   +    |
+| Props table    |   +   |  #  |    #    |         |         |      |       |        |      |       |        |
+| Docgen         |   +   |  #  |    #    |         |         |      |       |        |      |       |        |
+| Inline stories |   +   |  #  |         |         |         |      |       |        |      |       |        |
+
+**Notes:**
+
+- `#` denotes planned/WIP support
+- \* Source supports legacy `JS storiesOf` and `MDX` stories. `Typescript` and new `module format` support is WIP
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs
+```
+
+The add the following line to your `.storybook/presets.js` file:
+
+```js
+module.exports = ['@storybook/addon-docs/react/preset'];
+```
+
+Finally, import your stories and MDX files in `.storybook/config.js`:
+
+```js
+import { load } from '@storybook/react';
+
+// standard configuration here
+// ...
+
+// wherever your story files are located
+load(require.context('../src', true, /\.stories\.js$/), module);
+load(require.context('../src', true, /\.stories\.mdx$/), module);
+```
+
+## Manual configuration
+
+Docs uses Storybook presets as a configuration shortcut. To configure "the long way", first register the addon in `.storybook/addons.js`:
+
+```js
+import '@storybook/addon-docs/register';
+```
+
+Then configure Storybook's webpack loader to understand MDX files in `.storybook/webpack.config.js`:
+
+```js
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
+
+module.exports = async ({ config }) => {
+  config.module.rules.push({
+    test: /\.mdx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        // may or may not need this line depending on your app's setup
+        plugins: ['@babel/plugin-transform-react-jsx'],
+      },
+      {
+        loader: '@mdx-js/loader',
+        options: {
+          compilers: [createCompiler({})],
+        },
+      },
+    ],
+  });
+  return config;
+};
+```
diff --git a/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
new file mode 100644
index 00000000000..34e98971afb
--- /dev/null
+++ b/addons/docs/__snapshots__/mdx-compiler-plugin.test.js.snap
@@ -0,0 +1,612 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`docs-mdx-compiler-plugin supports "smart" current story 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <h1>{\`Current story\`}</h1>
+      <Story id=\\".\\" mdxType=\\"Story\\" />
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = { includeStories: [] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports decorators 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta
+        title=\\"Button\\"
+        decorators={[
+          storyFn => (
+            <div
+              style={{
+                backgroundColor: 'yellow',
+              }}
+            >
+              {storyFn()}
+            </div>
+          ),
+        ]}
+        mdxType=\\"Meta\\"
+      />
+      <h1>{\`Decorated story\`}</h1>
+      <Story name=\\"one\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">One</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const one = () => <Button>One</Button>;
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+
+const componentMeta = {
+  title: 'Button',
+  decorators: [
+    storyFn => (
+      <div
+        style={{
+          backgroundColor: 'yellow',
+        }}
+      >
+        {storyFn()}
+      </div>
+    ),
+  ],
+  includeStories: ['one'],
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports non-story exports 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+export const two = 2;
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {
+  two,
+};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
+      <h1>{\`Story definition\`}</h1>
+      <Story name=\\"one\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">One</Button>
+      </Story>
+
+      <Story name=\\"hello story\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">Hello button</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const one = () => <Button>One</Button>;
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+
+export const helloStory = () => <Button>Hello button</Button>;
+helloStory.story = {};
+helloStory.story.name = 'hello story';
+helloStory.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+
+const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports object-style story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Welcome, Button } from '@storybook/angular/demo';
+import { linkTo } from '@storybook/addon-links';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"MDX|Welcome\\" mdxType=\\"Meta\\" />
+      <h1>{\`Story object\`}</h1>
+      <Story name=\\"to storybook\\" height=\\"300px\\" mdxType=\\"Story\\">
+        {{
+          template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
+          props: {
+            showApp: linkTo('Button'),
+          },
+          moduleMetadata: {
+            declarations: [Welcome],
+          },
+        }}
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const toStorybook = () => ({
+  template: \`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\`,
+  props: {
+    showApp: linkTo('Button'),
+  },
+  moduleMetadata: {
+    declarations: [Welcome],
+  },
+});
+toStorybook.story = {};
+toStorybook.story.name = 'to storybook';
+toStorybook.story.parameters = {
+  mdxSource: \`{
+  template: \\\\\`<storybook-welcome-component (showApp)=\\"showApp()\\"></storybook-welcome-component>\\\\\`,
+  props: {
+    showApp: linkTo('Button')
+  },
+  moduleMetadata: {
+    declarations: [Welcome]
+  }
+}\`,
+};
+
+const componentMeta = { title: 'MDX|Welcome', includeStories: ['toStorybook'] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports parameters 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta
+        title=\\"Button\\"
+        parameters={{
+          component: Button,
+          notes: 'component notes',
+        }}
+        mdxType=\\"Meta\\"
+      />
+      <Story name=\\"component notes\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">Component notes</Button>
+      </Story>
+      <Story
+        name=\\"story notes\\"
+        parameters={{
+          notes: 'story notes',
+        }}
+        mdxType=\\"Story\\"
+      >
+        <Button mdxType=\\"Button\\">Story notes</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const componentNotes = () => <Button>Component notes</Button>;
+componentNotes.story = {};
+componentNotes.story.name = 'component notes';
+componentNotes.story.parameters = { mdxSource: \`<Button>Component notes</Button>\` };
+
+export const storyNotes = () => <Button>Story notes</Button>;
+storyNotes.story = {};
+storyNotes.story.name = 'story notes';
+storyNotes.story.parameters = {
+  mdxSource: \`<Button>Story notes</Button>\`,
+  ...{
+    notes: 'story notes',
+  },
+};
+
+const componentMeta = {
+  title: 'Button',
+  parameters: {
+    component: Button,
+    notes: 'component notes',
+  },
+  includeStories: ['componentNotes', 'storyNotes'],
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports previews 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta
+        title=\\"Button\\"
+        parameters={{
+          component: Button,
+          notes: 'component notes',
+        }}
+        mdxType=\\"Meta\\"
+      />
+      <h1>{\`Preview\`}</h1>
+      <p>{\`Previews can contain normal components, stories, and story references\`}</p>
+      <Preview mdxType=\\"Preview\\">
+        <Button mdxType=\\"Button\\">Just a button</Button>
+        <Story name=\\"hello button\\" mdxType=\\"Story\\">
+          <Button mdxType=\\"Button\\">Hello button</Button>
+        </Story>
+        <Story name=\\"two\\" mdxType=\\"Story\\">
+          <Button mdxType=\\"Button\\">Two</Button>
+        </Story>
+        <Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
+      </Preview>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const helloButton = () => <Button>Hello button</Button>;
+helloButton.story = {};
+helloButton.story.name = 'hello button';
+helloButton.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+
+export const two = () => <Button>Two</Button>;
+two.story = {};
+two.story.parameters = { mdxSource: \`<Button>Two</Button>\` };
+
+const componentMeta = {
+  title: 'Button',
+  parameters: {
+    component: Button,
+    notes: 'component notes',
+  },
+  includeStories: ['helloButton', 'two'],
+};
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Button\\" mdxType=\\"Meta\\" />
+      <h1>{\`Story definition\`}</h1>
+      <Story name=\\"one\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">One</Button>
+      </Story>
+      <Story name=\\"hello story\\" mdxType=\\"Story\\">
+        <Button mdxType=\\"Button\\">Hello button</Button>
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const one = () => <Button>One</Button>;
+one.story = {};
+one.story.parameters = { mdxSource: \`<Button>One</Button>\` };
+
+export const helloStory = () => <Button>Hello button</Button>;
+helloStory.story = {};
+helloStory.story.name = 'hello story';
+helloStory.story.parameters = { mdxSource: \`<Button>Hello button</Button>\` };
+
+const componentMeta = { title: 'Button', includeStories: ['one', 'helloStory'] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports story references 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <h1>{\`Story reference\`}</h1>
+      <Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = { includeStories: [] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports text-only story definitions 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <Meta title=\\"Text\\" mdxType=\\"Meta\\" />
+      <h1>{\`Story definition\`}</h1>
+      <Story name=\\"text\\" mdxType=\\"Story\\">
+        Plain text
+      </Story>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+export const text = () => 'Plain text';
+text.story = {};
+text.story.parameters = { mdxSource: \`'Plain text'\` };
+
+const componentMeta = { title: 'Text', includeStories: ['text'] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
+
+exports[`docs-mdx-compiler-plugin supports vanilla mdx 1`] = `
+"/* @jsx mdx */
+import { DocsContainer } from '@storybook/addon-docs/blocks';
+
+import { Button } from '@storybook/react/demo';
+
+const makeShortcode = name =>
+  function MDXDefaultShortcode(props) {
+    console.warn(
+      'Component ' +
+        name +
+        ' was not imported, exported, or provided by MDXProvider as global scope'
+    );
+    return <div {...props} />;
+  };
+
+const layoutProps = {};
+const MDXLayout = 'wrapper';
+function MDXContent({ components, ...props }) {
+  return (
+    <MDXLayout {...layoutProps} {...props} components={components} mdxType=\\"MDXLayout\\">
+      <h1>{\`Hello MDX\`}</h1>
+      <p>{\`This is some random content.\`}</p>
+      <Button mdxType=\\"Button\\">Hello button</Button>
+    </MDXLayout>
+  );
+}
+
+MDXContent.isMDXComponent = true;
+
+const componentMeta = { includeStories: [] };
+
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => (
+  <DocsContainer context={{ ...context, mdxKind }} content={MDXContent} />
+);
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+
+export default componentMeta;
+"
+`;
diff --git a/addons/docs/blocks.js b/addons/docs/blocks.js
new file mode 100644
index 00000000000..6f65c051a90
--- /dev/null
+++ b/addons/docs/blocks.js
@@ -0,0 +1 @@
+module.exports = require('./dist/blocks');
diff --git a/addons/docs/common/index.js b/addons/docs/common/index.js
new file mode 100644
index 00000000000..ab2313695b6
--- /dev/null
+++ b/addons/docs/common/index.js
@@ -0,0 +1,2 @@
+// FIXME: move this to typescript and src/react folder
+module.exports = require('../dist/lib/getPropDefs');
diff --git a/addons/docs/common/preset.js b/addons/docs/common/preset.js
new file mode 100644
index 00000000000..3831a573b20
--- /dev/null
+++ b/addons/docs/common/preset.js
@@ -0,0 +1,66 @@
+const createCompiler = require('../mdx-compiler-plugin');
+
+function createBabelOptions({ babelOptions, configureJSX }) {
+  if (!configureJSX) {
+    return babelOptions;
+  }
+
+  return {
+    ...babelOptions,
+    // for frameworks that are not working with react, we need to configure
+    // the jsx to transpile mdx, for now there will be a flag for that
+    // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
+    plugins: [...babelOptions.plugins, '@babel/plugin-transform-react-jsx'],
+  };
+}
+
+function webpack(webpackConfig = {}, options = {}) {
+  const { module = {} } = webpackConfig;
+  // it will reuse babel options that are already in use in storybook
+  // also, these babel options are chained with other presets.
+  const { babelOptions, configureJSX } = options;
+
+  return {
+    ...webpackConfig,
+    module: {
+      ...module,
+      rules: [
+        ...(module.rules || []),
+        {
+          test: /\.(stories|story).mdx$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: createBabelOptions({ babelOptions, configureJSX }),
+            },
+            {
+              loader: '@mdx-js/loader',
+              options: {
+                compilers: [createCompiler(options)],
+              },
+            },
+          ],
+        },
+        {
+          test: /\.mdx$/,
+          exclude: /\.(stories|story).mdx$/,
+          use: [
+            {
+              loader: 'babel-loader',
+              options: createBabelOptions({ babelOptions, configureJSX }),
+            },
+            {
+              loader: '@mdx-js/loader',
+            },
+          ],
+        },
+      ],
+    },
+  };
+}
+
+function addons(entry = []) {
+  return [...entry, require.resolve('../register')];
+}
+
+module.exports = { webpack, addons };
diff --git a/addons/docs/fixtures/decorators.mdx b/addons/docs/fixtures/decorators.mdx
new file mode 100644
index 00000000000..2f4e84e6ded
--- /dev/null
+++ b/addons/docs/fixtures/decorators.mdx
@@ -0,0 +1,13 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta
+  title="Button"
+  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+/>
+
+# Decorated story
+
+<Story name="one">
+  <Button>One</Button>
+</Story>
diff --git a/addons/docs/fixtures/non-story-exports.mdx b/addons/docs/fixtures/non-story-exports.mdx
new file mode 100644
index 00000000000..833dd03c138
--- /dev/null
+++ b/addons/docs/fixtures/non-story-exports.mdx
@@ -0,0 +1,16 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" />
+
+# Story definition
+
+<Story name="one">
+  <Button>One</Button>
+</Story>
+
+export const two = 2;
+
+<Story name="hello story">
+  <Button>Hello button</Button>
+</Story>
diff --git a/addons/docs/fixtures/parameters.mdx b/addons/docs/fixtures/parameters.mdx
new file mode 100644
index 00000000000..0805466b38c
--- /dev/null
+++ b/addons/docs/fixtures/parameters.mdx
@@ -0,0 +1,12 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" parameters={{ component: Button, notes: 'component notes' }} />
+
+<Story name="component notes">
+  <Button>Component notes</Button>
+</Story>
+
+<Story name="story notes" parameters={{ notes: 'story notes' }}>
+  <Button>Story notes</Button>
+</Story>
diff --git a/addons/docs/fixtures/previews.mdx b/addons/docs/fixtures/previews.mdx
new file mode 100644
index 00000000000..80601eed2ed
--- /dev/null
+++ b/addons/docs/fixtures/previews.mdx
@@ -0,0 +1,19 @@
+import { Button } from '@storybook/react/demo';
+import { Preview, Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" parameters={{ component: Button, notes: 'component notes' }} />
+
+# Preview
+
+Previews can contain normal components, stories, and story references
+
+<Preview>
+  <Button>Just a button</Button>
+  <Story name="hello button">
+    <Button>Hello button</Button>
+  </Story>
+  <Story name="two">
+    <Button>Two</Button>
+  </Story>
+  <Story id="welcome--welcome" />
+</Preview>
diff --git a/addons/docs/fixtures/story-current.mdx b/addons/docs/fixtures/story-current.mdx
new file mode 100644
index 00000000000..d5b62cc6eda
--- /dev/null
+++ b/addons/docs/fixtures/story-current.mdx
@@ -0,0 +1,5 @@
+import { Story } from '@storybook/addon-docs/blocks';
+
+# Current story
+
+<Story id="." />
diff --git a/addons/docs/fixtures/story-def-text-only.mdx b/addons/docs/fixtures/story-def-text-only.mdx
new file mode 100644
index 00000000000..78ebd50215e
--- /dev/null
+++ b/addons/docs/fixtures/story-def-text-only.mdx
@@ -0,0 +1,7 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Text" />
+
+# Story definition
+
+<Story name="text">Plain text</Story>
diff --git a/addons/docs/fixtures/story-definitions.mdx b/addons/docs/fixtures/story-definitions.mdx
new file mode 100644
index 00000000000..ee5c355b989
--- /dev/null
+++ b/addons/docs/fixtures/story-definitions.mdx
@@ -0,0 +1,14 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" />
+
+# Story definition
+
+<Story name="one">
+  <Button>One</Button>
+</Story>
+
+<Story name="hello story">
+  <Button>Hello button</Button>
+</Story>
diff --git a/addons/docs/fixtures/story-missing-props.mdx b/addons/docs/fixtures/story-missing-props.mdx
new file mode 100644
index 00000000000..0eb3137a975
--- /dev/null
+++ b/addons/docs/fixtures/story-missing-props.mdx
@@ -0,0 +1,10 @@
+import { Button } from '@storybook/react/demo';
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+
+<Meta title="Button" />
+
+# Bad story
+
+<Story>
+  <Button>One</Button>
+</Story>
diff --git a/addons/docs/fixtures/story-object.mdx b/addons/docs/fixtures/story-object.mdx
new file mode 100644
index 00000000000..e63d4892384
--- /dev/null
+++ b/addons/docs/fixtures/story-object.mdx
@@ -0,0 +1,19 @@
+import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Welcome, Button } from '@storybook/angular/demo';
+import { linkTo } from '@storybook/addon-links';
+
+<Meta title="MDX|Welcome" />
+
+# Story object
+
+<Story name="to storybook" height="300px">
+  {{
+    template: `<storybook-welcome-component (showApp)="showApp()"></storybook-welcome-component>`,
+    props: {
+      showApp: linkTo('Button'),
+    },
+    moduleMetadata: {
+      declarations: [Welcome],
+    },
+  }}
+</Story>
diff --git a/addons/docs/fixtures/story-references.mdx b/addons/docs/fixtures/story-references.mdx
new file mode 100644
index 00000000000..865bd5dea49
--- /dev/null
+++ b/addons/docs/fixtures/story-references.mdx
@@ -0,0 +1,5 @@
+import { Story } from '@storybook/addon-docs/blocks';
+
+# Story reference
+
+<Story id="welcome--welcome" />
diff --git a/addons/docs/fixtures/vanilla.mdx b/addons/docs/fixtures/vanilla.mdx
new file mode 100644
index 00000000000..93ccac3d6bc
--- /dev/null
+++ b/addons/docs/fixtures/vanilla.mdx
@@ -0,0 +1,7 @@
+import { Button } from '@storybook/react/demo';
+
+# Hello MDX
+
+This is some random content.
+
+<Button>Hello button</Button>
diff --git a/addons/docs/mdx-compiler-plugin.js b/addons/docs/mdx-compiler-plugin.js
new file mode 100644
index 00000000000..c5586977381
--- /dev/null
+++ b/addons/docs/mdx-compiler-plugin.js
@@ -0,0 +1,222 @@
+const mdxToJsx = require('@mdx-js/mdx/mdx-hast-to-jsx');
+const parser = require('@babel/parser');
+const generate = require('@babel/generator').default;
+const camelCase = require('lodash/camelCase');
+
+// Generate the MDX as is, but append named exports for every
+// story in the contents
+
+const STORY_REGEX = /^<Story[\s>]/;
+const PREVIEW_REGEX = /^<Preview[\s>]/;
+const META_REGEX = /^<Meta[\s>]/;
+const RESERVED = /^(?:do|if|in|for|let|new|try|var|case|else|enum|eval|false|null|this|true|void|with|await|break|catch|class|const|super|throw|while|yield|delete|export|import|public|return|static|switch|typeof|default|extends|finally|package|private|continue|debugger|function|arguments|interface|protected|implements|instanceof)$/;
+
+function getAttr(elt, what) {
+  const attr = elt.attributes.find(n => n.name.name === what);
+  return attr && attr.value;
+}
+
+function getStoryFn(name, counter) {
+  if (name) {
+    const storyFn = camelCase(name.replace(/[^a-z0-9-]/g, '-'));
+    if (storyFn.length > 1 && !RESERVED.exec(storyFn)) {
+      return storyFn;
+    }
+  }
+  return `story${counter}`;
+}
+
+function genStoryExport(ast, counter) {
+  let storyName = getAttr(ast.openingElement, 'name');
+  let storyId = getAttr(ast.openingElement, 'id');
+  storyName = storyName && storyName.value;
+  storyId = storyId && storyId.value;
+
+  if (!storyId && !storyName) {
+    throw new Error('Expected a story name or ID attribute');
+  }
+
+  // We don't generate exports for story references or the smart "current story"
+  if (storyId || !storyName) {
+    return null;
+  }
+
+  // console.log('genStoryExport', JSON.stringify(ast, null, 2));
+
+  const statements = [];
+  const storyKey = getStoryFn(storyName, counter);
+
+  let body = ast.children.find(n => n.type !== 'JSXText');
+  let storyCode = null;
+  if (!body) {
+    // plain text node
+    const { code } = generate(ast.children[0], {});
+    storyCode = `'${code}'`;
+  } else {
+    if (body.type === 'JSXExpressionContainer') {
+      // FIXME: handle fragments
+      body = body.expression;
+    }
+    const { code } = generate(body, {});
+    storyCode = code;
+  }
+  statements.push(
+    `export const ${storyKey} = () => (
+      ${storyCode}
+    );`
+  );
+  statements.push(`${storyKey}.story = {};`);
+
+  if (storyName !== storyKey) {
+    statements.push(`${storyKey}.story.name = '${storyName}';`);
+  }
+
+  let parameters = getAttr(ast.openingElement, 'parameters');
+  parameters = parameters && parameters.expression;
+  const source = `\`${storyCode.replace(/`/g, '\\`')}\``;
+  if (parameters) {
+    const { code: params } = generate(parameters, {});
+    // FIXME: hack in the story's source as a parameter
+    statements.push(`${storyKey}.story.parameters = { mdxSource: ${source}, ...${params} };`);
+  } else {
+    statements.push(`${storyKey}.story.parameters = { mdxSource: ${source} };`);
+  }
+
+  // console.log(statements);
+
+  return {
+    [storyKey]: statements.join('\n'),
+  };
+}
+
+function genPreviewExports(ast, counter) {
+  // console.log('genPreviewExports', JSON.stringify(ast, null, 2));
+
+  let localCounter = counter;
+  const previewExports = {};
+  for (let i = 0; i < ast.children.length; i += 1) {
+    const child = ast.children[i];
+    if (child.type === 'JSXElement' && child.openingElement.name.name === 'Story') {
+      const storyExport = genStoryExport(child, localCounter);
+      if (storyExport) {
+        Object.assign(previewExports, storyExport);
+        localCounter += 1;
+      }
+    }
+  }
+  return previewExports;
+}
+
+function genMeta(ast) {
+  let title = getAttr(ast.openingElement, 'title');
+  let parameters = getAttr(ast.openingElement, 'parameters');
+  let decorators = getAttr(ast.openingElement, 'decorators');
+  title = title && `'${title.value}'`;
+  if (parameters && parameters.expression) {
+    const { code: params } = generate(parameters.expression, {});
+    parameters = params;
+  }
+  if (decorators && decorators.expression) {
+    const { code: decos } = generate(decorators.expression, {});
+    decorators = decos;
+  }
+  return {
+    title,
+    parameters,
+    decorators,
+  };
+}
+
+function getExports(node, counter) {
+  const { value, type } = node;
+  if (type === 'jsx') {
+    if (STORY_REGEX.exec(value)) {
+      // Single story
+      const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+      const storyExport = genStoryExport(ast, counter);
+      return storyExport && { stories: storyExport };
+    }
+    if (PREVIEW_REGEX.exec(value)) {
+      // Preview, possibly containing multiple stories
+      const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+      return { stories: genPreviewExports(ast, counter) };
+    }
+    if (META_REGEX.exec(value)) {
+      // Preview, possibly containing multiple stories
+      const ast = parser.parseExpression(value, { plugins: ['jsx'] });
+      return { meta: genMeta(ast) };
+    }
+  }
+  return null;
+}
+
+// insert `mdxKind` into the context so that we can know what "kind" we're rendering into
+// when we render <Story name="xxx">...</Story>, since this MDX can be attached to any `selectedKind`!
+const wrapperJs = `
+const mdxKind = componentMeta.title || componentMeta.displayName;
+const WrappedMDXContent = ({ context }) => <DocsContainer context={{...context, mdxKind}} content={MDXContent} />;
+componentMeta.parameters = componentMeta.parameters || {};
+componentMeta.parameters.docs = WrappedMDXContent;
+`.trim();
+
+function stringifyMeta(meta) {
+  let result = '{ ';
+  Object.entries(meta).forEach(([key, val]) => {
+    if (val) {
+      result += `${key}: ${val}, `;
+    }
+  });
+  result += ' }';
+  return result;
+}
+
+function extractExports(node, options) {
+  // we're overriding default export
+  const defaultJsx = mdxToJsx.toJSX(node, {}, { ...options, skipExport: true });
+  const storyExports = [];
+  const includeStories = [];
+  let metaExport = null;
+  let counter = 0;
+  node.children.forEach(n => {
+    const exports = getExports(n, counter);
+    if (exports) {
+      const { stories, meta } = exports;
+      if (stories) {
+        Object.entries(stories).forEach(([key, story]) => {
+          includeStories.push(key);
+          storyExports.push(story);
+          counter += 1;
+        });
+      }
+      if (meta) {
+        if (metaExport) {
+          throw new Error('Meta can only be declared once');
+        }
+        metaExport = meta;
+      }
+    }
+  });
+  if (!metaExport) {
+    metaExport = {};
+  }
+  metaExport.includeStories = JSON.stringify(includeStories);
+
+  const fullJsx = [
+    'import { DocsContainer } from "@storybook/addon-docs/blocks";',
+    defaultJsx,
+    ...storyExports,
+    `const componentMeta = ${stringifyMeta(metaExport)};`,
+    wrapperJs,
+    'export default componentMeta;',
+  ].join('\n\n');
+
+  return fullJsx;
+}
+
+function createCompiler(mdxOptions) {
+  return function compiler(options = {}) {
+    this.Compiler = tree => extractExports(tree, options, mdxOptions);
+  };
+}
+
+module.exports = createCompiler;
diff --git a/addons/docs/mdx-compiler-plugin.test.js b/addons/docs/mdx-compiler-plugin.test.js
new file mode 100644
index 00000000000..75e8cc03dba
--- /dev/null
+++ b/addons/docs/mdx-compiler-plugin.test.js
@@ -0,0 +1,75 @@
+const path = require('path');
+const fs = require('fs-extra');
+const mdx = require('@mdx-js/mdx');
+const prettier = require('prettier');
+const plugin = require('./mdx-compiler-plugin');
+
+function format(code) {
+  return prettier.format(code, {
+    parser: 'babel',
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  });
+}
+
+async function generate(filePath) {
+  const content = await fs.readFile(filePath, 'utf8');
+
+  const result = mdx.sync(content, {
+    filepath: filePath,
+    compilers: [plugin({})],
+  });
+
+  return format(result);
+}
+
+describe('docs-mdx-compiler-plugin', () => {
+  it('supports vanilla mdx', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/vanilla.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports story definitions', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/story-definitions.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports text-only story definitions', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/story-def-text-only.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports object-style story definitions', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/story-object.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports story references', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/story-references.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports "smart" current story', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/story-current.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports previews', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/previews.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports decorators', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/decorators.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports parameters', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/parameters.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('supports non-story exports', async () => {
+    const code = await generate(path.resolve(__dirname, './fixtures/non-story-exports.mdx'));
+    expect(code).toMatchSnapshot();
+  });
+  it('errors on missing story props', async () => {
+    await expect(
+      generate(path.resolve(__dirname, './fixtures/story-missing-props.mdx'))
+    ).rejects.toThrow('Expected a story name or ID attribute');
+  });
+});
diff --git a/addons/docs/package.json b/addons/docs/package.json
index 9ad9a19606b..0632f85aa66 100644
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-docs",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Superior documentation for your components",
   "keywords": [
     "addon",
@@ -23,10 +23,23 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23"
+    "@babel/generator": "^7.4.0",
+    "@babel/parser": "^7.4.2",
+    "@mdx-js/loader": "^1.0.0",
+    "@mdx-js/mdx": "^1.0.0",
+    "@mdx-js/react": "^1.0.16",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {
+    "@types/prop-types": "^15.5.9",
     "@types/util-deprecate": "^1.0.0",
     "@types/webpack-env": "^1.13.7"
   },
diff --git a/addons/docs/react/index.js b/addons/docs/react/index.js
new file mode 100644
index 00000000000..38c1756201b
--- /dev/null
+++ b/addons/docs/react/index.js
@@ -0,0 +1 @@
+module.exports = require('../common/index');
diff --git a/addons/docs/react/preset.js b/addons/docs/react/preset.js
new file mode 100644
index 00000000000..a9b8af2cce0
--- /dev/null
+++ b/addons/docs/react/preset.js
@@ -0,0 +1 @@
+module.exports = require('../common/preset');
diff --git a/addons/docs/src/blocks/Description.tsx b/addons/docs/src/blocks/Description.tsx
new file mode 100644
index 00000000000..e12a1ea5f9f
--- /dev/null
+++ b/addons/docs/src/blocks/Description.tsx
@@ -0,0 +1,68 @@
+/* eslint-disable no-underscore-dangle */
+import React from 'react';
+import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { Component, CURRENT_SELECTION } from './shared';
+
+export enum DescriptionType {
+  INFO = 'info',
+  NOTES = 'notes',
+  DOCGEN = 'docgen',
+  AUTO = 'auto',
+}
+
+type Notes = string | any;
+type Info = string | any;
+
+interface DescriptionProps {
+  of?: '.' | Component;
+  type?: DescriptionType;
+  markdown?: string;
+}
+
+const getNotes = (notes?: Notes) =>
+  notes && (typeof notes === 'string' ? notes : notes.markdown || notes.text);
+
+const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : info.text);
+
+const getDocgen = (component?: Component) =>
+  (component && component.__docgenInfo && component.__docgenInfo.description) || '';
+
+export const getDescriptionProps = (
+  { of, type, markdown }: DescriptionProps,
+  { parameters }: DocsContextProps
+): PureDescriptionProps => {
+  if (markdown) {
+    return { markdown };
+  }
+  const { component, notes, info } = parameters;
+  const target = of === CURRENT_SELECTION ? component : of;
+  switch (type) {
+    case DescriptionType.INFO:
+      return { markdown: getInfo(info) };
+    case DescriptionType.NOTES:
+      return { markdown: getNotes(notes) };
+    case DescriptionType.DOCGEN:
+      return { markdown: getDocgen(target) };
+    case DescriptionType.AUTO:
+    default:
+      return {
+        markdown: `
+${getNotes(notes) || getInfo(info) || ''}
+
+${getDocgen(target)}
+`.trim(),
+      };
+  }
+};
+
+const DescriptionContainer: React.FunctionComponent<DescriptionProps> = props => (
+  <DocsContext.Consumer>
+    {context => {
+      const { markdown } = getDescriptionProps(props, context);
+      return markdown && <Description markdown={markdown} />;
+    }}
+  </DocsContext.Consumer>
+);
+
+export { DescriptionContainer as Description };
diff --git a/addons/docs/src/blocks/DocsContainer.tsx b/addons/docs/src/blocks/DocsContainer.tsx
new file mode 100644
index 00000000000..1e829cbbfbd
--- /dev/null
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@@ -0,0 +1,52 @@
+/* eslint-disable react/destructuring-assignment */
+
+import React from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { Global, createGlobal, ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
+import { DocumentFormatting, DocsWrapper, DocsContent } from '@storybook/components';
+import { DocsContextProps, DocsContext } from './DocsContext';
+
+interface DocsContainerProps {
+  context: DocsContextProps;
+  content: React.ElementType<any>;
+}
+
+const defaultComponents = {
+  // p: ({ children }) => <b>{children}</b>,
+  wrapper: DocumentFormatting,
+};
+
+const globalWithOverflow = (args: any) => {
+  const global = createGlobal(args);
+  const { body, ...rest } = global;
+  const { overflow, ...bodyRest } = body;
+  return {
+    body: bodyRest,
+    ...rest,
+  };
+};
+
+export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
+  context,
+  content: MDXContent,
+}) => {
+  const parameters = (context && context.parameters) || {};
+  const options = parameters.options || {};
+  const theme = ensureTheme(options.theme);
+  const { components: userComponents = null } = options.docs || {};
+  const components = { ...defaultComponents, ...userComponents };
+  return (
+    <DocsContext.Provider value={context}>
+      <ThemeProvider theme={theme}>
+        <Global styles={globalWithOverflow} />
+        <MDXProvider components={components}>
+          <DocsWrapper>
+            <DocsContent>
+              <MDXContent components={components} />
+            </DocsContent>
+          </DocsWrapper>
+        </MDXProvider>
+      </ThemeProvider>
+    </DocsContext.Provider>
+  );
+};
diff --git a/addons/docs/src/blocks/DocsContext.ts b/addons/docs/src/blocks/DocsContext.ts
new file mode 100644
index 00000000000..26efed04813
--- /dev/null
+++ b/addons/docs/src/blocks/DocsContext.ts
@@ -0,0 +1,23 @@
+import React from 'react';
+
+export interface DocsContextProps {
+  id?: string;
+  selectedKind?: string;
+  selectedStory?: string;
+
+  /**
+   * mdxKind is a statically-generated "kind" that corresponds to the
+   * component that's being documented in the MDX file, It's combined
+   * with the MDX story name `<Story name='story name'>...</Story>` to
+   * generate a storyId. In the case that the user is viewing a non-MDX
+   * story, the value of `mdxKind` will be the currently-selected kind.
+   * (I can't remember the corner case in which using the currentl-selected
+   * kind breaks down in MDX-defined stories, but there is one!)
+   */
+  mdxKind?: string;
+  parameters?: any;
+  storyStore?: any;
+  forceRender?: () => void;
+}
+
+export const DocsContext: React.Context<DocsContextProps> = React.createContext({});
diff --git a/addons/docs/src/blocks/DocsPage.tsx b/addons/docs/src/blocks/DocsPage.tsx
new file mode 100644
index 00000000000..8d3c3944784
--- /dev/null
+++ b/addons/docs/src/blocks/DocsPage.tsx
@@ -0,0 +1,140 @@
+import React from 'react';
+
+import { parseKind } from '@storybook/router';
+import { styled } from '@storybook/theming';
+import { DocsPage as PureDocsPage, DocsPageProps } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { DocsContainer } from './DocsContainer';
+import { Description } from './Description';
+import { Story } from './Story';
+import { Preview } from './Preview';
+import { Props } from './Props';
+
+enum DocsStoriesType {
+  ALL = 'all',
+  PRIMARY = 'primary',
+  REST = 'rest',
+}
+
+interface DocsStoriesProps {
+  type?: DocsStoriesType;
+}
+
+interface DocsStoryProps {
+  id: string;
+  name: string;
+  description?: string;
+  expanded?: boolean;
+}
+
+interface StoryData {
+  id: string;
+  kind: string;
+  name: string;
+  parameters?: any;
+}
+
+const getDocsStories = (type: DocsStoriesType, componentStories: StoryData[]): DocsStoryProps[] => {
+  let stories = componentStories;
+  if (type !== DocsStoriesType.ALL) {
+    const primary = stories.find(s => s.parameters && s.parameters.primary);
+    const [first, ...rest] = stories;
+    if (type === DocsStoriesType.PRIMARY) {
+      stories = [primary || first];
+    } else {
+      stories = primary ? stories.filter(s => !s.parameters || !s.parameters.primary) : rest;
+    }
+  }
+  return stories.map(({ id, name, parameters: { notes, info } }) => ({
+    id,
+    name,
+    description: notes || info || null,
+  }));
+};
+
+const StoriesHeading = styled.h2();
+const StoryHeading = styled.h3();
+
+const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
+  id,
+  name,
+  description,
+  expanded = true,
+}) => (
+  <>
+    {expanded && <StoryHeading>{name}</StoryHeading>}
+    {expanded && description && <Description markdown={description} />}
+    <Preview>
+      <Story id={id} />
+    </Preview>
+  </>
+);
+
+const DocsStories: React.FunctionComponent<DocsStoriesProps> = ({ type = DocsStoriesType.ALL }) => (
+  <DocsContext.Consumer>
+    {({ selectedKind, storyStore }) => {
+      const componentStories = (storyStore.raw() as StoryData[]).filter(
+        s => s.kind === selectedKind
+      );
+      const stories = getDocsStories(type, componentStories);
+      if (stories.length === 0) {
+        return null;
+      }
+      const expanded = type !== DocsStoriesType.PRIMARY;
+      return (
+        <>
+          {expanded && <StoriesHeading>Stories</StoriesHeading>}
+          {stories.map(s => (
+            <DocsStory key={s.id} expanded={expanded} {...s} />
+          ))}
+        </>
+      );
+    }}
+  </DocsContext.Consumer>
+);
+
+const getDocsPageProps = (context: DocsContextProps): DocsPageProps => {
+  const { selectedKind, selectedStory, parameters } = context;
+  const {
+    hierarchyRootSeparator: rootSeparator,
+    hierarchySeparator: groupSeparator,
+  } = (parameters && parameters.options) || {
+    hierarchyRootSeparator: '|',
+    hierarchySeparator: '/',
+  };
+
+  const { groups } = parseKind(selectedKind, { rootSeparator, groupSeparator });
+  const title = (groups && groups[groups.length - 1]) || selectedKind;
+
+  return {
+    title,
+    subtitle: parameters && parameters.componentDescription,
+  };
+};
+
+const DocsPage: React.FunctionComponent = () => (
+  <DocsContext.Consumer>
+    {context => {
+      const docsPageProps = getDocsPageProps(context);
+      return (
+        <PureDocsPage {...docsPageProps}>
+          <Description of="." />
+          <DocsStories type={DocsStoriesType.PRIMARY} />
+          <Props of="." />
+          <DocsStories type={DocsStoriesType.REST} />
+        </PureDocsPage>
+      );
+    }}
+  </DocsContext.Consumer>
+);
+
+interface DocsPageWrapperProps {
+  context: DocsContextProps;
+}
+
+const DocsPageWrapper: React.FunctionComponent<DocsPageWrapperProps> = ({ context }) => (
+  /* eslint-disable react/destructuring-assignment */
+  <DocsContainer context={{ ...context, mdxKind: context.selectedKind }} content={DocsPage} />
+);
+
+export { DocsPageWrapper as DocsPage };
diff --git a/addons/docs/src/blocks/Meta.tsx b/addons/docs/src/blocks/Meta.tsx
new file mode 100644
index 00000000000..5308f9f0ea9
--- /dev/null
+++ b/addons/docs/src/blocks/Meta.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+
+type Decorator = (...args: any) => any;
+
+interface MetaProps {
+  title: string;
+  decorators?: [Decorator];
+  parameters?: any;
+}
+
+/**
+ * This component is used to declare component metadata in docs
+ * and gets transformed into a default export underneath the hood.
+ * It doesn't actually render anything.
+ */
+export const Meta: React.FunctionComponent<MetaProps> = props => null;
diff --git a/addons/docs/src/blocks/Preview.tsx b/addons/docs/src/blocks/Preview.tsx
new file mode 100644
index 00000000000..bc18d47405c
--- /dev/null
+++ b/addons/docs/src/blocks/Preview.tsx
@@ -0,0 +1,48 @@
+import React, { ReactNodeArray } from 'react';
+import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
+import { toId } from '@storybook/router';
+import { getSourceProps } from './Source';
+import { DocsContext, DocsContextProps } from './DocsContext';
+
+export enum SourceState {
+  OPEN = 'open',
+  CLOSED = 'closed',
+  NONE = 'none',
+}
+
+type PreviewProps = PurePreviewProps & {
+  withSource?: SourceState;
+};
+
+const getPreviewProps = (
+  {
+    withSource = SourceState.CLOSED,
+    children,
+    ...props
+  }: PreviewProps & { children?: React.ReactNode },
+  { mdxKind, storyStore }: DocsContextProps
+): PurePreviewProps => {
+  if (withSource === SourceState.NONE && !children) {
+    return props;
+  }
+  const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
+  const stories = childArray.filter(
+    (c: React.ReactElement) => c.props && (c.props.id || c.props.name)
+  ) as React.ReactElement[];
+  const targetIds = stories.map(s => s.props.id || toId(mdxKind, s.props.name));
+  const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
+  return {
+    ...props, // pass through columns etc.
+    withSource: sourceProps,
+    isExpanded: withSource === SourceState.OPEN,
+  };
+};
+
+export const Preview: React.FunctionComponent<PreviewProps> = props => (
+  <DocsContext.Consumer>
+    {context => {
+      const previewProps = getPreviewProps(props, context);
+      return <PurePreview {...previewProps}>{props.children}</PurePreview>;
+    }}
+  </DocsContext.Consumer>
+);
diff --git a/addons/docs/src/blocks/Props.tsx b/addons/docs/src/blocks/Props.tsx
new file mode 100644
index 00000000000..53b396cdbc1
--- /dev/null
+++ b/addons/docs/src/blocks/Props.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { Component, CURRENT_SELECTION } from './shared';
+import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
+
+interface PropsProps {
+  exclude?: string[];
+  of: '.' | Component;
+}
+
+const inferPropDefs = (framework: string): PropDefGetter | null => {
+  switch (framework) {
+    case 'react':
+    case 'vue':
+      return autoPropDefs;
+    default:
+      return null;
+  }
+};
+
+export const getPropsTableProps = (
+  { exclude, of }: PropsProps,
+  { parameters }: DocsContextProps
+): PropsTableProps => {
+  const { component } = parameters;
+  try {
+    const target = of === CURRENT_SELECTION ? component : of;
+    if (!target) {
+      throw new Error(PropsTableError.NO_COMPONENT);
+    }
+
+    const { framework = null } = parameters || {};
+    const { getPropDefs = inferPropDefs(framework) } =
+      (parameters && parameters.options && parameters.options.docs) || {};
+
+    if (!getPropDefs) {
+      throw new Error(PropsTableError.PROPS_UNSUPPORTED);
+    }
+    const allRows = getPropDefs(target);
+    const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name));
+    return { rows };
+  } catch (err) {
+    return { error: err.message };
+  }
+};
+
+const PropsContainer: React.FunctionComponent<PropsProps> = props => (
+  <DocsContext.Consumer>
+    {context => {
+      const propsTableProps = getPropsTableProps(props, context);
+      return <PropsTable {...propsTableProps} />;
+    }}
+  </DocsContext.Consumer>
+);
+
+export { PropsContainer as Props };
diff --git a/addons/docs/src/blocks/Source.tsx b/addons/docs/src/blocks/Source.tsx
new file mode 100644
index 00000000000..8ba904787f7
--- /dev/null
+++ b/addons/docs/src/blocks/Source.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
+import { DocsContext, DocsContextProps } from './DocsContext';
+import { CURRENT_SELECTION } from './shared';
+
+interface CommonProps {
+  language?: string;
+}
+
+type SingleSourceProps = {
+  id: string;
+} & CommonProps;
+
+type MultiSourceProps = {
+  ids: string[];
+} & CommonProps;
+
+type CodeProps = {
+  code: string;
+} & CommonProps;
+
+type NoneProps = CommonProps;
+
+type SourceProps = SingleSourceProps | MultiSourceProps | CodeProps | NoneProps;
+
+interface Location {
+  line: number;
+  col: number;
+}
+
+interface StorySource {
+  source: string;
+  locationsMap: { [id: string]: { startBody: Location; endBody: Location } };
+}
+
+const extract = (targetId: string, { source, locationsMap }: StorySource) => {
+  const location = locationsMap[targetId];
+  // FIXME: bad locationsMap generated for module export functions whose titles are overridden
+  if (!location) return null;
+  const { startBody: start, endBody: end } = location;
+  const lines = source.split('\n');
+  if (start.line === end.line) {
+    return lines[start.line - 1].substring(start.col, end.col);
+  }
+  // NOTE: storysource locations are 1-based not 0-based!
+  const startLine = lines[start.line - 1];
+  const endLine = lines[end.line - 1];
+  return [
+    startLine.substring(start.col),
+    ...lines.slice(start.line, end.line - 1),
+    endLine.substring(0, end.col),
+  ].join('\n');
+};
+
+export const getSourceProps = (
+  props: SourceProps,
+  { id: currentId, storyStore }: DocsContextProps
+): PureSourceProps => {
+  const codeProps = props as CodeProps;
+  const singleProps = props as SingleSourceProps;
+  const multiProps = props as MultiSourceProps;
+
+  let source = codeProps.code; // prefer user-specified code
+  if (!source) {
+    const targetId = singleProps.id === CURRENT_SELECTION ? currentId : singleProps.id;
+    const targetIds = multiProps.ids || [targetId];
+    source = targetIds
+      .map(sourceId => {
+        const data = storyStore.fromId(sourceId);
+        if (data && data.parameters) {
+          const { mdxSource, storySource } = data.parameters;
+          return mdxSource || (storySource && extract(sourceId, storySource));
+        }
+        return '';
+      })
+      .join('\n\n');
+  }
+  return source
+    ? { code: source, language: props.language || 'jsx' }
+    : { error: SourceError.SOURCE_UNAVAILABLE };
+};
+
+/**
+ * Story source doc block renders source code if provided,
+ * or the source for a story if `storyId` is provided, or
+ * the source for the current story if nothing is provided.
+ */
+const SourceContainer: React.FunctionComponent<SourceProps> = props => (
+  <DocsContext.Consumer>
+    {context => {
+      const sourceProps = getSourceProps(props, context);
+      return <Source {...sourceProps} />;
+    }}
+  </DocsContext.Consumer>
+);
+
+export { SourceContainer as Source };
diff --git a/addons/docs/src/blocks/Story.tsx b/addons/docs/src/blocks/Story.tsx
new file mode 100644
index 00000000000..7fde8e353b3
--- /dev/null
+++ b/addons/docs/src/blocks/Story.tsx
@@ -0,0 +1,69 @@
+import React from 'react';
+import { toId } from '@storybook/router';
+import { Story, StoryProps as PureStoryProps } from '@storybook/components';
+import { CURRENT_SELECTION } from './shared';
+
+import { DocsContext, DocsContextProps } from './DocsContext';
+
+interface CommonProps {
+  height?: string;
+}
+
+type StoryDefProps = {
+  name: string;
+  children: React.ReactNode;
+} & CommonProps;
+
+type StoryRefProps = {
+  id?: string;
+} & CommonProps;
+
+export type StoryProps = StoryDefProps | StoryRefProps;
+
+const inferInlineStories = (framework: string): boolean => {
+  switch (framework) {
+    case 'react':
+      return true;
+    default:
+      return false;
+  }
+};
+
+export const getStoryProps = (
+  props: StoryProps,
+  { id: currentId, storyStore, parameters, mdxKind }: DocsContextProps
+): PureStoryProps => {
+  const { id } = props as StoryRefProps;
+  const { name } = props as StoryDefProps;
+  const inputId = id === CURRENT_SELECTION ? currentId : id;
+  const previewId = inputId || toId(mdxKind, name);
+
+  const { height } = props;
+  const data = storyStore.fromId(previewId);
+  const { framework = null } = parameters || {};
+  const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
+    (parameters && parameters.options && parameters.options.docs) || {};
+  return {
+    inline: inlineStories,
+    id: previewId,
+    storyFn: data && data.getDecorated(),
+    height: height || iframeHeight,
+    title: data && data.name,
+  };
+};
+
+const StoryContainer: React.FunctionComponent<StoryProps> = props => (
+  <DocsContext.Consumer>
+    {context => {
+      const storyProps = getStoryProps(props, context);
+      return <Story {...storyProps} />;
+    }}
+  </DocsContext.Consumer>
+);
+
+StoryContainer.defaultProps = {
+  children: null,
+  name: null,
+};
+
+export { StoryContainer as Story };
diff --git a/addons/docs/src/blocks/Wrapper.tsx b/addons/docs/src/blocks/Wrapper.tsx
new file mode 100644
index 00000000000..a73402f89a5
--- /dev/null
+++ b/addons/docs/src/blocks/Wrapper.tsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+interface WrapperProps {
+  children: React.ReactNode;
+}
+
+export const Wrapper: React.FunctionComponent<WrapperProps> = ({ children }) => (
+  <div style={{ fontFamily: 'sans-serif' }}>{children}</div>
+);
diff --git a/addons/docs/src/blocks/index.ts b/addons/docs/src/blocks/index.ts
new file mode 100644
index 00000000000..221fe9e567f
--- /dev/null
+++ b/addons/docs/src/blocks/index.ts
@@ -0,0 +1,12 @@
+export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
+
+export * from './Description';
+export * from './DocsContext';
+export * from './DocsPage';
+export * from './DocsContainer';
+export * from './Meta';
+export * from './Preview';
+export * from './Props';
+export * from './Source';
+export * from './Story';
+export * from './Wrapper';
diff --git a/addons/docs/src/blocks/shared.ts b/addons/docs/src/blocks/shared.ts
new file mode 100644
index 00000000000..61d2a7f93f5
--- /dev/null
+++ b/addons/docs/src/blocks/shared.ts
@@ -0,0 +1,2 @@
+export const CURRENT_SELECTION = '.';
+export type Component = any;
diff --git a/addons/docs/src/lib/getPropDefs.ts b/addons/docs/src/lib/getPropDefs.ts
new file mode 100644
index 00000000000..2837e205847
--- /dev/null
+++ b/addons/docs/src/lib/getPropDefs.ts
@@ -0,0 +1,88 @@
+/* eslint-disable no-underscore-dangle */
+
+import PropTypes from 'prop-types';
+import { PropDef } from '@storybook/components';
+import { Component } from '../blocks/shared';
+
+interface PropDefMap {
+  [p: string]: PropDef;
+}
+
+export type PropDefGetter = (type: Component) => PropDef[] | null;
+
+const propTypesMap = new Map();
+
+Object.keys(PropTypes).forEach(typeName => {
+  // @ts-ignore
+  const type = PropTypes[typeName];
+
+  propTypesMap.set(type, typeName);
+  propTypesMap.set(type.isRequired, typeName);
+});
+
+const hasDocgen = (obj: any) => obj && obj.props && Object.keys(obj.props).length > 0;
+
+const propsFromDocgen: PropDefGetter = type => {
+  const props: PropDefMap = {};
+  const docgenInfoProps = type.__docgenInfo.props;
+
+  Object.keys(docgenInfoProps).forEach(property => {
+    const docgenInfoProp = docgenInfoProps[property];
+    const defaultValueDesc = docgenInfoProp.defaultValue || {};
+    const propType = docgenInfoProp.flowType || docgenInfoProp.type || 'other';
+
+    props[property] = {
+      name: property,
+      type: propType,
+      required: docgenInfoProp.required,
+      description: docgenInfoProp.description,
+      defaultValue: defaultValueDesc.value,
+    };
+  });
+
+  return Object.values(props);
+};
+
+const propsFromPropTypes: PropDefGetter = type => {
+  const props: PropDefMap = {};
+
+  if (type.propTypes) {
+    Object.keys(type.propTypes).forEach(property => {
+      const typeInfo = type.propTypes[property];
+      const required = typeInfo.isRequired === undefined;
+      const docgenInfo =
+        type.__docgenInfo && type.__docgenInfo.props && type.__docgenInfo.props[property];
+      const description = docgenInfo ? docgenInfo.description : null;
+      let propType = propTypesMap.get(typeInfo) || 'other';
+
+      if (propType === 'other') {
+        if (docgenInfo && docgenInfo.type) {
+          propType = docgenInfo.type.name;
+        }
+      }
+
+      props[property] = { name: property, type: propType, required, description };
+    });
+  }
+
+  if (type.defaultProps) {
+    Object.keys(type.defaultProps).forEach(property => {
+      const value = type.defaultProps[property];
+
+      if (value === undefined) {
+        return;
+      }
+
+      if (!props[property]) {
+        props[property] = { name: property, type: 'any', required: false };
+      }
+
+      props[property].defaultValue = value;
+    });
+  }
+
+  return Object.values(props);
+};
+
+export const getPropDefs: PropDefGetter = type =>
+  hasDocgen(type.__docgenInfo) ? propsFromDocgen(type) : propsFromPropTypes(type);
diff --git a/addons/docs/src/typings.d.ts b/addons/docs/src/typings.d.ts
new file mode 100644
index 00000000000..005ee92d6b8
--- /dev/null
+++ b/addons/docs/src/typings.d.ts
@@ -0,0 +1 @@
+declare module '@mdx-js/react';
diff --git a/addons/docs/vue/index.js b/addons/docs/vue/index.js
new file mode 100644
index 00000000000..38c1756201b
--- /dev/null
+++ b/addons/docs/vue/index.js
@@ -0,0 +1 @@
+module.exports = require('../common/index');
diff --git a/addons/docs/vue/preset.js b/addons/docs/vue/preset.js
new file mode 100644
index 00000000000..a9b8af2cce0
--- /dev/null
+++ b/addons/docs/vue/preset.js
@@ -0,0 +1 @@
+module.exports = require('../common/preset');
diff --git a/addons/events/package.json b/addons/events/package.json
index a9271dfd4e0..b4471567165 100644
--- a/addons/events/package.json
+++ b/addons/events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-events",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Add events to your Storybook stories.",
   "keywords": [
     "addon",
@@ -24,10 +24,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "format-json": "^1.0.3",
     "lodash": "^4.17.11",
diff --git a/addons/google-analytics/package.json b/addons/google-analytics/package.json
index 8597020c20f..c518e6aa12a 100644
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-google-analytics",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook addon for google analytics",
   "keywords": [
     "addon",
@@ -20,8 +20,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react-ga": "^2.5.7"
diff --git a/addons/graphql/package.json b/addons/graphql/package.json
index e4a38145ee8..dcb2025a110 100644
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-graphql",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook addon to display the GraphiQL IDE",
   "keywords": [
     "addon",
@@ -22,8 +22,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "graphiql": "^0.13.0",
diff --git a/addons/info/package.json b/addons/info/package.json
index 65ddf062ed6..5ef51e2c016 100644
--- a/addons/info/package.json
+++ b/addons/info/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-info",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A Storybook addon to show additional information for your stories.",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "jsx-to-string": "^1.4.0",
diff --git a/addons/info/src/__snapshots__/index.test.js.snap b/addons/info/src/__snapshots__/index.test.js.snap
index 64aa1bba1d5..c590f5aab76 100644
--- a/addons/info/src/__snapshots__/index.test.js.snap
+++ b/addons/info/src/__snapshots__/index.test.js.snap
@@ -1331,7 +1331,7 @@ exports[`addon Info should render component description if story kind matches co
               bordered={true}
               className={null}
               copyable={true}
-              format={true}
+              format={false}
               language="js"
               padded={false}
             >
@@ -5888,7 +5888,7 @@ exports[`addon Info should render component description if story name matches co
               bordered={true}
               className={null}
               copyable={true}
-              format={true}
+              format={false}
               language="js"
               padded={false}
             >
diff --git a/addons/info/src/components/markdown/code.js b/addons/info/src/components/markdown/code.js
index 3bd41509241..4e6b24ba7de 100644
--- a/addons/info/src/components/markdown/code.js
+++ b/addons/info/src/components/markdown/code.js
@@ -5,7 +5,7 @@ import { ThemeProvider, convert } from '@storybook/theming';
 
 const Code = ({ code, language = 'plaintext', ...rest }) => (
   <ThemeProvider theme={convert()}>
-    <SyntaxHighlighter bordered copyable language={language} {...rest}>
+    <SyntaxHighlighter bordered copyable format={false} language={language} {...rest}>
       {code}
     </SyntaxHighlighter>
   </ThemeProvider>
diff --git a/addons/jest/package.json b/addons/jest/package.json
index 3997f1a073d..716f00a4178 100644
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-jest",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "React storybook addon that show component jest report",
   "keywords": [
     "addon",
@@ -28,11 +28,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3",
diff --git a/addons/knobs/package.json b/addons/knobs/package.json
index 0d282c2187d..0e6af13ee87 100644
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-knobs",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook Addon Prop Editor Component",
   "keywords": [
     "addon",
@@ -22,11 +22,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "escape-html": "^1.0.3",
diff --git a/addons/links/package.json b/addons/links/package.json
index 520f10cb7fa..eba9df26ebe 100644
--- a/addons/links/package.json
+++ b/addons/links/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-links",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Story Links addon for storybook",
   "keywords": [
     "addon",
@@ -22,9 +22,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/addons/notes/package.json b/addons/notes/package.json
index acf67698144..240c4c7218c 100644
--- a/addons/notes/package.json
+++ b/addons/notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-notes",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Write notes for your Storybook stories.",
   "keywords": [
     "addon",
@@ -23,13 +23,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.3",
diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
index da8f76df14c..5daaaa7ba2f 100644
--- a/addons/notes/src/Panel.tsx
+++ b/addons/notes/src/Panel.tsx
@@ -68,7 +68,13 @@ export const SyntaxHighlighter = ({ className, children, ...props }: SyntaxHighl
   // className: "lang-jsx"
   const language = className.split('-');
   return (
-    <SyntaxHighlighterBase language={language[1] || 'plaintext'} bordered copyable {...props}>
+    <SyntaxHighlighterBase
+      language={language[1] || 'plaintext'}
+      bordered
+      format={false}
+      copyable
+      {...props}
+    >
       {children}
     </SyntaxHighlighterBase>
   );
diff --git a/addons/ondevice-actions/package.json b/addons/ondevice-actions/package.json
index e1c5743b866..32725d450df 100644
--- a/addons/ondevice-actions/package.json
+++ b/addons/ondevice-actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-actions",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Action Logger addon for react-native storybook",
   "keywords": [
     "storybook"
@@ -19,13 +19,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^2.5.7",
     "fast-deep-equal": "^2.0.1"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.23"
+    "@storybook/addon-actions": "5.2.0-alpha.32"
   },
   "peerDependencies": {
     "@storybook/addon-actions": "*",
diff --git a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
index bcf4f1fcac2..fb7ffbe513d 100644
--- a/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
+++ b/addons/ondevice-actions/src/components/ActionLogger/Inspect.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable no-nested-ternary */
 import React from 'react';
 import { Button, View, Text } from 'react-native';
 
@@ -22,6 +24,7 @@ const theme = {
 
 class Inspect extends React.Component<{ name?: string; value: any }, { expanded: boolean }> {
   state = { expanded: false };
+
   render() {
     const { name, value } = this.props;
     const { expanded } = this.state;
@@ -52,7 +55,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
             <View style={{ flexDirection: 'row', alignItems: 'center' }}>
               {toggle}
               {nameComponent}
-              <Text>{': ' + (value.length === 0 ? '[]' : expanded ? '[' : '[...]')}</Text>
+              <Text>{`: ${value.length === 0 ? '[]' : expanded ? '[' : '[...]'}`}</Text>
             </View>
             {expanded ? (
               <View style={{ marginLeft: 40 }}>
@@ -62,7 +65,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
                   </View>
                 ))}
                 <View style={{ marginLeft: 20 }}>
-                  <Text>{']'}</Text>
+                  <Text>]</Text>
                 </View>
               </View>
             ) : null}
@@ -71,13 +74,13 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
       }
       return (
         <View>
-          <Text>{'['}</Text>
+          <Text>[</Text>
           {value.map((v, i) => (
             <View key={i} style={{ marginLeft: 20 }}>
               <Inspect value={v} />
             </View>
           ))}
-          <Text>{']'}</Text>
+          <Text>]</Text>
         </View>
       );
     }
@@ -89,7 +92,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
               {toggle}
               {nameComponent}
               <Text>
-                {': ' + (Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}')}
+                {`: ${Object.keys(value).length === 0 ? '{}' : expanded ? '{' : '{...}'}`}
               </Text>
             </View>
             {expanded ? (
@@ -124,7 +127,7 @@ class Inspect extends React.Component<{ name?: string; value: any }, { expanded:
         <View style={{ flexDirection: 'row', alignItems: 'center' }}>
           {toggle}
           {nameComponent}
-          <Text>{': '}</Text>
+          <Text>: </Text>
           <Value value={value} />
         </View>
       );
@@ -147,7 +150,7 @@ function Value({ value }: { value: any }) {
   if (value instanceof RegExp) {
     return (
       <Text style={{ color: theme.OBJECT_VALUE_REGEXP_COLOR }}>
-        {'/' + value.source + '/' + value.flags}
+        {`/${value.source}/${value.flags}`}
       </Text>
     );
   }
@@ -166,8 +169,9 @@ function Value({ value }: { value: any }) {
       );
     case 'function':
       return <Text style={{ color: theme.OBJECT_VALUE_FUNCTION_PREFIX_COLOR }}>[Function]</Text>;
+    default:
+      return <Text>{JSON.stringify(value)}</Text>;
   }
-  return <Text>{JSON.stringify(value)}</Text>;
 }
 
 export default Inspect;
diff --git a/addons/ondevice-backgrounds/package.json b/addons/ondevice-backgrounds/package.json
index fb008630355..28b4a5dbba9 100644
--- a/addons/ondevice-backgrounds/package.json
+++ b/addons/ondevice-backgrounds/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-backgrounds",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A react-native storybook addon to show different backgrounds for your preview",
   "keywords": [
     "addon",
@@ -24,7 +24,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2"
   },
diff --git a/addons/ondevice-backgrounds/src/BackgroundPanel.js b/addons/ondevice-backgrounds/src/BackgroundPanel.js
index cd28c6d73c1..3442ecfc04d 100644
--- a/addons/ondevice-backgrounds/src/BackgroundPanel.js
+++ b/addons/ondevice-backgrounds/src/BackgroundPanel.js
@@ -1,3 +1,4 @@
+/* eslint-disable react/prop-types, react/destructuring-assignment, import/no-extraneous-dependencies */
 import React, { Component } from 'react';
 import { View, Text } from 'react-native';
 import Events from '@storybook/core-events';
@@ -36,10 +37,6 @@ const Instructions = () => (
 );
 
 export default class BackgroundPanel extends Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
@@ -48,6 +45,10 @@ export default class BackgroundPanel extends Component {
     this.props.channel.removeListener(Events.SELECT_STORY, this.onStorySelected);
   }
 
+  setBackgroundFromSwatch = background => {
+    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
+  };
+
   onStorySelected = selection => {
     this.setState({ selection });
   };
diff --git a/addons/ondevice-backgrounds/src/container.js b/addons/ondevice-backgrounds/src/container.js
index f5b03964bb1..523e4ae4a31 100644
--- a/addons/ondevice-backgrounds/src/container.js
+++ b/addons/ondevice-backgrounds/src/container.js
@@ -19,9 +19,9 @@ export default class Container extends React.Component {
     channel.removeListener(Constants.UPDATE_BACKGROUND, this.onBackgroundChange);
   }
 
-  onBackgroundChange = (background) => {
+  onBackgroundChange = background => {
     this.setState({ background });
-  }
+  };
 
   render() {
     const { background } = this.state;
diff --git a/addons/ondevice-knobs/package.json b/addons/ondevice-knobs/package.json
index fbab2758ad0..9e990097719 100644
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-knobs",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Display storybook story knobs on your deviced.",
   "keywords": [
     "addon",
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "deep-equal": "^1.0.1",
     "prop-types": "^15.7.2",
diff --git a/addons/ondevice-knobs/src/PropForm.js b/addons/ondevice-knobs/src/PropForm.js
index 93770e5e3e7..e0c35334cf1 100644
--- a/addons/ondevice-knobs/src/PropForm.js
+++ b/addons/ondevice-knobs/src/PropForm.js
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import { View } from 'react-native';
 import PropField from './PropField';
 
-export default class propForm extends React.Component {
+export default class PropForm extends React.Component {
   makeChangeHandler(name, type) {
     return value => {
       const { onFieldChange } = this.props;
@@ -38,13 +38,13 @@ export default class propForm extends React.Component {
   }
 }
 
-propForm.displayName = 'propForm';
+PropForm.displayName = 'PropForm';
 
-propForm.defaultProps = {
+PropForm.defaultProps = {
   knobs: [],
 };
 
-propForm.propTypes = {
+PropForm.propTypes = {
   knobs: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,
diff --git a/addons/ondevice-notes/package.json b/addons/ondevice-notes/package.json
index 2f83a8ae86a..4f1522fba87 100644
--- a/addons/ondevice-notes/package.json
+++ b/addons/ondevice-notes/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-ondevice-notes",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Write notes for your react-native Storybook stories.",
   "keywords": [
     "addon",
@@ -20,7 +20,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "prop-types": "^15.7.2",
     "react-native-simple-markdown": "^1.1.0"
diff --git a/addons/ondevice-notes/src/index.js b/addons/ondevice-notes/src/index.js
index 5200b63f845..28be51837ef 100644
--- a/addons/ondevice-notes/src/index.js
+++ b/addons/ondevice-notes/src/index.js
@@ -1,3 +1,4 @@
+// eslint-disable-next-line no-undef
 if (__DEV__) {
   console.log("import '@storybook/addon-ondevice-notes/register' to register the notes addon");
-}
\ No newline at end of file
+}
diff --git a/addons/ondevice-notes/src/register.js b/addons/ondevice-notes/src/register.js
index 1ed3a38bfcd..b68ccc3a6d5 100644
--- a/addons/ondevice-notes/src/register.js
+++ b/addons/ondevice-notes/src/register.js
@@ -1,3 +1,6 @@
+/* eslint-disable react/prop-types */
+/* eslint-disable react/destructuring-assignment */
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { View } from 'react-native';
 import Markdown from 'react-native-simple-markdown';
@@ -7,10 +10,6 @@ import Events from '@storybook/core-events';
 export const PARAM_KEY = `notes`;
 
 class Notes extends React.Component {
-  setBackgroundFromSwatch = background => {
-    this.props.channel.emit(Constants.UPDATE_BACKGROUND, background);
-  };
-
   componentDidMount() {
     this.props.channel.on(Events.SELECT_STORY, this.onStorySelected);
   }
diff --git a/addons/options/package.json b/addons/options/package.json
index c16a073f195..fd3f950c6dc 100644
--- a/addons/options/package.json
+++ b/addons/options/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-options",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Options addon for storybook",
   "keywords": [
     "addon",
@@ -22,7 +22,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "util-deprecate": "^1.0.2"
   },
diff --git a/addons/queryparams/package.json b/addons/queryparams/package.json
index 854adf15c50..653a821d664 100644
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@@ -1,19 +1,19 @@
 {
   "name": "@storybook/addon-queryparams",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "parameter addon for storybook",
   "keywords": [
     "addon",
     "storybook",
     "query"
   ],
-  "homepage": "https://github.com/storybooks/storybook#readme",
+  "homepage": "https://github.com/storybookjs/storybook#readme",
   "bugs": {
-    "url": "https://github.com/storybooks/storybook/issues"
+    "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/storybooks/storybook.git",
+    "url": "git+https://github.com/storybookjs/storybook.git",
     "directory": "addons/addon-queryparams"
   },
   "license": "MIT",
@@ -23,14 +23,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
-    "core-js": "^2.6.5",
+    "core-js": "^3.0.1",
     "global": "^4.3.2",
     "qs": "^6.6.0",
     "react": "^16.8.3"
diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json
index fd0354d15b3..8abc62d17cb 100644
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
   "keywords": [
     "addon",
@@ -25,7 +25,7 @@
     "storybook": "start-storybook -p 6006"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "glob": "^7.1.3",
     "global": "^4.3.2",
diff --git a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
index 684c99c4b9e..cc7fa979914 100644
--- a/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
+++ b/addons/storyshots/storyshots-core/src/api/integrityTestTemplate.js
@@ -16,7 +16,8 @@ function integrityTest(integrityOptions, stories2snapsConverter) {
         const possibleStoriesFiles = stories2snapsConverter.getPossibleStoriesFiles(fileName);
         return !possibleStoriesFiles.some(fs.existsSync);
       });
-      expect(abandonedStoryshots.length).toBe(0);
+
+      expect(abandonedStoryshots).toEqual([]);
     });
   });
 }
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
index e63d097b98b..6dbfd97a1cd 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Button.stories.js
@@ -5,6 +5,9 @@ import { action } from '@storybook/addon-actions';
 import { Button } from '@storybook/react/demo';
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
   .add('with some emoji', () => (
     <Button onClick={action('clicked')}>
diff --git a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
index 2837b632c0a..abd9b87b39b 100644
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.js
@@ -4,4 +4,8 @@ import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
diff --git a/addons/storyshots/storyshots-puppeteer/package.json b/addons/storyshots/storyshots-puppeteer/package.json
index e3f476ae550..bd336a2fe50 100644
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Image snappshots addition to StoryShots base on puppeteer",
   "keywords": [
     "addon",
@@ -22,8 +22,8 @@
     "prepare": "node ../../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/node-logger": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
+    "@storybook/node-logger": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "jest-image-snapshot": "^2.8.2",
     "regenerator-runtime": "^0.12.1"
diff --git a/addons/storysource/package.json b/addons/storysource/package.json
index 5acbe8de1a9..8ee7a69c49b 100644
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-storysource",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Stories addon for storybook",
   "keywords": [
     "addon",
@@ -22,10 +22,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "estraverse": "^4.2.0",
     "loader-utils": "^1.2.3",
diff --git a/addons/viewport/package.json b/addons/viewport/package.json
index a4957060493..b1bd553818f 100644
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-viewport",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook addon to change the viewport size to mobile",
   "keywords": [
     "addon",
@@ -21,11 +21,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
@@ -37,5 +38,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "devDependencies": {
+    "@types/util-deprecate": "^1.0.0"
   }
 }
diff --git a/addons/viewport/src/Tool.js b/addons/viewport/src/Tool.tsx
similarity index 57%
rename from addons/viewport/src/Tool.js
rename to addons/viewport/src/Tool.tsx
index 073e0cc6b4c..5427f3ae948 100644
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.tsx
@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import memoize from 'memoizerific';
 import deprecate from 'util-deprecate';
 
@@ -10,23 +9,37 @@ import { SET_STORIES } from '@storybook/core-events';
 
 import { PARAM_KEY } from './constants';
 import { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from './defaults';
+import { ViewportAddonParameter, ViewportMap, ViewportStyles } from './models';
 
-const toList = memoize(50)(items =>
+const toList = memoize(50)((items: ViewportMap) =>
   items ? Object.entries(items).map(([id, value]) => ({ ...value, id })) : []
 );
 const iframeId = 'storybook-preview-iframe';
 
-const createItem = memoize(1000)((id, name, value, change) => ({
-  id: id || name,
-  title: name,
-  onClick: () => {
-    change({ selected: id, expanded: false });
-  },
-  right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
-  value,
-}));
+interface ViewportVM {
+  id: string;
+  title: string;
+  onClick: () => void;
+  right: string;
+  value: ViewportStyles;
+}
 
-const flip = ({ width, height }) => ({ height: width, width: height });
+const createItem = memoize(1000)(
+  (id: string, name: string, value: ViewportStyles, change: (...args: unknown[]) => void) => {
+    const result: ViewportVM = {
+      id: id || name,
+      title: name,
+      onClick: () => {
+        change({ selected: id, expanded: false });
+      },
+      right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
+      value,
+    };
+    return result;
+  }
+);
+
+const flip = ({ width, height }: ViewportStyles) => ({ height: width, width: height });
 
 const deprecatedViewportString = deprecate(
   () => 0,
@@ -37,56 +50,69 @@ const deprecateOnViewportChange = deprecate(
   'The viewport parameter `onViewportChange` is no longer supported'
 );
 
-const getState = memoize(10)((props, state, change) => {
-  const data = props.api.getCurrentStoryData();
-  const parameters = data && data.parameters && data.parameters[PARAM_KEY];
+const getState = memoize(10)(
+  (
+    props: ViewportToolProps,
+    state: ViewportToolState,
+    change: (statePatch: Partial<ViewportToolState>) => void
+  ) => {
+    const data = props.api.getCurrentStoryData();
+    const parameters: ViewportAddonParameter =
+      data && (data as any).parameters && (data as any).parameters[PARAM_KEY];
 
-  if (parameters && typeof parameters !== 'object') {
-    deprecatedViewportString();
-  }
+    if (parameters && typeof parameters !== 'object') {
+      deprecatedViewportString();
+    }
 
-  const { disable, viewports, defaultViewport, onViewportChange } = parameters || {};
+    const { disable, viewports, defaultViewport, onViewportChange } = parameters || ({} as any);
 
-  if (onViewportChange) {
-    deprecateOnViewportChange();
-  }
+    if (onViewportChange) {
+      deprecateOnViewportChange();
+    }
 
-  const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
+    const list = disable ? [] : toList(viewports || INITIAL_VIEWPORTS);
+    const viewportVMList = list.map(({ id, name, styles: value }) =>
+      createItem(id, name, value, change)
+    );
 
-  const selected =
-    state.selected === 'responsive' || list.find(i => i.id === state.selected)
-      ? state.selected
-      : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
+    const selected =
+      state.selected === 'responsive' || list.find(i => i.id === state.selected)
+        ? state.selected
+        : list.find(i => i.default) || defaultViewport || DEFAULT_VIEWPORT;
 
-  const resets =
-    selected !== 'responsive'
-      ? [
-          {
-            id: 'reset',
-            title: 'Reset viewport',
-            onClick: () => {
-              change({ selected: undefined, expanded: false });
+    const resets: ViewportVM[] =
+      selected !== 'responsive'
+        ? [
+            {
+              id: 'reset',
+              title: 'Reset viewport',
+              onClick: () => {
+                change({ selected: undefined, expanded: false });
+              },
+              right: undefined,
+              value: undefined,
             },
-          },
-          {
-            id: 'rotate',
-            title: 'Rotate viewport',
-            onClick: () => {
-              change({ isRotated: !state.isRotated, expanded: false });
+            {
+              id: 'rotate',
+              title: 'Rotate viewport',
+              onClick: () => {
+                change({ isRotated: !state.isRotated, expanded: false });
+              },
+              right: undefined,
+              value: undefined,
             },
-          },
-        ]
-      : [];
-  const items = list.length
-    ? resets.concat(list.map(({ id, name, styles: value }) => createItem(id, name, value, change)))
-    : list;
+          ]
+        : [];
 
-  return {
-    isRotated: state.isRotated,
-    items,
-    selected,
-  };
-});
+    const items = viewportVMList.length !== 0 ? resets.concat(viewportVMList) : [];
+
+    return {
+      isRotated: state.isRotated,
+      items,
+      selected,
+    };
+  }
+);
 
 const ActiveViewportSize = styled.div(() => ({
   display: 'inline-flex',
@@ -116,8 +142,20 @@ const IconButtonLabel = styled.div(({ theme }) => ({
   marginLeft: '10px',
 }));
 
-export default class ViewportTool extends Component {
-  constructor(props) {
+interface ViewportToolState {
+  isRotated: boolean;
+  items: any[];
+  selected: string;
+  expanded: boolean;
+}
+interface ViewportToolProps {
+  api: any;
+}
+
+export class ViewportTool extends Component<ViewportToolProps, ViewportToolState> {
+  listener: () => void;
+
+  constructor(props: ViewportToolProps) {
     super(props);
 
     this.state = {
@@ -144,12 +182,16 @@ export default class ViewportTool extends Component {
     api.off(SET_STORIES, this.listener);
   }
 
-  change = (...args) => this.setState(...args);
+  // @ts-ignore
+  change = (...args: any[]) => this.setState(...args);
 
   flipViewport = () =>
-    this.setState(({ isRotated }) => ({ isRotated: !isRotated, expanded: false }));
+    this.setState(({ isRotated }: { isRotated: boolean }) => ({
+      isRotated: !isRotated,
+      expanded: false,
+    }));
 
-  resetViewport = e => {
+  resetViewport = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
     e.stopPropagation();
     e.nativeEvent.stopImmediatePropagation();
 
@@ -161,8 +203,8 @@ export default class ViewportTool extends Component {
     const { items, selected, isRotated } = getState(this.props, this.state, this.change);
     const item = items.find(i => i.id === selected);
 
-    let viewportX = 0;
-    let viewportY = 0;
+    let viewportX = '0';
+    let viewportY = '0';
     let viewportTitle = '';
     if (item) {
       const height = item.value.height.replace('px', '');
@@ -188,7 +230,7 @@ export default class ViewportTool extends Component {
                 boxShadow: '0 4px 8px 0 rgba(0,0,0,0.12), 0 2px 4px 0 rgba(0,0,0,0.08);',
                 boxSizing: 'content-box',
 
-                ...(isRotated ? flip(item.value || {}) : item.value || {}),
+                ...(isRotated ? flip(item.value) : item.value),
               },
             }}
           />
@@ -224,9 +266,3 @@ export default class ViewportTool extends Component {
     ) : null;
   }
 }
-
-ViewportTool.propTypes = {
-  api: PropTypes.shape({
-    on: PropTypes.func,
-  }).isRequired,
-};
diff --git a/addons/viewport/src/constants.js b/addons/viewport/src/constants.js
deleted file mode 100644
index 1a9e8f7376b..00000000000
--- a/addons/viewport/src/constants.js
+++ /dev/null
@@ -1,9 +0,0 @@
-export const ADDON_ID = 'storybook/viewport';
-export const PARAM_KEY = 'viewport';
-
-export default {
-  UPDATE: `${ADDON_ID}/update`,
-  CONFIGURE: `${ADDON_ID}/configure`,
-  SET: `${ADDON_ID}/setStoryDefaultViewport`,
-  CHANGED: `${ADDON_ID}/viewportChanged`,
-};
diff --git a/addons/viewport/src/constants.ts b/addons/viewport/src/constants.ts
new file mode 100644
index 00000000000..db9c73f1976
--- /dev/null
+++ b/addons/viewport/src/constants.ts
@@ -0,0 +1,7 @@
+export const ADDON_ID = 'storybook/viewport';
+export const PARAM_KEY = 'viewport';
+
+export const UPDATE = `${ADDON_ID}/update`;
+export const CONFIGURE = `${ADDON_ID}/configure`;
+export const SET = `${ADDON_ID}/setStoryDefaultViewport`;
+export const CHANGED = `${ADDON_ID}/viewportChanged`;
diff --git a/addons/viewport/src/defaults.js b/addons/viewport/src/defaults.ts
similarity index 95%
rename from addons/viewport/src/defaults.js
rename to addons/viewport/src/defaults.ts
index bd3dcf6065f..a6d5f858b86 100644
--- a/addons/viewport/src/defaults.js
+++ b/addons/viewport/src/defaults.ts
@@ -1,4 +1,6 @@
-export const INITIAL_VIEWPORTS = {
+import { ViewportMap } from './models';
+
+export const INITIAL_VIEWPORTS: ViewportMap = {
   iphone5: {
     name: 'iPhone 5',
     styles: {
diff --git a/addons/viewport/src/legacy_preview/index.js b/addons/viewport/src/legacy_preview/index.ts
similarity index 81%
rename from addons/viewport/src/legacy_preview/index.js
rename to addons/viewport/src/legacy_preview/index.ts
index 7bb7c3ef5fc..0e4f8e090b9 100644
--- a/addons/viewport/src/legacy_preview/index.js
+++ b/addons/viewport/src/legacy_preview/index.ts
@@ -1,7 +1,6 @@
 import deprecate from 'util-deprecate';
 
 export { INITIAL_VIEWPORTS, DEFAULT_VIEWPORT } from '../defaults';
-export { default as withViewport } from './withViewport';
 
 export const configureViewport = deprecate(() => {},
 'configureViewport is no longer supported, use .addParameters({ viewport }) instead');
diff --git a/addons/viewport/src/legacy_preview/withViewport.js b/addons/viewport/src/legacy_preview/withViewport.ts
similarity index 64%
rename from addons/viewport/src/legacy_preview/withViewport.js
rename to addons/viewport/src/legacy_preview/withViewport.ts
index f1f6ca2a6f9..d4b0e3b96a5 100644
--- a/addons/viewport/src/legacy_preview/withViewport.js
+++ b/addons/viewport/src/legacy_preview/withViewport.ts
@@ -1,11 +1,11 @@
-import { makeDecorator } from '@storybook/addons';
+import { makeDecorator, StoryGetter, StoryContext } from '@storybook/addons';
 import deprecate from 'util-deprecate';
 
 const withViewport = makeDecorator({
   name: 'withViewport',
   parameterName: 'viewport',
   wrapper: deprecate(
-    (getStory, context) => getStory(context),
+    (getStory: StoryGetter, context: StoryContext) => getStory(context),
     'withViewport is no longer supported, use .addParameters({ viewport }) instead'
   ),
 });
diff --git a/addons/viewport/src/models/Viewport.ts b/addons/viewport/src/models/Viewport.ts
new file mode 100644
index 00000000000..f799d061ef5
--- /dev/null
+++ b/addons/viewport/src/models/Viewport.ts
@@ -0,0 +1,19 @@
+export interface Viewport {
+  name: string;
+  styles: ViewportStyles;
+  type: 'desktop' | 'mobile' | 'tablet';
+  /*
+   * @deprecated
+   * Deprecated option?
+   */
+  default?: boolean;
+}
+
+export interface ViewportStyles {
+  height: string;
+  width: string;
+}
+
+export interface ViewportMap {
+  [key: string]: Viewport;
+}
diff --git a/addons/viewport/src/models/ViewportAddonParameter.ts b/addons/viewport/src/models/ViewportAddonParameter.ts
new file mode 100644
index 00000000000..fe8598fa54b
--- /dev/null
+++ b/addons/viewport/src/models/ViewportAddonParameter.ts
@@ -0,0 +1,12 @@
+import { ViewportMap } from './Viewport';
+
+export interface ViewportAddonParameter {
+  disable: boolean;
+  defaultViewport: string;
+  viewports: ViewportMap;
+  /*
+   * @deprecated
+   * The viewport parameter `onViewportChange` is no longer supported
+   */
+  onViewportChange?: never;
+}
diff --git a/addons/viewport/src/models/index.ts b/addons/viewport/src/models/index.ts
new file mode 100644
index 00000000000..0cc15c61f91
--- /dev/null
+++ b/addons/viewport/src/models/index.ts
@@ -0,0 +1,2 @@
+export * from './Viewport';
+export * from './ViewportAddonParameter';
diff --git a/addons/viewport/src/register.js b/addons/viewport/src/register.tsx
similarity index 78%
rename from addons/viewport/src/register.js
rename to addons/viewport/src/register.tsx
index deb8bf839d2..16faa8171e6 100644
--- a/addons/viewport/src/register.js
+++ b/addons/viewport/src/register.tsx
@@ -3,13 +3,13 @@ import addons, { types } from '@storybook/addons';
 
 import { ADDON_ID } from './constants';
 
-import Tool from './Tool';
+import { ViewportTool } from './Tool';
 
 addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     title: 'viewport / media-queries',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
-    render: () => <Tool api={api} />,
+    render: () => <ViewportTool api={api} />,
   });
 });
diff --git a/addons/viewport/tsconfig.json b/addons/viewport/tsconfig.json
new file mode 100644
index 00000000000..8876bb6737a
--- /dev/null
+++ b/addons/viewport/tsconfig.json
@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
diff --git a/app/angular/package.json b/app/angular/package.json
index a20e71f389b..410d5a65653 100644
--- a/app/angular/package.json
+++ b/app/angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/angular",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,8 +26,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
-    "@storybook/node-logger": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
+    "@storybook/node-logger": "5.2.0-alpha.32",
     "angular2-template-loader": "^0.6.2",
     "core-js": "^3.0.1",
     "fork-ts-checker-webpack-plugin": "^1.3.4",
diff --git a/app/ember/package.json b/app/ember/package.json
index 462b200a39a..2ce2305e3ae 100644
--- a/app/ember/package.json
+++ b/app/ember/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ember",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
   "homepage": "https://github.com/storybookjs/storybook/tree/master/app/ember",
   "bugs": {
@@ -24,7 +24,7 @@
   },
   "dependencies": {
     "@ember/test-helpers": "^1.5.0",
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/html/package.json b/app/html/package.json
index c59d4a049e2..81d5c0e2040 100644
--- a/app/html/package.json
+++ b/app/html/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/html",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/marko/package.json b/app/marko/package.json
index 324ab8edded..32f54315479 100644
--- a/app/marko/package.json
+++ b/app/marko/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/marko",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Marko: Develop Marko Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/mithril/package.json b/app/mithril/package.json
index 732e6ad3ee8..b81056eb943 100644
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/mithril",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Mithril: Develop Mithril Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/polymer/package.json b/app/polymer/package.json
index 9904ee95911..74fab5970f3 100644
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/polymer",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Polymer: Develop Polymer components in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
diff --git a/app/preact/package.json b/app/preact/package.json
index c673df82f16..b1d53d10859 100644
--- a/app/preact/package.json
+++ b/app/preact/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/preact",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Preact: Develop Preact Component in isolation.",
   "keywords": [
     "storybook"
@@ -27,7 +27,7 @@
   },
   "dependencies": {
     "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/rax/README.md b/app/rax/README.md
index 4bdd3645697..4baa045a4d5 100644
--- a/app/rax/README.md
+++ b/app/rax/README.md
@@ -3,7 +3,7 @@
 Storybook for Rax is a UI development environment for your Rax components.
 With it, you can visualize different states of your UI components and develop them interactively.
 
-![Storybook Screenshot](https://github.com/storybooks/storybook/blob/master/media/storybook-intro.gif)
+![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
 
 Storybook runs outside of your app.
 So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
diff --git a/app/rax/package.json b/app/rax/package.json
index f76c26c8a9f..eda43c40933 100644
--- a/app/rax/package.json
+++ b/app/rax/package.json
@@ -1,18 +1,18 @@
 {
   "name": "@storybook/rax",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Rax: Develop Rax Component in isolation.",
   "keywords": [
     "storybook",
     "rax"
   ],
-  "homepage": "https://github.com/storybooks/storybook/tree/master/app/rax",
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/rax",
   "bugs": {
-    "url": "https://github.com/storybooks/storybook/issues"
+    "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/storybooks/storybook.git",
+    "url": "https://github.com/storybookjs/storybook.git",
     "directory": "app/rax"
   },
   "license": "MIT",
@@ -27,8 +27,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
+    "@storybook/core": "5.2.0-alpha.32",
     "babel-preset-rax": "^1.0.0-beta.0",
-    "@storybook/core": "5.2.0-alpha.23",
     "common-tags": "^1.8.0",
     "core-js": "^2.6.2",
     "global": "^4.3.2",
diff --git a/app/rax/src/client/index.js b/app/rax/src/client/index.js
index 21d3f4bf39c..17b16c61bc5 100644
--- a/app/rax/src/client/index.js
+++ b/app/rax/src/client/index.js
@@ -7,4 +7,5 @@ export {
   getStorybook,
   forceReRender,
   raw,
+  load,
 } from './preview';
diff --git a/app/rax/src/client/preview/index.js b/app/rax/src/client/preview/index.js
index 877b04bca12..8ba31e86c30 100644
--- a/app/rax/src/client/preview/index.js
+++ b/app/rax/src/client/preview/index.js
@@ -3,10 +3,9 @@ import { start } from '@storybook/core/client';
 import './globals';
 import render from './render';
 
-const { clientApi, configApi, forceReRender } = start(render);
+const { load: coreLoad, clientApi, configApi, forceReRender } = start(render);
 
 export const {
-  storiesOf,
   setAddon,
   addDecorator,
   addParameters,
@@ -15,5 +14,9 @@ export const {
   raw,
 } = clientApi;
 
+const framework = 'rax';
+export const storiesOf = (...args) => clientApi.storiesOf(...args).addParameters({ framework });
+export const load = (...args) => coreLoad(...args, framework);
+
 export const { configure } = configApi;
 export { forceReRender };
diff --git a/app/react-native-server/package.json b/app/react-native-server/package.json
index 3909caf157e..c0364a22a72 100644
--- a/app/react-native-server/package.json
+++ b/app/react-native-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native-server",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -24,12 +24,12 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/channel-websocket": "5.2.0-alpha.23",
-    "@storybook/core": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/ui": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/channel-websocket": "5.2.0-alpha.32",
+    "@storybook/core": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/ui": "5.2.0-alpha.32",
     "commander": "^2.19.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/react-native-server/src/client/manager/provider.js b/app/react-native-server/src/client/manager/provider.js
index 334a5a40167..688ed6f7e83 100644
--- a/app/react-native-server/src/client/manager/provider.js
+++ b/app/react-native-server/src/client/manager/provider.js
@@ -51,8 +51,7 @@ export default class ReactProvider extends Provider {
       <Consumer filter={mapper} pure>
         {({ storiesHash, storyId, api, viewMode }) => {
           if (storiesHash[storyId]) {
-            const { kind, story } = storiesHash[storyId];
-            api.emit(Events.SET_CURRENT_STORY, { kind, story });
+            api.emit(Events.SET_CURRENT_STORY, { storyId });
           }
           return viewMode === 'story' ? <PreviewHelp /> : null;
         }}
@@ -62,12 +61,6 @@ export default class ReactProvider extends Provider {
 
   handleAPI(api) {
     addons.loadAddons(api);
-    api.on(Events.STORY_CHANGED, () => {
-      api.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
-    api.on(Events.GET_CURRENT_STORY, () => {
-      api.emit(Events.SET_CURRENT_STORY, this.selection);
-    });
     api.emit(Events.GET_STORIES);
   }
 }
diff --git a/app/react-native/package.json b/app/react-native/package.json
index 75e7cbf73b7..a669809f22c 100644
--- a/app/react-native/package.json
+++ b/app/react-native/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react-native",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A better way to develop React Native Components for your app",
   "keywords": [
     "react",
@@ -23,11 +23,11 @@
   },
   "dependencies": {
     "@emotion/native": "^10.0.10",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/channel-websocket": "5.2.0-alpha.23",
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/channel-websocket": "5.2.0-alpha.32",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "react-native-swipe-gestures": "^1.0.3",
     "rn-host-detect": "^1.1.5"
diff --git a/app/react-native/src/index.ts b/app/react-native/src/index.ts
index 98b2a8d5c06..a13cd197f7d 100644
--- a/app/react-native/src/index.ts
+++ b/app/react-native/src/index.ts
@@ -1,3 +1,4 @@
+/* eslint-disable prefer-destructuring */
 import Preview from './preview';
 
 const preview = new Preview();
diff --git a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
index 51c49e1e95f..d368802cdd5 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/absolute-positioned-keyboard-aware-view.tsx
@@ -22,7 +22,9 @@ type Props = {
 // To avoid issues we use absolute positioned element with predefined screen size
 export default class AbsolutePositionedKeyboardAwareView extends PureComponent<Props> {
   keyboardDidShowListener: EmitterSubscription;
+
   keyboardDidHideListener: EmitterSubscription;
+
   keyboardOpen: boolean;
 
   componentWillMount() {
diff --git a/app/react-native/src/preview/components/OnDeviceUI/animation.ts b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
index 4ce7747b158..f19ef152fd8 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/animation.ts
+++ b/app/react-native/src/preview/components/OnDeviceUI/animation.ts
@@ -1,5 +1,5 @@
-import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 import { Animated } from 'react-native';
+import { NAVIGATOR, PREVIEW, ADDONS } from './navigation/constants';
 
 const PREVIEW_SCALE = 0.3;
 
diff --git a/app/react-native/src/preview/components/OnDeviceUI/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
index e875ec9394b..5718b0d86e1 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/index.tsx
@@ -8,7 +8,6 @@ import {
   TouchableOpacityProps,
 } from 'react-native';
 import styled from '@emotion/native';
-import Events from '@storybook/core-events';
 import addons from '@storybook/addons';
 import Channel from '@storybook/channels';
 import StoryListView from '../StoryListView';
@@ -36,14 +35,11 @@ interface OnDeviceUIProps {
   url?: string;
   tabOpen?: number;
   isUIHidden?: boolean;
-  getInitialStory?: (...args: any[]) => any;
   shouldDisableKeyboardAvoidingView?: boolean;
   keyboardAvoidingViewVerticalOffset?: number;
 }
 
 interface OnDeviceUIState {
-  selection: any;
-  storyFn: any;
   tabOpen: number;
   slideBetweenAnimation: boolean;
   previewWidth: number;
@@ -64,6 +60,7 @@ const Preview: typeof TouchableOpacity = styled.TouchableOpacity`
 
 export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceUIState> {
   animatedValue: Animated.Value;
+
   channel: Channel;
 
   constructor(props: OnDeviceUIProps) {
@@ -72,8 +69,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.state = {
       tabOpen,
       slideBetweenAnimation: false,
-      selection: {},
-      storyFn: null,
       previewWidth: 0,
       previewHeight: 0,
     };
@@ -81,24 +76,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.channel = addons.getChannel();
   }
 
-  async componentWillMount() {
-    const { getInitialStory } = this.props;
-    if (getInitialStory) {
-      const story = await getInitialStory();
-      this.setState({
-        selection: story || {},
-        storyFn: story ? story.storyFn : null,
-      });
-    }
-    this.channel.on(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
-  componentWillUnmount() {
-    this.channel.removeListener(Events.SELECT_STORY, this.handleStoryChange);
-    this.channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-  }
-
   onLayout = ({ previewWidth, previewHeight }: PreviewDimens) => {
     this.setState({ previewWidth, previewHeight });
   };
@@ -107,24 +84,6 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
     this.handleToggleTab(PREVIEW);
   };
 
-  forceReRender = () => {
-    this.forceUpdate();
-  };
-
-  handleStoryChange = (selection: any) => {
-    const { selection: prevSelection } = this.state;
-    if (selection.kind === prevSelection.kind && selection.story === prevSelection.story) {
-      this.handleToggleTab(PREVIEW);
-    }
-    this.setState({
-      selection: {
-        kind: selection.kind,
-        story: selection.story,
-      },
-      storyFn: selection.storyFn,
-    });
-  };
-
   handleToggleTab = (newTabOpen: number) => {
     const { tabOpen } = this.state;
     if (newTabOpen === tabOpen) {
@@ -155,14 +114,7 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
       keyboardAvoidingViewVerticalOffset,
     } = this.props;
 
-    const {
-      tabOpen,
-      slideBetweenAnimation,
-      selection,
-      storyFn,
-      previewWidth,
-      previewHeight,
-    } = this.state;
+    const { tabOpen, slideBetweenAnimation, previewWidth, previewHeight } = this.state;
 
     const previewWrapperStyles = [
       { flex: 1 },
@@ -190,21 +142,12 @@ export default class OnDeviceUI extends PureComponent<OnDeviceUIProps, OnDeviceU
                 disabled={tabOpen === PREVIEW}
                 onPress={this.handleOpenPreview}
               >
-                <StoryView
-                  url={url}
-                  selection={selection}
-                  storyFn={storyFn}
-                  listenToEvents={false}
-                />
+                <StoryView url={url} onDevice stories={stories} />
               </Preview>
             </Animated.View>
           </Animated.View>
           <Panel style={getNavigatorPanelPosition(this.animatedValue, previewWidth)}>
-            <StoryListView
-              stories={stories}
-              selectedKind={selection.kind}
-              selectedStory={selection.story}
-            />
+            <StoryListView stories={stories} />
           </Panel>
           <Panel style={getAddonPanelPosition(this.animatedValue, previewWidth)}>
             <Addons />
diff --git a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
index f2d03cf9aa9..7e30ebe3982 100644
--- a/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
+++ b/app/react-native/src/preview/components/OnDeviceUI/navigation/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { PureComponent } from 'react';
 import { View, SafeAreaView, StyleSheet } from 'react-native';
 import GestureRecognizer, { GestureRecognizerConfig } from 'react-native-swipe-gestures';
diff --git a/app/react-native/src/preview/components/StoryListView/index.tsx b/app/react-native/src/preview/components/StoryListView/index.tsx
index 3f296918c67..22766d87d9a 100644
--- a/app/react-native/src/preview/components/StoryListView/index.tsx
+++ b/app/react-native/src/preview/components/StoryListView/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable react/destructuring-assignment */
 import React, { Component } from 'react';
 import { SectionList, TextInput, TouchableOpacity, View, SafeAreaView } from 'react-native';
 import styled from '@emotion/native';
@@ -64,8 +65,6 @@ const ListItem: React.FunctionComponent<ListItemProps> = ({ kind, title, selecte
 
 interface Props {
   stories: any;
-  selectedKind?: string;
-  selectedStory?: string;
 }
 
 interface State {
@@ -90,28 +89,35 @@ export default class StoryListView extends Component<Props, State> {
   componentDidMount() {
     const channel = addons.getChannel();
     channel.on(Events.STORY_ADDED, this.handleStoryAdded);
+    channel.on(Events.SELECT_STORY, this.forceReRender);
     this.handleStoryAdded();
   }
 
   componentWillUnmount() {
     const channel = addons.getChannel();
     channel.removeListener(Events.STORY_ADDED, this.handleStoryAdded);
+    channel.removeListener(Events.SELECT_STORY, this.forceReRender);
   }
 
+  forceReRender = () => {
+    this.forceUpdate();
+  };
+
   handleStoryAdded = () => {
     const { stories } = this.props;
 
     if (stories) {
-      const data = stories.dumpStoryBook().map(
-        (section: any) => ({
-          title: section.kind,
-          data: section.stories.map((story: any) => ({
-            key: story,
-            name: story,
-            kind: section.kind,
-          })),
-        }),
-        {}
+      const data = Object.values(
+        stories
+          .raw()
+          .reduce((acc: { [kind: string]: { title: string; data: any[] } }, story: any) => {
+            acc[story.kind] = {
+              title: story.kind,
+              data: (acc[story.kind] ? acc[story.kind].data : []).concat(story),
+            };
+
+            return acc;
+          }, {})
       );
 
       this.setState({ data, originalData: data });
@@ -146,13 +152,13 @@ export default class StoryListView extends Component<Props, State> {
     this.setState({ data: filteredData });
   };
 
-  changeStory(kind: string, story: string) {
+  changeStory(storyId: string) {
     const channel = addons.getChannel();
-    channel.emit(Events.SET_CURRENT_STORY, { kind, story });
+    channel.emit(Events.SET_CURRENT_STORY, { storyId });
   }
 
   render() {
-    const { selectedKind, selectedStory } = this.props;
+    const selectedStory = this.props.stories.getSelection();
     const { data } = this.state;
 
     return (
@@ -171,12 +177,12 @@ export default class StoryListView extends Component<Props, State> {
             <ListItem
               title={item.name}
               kind={item.kind}
-              selected={item.kind === selectedKind && item.name === selectedStory}
-              onPress={() => this.changeStory(item.kind, item.name)}
+              selected={item.id === selectedStory.id}
+              onPress={() => this.changeStory(item.id)}
             />
           )}
           renderSectionHeader={({ section: { title } }) => (
-            <SectionHeader title={title} selected={title === selectedKind} />
+            <SectionHeader title={title} selected={title === selectedStory.kind} />
           )}
           keyExtractor={(item, index) => item + index}
           sections={data}
diff --git a/app/react-native/src/preview/components/StoryView/index.tsx b/app/react-native/src/preview/components/StoryView/index.tsx
index 3318b568773..7417c9ec179 100644
--- a/app/react-native/src/preview/components/StoryView/index.tsx
+++ b/app/react-native/src/preview/components/StoryView/index.tsx
@@ -5,15 +5,9 @@ import addons from '@storybook/addons';
 import Events from '@storybook/core-events';
 
 interface Props {
-  listenToEvents: boolean;
-  selection?: any;
-  storyFn?: any;
+  stories: any;
   url: string;
-}
-
-interface State {
-  storyFn?: any;
-  selection?: any;
+  onDevice?: boolean;
 }
 
 const HelpContainer = styled.View`
@@ -24,33 +18,23 @@ const HelpContainer = styled.View`
   justify-content: center;
 `;
 
-export default class StoryView extends Component<Props, State> {
+export default class StoryView extends Component<Props> {
   componentDidMount() {
-    if (this.props.listenToEvents) {
-      const channel = addons.getChannel();
-      channel.on(Events.SELECT_STORY, this.selectStory);
-      channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
-    }
+    const channel = addons.getChannel();
+    channel.on(Events.STORY_RENDER, this.forceReRender);
+    channel.on(Events.FORCE_RE_RENDER, this.forceReRender);
   }
 
   componentWillUnmount() {
-    const { listenToEvents } = this.props;
-
-    if (listenToEvents) {
-      const channel = addons.getChannel();
-      channel.removeListener(Events.SELECT_STORY, this.selectStory);
-      channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
-    }
+    const channel = addons.getChannel();
+    channel.removeListener(Events.STORY_RENDER, this.forceReRender);
+    channel.removeListener(Events.FORCE_RE_RENDER, this.forceReRender);
   }
 
   forceReRender = () => {
     this.forceUpdate();
   };
 
-  selectStory = (selection: any) => {
-    this.setState({ storyFn: selection.storyFn, selection });
-  };
-
   renderHelp = () => {
     const { url } = this.props;
     return (
@@ -75,41 +59,24 @@ export default class StoryView extends Component<Props, State> {
   );
 
   render() {
-    const { listenToEvents } = this.props;
+    const { onDevice, stories } = this.props;
 
-    if (listenToEvents) {
-      return this.renderListening();
-    } else {
-      return this.renderOnDevice();
+    const selection = stories.getSelection();
+
+    const { id, storyFn } = selection;
+
+    if (storyFn) {
+      return (
+        <View key={id} style={{ flex: 1 }}>
+          {storyFn()}
+        </View>
+      );
     }
+
+    if (onDevice) {
+      return this.renderOnDeviceUIHelp();
+    }
+
+    return this.renderHelp();
   }
-
-  renderListening = () => {
-    if (!this.state) {
-      return null;
-    }
-    const { storyFn, selection } = this.state;
-    const { kind, story } = selection;
-
-    return storyFn ? (
-      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
-        {storyFn()}
-      </View>
-    ) : (
-      this.renderHelp()
-    );
-  };
-
-  renderOnDevice = () => {
-    const { storyFn, selection } = this.props;
-    const { kind, story } = selection;
-
-    return storyFn ? (
-      <View key={`${kind}:::${story}`} style={{ flex: 1 }}>
-        {storyFn()}
-      </View>
-    ) : (
-      this.renderOnDeviceUIHelp()
-    );
-  };
 }
diff --git a/app/react-native/src/preview/index.tsx b/app/react-native/src/preview/index.tsx
index b45f3b4b454..c766b3a73a4 100644
--- a/app/react-native/src/preview/index.tsx
+++ b/app/react-native/src/preview/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies, no-underscore-dangle */
 import React from 'react';
 import { AsyncStorage } from 'react-native';
 import { ThemeProvider } from 'emotion-theming';
@@ -32,16 +33,19 @@ export type Params = {
 } & EmotionProps;
 
 export default class Preview {
-  currentStory: any;
   _clientApi: ClientApi;
+
   _stories: StoryStore;
+
   _addons: any;
+
   _decorators: any[];
 
+  _asyncStorageStoryId: string;
+
   constructor() {
     this._addons = {};
     this._decorators = [];
-
     this._stories = new StoryStore({});
     this._clientApi = new ClientApi({ storyStore: this._stories });
   }
@@ -64,9 +68,6 @@ export default class Preview {
 
     const onDeviceUI = params.onDeviceUI !== false;
     const { initialSelection, shouldPersistSelection } = params;
-    // should the initial story be sent to storybookUI
-    // set to true if using disableWebsockets or if connection to WebsocketServer fails.
-    let setInitialStory = false;
 
     try {
       channel = addons.getChannel();
@@ -78,6 +79,7 @@ export default class Preview {
     if (!channel || params.resetStorybook) {
       if (onDeviceUI && params.disableWebsockets) {
         channel = new Channel({ async: true });
+        this._setInitialStory(initialSelection, shouldPersistSelection);
       } else {
         const host = getHost(params.host || 'localhost');
         const port = `:${params.port || 7007}`;
@@ -93,11 +95,7 @@ export default class Preview {
           url,
           async: onDeviceUI,
           onError: () => {
-            // We are both emitting event and telling the component to get initial story. It may happen that component is created before the error or vise versa.
-            // This way we handle both cases
             this._setInitialStory(initialSelection, shouldPersistSelection);
-
-            setInitialStory = true;
           },
         });
       }
@@ -113,13 +111,6 @@ export default class Preview {
 
     this._sendSetStories();
 
-    // If the app is started with server running, set the story as the one selected in the browser
-    if (webUrl) {
-      this._sendGetCurrentStory();
-    } else {
-      setInitialStory = true;
-    }
-
     const preview = this;
 
     addons.loadAddons(this._clientApi);
@@ -127,7 +118,6 @@ export default class Preview {
     const appliedTheme = { ...theme, ...params.theme };
 
     // react-native hot module loader must take in a Class - https://github.com/facebook/react-native/issues/10991
-    // eslint-disable-next-line react/prefer-stateless-function
     return class StorybookRoot extends React.PureComponent {
       render() {
         if (onDeviceUI) {
@@ -138,11 +128,6 @@ export default class Preview {
                 url={webUrl}
                 isUIHidden={params.isUIHidden}
                 tabOpen={params.tabOpen}
-                getInitialStory={
-                  setInitialStory
-                    ? preview._getInitialStory(initialSelection, shouldPersistSelection)
-                    : null
-                }
                 shouldDisableKeyboardAvoidingView={params.shouldDisableKeyboardAvoidingView}
                 keyboardAvoidingViewVerticalOffset={params.keyboardAvoidingViewVerticalOffset}
               />
@@ -152,7 +137,7 @@ export default class Preview {
 
         return (
           <ThemeProvider theme={appliedTheme}>
-            <StoryView url={webUrl} listenToEvents />
+            <StoryView stories={preview._stories} url={webUrl} />
           </ThemeProvider>
         );
       }
@@ -164,14 +149,6 @@ export default class Preview {
     const stories = this._stories.extract();
     channel.emit(Events.SET_STORIES, { stories });
     channel.emit(Events.STORIES_CONFIGURED);
-    if (this.currentStory) {
-      channel.emit(Events.SET_CURRENT_STORY, this.currentStory);
-    }
-  }
-
-  _sendGetCurrentStory() {
-    const channel = addons.getChannel();
-    channel.emit(Events.GET_CURRENT_STORY);
   }
 
   _setInitialStory = async (initialSelection: any, shouldPersistSelection = true) => {
@@ -187,11 +164,18 @@ export default class Preview {
     if (initialSelection && this._checkStory(initialSelection)) {
       story = initialSelection;
     } else if (shouldPersistSelection) {
-      const value = await AsyncStorage.getItem(STORAGE_KEY);
-      const previousStory = JSON.parse(value);
+      try {
+        let value = this._asyncStorageStoryId;
+        if (!value) {
+          value = JSON.parse(await AsyncStorage.getItem(STORAGE_KEY));
+          this._asyncStorageStoryId = value;
+        }
 
-      if (this._checkStory(previousStory)) {
-        story = previousStory;
+        if (this._checkStory(value)) {
+          story = value;
+        }
+      } catch (e) {
+        //
       }
     }
 
@@ -199,43 +183,44 @@ export default class Preview {
       return this._getStory(story);
     }
 
-    const dump = this._stories.dumpStoryBook();
-
-    const nonEmptyKind = dump.find((kind: any) => kind.stories.length > 0);
-    if (nonEmptyKind) {
-      return this._getStory({ kind: nonEmptyKind.kind, story: nonEmptyKind.stories[0] });
+    const stories = this._stories.raw();
+    if (stories && stories.length) {
+      return this._getStory(stories[0].id);
     }
 
     return null;
   };
 
-  _getStory(selection: { kind: string; story: string }) {
-    const { kind, story } = selection;
-    const storyFn = this._stories.getStoryWithContext(kind, story);
-    return { ...selection, storyFn };
+  _getStory(storyId: string) {
+    return this._stories.fromId(storyId);
   }
 
-  _selectStoryEvent(selection: { kind: string; story: string }) {
-    AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(selection));
+  _selectStoryEvent({ storyId }: { storyId: string }) {
+    if (storyId) {
+      try {
+        AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(storyId));
+      } catch (e) {
+        //
+      }
 
-    if (selection) {
-      const story = this._getStory(selection);
+      const story = this._getStory(storyId);
       this._selectStory(story);
     }
   }
 
   _selectStory(story: any) {
-    this.currentStory = story;
     const channel = addons.getChannel();
+
+    this._stories.setSelection(story);
     channel.emit(Events.SELECT_STORY, story);
   }
 
-  _checkStory(selection: any) {
-    if (!selection || typeof selection !== 'object' || !selection.kind || !selection.story) {
+  _checkStory(storyId: string) {
+    if (!storyId) {
       return null;
     }
 
-    const story = this._getStory(selection);
+    const story = this._getStory(storyId);
 
     if (story.storyFn === null) {
       return null;
diff --git a/app/react/package.json b/app/react/package.json
index f86b8b938af..cfbd0dfd747 100644
--- a/app/react/package.json
+++ b/app/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/react",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -29,8 +29,8 @@
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-flow": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
-    "@storybook/core": "5.2.0-alpha.23",
-    "@storybook/node-logger": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
+    "@storybook/node-logger": "5.2.0-alpha.32",
     "@svgr/webpack": "^4.0.3",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-named-asset-import": "^0.3.1",
diff --git a/app/react/src/client/preview/render.js b/app/react/src/client/preview/render.js
index bf5fe9c139a..5abc55c3572 100644
--- a/app/react/src/client/preview/render.js
+++ b/app/react/src/client/preview/render.js
@@ -53,6 +53,7 @@ export default function renderMain({
   if (!forceRender) {
     ReactDOM.unmountComponentAtNode(rootEl);
   }
-  showMain();
+
   render(element, rootEl);
+  showMain();
 }
diff --git a/app/riot/package.json b/app/riot/package.json
index e89be376a7e..097bfab4bde 100644
--- a/app/riot/package.json
+++ b/app/riot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/riot",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for riot.js: View riot snippets in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -25,7 +25,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/svelte/package.json b/app/svelte/package.json
index b2abc4521c5..c9326811050 100644
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/svelte",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/app/vue/package.json b/app/vue/package.json
index a0c164c698a..f1d69b7352a 100644
--- a/app/vue/package.json
+++ b/app/vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/vue",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
   "keywords": [
     "storybook"
@@ -26,7 +26,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/core": "5.2.0-alpha.23",
+    "@storybook/core": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
diff --git a/dev-kits/addon-decorator/package.json b/dev-kits/addon-decorator/package.json
index f999f5b844b..f141364fabe 100644
--- a/dev-kits/addon-decorator/package.json
+++ b/dev-kits/addon-decorator/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-decorator",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "decorator addon for storybook",
   "keywords": [
     "devkit",
@@ -24,8 +24,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
     "global": "^3.0.1",
     "core-js": "^3.0.1"
   },
diff --git a/dev-kits/addon-parameter/package.json b/dev-kits/addon-parameter/package.json
index 50f40cdf3ee..9292006e374 100644
--- a/dev-kits/addon-parameter/package.json
+++ b/dev-kits/addon-parameter/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-parameter",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "parameter addon for storybook",
   "keywords": [
     "devkit",
@@ -8,13 +8,13 @@
     "storybook",
     "parameter"
   ],
-  "homepage": "https://github.com/storybooks/storybook#readme",
+  "homepage": "https://github.com/storybookjs/storybook#readme",
   "bugs": {
-    "url": "https://github.com/storybooks/storybook/issues"
+    "url": "https://github.com/storybookjs/storybook/issues"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/storybooks/storybook.git",
+    "url": "git+https://github.com/storybookjs/storybook.git",
     "directory": "dev-kit/addon-parameter"
   },
   "license": "MIT",
@@ -24,14 +24,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
-    "core-js": "^2.6.5",
+    "core-js": "^3.0.1",
     "global": "^4.3.2",
     "react": "^16.8.3"
   },
diff --git a/dev-kits/addon-roundtrip/package.json b/dev-kits/addon-roundtrip/package.json
index 5aa76046825..7dc38d27338 100644
--- a/dev-kits/addon-roundtrip/package.json
+++ b/dev-kits/addon-roundtrip/package.json
@@ -1,44 +1,44 @@
 {
-    "name": "@storybook/addon-roundtrip",
-    "version": "5.2.0-alpha.23",
-    "description": "roundtrip addon for storybook",
-    "keywords": [
-      "devkit",
-      "addon",
-      "storybook",
-      "roundtrip"
-    ],
-    "homepage": "https://github.com/storybooks/storybook#readme",
-    "bugs": {
-      "url": "https://github.com/storybooks/storybook/issues"
-    },
-    "repository": {
-      "type": "git",
-      "url": "git+https://github.com/storybooks/storybook.git",
-      "directory": "dev-kit/addon-roundtrip"
-    },
-    "license": "MIT",
-    "main": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "scripts": {
-      "prepare": "node ../../scripts/prepare.js"
-    },
-    "dependencies": {
-      "@storybook/addons": "5.2.0-alpha.23",
-      "@storybook/api": "5.2.0-alpha.23",
-      "@storybook/client-logger": "5.2.0-alpha.23",
-      "@storybook/components": "5.2.0-alpha.23",
-      "@storybook/core-events": "5.2.0-alpha.23",
-      "@storybook/theming": "5.2.0-alpha.23",
-      "common-tags": "^1.8.0",
-      "core-js": "^2.6.5",
-      "global": "^4.3.2",
-      "react": "^16.8.3"
-    },
-    "devDependencies": {
-      "@types/common-tags": "^1.8.0"
-    },
-    "publishConfig": {
-      "access": "public"
-    }
+  "name": "@storybook/addon-roundtrip",
+  "version": "5.2.0-alpha.32",
+  "description": "roundtrip addon for storybook",
+  "keywords": [
+    "devkit",
+    "addon",
+    "storybook",
+    "roundtrip"
+  ],
+  "homepage": "https://github.com/storybooks/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/storybooks/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybooks/storybook.git",
+    "directory": "dev-kit/addon-roundtrip"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
+    "common-tags": "^1.8.0",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "react": "^16.8.3"
+  },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
   }
+}
diff --git a/docs/package.json b/docs/package.json
index cafec38329b..6267ab5887e 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -33,11 +33,11 @@
     "gatsby-source-filesystem": "^1.5.39",
     "gatsby-transformer-remark": "^1.7.44",
     "global": "^4.4.0",
-    "html-react-parser": "^0.7.1",
+    "html-react-parser": "^0.8.0",
     "is-builtin-module": "^3.0.0",
     "lodash": "^4.17.11",
     "marked": "^0.6.2",
-    "polished": "^3.4.0",
+    "polished": "^3.4.1",
     "prop-types": "^15.7.2",
     "react": "^16.8.6",
     "react-document-title": "^2.0.3",
@@ -48,7 +48,7 @@
     "react-stack-grid": "^0.7.1",
     "recompose": "^0.30.0",
     "sitemap": "^2.2.0",
-    "styled-components": "^4.3.1",
+    "styled-components": "^4.3.2",
     "validatorjs": "^3.15.1"
   }
 }
diff --git a/docs/src/new-components/basics/tooltip/Tooltip.stories.js b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
index 83750d37514..9c0bfb7094e 100644
--- a/docs/src/new-components/basics/tooltip/Tooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/Tooltip.stories.js
@@ -16,6 +16,9 @@ const Content = styled.div`
 `;
 
 storiesOf('basics/tooltip/Tooltip', module)
+  .addParameters({
+    component: Tooltip,
+  })
   .add('basic, default', () => (
     <Tooltip hasChrome {...mockPopperProps}>
       <Content>Text</Content>
diff --git a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
index c848e50a0de..fe563238920 100644
--- a/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipLinkList.stories.js
@@ -13,6 +13,9 @@ export const links = [
 ];
 
 storiesOf('basics/tooltip/TooltipLinkList', module)
+  .addParameters({
+    component: TooltipLinkList,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
index 28a21b36b3a..ae615685aef 100644
--- a/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipMessage.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
 import TooltipMessage from './TooltipMessage';
 
 storiesOf('basics/tooltip/TooltipMessage', module)
+  .addParameters({
+    component: TooltipMessage,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
index 990b43c1647..ea450f10121 100644
--- a/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
+++ b/docs/src/new-components/basics/tooltip/TooltipNote.stories.js
@@ -5,6 +5,9 @@ import WithTooltip from './WithTooltip';
 import TooltipNote from './TooltipNote';
 
 storiesOf('basics/tooltip/TooltipNote', module)
+  .addParameters({
+    component: TooltipNote,
+  })
   .addDecorator(storyFn => (
     <div style={{ height: '300px' }}>
       <WithTooltip hasChrome={false} placement="top" trigger="click" startOpen tooltip={storyFn()}>
diff --git a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
index 8f5fa1089dd..685fca47716 100644
--- a/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
+++ b/docs/src/new-components/basics/tooltip/WithTooltip.stories.js
@@ -46,6 +46,9 @@ Tooltip.defaultProps = {
 };
 
 storiesOf('basics/tooltip/WithTooltip', module)
+  .addParameters({
+    component: WithTooltip,
+  })
   .addDecorator(storyFn => (
     <ViewPort>
       <BackgroundBox>
diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
index e7722154460..6e4d5338bff 100644
--- a/docs/src/pages/addons/writing-addons/index.md
+++ b/docs/src/pages/addons/writing-addons/index.md
@@ -266,7 +266,7 @@ You can learn more about the complete API [here](/addons/api).
 
 ## Packaging
 
-You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybooks/storybook/tree/master/addons/notes).
+You can package this addon into a NPM module very easily. As an example, have a look at this [package](https://github.com/storybookjs/storybook/tree/master/addons/notes).
 
 In addition to moving the above code to a NPM module, we've set `react` and `@storybook/addons` as peer dependencies.
 
diff --git a/docs/src/pages/configurations/options-parameter/index.md b/docs/src/pages/configurations/options-parameter/index.md
index a7a6c744036..a4586badd35 100644
--- a/docs/src/pages/configurations/options-parameter/index.md
+++ b/docs/src/pages/configurations/options-parameter/index.md
@@ -74,6 +74,14 @@ addParameters({
      * theme storybook, see link below
      */
     theme: undefined,
+    /**
+    * function to sort stories in the tree view
+    * common use is alphabetical `(a, b) => a[1].id.localeCompare(b[1].id)`
+    * if left undefined, then the order in which the stories are imported will
+    * be the order they display
+    * @type {Function}
+    */
+    storySort: undefined
   },
 });
 ```
diff --git a/docs/src/versions/next.json b/docs/src/versions/next.json
index 0bdfed48107..c7ae5988b8e 100644
--- a/docs/src/versions/next.json
+++ b/docs/src/versions/next.json
@@ -1 +1 @@
-{"version":"5.1.0-rc.5","info":{"plain":"### Features\n\n* UI: Add copy button for individual story ([#6719](https://github.com/storybookjs/storybook/pull/6719))\n\n### Bug Fixes\n\n* UI: Fix canvas rendering issue ([#6968](https://github.com/storybookjs/storybook/pull/6968))\n* Angular: Remove zonejs from devDeps; allow ^0.8.0 || ^0.9.0 ([#6957](https://github.com/storybookjs/storybook/pull/6957))\n* Jest: layout/design fixes ([#6847](https://github.com/storybookjs/storybook/pull/6847))\n* Angular: Add 'addParameters' to index.d.ts ([#6929](https://github.com/storybookjs/storybook/pull/6929))\n\n### Maintenance\n\n* FIX race condition in startup of verdaccio && FIX typos ([#6956](https://github.com/storybookjs/storybook/pull/6956))\n* Github org rename to storybookjs ([#6954](https://github.com/storybookjs/storybook/pull/6954))"}}
\ No newline at end of file
+{"version":"5.2.0-alpha.32","info":{"plain":"### Features\n\n* Addon-docs: Add .story.mdx support to preset ([#7229](https://github.com/storybookjs/storybook/pull/7229))\n\n### Bug Fixes\n\n* React-native: Fix react native server ([#7187](https://github.com/storybookjs/storybook/pull/7187))\n* Addon-docs: Fix source-loader in monorepo examples ([#7214](https://github.com/storybookjs/storybook/pull/7214))\n\n### Maintenance\n\n* Addon-docs: Convert repo stories to new module format ([#7175](https://github.com/storybookjs/storybook/pull/7175))"}}
\ No newline at end of file
diff --git a/docs/yarn.lock b/docs/yarn.lock
index fa5fc6f8cc3..56b317a50c5 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2,6 +2,24 @@
 # yarn lockfile v1
 
 
+"@babel/code-frame@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8"
+  integrity sha512-OfC2uemaknXr87bdLUkWog7nYuliM9Ij5HUcajsVcMCpQrcLmtxRbVFTIqmcSkSeYRBFBRxs2FiUqFJDLdiebA==
+  dependencies:
+    "@babel/highlight" "^7.0.0"
+
+"@babel/generator@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
+  integrity sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==
+  dependencies:
+    "@babel/types" "^7.4.4"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -9,6 +27,22 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-function-name@^7.1.0":
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.1.0.tgz#a0ceb01685f73355d4360c1247f582bfafc8ff53"
+  integrity sha512-A95XEoCpb3TO+KZzJ4S/5uW5fNe26DjBGqf1o9ucyLyCmi1dXq/B3c8iaWTfBk3VvetUxl16e8tIrd5teOCfGw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.0.0"
+    "@babel/template" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@babel/helper-get-function-arity@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0.tgz#83572d4320e2a4657263734113c42868b64e49c3"
+  integrity sha512-r2DbJeg4svYvt3HOS74U4eWKsUAMRH01Z1ds1zx8KNTPtpTL5JAsdFv8BNyOpVqdFhHkkRDIg5B4AsxmkjAlmQ==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
 "@babel/helper-module-imports@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0.tgz#96081b7111e486da4d2cd971ad1a4fe216cc2e3d"
@@ -16,6 +50,27 @@
   dependencies:
     "@babel/types" "^7.0.0"
 
+"@babel/helper-split-export-declaration@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.4.4.tgz#ff94894a340be78f53f06af038b205c49d993677"
+  integrity sha512-Ro/XkzLf3JFITkW6b+hNxzZ1n5OQ80NvIUdmHspih1XAhtN3vPTuUFT4eQnela+2MaZ5ulH+iyP513KJrxbN7Q==
+  dependencies:
+    "@babel/types" "^7.4.4"
+
+"@babel/highlight@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
+  integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==
+  dependencies:
+    chalk "^2.0.0"
+    esutils "^2.0.2"
+    js-tokens "^4.0.0"
+
+"@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
+  integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
+
 "@babel/runtime@7.3.4":
   version "7.3.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.3.4.tgz#73d12ba819e365fcf7fd152aed56d6df97d21c83"
@@ -23,19 +78,36 @@
   dependencies:
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5":
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
   integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.4.2":
+"@babel/template@^7.1.0":
   version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.4.tgz#dc2e34982eb236803aa27a07fea6857af1b9171d"
-  integrity sha512-w0+uT71b6Yi7i5SE0co4NioIpSYS6lLiXvCzWzGSKvpK5vdQtCbICHMj+gbAKAOtxiV6HsVh/MBdaF9EQ6faSg==
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.4.4.tgz#f4b88d1225689a08f5bc3a17483545be9e4ed237"
+  integrity sha512-CiGzLN9KgAvgZsnivND7rkA+AeJ9JB0ciPOD4U59GKbQP2iQl+olF1l76kJOupqidozfZ32ghwBEJDhnk9MEcw==
   dependencies:
-    regenerator-runtime "^0.13.2"
+    "@babel/code-frame" "^7.0.0"
+    "@babel/parser" "^7.4.4"
+    "@babel/types" "^7.4.4"
+
+"@babel/traverse@^7.0.0":
+  version "7.4.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216"
+  integrity sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.4.4"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.4.5"
+    "@babel/types" "^7.4.4"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
 
 "@babel/types@^7.0.0":
   version "7.3.4"
@@ -46,6 +118,15 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.4.4":
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
+  integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
 "@emotion/cache@^10.0.9":
   version "10.0.9"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
@@ -81,13 +162,20 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
   integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
 
-"@emotion/is-prop-valid@0.7.3", "@emotion/is-prop-valid@^0.7.3":
+"@emotion/is-prop-valid@0.7.3":
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
   integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
   dependencies:
     "@emotion/memoize" "0.7.1"
 
+"@emotion/is-prop-valid@^0.8.1":
+  version "0.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.1.tgz#6fb3ae2d24f07c8cd090f233e45771d9cd826d48"
+  integrity sha512-Wtaek/KGUP+HusWIa8DqtOR6U/Tl+QIdVkfJQHV3IT6ZImnJwklP5UVVPKZvkfljeFk3Q45CAPJ5N10gJ5XoLA==
+  dependencies:
+    "@emotion/memoize" "0.7.1"
+
 "@emotion/memoize@0.7.1":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
@@ -3121,16 +3209,6 @@ css-what@2.1:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
-css@2.2.4:
-  version "2.2.4"
-  resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
-  integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
-  dependencies:
-    inherits "^2.0.3"
-    source-map "^0.6.1"
-    source-map-resolve "^0.5.2"
-    urix "^0.1.0"
-
 cssesc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/cssesc/-/cssesc-0.1.0.tgz#c814903e45623371a0477b40109aaafbeeaddbb4"
@@ -5238,6 +5316,11 @@ global@~4.3.0:
     min-document "^2.19.0"
     process "~0.5.1"
 
+globals@^11.1.0:
+  version "11.12.0"
+  resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
+  integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
+
 globals@^9.18.0:
   version "9.18.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-9.18.0.tgz#aa3896b3e69b487f17e31ed2143d69a8e30c2d8a"
@@ -5733,10 +5816,10 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/html-comment-regex/-/html-comment-regex-1.1.2.tgz#97d4688aeb5c81886a364faa0cad1dda14d433a7"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
-html-dom-parser@0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-0.2.1.tgz#b8aae59b4637f6964f67fef32a5573d8937efb7a"
-  integrity sha512-frCPJcARlZkBL+TnR2e/6KBRpRnSwe71q/AshHVWlxOuBoMHDm59okd+0eh32KWcji+OulbumYGqMfX3CzmZkw==
+html-dom-parser@0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-0.2.2.tgz#960bdbf82632f11dfa7550c1b6f2aabcd6307243"
+  integrity sha512-8qWXUf0JY8k21oPZIWN9VddADoac+TeNTvFyF/ZJ5JgtzDIt2Fk9uwUHYKkGHnZb2LPj3SeB2V4WK0Hn/MEH/Q==
   dependencies:
     "@types/domhandler" "2.4.1"
     domhandler "2.3.0"
@@ -5747,15 +5830,15 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
-html-react-parser@^0.7.1:
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.7.1.tgz#4230717092e1d2ea486bbe5e6b7f8c955b29cf91"
-  integrity sha512-e1rvyL5F4BjtQ+p89Y00lQem9A6G45WksytIwEpgxr7rVz4tF0vh1+jcQc8JfAjxWh8hOvzt2VCn1rPPpFZsVQ==
+html-react-parser@^0.8.0:
+  version "0.8.0"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-0.8.0.tgz#691a9d31153a87a16eb5ed4d6a08da5b18e0c9de"
+  integrity sha512-R5tkVKQ5pZzPzYUG5GlSoGvrDi46/K04JDwK9iRYVSVkvcF/3fN5JDEwnMmcnh8d9o8moSV7WaU/49TJGghYWg==
   dependencies:
     "@types/domhandler" "2.4.1"
-    html-dom-parser "0.2.1"
+    html-dom-parser "0.2.2"
     react-dom-core "0.1.1"
-    style-to-object "0.2.2"
+    style-to-object "0.2.3"
 
 html-void-elements@^1.0.0, html-void-elements@^1.0.1:
   version "1.0.4"
@@ -5986,6 +6069,11 @@ ini@^1.3.4, ini@~1.3.0:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.5.tgz#eee25f56db1c9ec6085e0c22778083f596abf927"
   integrity sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 inline-style-prefixer@^3.0.6:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-3.0.8.tgz#8551b8e5b4d573244e66a34b04f7d32076a2b534"
@@ -6672,7 +6760,7 @@ js-base64@^2.1.9:
   resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.1.tgz#1efa39ef2c5f7980bb1784ade4a8af2de3291121"
   integrity sha512-M7kLczedRMYX4L8Mdh4MzyAMM9O5osx+4FcOQuTvr3A9F2D9S5JXheN0ewNbrvK2UatkTRhL5ejGmGSjNMiZuw==
 
-"js-tokens@^3.0.0 || ^4.0.0":
+"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
   integrity sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==
@@ -6713,6 +6801,11 @@ jsesc@^1.3.0:
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-1.3.0.tgz#46c3fec8c1892b12b0833db9bc7622176dbab34b"
   integrity sha1-RsP+yMGJKxKwgz25vHYiF226s0s=
 
+jsesc@^2.5.1:
+  version "2.5.2"
+  resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
+  integrity sha512-OYu7XEzjkCQ3C5Ps3QIZsQfNpqoJyZZA99wd9aWd05NCtC5pWOkShK2mkL6HXQR6/Cy2lbNdPlZBpuQHXE63gA==
+
 jsesc@~0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-0.5.0.tgz#e7dee66e35d6fc16f710fe91d5cf69f70f08911d"
@@ -8805,12 +8898,12 @@ pngquant-bin@^3.0.0:
     bin-wrapper "^3.0.0"
     logalot "^2.0.0"
 
-polished@^3.3.1, polished@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.0.tgz#29b2a028ee0408df5dded55a2a25e913bc6749a9"
-  integrity sha512-GiuavmunMIKMOEoSPkXoqBYM2ZcI4YIwCaiwmTOQ55Zq4HG2kD0YZt3WlLZ2l3U9XhJ1LM/fgjCFHHffiZP0YQ==
+polished@^3.3.1, polished@^3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/polished/-/polished-3.4.1.tgz#1eb5597ec1792206365635811d465751f5cbf71c"
+  integrity sha512-GflTnlP5rrpDoigjczEkS6Ye7NDA4sFvAnlr5hSDrEvjiVj97Xzev3hZlLi3UB27fpxyTS9rWU64VzVLWkG+mg==
   dependencies:
-    "@babel/runtime" "^7.4.4"
+    "@babel/runtime" "^7.4.5"
 
 popper.js@^1.14.4, popper.js@^1.14.7:
   version "1.15.0"
@@ -11290,7 +11383,7 @@ source-list-map@^1.1.1:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-1.1.2.tgz#9889019d1024cce55cdc069498337ef6186a11a1"
   integrity sha1-mIkBnRAkzOVc3AaUmDN+9hhqEaE=
 
-source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
+source-map-resolve@^0.5.0:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/source-map-resolve/-/source-map-resolve-0.5.2.tgz#72e2cc34095543e43b2c62b2c4c10d4a9054f259"
   integrity sha512-MjqsvNwyz1s0k81Goz/9vRBe9SZdB09Bdw+/zYyO+3CuPk6fouTaxscHkgtE8jKvf01kVfl8riHzERQ/kefaSA==
@@ -11332,7 +11425,7 @@ source-map@0.5.6:
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.6.tgz#75ce38f52bf0733c5a7f0c118d81334a2bb5f412"
   integrity sha1-dc449SvwczxafwwRjYEzSiu19BI=
 
-source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
+source-map@^0.5.0, source-map@^0.5.3, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -11718,20 +11811,21 @@ style-loader@^0.13.0:
   dependencies:
     loader-utils "^1.0.2"
 
-style-to-object@0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.2.tgz#3ea3b276bd3fa9da1195fcdcdd03bc52aa2aae01"
-  integrity sha512-GcbtvfsqyKmIPpHeOHZ5Rmwsx2MDJct4W9apmTGcbPTbpA2FcgTFl2Z43Hm4Qb61MWGPNK8Chki7ITiY7lLOow==
+style-to-object@0.2.3:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.3.tgz#afcf42bc03846b1e311880c55632a26ad2780bcb"
+  integrity sha512-1d/k4EY2N7jVLOqf2j04dTc37TPOv/hHxZmvpg8Pdh8UYydxeu/C1W1U4vD8alzf5V2Gt7rLsmkr4dxAlDm9ng==
   dependencies:
-    css "2.2.4"
+    inline-style-parser "0.1.1"
 
-styled-components@^4.3.1:
-  version "4.3.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.1.tgz#18c3709f4ed9d582cd206b1acd8b758a211dd114"
-  integrity sha512-04XKQFFSEx3qTeN5I4kiSeajrwG6juDMw2+vUgvfxeXFegE40TuPKS4fFey8RJP1Ii1AoVQVUOglrdUUey0ZHw==
+styled-components@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.3.2.tgz#4ca81918c812d3006f60ac5fdec7d6b64a9509cc"
+  integrity sha512-NppHzIFavZ3TsIU3R1omtddJ0Bv1+j50AKh3ZWyXHuFvJq1I8qkQ5mZ7uQgD89Y8zJNx2qRo6RqAH1BmoVafHw==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.7.3"
+    "@babel/traverse" "^7.0.0"
+    "@emotion/is-prop-valid" "^0.8.1"
     "@emotion/unitless" "^0.7.0"
     babel-plugin-styled-components ">= 1"
     css-to-react-native "^2.2.2"
diff --git a/examples-native/crna-kitchen-sink/App.js b/examples-native/crna-kitchen-sink/App.js
index cf84ee1adb0..cf409b5aa65 100644
--- a/examples-native/crna-kitchen-sink/App.js
+++ b/examples-native/crna-kitchen-sink/App.js
@@ -1,4 +1,6 @@
-export default from './storybook';
+import StorybookUIRoot from './storybook';
+
+export { StorybookUIRoot as default };
 
 // NOTE: The code below is what CRNA generates out of the box. We currently
 // have no clever way of replacing this with Storybook's UI (Vanilla RN does!)
diff --git a/examples-native/crna-kitchen-sink/metro.config.js b/examples-native/crna-kitchen-sink/metro.config.js
index 1f4f7e6fabd..1badc02560c 100644
--- a/examples-native/crna-kitchen-sink/metro.config.js
+++ b/examples-native/crna-kitchen-sink/metro.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 const path = require('path');
 const blacklist = require('metro-config/src/defaults/blacklist');
 
diff --git a/examples-native/crna-kitchen-sink/package.json b/examples-native/crna-kitchen-sink/package.json
index 47d0403452f..63b986df7b1 100644
--- a/examples-native/crna-kitchen-sink/package.json
+++ b/examples-native/crna-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crna-kitchen-sink",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "main": "node_modules/expo/AppEntry.js",
   "scripts": {
@@ -24,14 +24,14 @@
   "devDependencies": {
     "@babel/core": "^7.2.2",
     "@babel/plugin-transform-react-jsx-source": "^7.2.0",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-ondevice-actions": "5.2.0-alpha.23",
-    "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-ondevice-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-ondevice-notes": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/react-native": "5.2.0-alpha.23",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-ondevice-actions": "5.2.0-alpha.32",
+    "@storybook/addon-ondevice-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-ondevice-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-ondevice-notes": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/react-native": "5.2.0-alpha.32",
     "babel-loader": "^8.0.4",
     "babel-plugin-module-resolver": "^3.2.0",
     "babel-preset-expo": "^5.1.1",
diff --git a/examples-native/crna-kitchen-sink/storybook/addons.js b/examples-native/crna-kitchen-sink/storybook/addons.js
index 8741fd55b89..e8a3976c753 100644
--- a/examples-native/crna-kitchen-sink/storybook/addons.js
+++ b/examples-native/crna-kitchen-sink/storybook/addons.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import '@storybook/addon-actions/register';
 import '@storybook/addon-links/register';
 import '@storybook/addon-options/register';
diff --git a/examples-native/crna-kitchen-sink/storybook/stories/index.js b/examples-native/crna-kitchen-sink/storybook/stories/index.js
index 1cc3e1352dc..a4fb250cbda 100644
--- a/examples-native/crna-kitchen-sink/storybook/stories/index.js
+++ b/examples-native/crna-kitchen-sink/storybook/stories/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React from 'react';
 import { Text } from 'react-native';
 
@@ -7,6 +8,7 @@ import { linkTo } from '@storybook/addon-links';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withBackgrounds } from '@storybook/addon-ondevice-backgrounds';
 import knobsWrapper from './Knobs';
+// eslint-disable-next-line import/no-unresolved, import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
@@ -20,15 +22,22 @@ addParameters({
   ],
 });
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
-  notes: `
+storiesOf('Welcome', module)
+  .addParameters({
+    component: Welcome,
+  })
+  .add('to Storybook', () => <Welcome showApp={linkTo('Button')} />, {
+    notes: `
 # Markdown!\n
 * List Item
 * [List Item with Link](https://storybook.js.org)
 `,
-});
+  });
 
 storiesOf('Button', module)
+  .addParameters({
+    component: Button,
+  })
   .addParameters({
     backgrounds: [
       { name: 'dark', value: '#222222' },
diff --git a/examples/angular-cli/package.json b/examples/angular-cli/package.json
index 2b17909bceb..456fce402cc 100644
--- a/examples/angular-cli/package.json
+++ b/examples/angular-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "angular-cli",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "license": "MIT",
   "scripts": {
@@ -34,19 +34,19 @@
     "@angular-devkit/build-angular": "^0.13.4",
     "@angular/cli": "^7.3.6",
     "@angular/compiler-cli": "^7.2.6",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-jest": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/angular": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-jest": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/angular": "5.2.0-alpha.32",
     "@types/core-js": "^2.5.0",
     "@types/jest": "^24.0.11",
     "@types/node": "~12.0.2",
diff --git a/examples/cra-kitchen-sink/.storybook/config.js b/examples/cra-kitchen-sink/.storybook/config.js
index 4561957a6fb..ebbb2759a1a 100644
--- a/examples/cra-kitchen-sink/.storybook/config.js
+++ b/examples/cra-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/react';
+import { load, addParameters, addDecorator } from '@storybook/react';
 import { create } from '@storybook/theming';
 import { withA11y } from '@storybook/addon-a11y';
 
@@ -18,16 +18,8 @@ addParameters({
       brandUrl: 'https://github.com/storybookjs/storybook/tree/master/examples/cra-kitchen-sink',
       gridCellSize: 12,
     }),
+    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories/welcome');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-kitchen-sink/package.json b/examples/cra-kitchen-sink/package.json
index cdc1c2c38ca..4d376348173 100644
--- a/examples/cra-kitchen-sink/package.json
+++ b/examples/cra-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-kitchen-sink",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build": "react-scripts build",
@@ -19,22 +19,22 @@
     "react-lifecycles-compat": "^3.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-events": "5.2.0-alpha.23",
-    "@storybook/addon-info": "5.2.0-alpha.23",
-    "@storybook/addon-jest": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-events": "5.2.0-alpha.32",
+    "@storybook/addon-info": "5.2.0-alpha.32",
+    "@storybook/addon-jest": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "react-scripts": "^3.0.1"
   }
 }
diff --git a/examples/cra-kitchen-sink/src/stories/App.stories.js b/examples/cra-kitchen-sink/src/stories/App.stories.js
index f3e86bdfb9b..953d945c6f4 100644
--- a/examples/cra-kitchen-sink/src/stories/App.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/App.stories.js
@@ -1,8 +1,15 @@
 // FIXME: svgr issue @igor-dv
 
-// import React from 'react';
-// import { storiesOf } from '@storybook/react';
-//
-// import App from '../App';
-//
-// storiesOf('App', module).add('full app', () => <App />);
+import React from 'react';
+
+import App from '../App';
+
+export default {
+  title: 'App',
+};
+
+export const fullApp = () => <App />;
+
+fullApp.story = {
+  name: 'full app',
+};
diff --git a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
index 701812e1e03..0b48d1a4032 100644
--- a/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/Lifecycle.stories.js
@@ -1,5 +1,8 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import LifecycleLogger from '../components/LifecycleLogger';
 
-storiesOf('Lifecycle', module).add('logging', () => <LifecycleLogger />);
+export default {
+  title: 'Lifecycle',
+};
+
+export const logging = () => <LifecycleLogger />;
diff --git a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
index a592f65b26c..214d9e9d9e2 100644
--- a/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ b/examples/cra-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
@@ -63,7 +63,7 @@ exports[`Storyshots Button with new info 1`] = `
           >
             Use the 
             <a
-              href="https://github.com/storybooks/storybook/tree/master/addons/info"
+              href="https://github.com/storybookjs/storybook/tree/master/addons/info"
               rel="noopener noreferrer"
               style="color:#3498db"
               target="_blank"
diff --git a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
index 108e56b2d14..45fb81c1424 100644
--- a/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/cra-dynamic-import.stories.js
@@ -1,9 +1,13 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let Component;
 
-storiesOf('CRA', module).add('Dynamic import', () => {
+export default {
+  title: 'CRA',
+};
+
+export const story1 = () => {
   if (!Component) {
     import('@storybook/react/demo').then(({ Button }) => {
       Component = Button;
@@ -14,4 +18,6 @@ storiesOf('CRA', module).add('Dynamic import', () => {
   }
 
   return <Component>Hello Button</Component>;
-});
+};
+
+story1.story = { name: 'Dynamic import' };
diff --git a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
index 07e1a2d1956..ad1c9edb4f6 100644
--- a/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/force-rerender.stories.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { storiesOf, forceReRender } from '@storybook/react';
+import { forceReRender } from '@storybook/react';
 
 let count = 0;
 const increment = () => {
@@ -7,8 +7,12 @@ const increment = () => {
   forceReRender();
 };
 
-storiesOf('Force ReRender', module).add('button', () => (
+export default {
+  title: 'Force ReRender',
+};
+
+export const button = () => (
   <button type="button" onClick={increment}>
     Click me to increment: {count}
   </button>
-));
+);
diff --git a/examples/cra-kitchen-sink/src/stories/index.stories.js b/examples/cra-kitchen-sink/src/stories/index.stories.js
index f77af5ff862..0f0d2610399 100644
--- a/examples/cra-kitchen-sink/src/stories/index.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/index.stories.js
@@ -1,5 +1,5 @@
+/* eslint-disable react/destructuring-assignment */
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withInfo } from '@storybook/addon-info';
 import { Button } from '@storybook/react/demo';
@@ -23,43 +23,61 @@ const InfoButton = () => (
   </span>
 );
 
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>, {
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked', { depth: 1 })}>Hello Button</Button>;
+story1.story = {
+  name: 'with text',
+  parameters: {
     options: { selectedPanel: 'storybook/actions/panel' },
-  })
-  .add(
-    'with some emoji',
-    () => (
-      <Button onClick={action('clicked')}>
-        <span role="img" aria-label="yolo">
-          😀 😎 👍 💯
-        </span>
-      </Button>
-    ),
-    {
-      options: { selectedPanel: 'storybook/actions/panel' },
-    }
-  )
-  .add('with notes', () => <Button>Check my notes in the notes panel</Button>, {
+  },
+};
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="yolo">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = {
+  name: 'with some emoji',
+  parameters: {
+    options: { selectedPanel: 'storybook/actions/panel' },
+  },
+};
+
+export const story3 = () => <Button>Check my notes in the notes panel</Button>;
+story3.story = {
+  name: 'with notes',
+  parameters: {
     notes: 'A very simple button',
     options: { selectedPanel: 'storybook/notes/panel' },
-  })
-  .add(
-    'with new info',
-    context => (
-      <Container>
-        <span>
-          click the <InfoButton /> label in top right for info about "{context.name}"
-        </span>
-      </Container>
-    ),
-    {
-      notes: 'Composition: Info(Notes())',
-      options: { selectedPanel: 'storybook/info/panel' },
-      decorators: [
-        withInfo(
-          'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
-        ),
-      ],
-    }
-  );
+  },
+};
+
+export const story4 = context => (
+  <Container>
+    <span>
+      click the <InfoButton /> label in top right for info about "{context.name}"
+    </span>
+  </Container>
+);
+story4.story = {
+  name: 'with new info',
+  parameters: {
+    notes: 'Composition: Info(Notes())',
+    options: { selectedPanel: 'storybook/info/panel' },
+    decorators: [
+      withInfo(
+        'Use the [info addon](https://github.com/storybookjs/storybook/tree/master/addons/info) with its new painless API.'
+      ),
+    ],
+  },
+};
diff --git a/examples/cra-kitchen-sink/src/stories/long-description.stories.js b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
index d5d6124ab87..02b61f38868 100644
--- a/examples/cra-kitchen-sink/src/stories/long-description.stories.js
+++ b/examples/cra-kitchen-sink/src/stories/long-description.stories.js
@@ -1,9 +1,12 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import centered from '@storybook/addon-centered/react';
 import { Button } from '@storybook/react/demo';
 
-storiesOf('Some really long story kind description', module)
-  .addDecorator(centered)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>);
+export default {
+  title: 'Some really long story kind description',
+  decorators: [centered],
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };
diff --git a/examples/cra-kitchen-sink/src/stories/welcome.js b/examples/cra-kitchen-sink/src/stories/welcome.js
index 9610f12d04e..cbadd8d9b90 100644
--- a/examples/cra-kitchen-sink/src/stories/welcome.js
+++ b/examples/cra-kitchen-sink/src/stories/welcome.js
@@ -1,6 +1,14 @@
 import React from 'react';
 import { Welcome } from '@storybook/react/demo';
-import { storiesOf } from '@storybook/react';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
+export default {
+  title: 'Welcome',
+
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.title = 'to Storybook';
diff --git a/examples/cra-react15/.storybook/config.js b/examples/cra-react15/.storybook/config.js
index 17104723187..115943f0f4f 100644
--- a/examples/cra-react15/.storybook/config.js
+++ b/examples/cra-react15/.storybook/config.js
@@ -1,14 +1,10 @@
-import { configure, addParameters } from '@storybook/react';
+import { load, addParameters } from '@storybook/react';
 import { create } from '@storybook/theming/create';
 
-function loadStories() {
-  require('../src/stories');
-}
-
 addParameters({
   options: {
     theme: create({ colorPrimary: 'hotpink', colorSecondary: 'orangered' }),
   },
 });
 
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/cra-react15/package.json b/examples/cra-react15/package.json
index 39af8718daf..4930c5dc090 100644
--- a/examples/cra-react15/package.json
+++ b/examples/cra-react15/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-react15",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "dependencies": {
     "babel-loader": "8.0.6",
@@ -19,10 +19,10 @@
     "build-storybook": "build-storybook -s public"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "babel-core": "6",
     "babel-runtime": "6"
   }
diff --git a/examples/cra-react15/src/stories/button.stories.js b/examples/cra-react15/src/stories/button.stories.js
new file mode 100644
index 00000000000..3c443e29464
--- /dev/null
+++ b/examples/cra-react15/src/stories/button.stories.js
@@ -0,0 +1,22 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+story1.story = { name: 'with text' };
+
+export const story2 = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+story2.story = { name: 'with some emoji' };
diff --git a/examples/cra-react15/src/stories/index.js b/examples/cra-react15/src/stories/index.js
deleted file mode 100644
index aa04241802d..00000000000
--- a/examples/cra-react15/src/stories/index.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/cra-react15/src/stories/welcome.stories.js b/examples/cra-react15/src/stories/welcome.stories.js
new file mode 100644
index 00000000000..b32255e0408
--- /dev/null
+++ b/examples/cra-react15/src/stories/welcome.stories.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => <Welcome showApp={linkTo('Button')} />;
+story1.story = { name: 'to Storybook' };
diff --git a/examples/cra-ts-kitchen-sink/package.json b/examples/cra-ts-kitchen-sink/package.json
index 344b2e251fc..9b6f36b6e08 100644
--- a/examples/cra-ts-kitchen-sink/package.json
+++ b/examples/cra-ts-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cra-ts-kitchen-sink",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -14,12 +14,12 @@
     "react-dom": "^16.8.3"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-info": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-info": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
     "@types/enzyme": "^3.9.0",
     "@types/react": "^16.8.3",
     "@types/react-dom": "^16.8.2",
diff --git a/examples/dev-kits/package.json b/examples/dev-kits/package.json
index baf55a3b29c..6b539990bf9 100644
--- a/examples/dev-kits/package.json
+++ b/examples/dev-kits/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/example-devkits",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -8,15 +8,15 @@
     "storybook": "start-storybook -p 9011 -c ./"
   },
   "devDependencies": {
-    "@storybook/addon-decorator": "5.2.0-alpha.23",
-    "@storybook/addon-roundtrip": "5.2.0-alpha.23",
-    "@storybook/addon-parameter": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/node-logger": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addon-decorator": "5.2.0-alpha.32",
+    "@storybook/addon-parameter": "5.2.0-alpha.32",
+    "@storybook/addon-roundtrip": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/node-logger": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.5",
diff --git a/examples/ember-cli/.storybook/config.js b/examples/ember-cli/.storybook/config.js
index e887baca878..06eca1d4f6a 100644
--- a/examples/ember-cli/.storybook/config.js
+++ b/examples/ember-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/ember';
+import { load, addParameters, addDecorator } from '@storybook/ember';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -9,11 +9,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../stories/index.stories');
-
-  const req = require.context('../stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/examples/ember-cli/package.json b/examples/ember-cli/package.json
index 6425b7f9072..a49d4505ef4 100644
--- a/examples/ember-cli/package.json
+++ b/examples/ember-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ember-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build": "ember build",
@@ -15,18 +15,19 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/ember": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/ember": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "babel-loader": "^8",
     "broccoli-asset-rev": "^3.0.0",
     "cross-env": "^5.2.0",
diff --git a/examples/ember-cli/stories/addon-a11y.stories.js b/examples/ember-cli/stories/addon-a11y.stories.js
index 83649432ade..66ca80ec35a 100644
--- a/examples/ember-cli/stories/addon-a11y.stories.js
+++ b/examples/ember-cli/stories/addon-a11y.stories.js
@@ -1,15 +1,22 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { checkA11y } from '@storybook/addon-a11y';
 
-storiesOf('Addon|a11y', module)
-  .addDecorator(checkA11y)
-  .addParameters({ options: { selectedPanel: '@storybook/a11y/panel' } })
-  .add('Default', () => hbs`<button></button>`)
-  .add('Label', () => hbs`<button>Testing the a11y addon</button>`)
-  .add('Disabled', () => hbs`<button disabled>Testing the a11y addon</button>`)
-  .add(
-    'Invalid contrast',
-    () =>
-      hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`
-  );
+export default {
+  title: 'Addon|a11y',
+  decorators: [checkA11y],
+
+  parameters: {
+    options: { selectedPanel: '@storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => hbs`<button></button>`;
+export const Label = () => hbs`<button>Testing the a11y addon</button>`;
+export const Disabled = () => hbs`<button disabled>Testing the a11y addon</button>`;
+
+export const invalidContrast = () =>
+  hbs`<button style="color: black; background-color: brown;">Testing the a11y addon</button>`;
+
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
diff --git a/examples/ember-cli/stories/addon-actions.stories.js b/examples/ember-cli/stories/addon-actions.stories.js
index a85fc34b922..e11f8c8201b 100644
--- a/examples/ember-cli/stories/addon-actions.stories.js
+++ b/examples/ember-cli/stories/addon-actions.stories.js
@@ -1,16 +1,19 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Actions', module)
-  .addParameters({
+export default {
+  title: 'Addon|Actions',
+
+  parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',
     },
-  })
-  .add('button', () => ({
-    template: hbs`<button {{action onClick}}>Click Me</button>`,
-    context: {
-      onClick: action('clicked'),
-    },
-  }));
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button {{action onClick}}>Click Me</button>`,
+  context: {
+    onClick: action('clicked'),
+  },
+});
diff --git a/examples/ember-cli/stories/addon-backgrounds.stories.js b/examples/ember-cli/stories/addon-backgrounds.stories.js
index 18d610d52c5..ea282fa81c5 100644
--- a/examples/ember-cli/stories/addon-backgrounds.stories.js
+++ b/examples/ember-cli/stories/addon-backgrounds.stories.js
@@ -1,16 +1,28 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
-  }))
-  .add('story 2', () => ({
-    template: hbs`<button>This one too!</button>`,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  template: hbs`<button>You should be able to switch backgrounds for this story</button>`,
+});
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => ({
+  template: hbs`<button>This one too!</button>`,
+});
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/ember-cli/stories/addon-centered.stories.js b/examples/ember-cli/stories/addon-centered.stories.js
index f6a46d022c8..3cdd11dee89 100644
--- a/examples/ember-cli/stories/addon-centered.stories.js
+++ b/examples/ember-cli/stories/addon-centered.stories.js
@@ -1,9 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import Centered from '@storybook/addon-centered/ember';
 
-storiesOf('Addon|Centered', module)
-  .addDecorator(Centered)
-  .add('button', () => ({
-    template: hbs`<button>A Button</button>`,
-  }));
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+
+  parameters: {
+    component: Centered,
+  },
+};
+
+export const button = () => ({
+  template: hbs`<button>A Button</button>`,
+});
diff --git a/examples/ember-cli/stories/addon-knobs.stories.js b/examples/ember-cli/stories/addon-knobs.stories.js
index 146d459ac05..f0fcbb19c4d 100644
--- a/examples/ember-cli/stories/addon-knobs.stories.js
+++ b/examples/ember-cli/stories/addon-knobs.stories.js
@@ -1,13 +1,18 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { withKnobs, text, color, boolean } from '@storybook/addon-knobs';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .addParameters({ options: { selectedPanel: 'storybookjs/knobs/panel' } })
-  .add('with text', () => ({
-    template: hbs`
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+
+  parameters: {
+    options: { selectedPanel: 'storybookjs/knobs/panel' },
+  },
+};
+
+export const withText = () => ({
+  template: hbs`
       {{welcome-banner
         style=(if hidden "display: none")
         backgroundColor=backgroundColor
@@ -18,13 +23,17 @@ storiesOf('Addon|Knobs', module)
         click=(action onClick)
       }}
     `,
-    context: {
-      hidden: boolean('hidden', false),
-      backgroundColor: color('backgroundColor', '#FDF4E7'),
-      titleColor: color('titleColor', '#DF4D37'),
-      subTitleColor: color('subTitleColor', '#B8854F'),
-      title: text('title', 'Welcome to storybook'),
-      subtitle: text('subtitle', 'This environment is completely editable'),
-      onClick: action('clicked'),
-    },
-  }));
+  context: {
+    hidden: boolean('hidden', false),
+    backgroundColor: color('backgroundColor', '#FDF4E7'),
+    titleColor: color('titleColor', '#DF4D37'),
+    subTitleColor: color('subTitleColor', '#B8854F'),
+    title: text('title', 'Welcome to storybook'),
+    subtitle: text('subtitle', 'This environment is completely editable'),
+    onClick: action('clicked'),
+  },
+});
+
+withText.story = {
+  name: 'with text',
+};
diff --git a/examples/ember-cli/stories/addon-links.stories.js b/examples/ember-cli/stories/addon-links.stories.js
index 8357abb4156..6e1e16610e2 100644
--- a/examples/ember-cli/stories/addon-links.stories.js
+++ b/examples/ember-cli/stories/addon-links.stories.js
@@ -1,10 +1,17 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Addon|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () => ({
   template: hbs`<button {{action onClick}}>This button brings you to welcome</button>`,
   context: {
     onClick: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/ember-cli/stories/addon-notes.stories.js b/examples/ember-cli/stories/addon-notes.stories.js
index 431fb6ae630..ac437cc6213 100644
--- a/examples/ember-cli/stories/addon-notes.stories.js
+++ b/examples/ember-cli/stories/addon-notes.stories.js
@@ -1,26 +1,32 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export default {
+  title: 'Addon|Notes',
+};
 
-      <em>It's not all that important to be honest, but..</em>
+export const simpleNote = () => ({
+  template: hbs`<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>`,
+});
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => ({
+  template: hbs`<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>`,
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/ember-cli/stories/index.stories.js b/examples/ember-cli/stories/index.stories.js
index 9b0f4314edf..4c194a8a2dd 100644
--- a/examples/ember-cli/stories/index.stories.js
+++ b/examples/ember-cli/stories/index.stories.js
@@ -1,10 +1,15 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 
-storiesOf('Welcome', module)
-  .addParameters({ options: { showPanel: false } })
-  .add('basic', () => ({
-    template: hbs`
+export default {
+  title: 'Welcome',
+
+  parameters: {
+    options: { showPanel: false },
+  },
+};
+
+export const basic = () => ({
+  template: hbs`
         {{welcome-page}}
       `,
-  }));
+});
diff --git a/examples/ember-cli/stories/welcome-banner.stories.js b/examples/ember-cli/stories/welcome-banner.stories.js
index f322ec9bc05..3a914a80b41 100644
--- a/examples/ember-cli/stories/welcome-banner.stories.js
+++ b/examples/ember-cli/stories/welcome-banner.stories.js
@@ -1,8 +1,11 @@
 import hbs from 'htmlbars-inline-precompile';
-import { storiesOf } from '@storybook/ember';
 import { action } from '@storybook/addon-actions';
 
-storiesOf('welcome-banner', module).add('basic', () => ({
+export default {
+  title: 'welcome-banner',
+};
+
+export const basic = () => ({
   template: hbs`
       {{welcome-banner
         backgroundColor=backgroundColor
@@ -21,4 +24,4 @@ storiesOf('welcome-banner', module).add('basic', () => ({
     subtitle: 'This environment is completely editable',
     onClick: action('clicked'),
   },
-}));
+});
diff --git a/examples/html-kitchen-sink/.storybook/config.js b/examples/html-kitchen-sink/.storybook/config.js
index df93c95611e..eeb82641683 100644
--- a/examples/html-kitchen-sink/.storybook/config.js
+++ b/examples/html-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/html';
+import { load, addParameters, addDecorator } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -16,12 +16,4 @@ addParameters({
   },
 });
 
-// automatically import all files ending in *.stories.js
-const req = require.context('../stories', true, /\.stories\.js$/);
-function loadStories() {
-  // Make welcome story default
-  require('../stories/index.stories');
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../stories', true, /\.stories\.js$/), module);
diff --git a/examples/html-kitchen-sink/package.json b/examples/html-kitchen-sink/package.json
index d06a51fdd90..ea7de03bfa1 100644
--- a/examples/html-kitchen-sink/package.json
+++ b/examples/html-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "html-kitchen-sink",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "description": "",
   "keywords": [],
@@ -14,24 +14,25 @@
     "storybook": "start-storybook -p 9006"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-events": "5.2.0-alpha.23",
-    "@storybook/addon-jest": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/core": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/html": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-events": "5.2.0-alpha.32",
+    "@storybook/addon-jest": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/core": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/html": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "eventemitter3": "^3.1.0",
     "format-json": "^1.0.3",
     "global": "^4.3.2"
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
deleted file mode 100644
index 8c979f07574..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-a11y.stories.storyshot
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
-
-exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
-
-exports[`Storyshots Addons|a11y Disabled 1`] = `
-<button
-  disabled=""
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
-exports[`Storyshots Addons|a11y Label 1`] = `
-<button>
-  Testing the a11y addon
-</button>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
deleted file mode 100644
index b5a33580d65..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-actions.stories.storyshot
+++ /dev/null
@@ -1,62 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Hello World 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
-
-        
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
deleted file mode 100644
index 211e0b45345..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
-<span
-  style="color: white"
->
-  You should be able to switch backgrounds for this story
-</span>
-`;
-
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
-<span
-  style="color: white"
->
-  This one too!
-</span>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
deleted file mode 100644
index 681a29fffda..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-centered.stories.storyshot
+++ /dev/null
@@ -1,17 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Centered button in center 1`] = `
-<div
-  id="sb-addon-centered-wrapper"
-  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
->
-  <div
-    id="sb-addon-centered-inner"
-    style="margin: auto; max-height: 100%;"
-  >
-    <button>
-      I am a Button !
-    </button>
-  </div>
-</div>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
deleted file mode 100644
index 84466dd440a..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-events.stories.storyshot
+++ /dev/null
@@ -1,6 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Events Logger 1`] = `
-
-      
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
deleted file mode 100644
index 7c83d5b812b..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-jest.stories.storyshot
+++ /dev/null
@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
deleted file mode 100644
index 7a21a63b844..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-knobs.stories.storyshot
+++ /dev/null
@@ -1,70 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
-<div
-  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
->
-  
-        
-  <h1>
-    My name is Jane,
-  </h1>
-  
-        
-  <h3>
-    today is January 20, 2017
-  </h3>
-  
-        
-  <p>
-    I have a stock of 20 apples, costing $2.25 each.
-  </p>
-  
-        
-  <p>
-    Also, I have:
-  </p>
-  
-        
-  <ul>
-    <li>
-      Laptop
-    </li>
-    <li>
-      Book
-    </li>
-    <li>
-      Whiskey
-    </li>
-  </ul>
-  
-        
-  <p>
-    Nice to meet you!
-  </p>
-  
-      
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
deleted file mode 100644
index b7b58fa7bad..00000000000
--- a/examples/html-kitchen-sink/stories/__snapshots__/addon-notes.stories.storyshot
+++ /dev/null
@@ -1,15 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
-<p>
-  
-        
-  <strong>
-    
-          This is a fragment of HTML
-        
-  </strong>
-  
-      
-</p>
-`;
diff --git a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
similarity index 80%
rename from examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
rename to examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
index 9fc15594022..8b68425a1ea 100644
--- a/examples/html-kitchen-sink/stories/__snapshots__/index.stories.storyshot
+++ b/examples/html-kitchen-sink/stories/__snapshots__/welcome.stories.storyshot
@@ -1,34 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Demo button 1`] = `
-<button>
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Demo heading 1`] = `
-<h1>
-  Hello World
-</h1>
-`;
-
-exports[`Storyshots Demo headings 1`] = `
-<section>
-  <h1>
-    Hello World
-  </h1>
-  <h2>
-    Hello World
-  </h2>
-  <h3>
-    Hello World
-  </h3>
-  <h4>
-    Hello World
-  </h4>
-</section>
-`;
-
 exports[`Storyshots Welcome Welcome 1`] = `
 <div
   class="main"
diff --git a/examples/html-kitchen-sink/stories/addon-a11y.stories.js b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
index d6b2c50319e..d34e5fa623c 100644
--- a/examples/html-kitchen-sink/stories/addon-a11y.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-a11y.stories.js
@@ -1,23 +1,28 @@
 import { document, setTimeout } from 'global';
-import { storiesOf } from '@storybook/html';
 import { withA11y } from '@storybook/addon-a11y';
 
 const text = 'Testing the a11y addon';
 
-storiesOf('Addons|a11y', module)
-  .addDecorator(withA11y)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => `<button></button>`)
-  .add('Label', () => `<button>${text}</button>`)
-  .add('Disabled', () => `<button disabled>${text}</button>`)
-  .add(
-    'Invalid contrast',
-    () => `<button style="color: black; background-color: brown;">${text}</button>`
-  )
-  .add('Delayed render', () => {
-    const div = document.createElement('div');
-    setTimeout(() => {
-      div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
-    }, 1000);
-    return div;
-  });
+export default {
+  title: 'Addons|a11y',
+  decorators: [withA11y],
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => `<button></button>`;
+export const Label = () => `<button>${text}</button>`;
+export const Disabled = () => `<button disabled>${text}</button>`;
+export const story4 = () =>
+  `<button style="color: black; background-color: brown;">${text}</button>`;
+story4.story = { name: 'Invalid contrast' };
+
+export const story5 = () => {
+  const div = document.createElement('div');
+  setTimeout(() => {
+    div.innerHTML = `<button>This button has a delayed render of 1s</button>`;
+  }, 1000);
+  return div;
+};
+story5.story = { name: 'Delayed render' };
diff --git a/examples/html-kitchen-sink/stories/addon-actions.stories.js b/examples/html-kitchen-sink/stories/addon-actions.stories.js
index 09f606d58dd..82008bb1115 100644
--- a/examples/html-kitchen-sink/stories/addon-actions.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-actions.stories.js
@@ -1,34 +1,44 @@
-import { storiesOf } from '@storybook/html';
 import { withActions, decorate } from '@storybook/addon-actions';
 
 const pickTarget = decorate([args => [args[0].target]]);
 
 const button = () => `<button type="button">Hello World</button>`;
 
-storiesOf('Addons|Actions', module)
-  .add('Hello World', () => withActions('click')(button))
-  .add('Multiple actions', () => withActions('click', 'contextmenu')(button))
-  .add('Multiple actions + config', () =>
-    withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
-  )
-  .add('Multiple actions, object', () =>
-    withActions({ click: 'clicked', contextmenu: 'right clicked' })(button)
-  )
-  .add('Multiple actions, selector', () =>
-    withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
-      () => `
+export default {
+  title: 'Addons|Actions',
+};
+
+export const story1 = () => withActions('click')(button);
+story1.story = { name: 'Hello World' };
+export const story2 = () => withActions('click', 'contextmenu')(button);
+story2.story = { name: 'Multiple actions' };
+
+export const story3 = () =>
+  withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story3.story = { name: 'Multiple actions + config' };
+
+export const story4 = () => withActions({ click: 'clicked', contextmenu: 'right clicked' })(button);
+story4.story = { name: 'Multiple actions, object' };
+
+export const story5 = () =>
+  withActions({ 'click .btn': 'clicked', contextmenu: 'right clicked' })(
+    () => `
         <div>
           Clicks on this button will be logged: <button class="btn" type="button">Button</button>
         </div>
       `
-    )
-  )
-  .add('Multiple actions, object + config', () =>
-    withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
-      button
-    )
-  )
-  .add('Decorated actions', () => pickTarget.withActions('click', 'contextmenu')(button))
-  .add('Decorated actions + config', () =>
-    pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button)
   );
+story5.story = { name: 'Multiple actions, selector' };
+
+export const story6 = () =>
+  withActions({ click: 'clicked', contextmenu: 'right clicked' }, { clearOnStoryChange: false })(
+    button
+  );
+story6.story = { name: 'Multiple actions, object + config' };
+
+export const story7 = () => pickTarget.withActions('click', 'contextmenu')(button);
+story7.story = { name: 'Decorated actions' };
+
+export const story8 = () =>
+  pickTarget.withActions('click', 'contextmenu', { clearOnStoryChange: false })(button);
+story8.story = { name: 'Decorated actions + config' };
diff --git a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
index 7e8689f9656..4a63ab1fce6 100644
--- a/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-backgrounds.stories.js
@@ -1,15 +1,16 @@
-import { storiesOf } from '@storybook/html';
-
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add(
-    'story 1',
-    () =>
-      '<span style="color: white">You should be able to switch backgrounds for this story</span>'
-  )
-  .add('story 2', () => '<span style="color: white">This one too!</span>');
+  },
+};
+
+export const story1 = () =>
+  '<span style="color: white">You should be able to switch backgrounds for this story</span>';
+story1.story = { name: 'story 1' };
+
+export const story2 = () => '<span style="color: white">This one too!</span>';
+story2.story = { name: 'story 2' };
diff --git a/examples/html-kitchen-sink/stories/addon-centered.stories.js b/examples/html-kitchen-sink/stories/addon-centered.stories.js
index 49edcdfb482..8242764f7fe 100644
--- a/examples/html-kitchen-sink/stories/addon-centered.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-centered.stories.js
@@ -1,6 +1,9 @@
-import { storiesOf } from '@storybook/html';
 import centered from '@storybook/addon-centered/html';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(centered)
-  .add('button in center', () => '<button>I am a Button !</button>');
+export default {
+  title: 'Addons|Centered',
+  decorators: [centered],
+};
+
+export const story1 = () => '<button>I am a Button !</button>';
+story1.story = { name: 'button in center' };
diff --git a/examples/html-kitchen-sink/stories/addon-events.stories.js b/examples/html-kitchen-sink/stories/addon-events.stories.js
index 4fbac130097..c743cd7f685 100644
--- a/examples/html-kitchen-sink/stories/addon-events.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-events.stories.js
@@ -1,5 +1,4 @@
 import EventEmitter from 'eventemitter3';
-import { storiesOf } from '@storybook/html';
 import addons from '@storybook/addons';
 import { useEffect, useState } from '@storybook/client-api';
 import CoreEvents from '@storybook/core-events';
@@ -19,8 +18,9 @@ const TEST_EVENTS = {
 const emitter = new EventEmitter();
 const emit = emitter.emit.bind(emitter);
 
-storiesOf('Addons|Events', module)
-  .addDecorator(
+export default {
+  title: 'Addons|Events',
+  decorators: [
     withEvents({
       emit,
       events: [
@@ -70,41 +70,43 @@ storiesOf('Addons|Events', module)
           ],
         },
       ],
-    })
-  )
-  .add('Logger', () => {
-    const [events, setEvents] = useState([]);
-    useEffect(() => {
-      const eventHandlers = Object.values(TEST_EVENTS).map(name => ({
-        name,
-        handler: payload => {
-          setEvents(prevEvents => [...prevEvents, { name, payload }]);
-        },
-      }));
-      eventHandlers.forEach(({ name, handler }) => emitter.on(name, handler));
-      return () =>
-        eventHandlers.forEach(({ name, handler }) => emitter.removeListener(name, handler));
-    }, []);
+    }),
+  ],
+};
 
-    return `
-      <div class="wrapper">
-        <h1 class="title">Logger</h1>
-        <dl>
-          ${events
-            .map(
-              ({ name, payload }) => `
-                <div class="item">
-                  <dt>
-                    <b>Event name:</b> ${name}
-                  </dt>
-                  <dd>
-                    <b>Event payload:</b> ${json.plain(payload)}
-                  </dd>
-                </div>
-              `
-            )
-            .join('')}
-        </dl>
-      </div>
-    `;
-  });
+export const Logger = () => {
+  const [events, setEvents] = useState([]);
+  useEffect(() => {
+    const eventHandlers = Object.values(TEST_EVENTS).map(name => ({
+      name,
+      handler: payload => {
+        setEvents(prevEvents => [...prevEvents, { name, payload }]);
+      },
+    }));
+    eventHandlers.forEach(({ name, handler }) => emitter.on(name, handler));
+    return () =>
+      eventHandlers.forEach(({ name, handler }) => emitter.removeListener(name, handler));
+  }, []);
+
+  return `
+    <div class="wrapper">
+      <h1 class="title">Logger</h1>
+      <dl>
+        ${events
+          .map(
+            ({ name, payload }) => `
+              <div class="item">
+                <dt>
+                  <b>Event name:</b> ${name}
+                </dt>
+                <dd>
+                  <b>Event payload:</b> ${json.plain(payload)}
+                </dd>
+              </div>
+            `
+          )
+          .join('')}
+      </dl>
+    </div>
+  `;
+};
diff --git a/examples/html-kitchen-sink/stories/addon-jest.stories.js b/examples/html-kitchen-sink/stories/addon-jest.stories.js
index 11a88e0570e..d39a86527ed 100644
--- a/examples/html-kitchen-sink/stories/addon-jest.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-jest.stories.js
@@ -1,8 +1,10 @@
-import { storiesOf } from '@storybook/html';
-
-import { withTests } from '@storybook/addon-jest';
+import { withTests as wt } from '@storybook/addon-jest';
 import results from './addon-jest.testresults.json';
 
-storiesOf('Addons|Jest', module)
-  .addDecorator(withTests({ results }))
-  .add('withTests', () => 'This story shows test results', { jest: 'addon-jest' });
+export default {
+  title: 'Addons|Jest',
+  decorators: [wt({ results })],
+};
+
+export const withTests = () => 'This story shows test results';
+withTests.parameters = { jest: 'addon-jest' };
diff --git a/examples/html-kitchen-sink/stories/addon-knobs.stories.js b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
index 85a364b5b68..edae4ae8933 100644
--- a/examples/html-kitchen-sink/stories/addon-knobs.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/html';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
 
@@ -15,63 +14,68 @@ import {
 } from '@storybook/addon-knobs';
 
 const cachedContainer = document.createElement('p');
-storiesOf('Addons|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
 
-    return `<div>${content}</div>`;
-  })
-  .add('DOM', () => {
-    const name = text('Name', 'John Doe');
-    const container = document.createElement('p');
-    container.textContent = name;
-    return container;
-  })
-  .add('CSS transitions', () => {
-    const name = text('Name', 'John Doe');
-    const textColor = color('Text color', 'orangered');
-    cachedContainer.textContent = name;
-    cachedContainer.style.transition = 'color 0.5s ease-out';
-    cachedContainer.style.color = textColor;
-    return cachedContainer;
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
 
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
+  return `<div>${content}</div>`;
+};
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+export const DOM = () => {
+  const name = text('Name', 'John Doe');
+  const container = document.createElement('p');
+  container.textContent = name;
+  return container;
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+export const story3 = () => {
+  const name = text('Name', 'John Doe');
+  const textColor = color('Text color', 'orangered');
+  cachedContainer.textContent = name;
+  cachedContainer.style.transition = 'color 0.5s ease-out';
+  cachedContainer.style.color = textColor;
+  return cachedContainer;
+};
+story3.story = { name: 'CSS transitions' };
 
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const story4 = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
 
-    const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
 
-    return `<div style="${style}">
+  button('Arbitrary action', action('You clicked it!'));
+
+  const style = `border: 2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`;
+
+  return `<div style="${style}">
         <h1>My name is ${name},</h1>
         <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
         <p>${stockMessage}</p>
@@ -80,5 +84,8 @@ storiesOf('Addons|Knobs', module)
         <p>${salutation}</p>
       </div>
     `;
-  })
-  .add('XSS safety', () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'));
+};
+story4.story = { name: 'All knobs' };
+
+export const story5 = () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >');
+story5.story = { name: 'XSS safety' };
diff --git a/examples/html-kitchen-sink/stories/addon-notes.stories.js b/examples/html-kitchen-sink/stories/addon-notes.stories.js
index fab6f368a32..8fd33be9c37 100644
--- a/examples/html-kitchen-sink/stories/addon-notes.stories.js
+++ b/examples/html-kitchen-sink/stories/addon-notes.stories.js
@@ -1,14 +1,16 @@
-import { storiesOf } from '@storybook/html';
+export default {
+  title: 'Addons|Notes',
+};
 
-storiesOf('Addons|Notes', module).add(
-  'Simple note',
-  () =>
-    `<p>
-        <strong>
-          This is a fragment of HTML
-        </strong>
-      </p>`,
-  {
+export const story1 = () =>
+  `<p>
+      <strong>
+        This is a fragment of HTML
+      </strong>
+    </p>`;
+story1.story = {
+  name: 'Simple note',
+  parameters: {
     notes: 'My notes on some bold text',
-  }
-);
+  },
+};
diff --git a/examples/html-kitchen-sink/stories/button.stories.js b/examples/html-kitchen-sink/stories/button.stories.js
new file mode 100644
index 00000000000..02ed6aae869
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/button.stories.js
@@ -0,0 +1,17 @@
+import { document } from 'global';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Demo',
+};
+
+export const heading = () => '<h1>Hello World</h1>';
+export const headings = () =>
+  '<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>';
+
+export const button = () => {
+  const btn = document.createElement('button');
+  btn.innerHTML = 'Hello Button';
+  btn.addEventListener('click', action('Click'));
+  return btn;
+};
diff --git a/examples/html-kitchen-sink/stories/index.stories.js b/examples/html-kitchen-sink/stories/index.stories.js
deleted file mode 100644
index 1dcedbdb352..00000000000
--- a/examples/html-kitchen-sink/stories/index.stories.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { document } from 'global';
-import { storiesOf } from '@storybook/html';
-import { action } from '@storybook/addon-actions';
-import { withLinks } from '@storybook/addon-links';
-
-import './welcome.css';
-import welcome from './welcome.html';
-
-storiesOf('Welcome', module)
-  .addDecorator(withLinks)
-  .add('Welcome', () => welcome);
-
-storiesOf('Demo', module)
-  .add('heading', () => '<h1>Hello World</h1>')
-  .add(
-    'headings',
-    () => '<h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><h4>Hello World</h4>'
-  )
-  .add('button', () => {
-    const button = document.createElement('button');
-    button.innerHTML = 'Hello Button';
-    button.addEventListener('click', action('Click'));
-    return button;
-  });
diff --git a/examples/html-kitchen-sink/stories/welcome.stories.js b/examples/html-kitchen-sink/stories/welcome.stories.js
new file mode 100644
index 00000000000..6410a83ee83
--- /dev/null
+++ b/examples/html-kitchen-sink/stories/welcome.stories.js
@@ -0,0 +1,11 @@
+import { withLinks } from '@storybook/addon-links';
+
+import './welcome.css';
+import welcome from './welcome.html';
+
+export default {
+  title: 'Welcome',
+  decorators: [withLinks],
+};
+
+export const Welcome = () => welcome;
diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
new file mode 100644
index 00000000000..0c1b56a014c
--- /dev/null
+++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
@@ -0,0 +1,513 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Hello World 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Actions story1 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story2 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story3 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story4 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story5 1`] = `
+
+        
+`;
+
+exports[`Storyshots Addons|Actions story6 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story7 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story8 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+<span
+  style="color: white"
+>
+  You should be able to switch backgrounds for this story
+</span>
+`;
+
+exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+<span
+  style="color: white"
+>
+  This one too!
+</span>
+`;
+
+exports[`Storyshots Addons|Backgrounds story1 1`] = `
+<span
+  style="color: white"
+>
+  You should be able to switch backgrounds for this story
+</span>
+`;
+
+exports[`Storyshots Addons|Backgrounds story2 1`] = `
+<span
+  style="color: white"
+>
+  This one too!
+</span>
+`;
+
+exports[`Storyshots Addons|Centered button in center 1`] = `
+<div
+  id="sb-addon-centered-wrapper"
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    id="sb-addon-centered-inner"
+    style="margin: auto; max-height: 100%;"
+  >
+    <button>
+      I am a Button !
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Centered story1 1`] = `
+<div
+  id="sb-addon-centered-wrapper"
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    id="sb-addon-centered-inner"
+    style="margin: auto; max-height: 100%;"
+  >
+    <button>
+      I am a Button !
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Events Logger 1`] = `
+
+  
+`;
+
+exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
+
+exports[`Storyshots Addons|Knobs All knobs 1`] = `
+<div
+  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  
+        
+  <h1>
+    My name is Jane,
+  </h1>
+  
+        
+  <h3>
+    today is January 20, 2017
+  </h3>
+  
+        
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+  
+        
+  <p>
+    Also, I have:
+  </p>
+  
+        
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  
+        
+  <p>
+    Nice to meet you!
+  </p>
+  
+      
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
+
+exports[`Storyshots Addons|Knobs story3 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs story4 1`] = `
+<div
+  style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  
+        
+  <h1>
+    My name is Jane,
+  </h1>
+  
+        
+  <h3>
+    today is January 20, 2017
+  </h3>
+  
+        
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+  
+        
+  <p>
+    Also, I have:
+  </p>
+  
+        
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  
+        
+  <p>
+    Nice to meet you!
+  </p>
+  
+      
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs story5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
+
+exports[`Storyshots Addons|Notes Simple note 1`] = `
+<p>
+  
+      
+  <strong>
+    
+        This is a fragment of HTML
+      
+  </strong>
+  
+    
+</p>
+`;
+
+exports[`Storyshots Addons|Notes story1 1`] = `
+<p>
+  
+      
+  <strong>
+    
+        This is a fragment of HTML
+      
+  </strong>
+  
+    
+</p>
+`;
+
+exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
+
+exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
+
+exports[`Storyshots Addons|a11y Disabled 1`] = `
+<button
+  disabled=""
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y Label 1`] = `
+<button>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y story4 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y story5 1`] = `<div />`;
+
+exports[`Storyshots Demo button 1`] = `
+<button>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Demo heading 1`] = `
+<h1>
+  Hello World
+</h1>
+`;
+
+exports[`Storyshots Demo headings 1`] = `
+<section>
+  <h1>
+    Hello World
+  </h1>
+  <h2>
+    Hello World
+  </h2>
+  <h3>
+    Hello World
+  </h3>
+  <h4>
+    Hello World
+  </h4>
+</section>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<div
+  class="main"
+>
+  
+  
+  <h1>
+    Welcome to Storybook for HTML
+  </h1>
+  
+  
+  <p>
+    This is a UI component dev environment for your plain HTML snippets.
+  </p>
+  
+  
+  <p>
+    
+    We've added some basic stories inside the 
+    <code
+      class="code"
+    >
+      stories
+    </code>
+     directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+  
+  
+  <p>
+    
+    See these sample 
+    <a
+      class="link"
+      data-sb-kind="Demo"
+      data-sb-story="button"
+      href="#"
+    >
+      stories
+    </a>
+    
+  
+  </p>
+  
+  
+  <p>
+    <img
+      class="logo"
+      src="logo.svg"
+    />
+  </p>
+  
+  
+  <p>
+    
+    Just like that, you can add your own snippets as stories.
+    
+    <br />
+    
+    You can also edit those snippets and see changes right away.
+    
+    <br />
+    
+  
+  </p>
+  
+  
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+  
+
+</div>
+`;
diff --git a/examples/marko-cli/.storybook/config.js b/examples/marko-cli/.storybook/config.js
index bee4a674354..9964ec17b8e 100644
--- a/examples/marko-cli/.storybook/config.js
+++ b/examples/marko-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/marko';
+import { load, addParameters, addDecorator } from '@storybook/marko';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,13 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  // require('../src/stories/welcome');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/marko-cli/package.json b/examples/marko-cli/package.json
index 57d3538ab5c..cfd96257e4a 100644
--- a/examples/marko-cli/package.json
+++ b/examples/marko-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "marko-cli",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "description": "Demo of how to build an app using marko-starter",
   "repository": {
@@ -24,13 +24,14 @@
     "marko-starter": "^2.0.4"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/marko": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/marko": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "prettier": "^1.16.4",
     "webpack": "^4.33.0"
   }
diff --git a/examples/marko-cli/src/stories/addon-actions.stories.js b/examples/marko-cli/src/stories/addon-actions.stories.js
index 73d25b05d3f..aeb7e22788b 100644
--- a/examples/marko-cli/src/stories/addon-actions.stories.js
+++ b/examples/marko-cli/src/stories/addon-actions.stories.js
@@ -1,7 +1,11 @@
-import { storiesOf } from '@storybook/marko';
 import { action } from '@storybook/addon-actions';
 import Button from '../components/action-button/index.marko';
 
-storiesOf('Addons|Actions/Button', module).add('Simple', () =>
-  Button.renderSync({ click: action('action logged!') })
-);
+export default {
+  title: 'Addons|Actions/Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const Simple = () => Button.renderSync({ click: action('action logged!') });
diff --git a/examples/marko-cli/src/stories/addon-knobs.stories.js b/examples/marko-cli/src/stories/addon-knobs.stories.js
index 5c44b59e9fc..88595ecee27 100644
--- a/examples/marko-cli/src/stories/addon-knobs.stories.js
+++ b/examples/marko-cli/src/stories/addon-knobs.stories.js
@@ -1,15 +1,20 @@
-import { storiesOf } from '@storybook/marko';
 import { withKnobs, text, number } from '@storybook/addon-knobs';
 import Hello from '../components/hello/index.marko';
 
-storiesOf('Addons|Knobs/Hello', module)
-  .addParameters({ options: { panelPosition: 'right' } })
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    return Hello.renderSync({
-      name,
-      age,
-    });
+export default {
+  title: 'Addons|Knobs/Hello',
+  decorators: [withKnobs],
+  parameters: {
+    component: Hello,
+    options: { panelPosition: 'right' },
+  },
+};
+
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  return Hello.renderSync({
+    name,
+    age,
   });
+};
diff --git a/examples/marko-cli/src/stories/clickcount.stories.js b/examples/marko-cli/src/stories/clickcount.stories.js
new file mode 100644
index 00000000000..351c07daca6
--- /dev/null
+++ b/examples/marko-cli/src/stories/clickcount.stories.js
@@ -0,0 +1,11 @@
+import ClickCount from '../components/click-count/index.marko';
+
+export default {
+  title: 'Main|ClickCount',
+
+  parameters: {
+    component: ClickCount,
+  },
+};
+
+export const Simple = () => ClickCount.renderSync({});
diff --git a/examples/marko-cli/src/stories/hello.stories.js b/examples/marko-cli/src/stories/hello.stories.js
new file mode 100644
index 00000000000..bdefe281dc1
--- /dev/null
+++ b/examples/marko-cli/src/stories/hello.stories.js
@@ -0,0 +1,12 @@
+import Hello from '../components/hello/index.marko';
+
+export default {
+  title: 'Main|Hello',
+  parameters: {
+    component: Hello,
+  },
+};
+
+export const Simple = () => Hello.renderSync({ name: 'abc', age: 20 });
+export const story2 = () => 'NOT A MARKO RENDER_RESULT';
+story2.story = { name: 'with ERROR!' };
diff --git a/examples/marko-cli/src/stories/index.stories.js b/examples/marko-cli/src/stories/index.stories.js
deleted file mode 100644
index 8ef9e6d38cb..00000000000
--- a/examples/marko-cli/src/stories/index.stories.js
+++ /dev/null
@@ -1,15 +0,0 @@
-import { storiesOf } from '@storybook/marko';
-import Hello from '../components/hello/index.marko';
-import ClickCount from '../components/click-count/index.marko';
-import StopWatch from '../components/stop-watch/index.marko';
-import Welcome from '../components/welcome/index.marko';
-
-storiesOf('Main|Welcome', module).add('welcome', () => Welcome.renderSync({}));
-
-storiesOf('Main|Hello', module)
-  .add('Simple', () => Hello.renderSync({ name: 'abc', age: 20 }))
-  .add('with ERROR!', () => 'NOT A MARKO RENDER_RESULT');
-
-storiesOf('Main|ClickCount', module).add('Simple', () => ClickCount.renderSync({}));
-
-storiesOf('Main|StopWatch', module).add('Simple', () => StopWatch.renderSync({}));
diff --git a/examples/marko-cli/src/stories/stopwatch.stories.js b/examples/marko-cli/src/stories/stopwatch.stories.js
new file mode 100644
index 00000000000..3fc37effb06
--- /dev/null
+++ b/examples/marko-cli/src/stories/stopwatch.stories.js
@@ -0,0 +1,10 @@
+import StopWatch from '../components/stop-watch/index.marko';
+
+export default {
+  title: 'Main|StopWatch',
+  parameters: {
+    component: StopWatch,
+  },
+};
+
+export const Simple = () => StopWatch.renderSync({});
diff --git a/examples/marko-cli/src/stories/welcome.stories.js b/examples/marko-cli/src/stories/welcome.stories.js
new file mode 100644
index 00000000000..9cd2db67709
--- /dev/null
+++ b/examples/marko-cli/src/stories/welcome.stories.js
@@ -0,0 +1,10 @@
+import Welcome from '../components/welcome/index.marko';
+
+export default {
+  title: 'Main|Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const welcome = () => Welcome.renderSync({});
diff --git a/examples/mithril-kitchen-sink/.storybook/config.js b/examples/mithril-kitchen-sink/.storybook/config.js
index 1155598a41c..952cb333b8c 100644
--- a/examples/mithril-kitchen-sink/.storybook/config.js
+++ b/examples/mithril-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/mithril';
+import { load, addParameters, addDecorator } from '@storybook/mithril';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,9 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/mithril-kitchen-sink/package.json b/examples/mithril-kitchen-sink/package.json
index ea7802446a9..f43ee259f0f 100644
--- a/examples/mithril-kitchen-sink/package.json
+++ b/examples/mithril-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mithril-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -11,19 +11,20 @@
     "mithril": "^1.1.6"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/mithril": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/mithril": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "webpack": "^4.33.0"
   }
 }
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
index 358031795d4..58e06373596 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,37 +1,44 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import { action, actions } from '@storybook/addon-actions';
 import Button from '../Button';
 
-storiesOf('Addons|Actions', module)
-  .add('Action only', () => ({
-    view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
-  }))
-  .add('Multiple actions', () => ({
-    view: () => (
-      <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
-    ),
-  }))
-  .add('Multiple actions, object', () => ({
-    view: () => (
-      <Button {...actions({ onclick: 'clicked', ondblclick: 'double clicked' })}>
-        (Double) click me to log the action
-      </Button>
-    ),
-  }))
+export default {
+  title: 'Addons|Actions',
+};
 
-  .add('Action and method', () => ({
-    view: () => (
-      <Button
-        onclick={e => {
-          e.preventDefault();
-          action('log2')(e.target);
-        }}
-      >
-        Click me to log the action
-      </Button>
-    ),
-  }));
+export const story1 = () => ({
+  view: () => <Button onclick={action('logo1')}>Click me to log the action</Button>,
+});
+story1.story = { name: 'Action only' };
+
+export const story2 = () => ({
+  view: () => (
+    <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
+  ),
+});
+story2.story = { name: 'Multiple actions' };
+
+export const story3 = () => ({
+  view: () => (
+    <Button {...actions({ onclick: 'clicked', ondblclick: 'double clicked' })}>
+      (Double) click me to log the action
+    </Button>
+  ),
+});
+story3.story = { name: 'Multiple actions, object' };
+
+export const story4 = () => ({
+  view: () => (
+    <Button
+      onclick={e => {
+        e.preventDefault();
+        action('log2')(e.target);
+      }}
+    >
+      Click me to log the action
+    </Button>
+  ),
+});
+story4.story = { name: 'Action and method' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
index ea67de2836c..2a6e62c39d3 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,21 +1,24 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-
 import BaseButton from '../BaseButton';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
-  }))
-  .add('story 2', () => ({
-    view: () => <BaseButton label="This one too!" />,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  view: () => <BaseButton label="You should be able to switch backgrounds for this story" />,
+});
+story1.story = { name: 'story 1' };
+
+export const story2 = () => ({
+  view: () => <BaseButton label="This one too!" />,
+});
+story2.story = { name: 'story 2' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
index e97deabdef5..f646d74b4a2 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,13 +1,17 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import Centered from '@storybook/addon-centered/mithril';
 import Button from '../Button';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(Centered)
-  .add('button', () => ({
-    view: () => <Button>A button</Button>,
-  }));
+export default {
+  title: 'Addons|Centered',
+  decorators: [Centered],
+  parameters: {
+    component: Centered,
+  },
+};
+
+export const button = () => ({
+  view: () => <Button>A button</Button>,
+});
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
index 244a3bd8a50..6d08bc923f1 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,8 +1,6 @@
 /** @jsx m */
 
 import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -16,63 +14,70 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addons|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
 
-    return {
-      view: () => <div>{content}</div>,
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return {
+    view: () => <div>{content}</div>,
+  };
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const story2 = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    return {
-      view: () => (
-        <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
-          <h1>My name is {name},</h1>
-          <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-          <p>{stockMessage}</p>
-          <p>Also, I have:</p>
-          <ul>
-            {items.map(item => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
-          <p>{salutation}</p>
-        </div>
-      ),
-    };
-  })
-  .add('XSS safety', () => ({
-    view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
-  }));
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return {
+    view: () => (
+      <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
+        <h1>My name is {name},</h1>
+        <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+        <p>{stockMessage}</p>
+        <p>Also, I have:</p>
+        <ul>
+          {items.map(item => (
+            <li key={item}>{item}</li>
+          ))}
+        </ul>
+        <p>{salutation}</p>
+      </div>
+    ),
+  };
+};
+story2.story = { name: 'All knobs' };
+
+export const story3 = () => ({
+  view: () => text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >'),
+});
+story3.story = { name: 'XSS safety' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
index 51e78629336..63ea9c04ab5 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-links.stories.js
@@ -2,10 +2,14 @@
 
 import m from 'mithril';
 
-import { storiesOf } from '@storybook/mithril';
 import { linkTo } from '@storybook/addon-links';
 import Button from '../Button';
 
-storiesOf('Addons|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addons|Links',
+};
+
+export const story1 = () => ({
   view: () => <Button onclick={linkTo('Welcome')}>This buttons links to Welcome</Button>,
-}));
+});
+story1.story = { name: 'Go to welcome' };
diff --git a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
index 4e5287f1aeb..6af53269ecd 100644
--- a/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/mithril-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,47 +1,52 @@
 /** @jsx m */
 
 import m from 'mithril';
-import { storiesOf } from '@storybook/mithril';
 
-storiesOf('Addons|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      view: () => (
-        <p>
-          <strong>
-            Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam
-            sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec
-            consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus
-            arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at
-            fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam,
-            efficitur pulvinar mi urna id urna.
-          </strong>
-        </p>
-      ),
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      view: () => (
-        <p>
-          <span>🤔😳😯😮</span>
-          <br />
-          <span>😄😩😓😱</span>
-          <br />
-          <span>🤓😑😶😊</span>
-        </p>
-      ),
-    }),
-    {
-      notes: `
-        <h2>My notes on emojies</h2>
+export default {
+  title: 'Addons|Notes',
+};
 
-        <em>It's not all that important to be honest, but..</em>
+export const story1 = () => ({
+  view: () => (
+    <p>
+      <strong>
+        Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
+        vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
+        velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
+        amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
+        sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi
+        urna id urna.
+      </strong>
+    </p>
+  ),
+});
 
-        Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-      `,
-    }
-  );
+story1.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const story2 = () => ({
+  view: () => (
+    <p>
+      <span>🤔😳😯😮</span>
+      <br />
+      <span>😄😩😓😱</span>
+      <br />
+      <span>🤓😑😶😊</span>
+    </p>
+  ),
+});
+
+story2.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/mithril-kitchen-sink/src/stories/button.stories.js b/examples/mithril-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 00000000000..ef051b16dec
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,28 @@
+import m from 'mithril';
+
+import { action } from '@storybook/addon-actions';
+import { linkTo } from '@storybook/addon-links';
+
+import Button from '../Button';
+
+export default {
+  title: 'Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const story1 = () => ({
+  view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
+});
+story1.story = { name: 'with text' };
+
+export const story2 = () => ({
+  view: () =>
+    m(
+      Button,
+      { onclick: action('clicked') },
+      m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
+    ),
+});
+story2.story = { name: 'with some emoji' };
diff --git a/examples/mithril-kitchen-sink/src/stories/index.stories.js b/examples/mithril-kitchen-sink/src/stories/index.stories.js
deleted file mode 100644
index a0952e562bf..00000000000
--- a/examples/mithril-kitchen-sink/src/stories/index.stories.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import m from 'mithril';
-
-import { storiesOf } from '@storybook/mithril';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Button from '../Button';
-import Welcome from '../Welcome';
-
-storiesOf('Welcome', module).add('to Storybook', () => ({
-  view: () => m(Welcome, { showApp: linkTo('Button') }),
-}));
-
-storiesOf('Button', module)
-  .add('with text', () => ({
-    view: () => m(Button, { onclick: action('clicked') }, 'Hello Button'),
-  }))
-  .add('with some emoji', () => ({
-    view: () =>
-      m(
-        Button,
-        { onclick: action('clicked') },
-        m('span', { role: 'img', ariaLabel: 'so cool' }, '😀 😎 👍 💯')
-      ),
-  }));
diff --git a/examples/mithril-kitchen-sink/src/stories/welcome.stories.js b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 00000000000..a67ad2aa91a
--- /dev/null
+++ b/examples/mithril-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,15 @@
+import m from 'mithril';
+import { linkTo } from '@storybook/addon-links';
+import Welcome from '../Welcome';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const story1 = () => ({
+  view: () => m(Welcome, { showApp: linkTo('Button') }),
+});
+story1.story = { name: 'to Storybook' };
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 2e996bd8c0c..ae4db10692d 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { load, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
+import { DocsPage } from '@storybook/addon-docs/blocks';
 
 import { withCssResources } from '@storybook/addon-cssresources';
 import { withA11y } from '@storybook/addon-a11y';
@@ -49,15 +50,17 @@ addParameters({
   options: {
     hierarchySeparator: /\/|\./,
     hierarchyRootSeparator: '|',
-    theme: { base: 'light', brandTitle: 'Storybook!' },
+    theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },
     { name: 'light', value: '#eeeeee' },
     { name: 'dark', value: '#222222' },
   ],
+  docs: DocsPage,
 });
 
 load(require.context('../../lib/ui/src', true, /\.stories\.js$/), module);
 load(require.context('../../lib/components/src', true, /\.stories\.tsx?$/), module);
 load(require.context('./stories', true, /\.stories\.js$/), module);
+load(require.context('./stories', true, /\.stories\.mdx$/), module);
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 68da0571779..8b2d308072e 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "official-storybook",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -c ./ -s built-storybooks",
@@ -15,33 +15,34 @@
   },
   "devDependencies": {
     "@packtracker/webpack-plugin": "^2.0.1",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-contexts": "5.2.0-alpha.23",
-    "@storybook/addon-cssresources": "5.2.0-alpha.23",
-    "@storybook/addon-design-assets": "5.2.0-alpha.23",
-    "@storybook/addon-docs": "5.2.0-alpha.23",
-    "@storybook/addon-events": "5.2.0-alpha.23",
-    "@storybook/addon-graphql": "5.2.0-alpha.23",
-    "@storybook/addon-info": "5.2.0-alpha.23",
-    "@storybook/addon-jest": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-queryparams": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/node-logger": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-contexts": "5.2.0-alpha.32",
+    "@storybook/addon-cssresources": "5.2.0-alpha.32",
+    "@storybook/addon-design-assets": "5.2.0-alpha.32",
+    "@storybook/addon-docs": "5.2.0-alpha.32",
+    "@storybook/addon-events": "5.2.0-alpha.32",
+    "@storybook/addon-graphql": "5.2.0-alpha.32",
+    "@storybook/addon-info": "5.2.0-alpha.32",
+    "@storybook/addon-jest": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-queryparams": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots-puppeteer": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/node-logger": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.5",
diff --git a/examples/official-storybook/presets.js b/examples/official-storybook/presets.js
new file mode 100644
index 00000000000..b1d463490f6
--- /dev/null
+++ b/examples/official-storybook/presets.js
@@ -0,0 +1 @@
+module.exports = ['@storybook/addon-docs/react/preset'];
diff --git a/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
deleted file mode 100644
index e7ee2efa9cd..00000000000
--- a/examples/official-storybook/stories/__snapshots__/addon-docs.stories.storyshot
+++ /dev/null
@@ -1,7 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Addons|Docs default 1`] = `
-<div>
-  Click the docs tab to see the docs
-</div>
-`;
diff --git a/examples/official-storybook/stories/addon-a11y.stories.js b/examples/official-storybook/stories/addon-a11y.stories.js
deleted file mode 100644
index a4717e3ec9e..00000000000
--- a/examples/official-storybook/stories/addon-a11y.stories.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { Form } from '@storybook/components';
-import BaseButton from '../components/BaseButton';
-import DelayedRender from '../components/DelayedRender';
-import Button from '../components/addon-a11y/Button';
-
-const text = 'Testing the a11y addon';
-const image = 'http://placehold.it/350x150';
-// eslint-disable-next-line no-script-url
-const href = 'javascript:void 0';
-
-storiesOf('Addons|A11y/BaseButton', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => <BaseButton label="" />)
-  .add('Label', () => <BaseButton label={text} />)
-  .add('Disabled', () => <BaseButton disabled label={text} />)
-  .add('Invalid contrast', () => (
-    // FIXME: has no effect on score
-    <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
-  ))
-  .add('delayed render', () => (
-    <DelayedRender>
-      <BaseButton label="This button has a delayed render of 1s" />
-    </DelayedRender>
-  ));
-
-storiesOf('Addons|A11y/Button', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Default', () => <Button />)
-  .add('Content', () => <Button content={text} />)
-  .add('Label', () => <Button label={text} />)
-  .add('Disabled', () => <Button disabled content={text} />)
-  .add('Invalid contrast', () => <Button contrast="wrong" content={text} />);
-
-storiesOf('Addons|A11y/Form', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Without Label', () => (
-    <Form.Field label="">
-      <Form.Input />
-    </Form.Field>
-  ))
-  .add('With label', () => (
-    <Form.Field label={text}>
-      <Form.Input id="1" />
-    </Form.Field>
-  ))
-  .add('With placeholder', () => (
-    <Form.Field label="">
-      <Form.Input id="1" placeholder={text} />
-    </Form.Field>
-  ));
-
-storiesOf('Addons|A11y/Image', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  /* eslint-disable jsx-a11y/alt-text */
-  .add('Without alt', () => <img src={image} />)
-  .add('Without alt but unchecked', () => <img src={image} />, {
-    a11y: {
-      config: {
-        disableOtherRules: true,
-        rules: [],
-      },
-      options: {},
-    },
-  })
-  .add('With alt', () => <img src={image} alt={text} />)
-  .add('Presentation', () => <img role="presentation" src={image} />);
-
-storiesOf('Addons|A11y/Typography', module)
-  .addParameters({ options: { selectedPanel: 'storybook/a11y/panel' } })
-  .add('Correct', () => (
-    <Fragment>
-      <h1>{text}</h1>
-      <p>{text}</p>
-      <a href={href}>{`${text}...`}</a>
-    </Fragment>
-  ))
-  /* eslint-disable jsx-a11y/heading-has-content */
-  .add('Empty Heading', () => <h1 />)
-  .add('Empty Paragraph', () => <p />)
-  /* eslint-disable jsx-a11y/anchor-has-content */
-  .add('Empty Link', () => <a href={href} />)
-  /* eslint-disable jsx-a11y/anchor-is-valid */
-  .add('Link without href', () => <a>{`${text}...`}</a>);
diff --git a/examples/official-storybook/stories/addon-a11y/base-button.stories.js b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
new file mode 100644
index 00000000000..5aa1e2e528d
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/base-button.stories.js
@@ -0,0 +1,34 @@
+import React from 'react';
+import BaseButton from '../../components/BaseButton';
+import DelayedRender from '../../components/DelayedRender';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/BaseButton',
+  parameters: {
+    component: BaseButton,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => <BaseButton label="" />;
+export const Label = () => <BaseButton label={text} />;
+export const Disabled = () => <BaseButton disabled label={text} />;
+
+export const invalidContrast = () => (
+  // FIXME: has no effect on score
+  <BaseButton style={{ color: 'black', backgroundColor: 'black' }} label={text} />
+);
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
+
+export const delayedRender = () => (
+  <DelayedRender>
+    <BaseButton label="This button has a delayed render of 1s" />
+  </DelayedRender>
+);
+delayedRender.story = {
+  name: 'delayed render',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/button.stories.js b/examples/official-storybook/stories/addon-a11y/button.stories.js
new file mode 100644
index 00000000000..f3eaeffbb2a
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/button.stories.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '../../components/addon-a11y/Button';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/Button',
+  parameters: {
+    component: Button,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Default = () => <Button />;
+export const Content = () => <Button content={text} />;
+export const Label = () => <Button label={text} />;
+export const Disabled = () => <Button disabled content={text} />;
+export const invalidContrast = () => <Button contrast="wrong" content={text} />;
+invalidContrast.story = {
+  name: 'Invalid contrast',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/form.stories.js b/examples/official-storybook/stories/addon-a11y/form.stories.js
new file mode 100644
index 00000000000..ee7a7d2bd60
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/form.stories.js
@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { Form } from '@storybook/components';
+
+const text = 'Testing the a11y addon';
+
+export default {
+  title: 'Addons|A11y/Form',
+  parameters: {
+    component: Form,
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const withoutLabel = () => (
+  <Form.Field label="">
+    <Form.Input />
+  </Form.Field>
+);
+withoutLabel.story = {
+  name: 'Without Label',
+};
+
+export const withLabel = () => (
+  <Form.Field label={text}>
+    <Form.Input id="1" />
+  </Form.Field>
+);
+withLabel.story = {
+  name: 'With label',
+};
+
+export const withPlaceholder = () => (
+  <Form.Field label="">
+    <Form.Input id="1" placeholder={text} />
+  </Form.Field>
+);
+withPlaceholder.story = {
+  name: 'With placeholder',
+};
diff --git a/examples/official-storybook/stories/addon-a11y/image.stories.js b/examples/official-storybook/stories/addon-a11y/image.stories.js
new file mode 100644
index 00000000000..49961fd9330
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/image.stories.js
@@ -0,0 +1,38 @@
+/* eslint-disable */
+import React from 'react';
+
+const text = 'Testing the a11y addon';
+const image = 'http://placehold.it/350x150';
+
+export default {
+  title: 'Addons|A11y/Image',
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const withoutAlt = () => <img src={image} />;
+withoutAlt.story = {
+  name: 'Without alt',
+};
+
+export const withoutAltButUnchecked = () => <img src={image} />;
+withoutAltButUnchecked.story = {
+  name: 'Without alt but unchecked',
+  parameters: {
+    a11y: {
+      config: {
+        disableOtherRules: true,
+        rules: [],
+      },
+      options: {},
+    },
+  },
+};
+
+export const withAlt = () => <img src={image} alt={text} />;
+withAlt.story = {
+  name: 'With alt',
+};
+
+export const Presentation = () => <img role="presentation" src={image} />;
diff --git a/examples/official-storybook/stories/addon-a11y/typography.stories.js b/examples/official-storybook/stories/addon-a11y/typography.stories.js
new file mode 100644
index 00000000000..a147933e190
--- /dev/null
+++ b/examples/official-storybook/stories/addon-a11y/typography.stories.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React, { Fragment } from 'react';
+
+const text = 'Testing the a11y addon';
+const href = 'javascript:void 0';
+
+export default {
+  title: 'Addons|A11y/Typography',
+  parameters: {
+    options: { selectedPanel: 'storybook/a11y/panel' },
+  },
+};
+
+export const Correct = () => (
+  <Fragment>
+    <h1>{text}</h1>
+    <p>{text}</p>
+    <a href={href}>{`${text}...`}</a>
+  </Fragment>
+);
+
+export const emptyHeading = () => <h1 />;
+
+emptyHeading.story = {
+  name: 'Empty Heading',
+};
+
+export const emptyParagraph = () => <p />;
+
+emptyParagraph.story = {
+  name: 'Empty Paragraph',
+};
+
+export const emptyLink = () => <a href={href} />;
+
+emptyLink.story = {
+  name: 'Empty Link',
+};
+
+export const linkWithoutHref = () => <a>{`${text}...`}</a>;
+
+linkWithoutHref.story = {
+  name: 'Link without href',
+};
diff --git a/examples/official-storybook/stories/addon-actions.stories.js b/examples/official-storybook/stories/addon-actions.stories.js
index a5a00ef7109..88d87745f9c 100644
--- a/examples/official-storybook/stories/addon-actions.stories.js
+++ b/examples/official-storybook/stories/addon-actions.stories.js
@@ -1,6 +1,5 @@
 import { window, File } from 'global';
 import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
 import {
   action,
   actions,
@@ -15,152 +14,216 @@ const { Button } = Form;
 const pickNative = decorate([args => [args[0].nativeEvent]]);
 const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
 
-storiesOf('Addons|Actions', module)
-  .addParameters({
+export default {
+  title: 'Addons|Actions',
+  parameters: {
     options: {
       selectedPanel: 'storybook/actions/panel',
     },
-  })
+  },
+};
 
-  .add('Basic example', () => <Button onClick={action('hello-world')}>Hello World</Button>)
-  .add('Multiple actions', () => (
-    <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
-  ))
-  .add('Multiple actions + config', () => (
-    <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Multiple actions as object', () => (
-    <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
-  ))
-  .add('Multiple actions, object + config', () => (
-    <Button
-      {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
-    >
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Decorated action', () => (
-    <Button onClick={pickNative.action('decorated')}>Native Event</Button>
-  ))
-  .add('Decorated action + config', () => (
-    <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Decorated actions', () => (
-    <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
-  ))
-  .add('Decorated actions + config', () => (
-    <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
-      Moving away from this story will persist the action logger
-    </Button>
-  ))
-  .add('Circular Payload', () => {
-    const circular = { foo: {} };
-    circular.foo.circular = circular;
-    return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
-  })
-  .add('Reserved keyword as name', () => <Button onClick={action('delete')}>Delete</Button>)
-  .add('All types', () => {
-    function A() {}
-    function B() {}
+export const basicExample = () => <Button onClick={action('hello-world')}>Hello World</Button>;
 
-    const bound = B.bind({});
+basicExample.story = {
+  name: 'Basic example',
+};
 
-    let file;
-    try {
-      file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
-    } catch (error) {
-      file = error;
-    }
-    const reg = /fooBar/g;
+export const multipleActions = () => (
+  <Button {...actions('onClick', 'onMouseOver')}>Hello World</Button>
+);
 
-    return (
-      <Fragment>
-        <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
-        <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
-        <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
-        <Button onClick={() => action('File')(file)}>File</Button>
-        <Button onClick={() => action('Function')(A)}>Function A</Button>
-        <Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
-        <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
-        <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
-        <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
-        <Button onClick={() => action('null')(null)}>null</Button>
-        <Button onClick={() => action('Number')(10000)}>Number</Button>
-        <Button
-          onClick={() =>
-            action('Multiple')(
-              'foo',
-              1000,
-              true,
-              false,
-              [1, 2, 3],
-              null,
-              undefined,
-              { foo: 'bar' },
-              window
-            )
-          }
-        >
-          Multiple
-        </Button>
-        <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
-          Plain Object
-        </Button>
-        <Button
-          onClick={() =>
-            action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
-          }
-        >
-          Object (depth: 2)
-        </Button>
-        <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
-        <Button onClick={() => action('String')('foo')}>String</Button>
-        <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
-        <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
-        <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
-        <Button onClick={() => action('window')(window)}>Window</Button>
-      </Fragment>
-    );
-  })
+multipleActions.story = {
+  name: 'Multiple actions',
+};
 
-  .add('configureActionsDepth', () => {
-    configureActions({
-      depth: 2,
-    });
+export const multipleActionsConfig = () => (
+  <Button {...actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
 
-    return (
-      <Button
-        onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}
-      >
-        Object (configured depth: 2)
-      </Button>
-    );
-  })
-  .add('Persisting the action logger', () => (
+multipleActionsConfig.story = {
+  name: 'Multiple actions + config',
+};
+
+export const multipleActionsAsObject = () => (
+  <Button {...actions({ onClick: 'clicked', onMouseOver: 'hovered' })}>Hello World</Button>
+);
+
+multipleActionsAsObject.story = {
+  name: 'Multiple actions as object',
+};
+
+export const multipleActionsObjectConfig = () => (
+  <Button
+    {...actions({ onClick: 'clicked', onMouseOver: 'hovered' }, { clearOnStoryChange: false })}
+  >
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+multipleActionsObjectConfig.story = {
+  name: 'Multiple actions, object + config',
+};
+
+export const decoratedAction = () => (
+  <Button onClick={pickNative.action('decorated')}>Native Event</Button>
+);
+
+decoratedAction.story = {
+  name: 'Decorated action',
+};
+
+export const decoratedActionConfig = () => (
+  <Button onClick={pickNative.action('decorated', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+decoratedActionConfig.story = {
+  name: 'Decorated action + config',
+};
+
+export const decoratedActions = () => (
+  <Button {...pickNative.actions('onClick', 'onMouseOver')}>Native Event</Button>
+);
+
+decoratedActions.story = {
+  name: 'Decorated actions',
+};
+
+export const decoratedActionsConfig = () => (
+  <Button {...pickNative.actions('onClick', 'onMouseOver', { clearOnStoryChange: false })}>
+    Moving away from this story will persist the action logger
+  </Button>
+);
+
+decoratedActionsConfig.story = {
+  name: 'Decorated actions + config',
+};
+
+export const circularPayload = () => {
+  const circular = { foo: {} };
+  circular.foo.circular = circular;
+  return <Button onClick={() => action('circular')(circular)}>Circular Payload</Button>;
+};
+
+circularPayload.story = {
+  name: 'Circular Payload',
+};
+
+export const reservedKeywordAsName = () => <Button onClick={action('delete')}>Delete</Button>;
+
+reservedKeywordAsName.story = {
+  name: 'Reserved keyword as name',
+};
+
+export const allTypes = () => {
+  function A() {}
+  function B() {}
+
+  const bound = B.bind({});
+
+  let file;
+  try {
+    file = new File([''], 'filename.txt', { type: 'text/plain', lastModified: new Date() });
+  } catch (error) {
+    file = error;
+  }
+  const reg = /fooBar/g;
+
+  return (
     <Fragment>
-      <p>Moving away from this story will persist the action logger</p>
-      <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
-        Object (configured clearOnStoryChange: false)
+      <Button onClick={() => action('Array')(['foo', 'bar', { foo: 'bar' }])}>Array</Button>
+      <Button onClick={() => action('Boolean')(false)}>Boolean</Button>
+      <Button onClick={() => action('Empty Object')({})}>Empty Object</Button>
+      <Button onClick={() => action('File')(file)}>File</Button>
+      <Button onClick={() => action('Function')(A)}>Function A</Button>
+      <Button onClick={() => action('Function (bound)')(bound)}>Bound Function B</Button>
+      <Button onClick={() => action('Infinity')(Infinity)}>Infinity</Button>
+      <Button onClick={() => action('-Infinity')(-Infinity)}>-Infinity</Button>
+      <Button onClick={() => action('NaN')(NaN)}>NaN</Button>
+      <Button onClick={() => action('null')(null)}>null</Button>
+      <Button onClick={() => action('Number')(10000)}>Number</Button>
+      <Button
+        onClick={() =>
+          action('Multiple')(
+            'foo',
+            1000,
+            true,
+            false,
+            [1, 2, 3],
+            null,
+            undefined,
+            { foo: 'bar' },
+            window
+          )
+        }
+      >
+        Multiple
       </Button>
+      <Button onClick={() => action('Plain Object')({ foo: { bar: { baz: { bar: 'foo' } } } })}>
+        Plain Object
+      </Button>
+      <Button
+        onClick={() =>
+          action('ObjectDepth2', { depth: 2 })({ root: { one: { two: { three: 'foo' } } } })
+        }
+      >
+        Object (depth: 2)
+      </Button>
+      <Button onClick={() => action('RegExp')(reg)}>RegExp</Button>
+      <Button onClick={() => action('String')('foo')}>String</Button>
+      <Button onClick={() => action('Symbol')(Symbol('A_SYMBOL'))}>Symbol</Button>
+      <Button onClick={action('SyntheticMouseEvent')}>SyntheticEvent</Button>
+      <Button onClick={() => action('undefined')(undefined)}>undefined</Button>
+      <Button onClick={() => action('window')(window)}>Window</Button>
     </Fragment>
-  ))
-  .add('Limit Action Output', () => {
-    configureActions({
-      limit: 2,
-    });
+  );
+};
 
-    return (
-      <Fragment>
-        <Button onClick={() => action('False')(false)}>False</Button>
-        <Button onClick={() => action('True')(true)}>True</Button>
-      </Fragment>
-    );
+allTypes.story = {
+  name: 'All types',
+};
+
+export const configureActionsDepth = () => {
+  configureActions({
+    depth: 2,
   });
 
-storiesOf('Addons|Actions.deprecated', module).add('Decorated Action', () => (
-  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
-));
+  return (
+    <Button onClick={() => action('ConfiguredDepth')({ root: { one: { two: { three: 'foo' } } } })}>
+      Object (configured depth: 2)
+    </Button>
+  );
+};
+
+export const persistingTheActionLogger = () => (
+  <Fragment>
+    <p>Moving away from this story will persist the action logger</p>
+    <Button onClick={action('clear-action-logger', { clearOnStoryChange: false })}>
+      Object (configured clearOnStoryChange: false)
+    </Button>
+  </Fragment>
+);
+
+persistingTheActionLogger.story = {
+  name: 'Persisting the action logger',
+};
+
+export const limitActionOutput = () => {
+  configureActions({
+    limit: 2,
+  });
+
+  return (
+    <Fragment>
+      <Button onClick={() => action('False')(false)}>False</Button>
+      <Button onClick={() => action('True')(true)}>True</Button>
+    </Fragment>
+  );
+};
+limitActionOutput.story = {
+  name: 'Limit Action Output',
+};
diff --git a/examples/official-storybook/stories/addon-backgrounds.stories.js b/examples/official-storybook/stories/addon-backgrounds.stories.js
index dc8cfbd0060..bf16d591860 100644
--- a/examples/official-storybook/stories/addon-backgrounds.stories.js
+++ b/examples/official-storybook/stories/addon-backgrounds.stories.js
@@ -1,10 +1,11 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'white', value: '#ffffff' },
       { name: 'light', value: '#eeeeee' },
@@ -12,24 +13,52 @@ storiesOf('Addons|Backgrounds', module)
       { name: 'dark', value: '#222222', default: true },
       { name: 'black', value: '#000000' },
     ],
-  })
-  .add('story 1', () => (
-    <BaseButton label="You should be able to switch backgrounds for this story" />
-  ))
-  .add('story 2', () => <BaseButton label="This one too!" />)
-  .add('overriden', () => <BaseButton label="This one should have different backgrounds" />, {
+  },
+};
+
+export const story1 = () => (
+  <BaseButton label="You should be able to switch backgrounds for this story" />
+);
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => <BaseButton label="This one too!" />;
+
+story2.story = {
+  name: 'story 2',
+};
+
+export const overriden = () => <BaseButton label="This one should have different backgrounds" />;
+
+overriden.story = {
+  parameters: {
     backgrounds: [
       { name: 'pink', value: 'hotpink' },
       { name: 'blue', value: 'deepskyblue', default: true },
     ],
-  })
-  .add('disabled via []', () => <BaseButton label="This one should not use backgrounds" />, {
+  },
+};
+
+export const disabledVia = () => <BaseButton label="This one should not use backgrounds" />;
+
+disabledVia.story = {
+  name: 'disabled via []',
+
+  parameters: {
     backgrounds: [],
-  })
-  .add(
-    'skipped via disable:true',
-    () => <BaseButton label="This one should not use backgrounds either" />,
-    {
-      backgrounds: { disable: true },
-    }
-  );
+  },
+};
+
+export const skippedViaDisableTrue = () => (
+  <BaseButton label="This one should not use backgrounds either" />
+);
+
+skippedViaDisableTrue.story = {
+  name: 'skipped via disable:true',
+
+  parameters: {
+    backgrounds: { disable: true },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-centered.stories.js b/examples/official-storybook/stories/addon-centered.stories.js
index 743e753dd89..a657323ae1f 100644
--- a/examples/official-storybook/stories/addon-centered.stories.js
+++ b/examples/official-storybook/stories/addon-centered.stories.js
@@ -1,9 +1,15 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import centered from '@storybook/addon-centered/react';
 
 import BaseButton from '../components/BaseButton';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(centered)
-  .add('story 1', () => <BaseButton label="This story should be centered" />);
+export default {
+  title: 'Addons|Centered',
+  decorators: [centered],
+};
+
+export const story1 = () => <BaseButton label="This story should be centered" />;
+
+story1.story = {
+  name: 'story 1',
+};
diff --git a/examples/official-storybook/stories/addon-contexts.stories.js b/examples/official-storybook/stories/addon-contexts.stories.js
index 7f646826d73..9edc06cbf67 100644
--- a/examples/official-storybook/stories/addon-contexts.stories.js
+++ b/examples/official-storybook/stories/addon-contexts.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { withContexts } from '@storybook/addon-contexts/react';
 
 // Example A: Simple CSS Theming
@@ -39,15 +38,20 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addons|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => <>I'm a children of the injected 'div' (where provides a theming context).</>,
-  {
-    contexts: storyLevelContexts,
-  }
+export const simpleCssTheming = () => (
+  <>I'm a children of the injected 'div' (where provides a theming context).</>
 );
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+  parameters: {
+    contexts: storyLevelContexts,
+  },
+};
 
 // Example B: Language (React Contexts API)
 const NaiveIntlContext = React.createContext({
@@ -55,14 +59,14 @@ const NaiveIntlContext = React.createContext({
   greeting: 'NULL',
 });
 
-stories.add(
-  'Languages',
-  () => (
-    <NaiveIntlContext.Consumer>
-      {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
-    </NaiveIntlContext.Consumer>
-  ),
-  {
+export const Languages = () => (
+  <NaiveIntlContext.Consumer>
+    {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
+  </NaiveIntlContext.Consumer>
+);
+
+Languages.story = {
+  parameters: {
     contexts: [
       {
         icon: 'globe',
@@ -93,5 +97,5 @@ stories.add(
         },
       },
     ],
-  }
-);
+  },
+};
diff --git a/examples/official-storybook/stories/addon-cssresources.stories.js b/examples/official-storybook/stories/addon-cssresources.stories.js
index 4cc9bceef29..70a29ac628e 100644
--- a/examples/official-storybook/stories/addon-cssresources.stories.js
+++ b/examples/official-storybook/stories/addon-cssresources.stories.js
@@ -1,8 +1,17 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Cssresources', module)
-  .addParameters({
+export default {
+  title: 'Addons|Cssresources',
+};
+
+export const primaryLargeButton = () => (
+  <button type="button" className="btn btn-lg btn-primary">
+    Primary Large Button
+  </button>
+);
+primaryLargeButton.story = {
+  name: 'Primary Large Button',
+  parameters: {
     cssresources: [
       {
         id: `bootstrap v4.1.3`,
@@ -18,15 +27,13 @@ storiesOf('Addons|Cssresources', module)
     options: {
       selectedPanel: 'storybook/cssresources/panel',
     },
-  })
-  .add('Primary Large Button', () => (
-    <button type="button" className="btn btn-lg btn-primary">
-      Primary Large Button
-    </button>
-  ));
+  },
+};
 
-storiesOf('Addons|Cssresources', module)
-  .addParameters({
+export const cameraIcon = () => <i className="fa fa-camera-retro"> Camera Icon</i>;
+cameraIcon.story = {
+  name: 'Camera Icon',
+  parameters: {
     cssresources: [
       {
         id: `fontawesome`,
@@ -42,6 +49,5 @@ storiesOf('Addons|Cssresources', module)
     options: {
       selectedPanel: 'storybook/cssresources/panel',
     },
-  })
-
-  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
+  },
+};
diff --git a/examples/official-storybook/stories/addon-design-assets.stories.js b/examples/official-storybook/stories/addon-design-assets.stories.js
index da56eca8c52..9b5185fcea5 100644
--- a/examples/official-storybook/stories/addon-design-assets.stories.js
+++ b/examples/official-storybook/stories/addon-design-assets.stories.js
@@ -1,33 +1,66 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Design assets', module)
-  .addParameters({
+export default {
+  title: 'Addons|Design assets',
+
+  parameters: {
     options: {
       selectedPanel: 'storybook/design-assets/panel',
     },
-  })
-  .add('single image', () => <div>This story should a single image in the assets panel</div>, {
-    assets: ['https://via.placeholder.com/300/09f/fff.png'],
-  })
-  .add('single webpage', () => <div>This story should a single image in the assets panel</div>, {
-    assets: ['https://www.example.com'],
-  })
-  .add('youtube video', () => <div>This story should a single image in the assets panel</div>, {
-    assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
-  })
+  },
+};
 
-  .add(
-    'multiple images',
-    () => <div>This story should a multiple images in the assets panel</div>,
-    {
-      assets: [
-        'https://via.placeholder.com/600/09f/fff.png',
-        'https://via.placeholder.com/600/f90/fff.png',
-      ],
-    }
-  )
-  .add('named assets', () => <div>This story should a single image in the assets panel</div>, {
+export const singleImage = () => <div>This story should a single image in the assets panel</div>;
+
+singleImage.story = {
+  name: 'single image',
+
+  parameters: {
+    assets: ['https://via.placeholder.com/300/09f/fff.png'],
+  },
+};
+
+export const singleWebpage = () => <div>This story should a single image in the assets panel</div>;
+
+singleWebpage.story = {
+  name: 'single webpage',
+
+  parameters: {
+    assets: ['https://www.example.com'],
+  },
+};
+
+export const youtubeVideo = () => <div>This story should a single image in the assets panel</div>;
+
+youtubeVideo.story = {
+  name: 'youtube video',
+
+  parameters: {
+    assets: ['https://www.youtube.com/embed/p-LFh5Y89eM'],
+  },
+};
+
+export const multipleImages = () => (
+  <div>This story should a multiple images in the assets panel</div>
+);
+
+multipleImages.story = {
+  name: 'multiple images',
+
+  parameters: {
+    assets: [
+      'https://via.placeholder.com/600/09f/fff.png',
+      'https://via.placeholder.com/600/f90/fff.png',
+    ],
+  },
+};
+
+export const namedAssets = () => <div>This story should a single image in the assets panel</div>;
+
+namedAssets.story = {
+  name: 'named assets',
+
+  parameters: {
     assets: [
       {
         name: 'blue',
@@ -38,11 +71,17 @@ storiesOf('Addons|Design assets', module)
         url: 'https://via.placeholder.com/300/f90/fff.png',
       },
     ],
-  })
-  .add(
-    'url replacement',
-    () => <div>This story should have a webpge, with within it's url the storyId</div>,
-    {
-      assets: ['https://via.placeholder.com/600.png?text={id}'],
-    }
-  );
+  },
+};
+
+export const urlReplacement = () => (
+  <div>This story should have a webpge, with within it's url the storyId</div>
+);
+
+urlReplacement.story = {
+  name: 'url replacement',
+
+  parameters: {
+    assets: ['https://via.placeholder.com/600.png?text={id}'],
+  },
+};
diff --git a/examples/official-storybook/stories/addon-docs.stories.js b/examples/official-storybook/stories/addon-docs.stories.js
index 5571d08c30c..163744b595a 100644
--- a/examples/official-storybook/stories/addon-docs.stories.js
+++ b/examples/official-storybook/stories/addon-docs.stories.js
@@ -1,8 +1,43 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import notes from './notes/notes.md';
+import mdxNotes from './notes/notes.mdx';
+import DocgenButton from '../components/DocgenButton';
 
-storiesOf('Addons|Docs', module)
-  .addParameters({
+export default {
+  title: 'Addons|Docs/stories',
+  parameters: {
+    component: DocgenButton,
+  },
+};
+
+export const basic = () => <div>Click docs tab to see basic docs</div>;
+
+export const withNotes = () => <div>Click docs tab to see DocsPage docs</div>;
+withNotes.story = {
+  name: 'with notes',
+  parameters: { notes },
+};
+
+export const withInfo = () => <div>Click docs tab to see DocsPage docs</div>;
+withInfo.story = {
+  name: 'with info',
+  parameters: {
+    info: 'some user info string',
+  },
+};
+
+export const mdxOverride = () => <div>Click docs tab to see MDX-overridden docs</div>;
+mdxOverride.story = {
+  name: 'mdx override',
+  parameters: {
+    docs: mdxNotes,
+  },
+};
+
+export const jsxOverride = () => <div>Click docs tab to see JSX-overridden docs</div>;
+jsxOverride.story = {
+  name: 'jsx override',
+  parameters: {
     docs: () => <div>Hello docs</div>,
-  })
-  .add('default', () => <div>Click the docs tab to see the docs</div>);
+  },
+};
diff --git a/examples/official-storybook/stories/addon-docs.stories.mdx b/examples/official-storybook/stories/addon-docs.stories.mdx
new file mode 100644
index 00000000000..88dcf8a67b4
--- /dev/null
+++ b/examples/official-storybook/stories/addon-docs.stories.mdx
@@ -0,0 +1,88 @@
+import {
+  Story,
+  Preview,
+  Props,
+  Source,
+  Description,
+  ColorPalette,
+  ColorItem,
+  Meta,
+} from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+<Meta
+  title="Addons|Docs/mdx"
+  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+  parameters={{ component: Button, notes: 'component notes' }}
+/>
+
+# Selected
+
+<Story id="." />
+
+<Source id="." />
+
+<Props of="." />
+
+## A random color ColorPalette
+
+<ColorPalette>
+  <ColorItem
+    title="theme.color.greyscale"
+    subtitle="Some of the greys"
+    colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
+  />
+  <ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
+  <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
+  <ColorItem
+    title="theme.color.positive"
+    subtitle="Green"
+    colors={[
+      'rgba(102,191,60,1)',
+      'rgba(102,191,60,.8)',
+      'rgba(102,191,60,.6)',
+      'rgba(102,191,60,.3)',
+    ]}
+  />
+</ColorPalette>
+
+## Getting into details
+
+<Button>just a button, not a story</Button>
+
+export const nonStory1 = 'foo'; // a non-story export
+
+export const nonStory2 = () => <Button>Not a story</Button>; // another one
+
+<Preview>
+  <Story name="hello story">
+    <Button onClick={action('clicked')}>hello world</Button>
+  </Story>
+  <Story name="goodbye">
+    <Button onClick={action('clicked')}>goodbye world</Button>
+  </Story>
+  <Story name="with icons">
+    <Button onClick={action('clicked')}>🤘🚀💯</Button>
+  </Story>
+  <Story name="notes" parameters={{ notes: 'story notes' }}>
+    <Button onClick={action('clicked')}>goodbye world</Button>
+  </Story>
+  <Story name="plaintext">Plain text</Story>
+</Preview>
+
+<Story name="solo story">
+  <Button onClick={action('clicked')}>solo</Button>
+</Story>
+
+<Source name="hello story" />
+
+## Configurable height
+
+<Story id="basics-button--all-buttons" height="400px" />
+
+## Description
+
+<Description markdown="this is _markdown_" />
+
+<Description of={Button} />
diff --git a/examples/official-storybook/stories/addon-events.stories.js b/examples/official-storybook/stories/addon-events.stories.js
index 8c17d0a917a..7f280c366b0 100644
--- a/examples/official-storybook/stories/addon-events.stories.js
+++ b/examples/official-storybook/stories/addon-events.stories.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import EventEmitter from 'eventemitter3';
-import { storiesOf } from '@storybook/react';
 
 import withEvents from '@storybook/addon-events';
 import Logger from './Logger';
@@ -67,25 +66,17 @@ const events = [
   },
 ];
 
-storiesOf('Addons|Events', module)
-  .addParameters({
+export default {
+  title: 'Addons|Events',
+  decorators: [withEvents({ emit, events })],
+  parameters: {
     options: {
       selectedPanel: 'storybook/events/panel',
     },
-  })
-  .addDecorator(withEvents({ emit, events }))
-  .add('Logger', () => <Logger emitter={emitter} />);
+  },
+};
 
-const WithEvents = withEvents;
-storiesOf('Addons|Events.deprecated', module)
-  .addParameters({
-    options: {
-      selectedPanel: 'storybook/events/panel',
-    },
-  })
-  .addDecorator(storyFn => (
-    <WithEvents emit={emit} events={events}>
-      {storyFn()}
-    </WithEvents>
-  ))
-  .add('Logger', () => <Logger emitter={emitter} />);
+export const logger = () => <Logger emitter={emitter} />;
+logger.story = {
+  name: 'Logger',
+};
diff --git a/examples/official-storybook/stories/addon-graphql.stories.js b/examples/official-storybook/stories/addon-graphql.stories.js
index b10970c95c3..44187c83c6b 100644
--- a/examples/official-storybook/stories/addon-graphql.stories.js
+++ b/examples/official-storybook/stories/addon-graphql.stories.js
@@ -1,43 +1,47 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-// import { setupGraphiQL } from '@storybook/addon-graphql';
 
-// const graphiql = setupGraphiQL({
-//   url: 'https://graphql-pokemon.now.sh/?',
-// });
+export default {
+  title: 'Addons|GraphQL',
+};
 
-storiesOf('Addons|GraphQL', module).add('get Pickachu', () => <div>hello</div>, {
-  graphiql: {
-    query: `{
-        pokemon(name: "Pikachu") {
-          id
-          number
-          name
-          attacks {
-            special {
-              name
-              type
-              damage
-            }
-          }
-          evolutions {
+export const getPickachu = () => <div>hello</div>;
+
+getPickachu.story = {
+  name: 'get Pickachu',
+
+  parameters: {
+    graphiql: {
+      query: `{
+          pokemon(name: "Pikachu") {
             id
             number
             name
-            weight {
-              minimum
-              maximum
-            }
             attacks {
-              fast {
+              special {
                 name
                 type
                 damage
               }
             }
+            evolutions {
+              id
+              number
+              name
+              weight {
+                minimum
+                maximum
+              }
+              attacks {
+                fast {
+                  name
+                  type
+                  damage
+                }
+              }
+            }
           }
-        }
-      }`,
-    url: 'https://graphql-pokemon.now.sh/?',
+        }`,
+      url: 'https://graphql-pokemon.now.sh/?',
+    },
   },
-});
+};
diff --git a/examples/official-storybook/stories/addon-info.stories.js b/examples/official-storybook/stories/addon-info.stories.js
deleted file mode 100644
index fd7d686e19e..00000000000
--- a/examples/official-storybook/stories/addon-info.stories.js
+++ /dev/null
@@ -1,387 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withInfo } from '@storybook/addon-info';
-import { action } from '@storybook/addon-actions';
-
-import DocgenButton from '../components/DocgenButton';
-import FlowTypeButton from '../components/FlowTypeButton';
-import BaseButton from '../components/BaseButton';
-import ForwardedRefButton from '../components/ForwardedRefButton';
-import ForwardedRefButtonWDisplayName from '../components/ForwardedRefButtonWDisplayName';
-import { NamedExportButton } from '../components/NamedExportButton';
-import TableComponent from '../components/TableComponent';
-import externalMdDocs from './addon-info-resources/EXAMPLE.md';
-
-storiesOf('Addons|Info/React Docgen', module)
-  .addDecorator(withInfo)
-  .add(
-    'Comments from PropType declarations',
-    () => (
-      <DocgenButton
-        onClick={action('clicked')}
-        label="Docgen Button"
-        disabled={false}
-        one={{ key: 1 }}
-        shape={{
-          id: 3,
-          arr: [],
-          shape: {
-            shape: {
-              foo: 'bar',
-            },
-          },
-          func: () => {},
-        }}
-        arrayOf={[1, 2, 3]}
-      />
-    ),
-    {
-      info:
-        'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-    }
-  )
-  .add(
-    'Comments from Flow declarations',
-    () => <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />,
-    {
-      info:
-        'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
-    }
-  )
-  .add(
-    'Comments from component declaration',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info:
-        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-    }
-  )
-  .add(
-    'Comments from named export component declaration',
-    () => <NamedExportButton onClick={action('clicked')} label="Button" />,
-    {
-      info:
-        'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
-    }
-  );
-
-const markdownDescription = `
-#### You can use markdown in your withInfo description.
-
-Sometimes you might want to manually include some \`code\` examples:
-
-~~~js
-const Button = () => <button />;
-~~~
-
-Maybe include a [link](http://storybook.js.org) to your project as well.
-`;
-
-storiesOf('Addons|Info/Markdown', module)
-  .addDecorator(withInfo)
-  .add(
-    'Displays Markdown in description',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: markdownDescription }
-  )
-  .add(
-    'From internal Markdown file',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: `
-      # internal
-      ## markdown
-      file
-    `,
-    }
-  )
-  .add(
-    'From external Markdown file',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: externalMdDocs }
-  );
-
-const JSXDescription = (
-  <div>
-    <h2>This is a JSX info section</h2>
-    <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
-      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
-      libero nulla.
-    </p>
-    <p>
-      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
-    </p>
-    <p>
-      <img alt="350x150" src="http://placehold.it/350x150" />
-    </p>
-  </div>
-);
-
-storiesOf('Addons|Info/JSX', module)
-  .addDecorator(withInfo)
-  .add(
-    'Displays JSX in description',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: { text: JSXDescription },
-    }
-  );
-
-storiesOf('Addons|Info/Options.inline', module)
-  .addDecorator(withInfo)
-  .add('Inlines component inside story', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'Component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  });
-
-storiesOf('Addons|Info/Options.excludedPropTypes', module)
-  .addDecorator(withInfo)
-  .add(
-    'Excludes propTypes that are in the excludedPropTypes array',
-    () => <BaseButton label="Button" />,
-    {
-      info: {
-        text: 'Label propType should be excluded',
-        excludedPropTypes: ['label'],
-      },
-    }
-  );
-
-storiesOf('Addons|Info/Options.header', module)
-  .addDecorator(withInfo)
-  .add('Shows or hides Info Addon header', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'The Info Addon header should be hidden',
-      header: false, // Toggles display of header with component name and description
-    },
-  });
-
-storiesOf('Addons|Info/Options.source', module)
-  .addDecorator(withInfo)
-  .add('Shows or hides Info Addon source', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'The Info Addon source section should be hidden',
-      source: false, // Displays the source of story Component
-    },
-  });
-
-storiesOf('Addons|Info/Options.propTables', module)
-  .addDecorator(withInfo)
-  .add('Shows additional component prop tables', () => <BaseButton label="Button" />, {
-    info: {
-      text: 'There should be a prop table added for a component not included in the story',
-      propTables: [FlowTypeButton],
-    },
-  });
-
-storiesOf('Addons|Info/Options.propTablesExclude', module)
-  .addDecorator(withInfo)
-  .add(
-    'Exclude component from prop tables',
-    () => (
-      <div>
-        <BaseButton label="Button" />
-        <FlowTypeButton label="Flow Typed Button" />
-      </div>
-    ),
-    {
-      info: {
-        text: 'This can exclude extraneous components from being displayed in prop tables.',
-        propTablesExclude: [FlowTypeButton],
-      },
-    }
-  );
-
-storiesOf('Addons|Info/Options.styles', module)
-  .addDecorator(withInfo)
-  .add('Extend info styles with an object', () => <BaseButton label="Button" />, {
-    info: {
-      styles: {
-        button: {
-          base: {
-            background: 'purple',
-          },
-        },
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    },
-  })
-  .add('Full control over styles using a function', () => <BaseButton label="Button" />, {
-    info: {
-      styles: stylesheet => ({
-        ...stylesheet,
-        header: {
-          ...stylesheet.header,
-          h1: {
-            ...stylesheet.header.h1,
-            color: 'red',
-          },
-        },
-      }),
-    },
-  });
-
-storiesOf('Addons|Info/Options.TableComponent', module)
-  .addDecorator(withInfo)
-  .add('Use a custom component for the table', () => <BaseButton label="Button" />, {
-    info: {
-      TableComponent,
-    },
-  });
-
-storiesOf('Addons|Info/Decorator', module)
-  .addDecorator(withInfo('Info can take options via the global or local decorator as well.'))
-  .add('Use Info as story decorator', () => <BaseButton label="Button" />);
-
-const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
-
-const Input = hoc(() => <input type="text" />);
-
-const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
-
-storiesOf('Addons|Info/GitHub issues', module)
-  .addDecorator(withInfo)
-  .add(
-    '#1814',
-    () => (
-      <div>
-        <Input />
-        <TextArea />
-      </div>
-    ),
-    {
-      info: 'Allow Duplicate DisplayNames for HOC #1814',
-    }
-  );
-
-storiesOf('Addons|Info/Parameters', module)
-  .addDecorator(
-    withInfo({
-      styles: {
-        header: {
-          h1: {
-            color: 'green',
-          },
-        },
-      },
-    })
-  )
-  .addParameters({
-    info: {
-      text:
-        'This text should be displayed on every story and the component should be inlined between description and PropType table',
-      inline: true, // Displays info inline vs click button to view
-    },
-  })
-  .add('Using paramaters across all stories', () => <BaseButton label="Button" />)
-  .add(
-    'Overwriting and extending the parameters and options set stories-wise',
-    () => <BaseButton label="Button" />,
-    {
-      info: {
-        text: 'Label propType should be excluded',
-        excludedPropTypes: ['label'],
-      },
-    }
-  )
-  .add(
-    'Overwrite the parameters with markdown variable',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: markdownDescription }
-  )
-  .add(
-    'Overwrite the text parameter with markdown inline',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    {
-      info: {
-        text: `
-        description or documentation about my component, supports markdown
-
-        ~~~js
-        <Button>Click Here</Button>
-        ~~~
-      `,
-      },
-    }
-  )
-  .add(
-    'Disable the addon entirely',
-    () => <BaseButton onClick={action('clicked')} label="Button" />,
-    { info: { disable: true } }
-  );
-
-storiesOf('Addons|Info/ForwardRef', module)
-  .addDecorator(withInfo)
-  .add('Displays forwarded ref components correctly', () => (
-    <ForwardedRefButton label="Forwarded Ref Button" />
-  ))
-  .add('Uses forwardRef displayName if available', () => (
-    <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
-  ));
-
-storiesOf('Addons|Info/deprecated', module).add(
-  'Displays Markdown in description',
-  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label="Button" />)
-);
-
-storiesOf('Addons|Info/Story Source', module)
-  .addDecorator(withInfo)
-  .add('One prop', () => <BaseButton label="Button" />)
-  .add('Many props', () => <BaseButton label="Button" onClick={action('clicked')} disabled />)
-  .add('Children', () => (
-    <div>
-      <p>Here is my nice button:</p>
-      <BaseButton label="Button" onClick={action('clicked')} />
-    </div>
-  ))
-  .add('Array prop', () => {
-    const propDefs = [
-      {
-        property: 'label',
-        propType: { name: 'string' },
-        required: true,
-        description: 'Text to display inside button',
-      },
-      {
-        property: 'disabled',
-        propType: { name: 'boolean' },
-        required: false,
-        defaultValue: false,
-      },
-      {
-        property: 'onClick',
-        propType: { name: 'function' },
-        description: 'Callback for when button is clicked',
-        required: true,
-        defaultValue: () => {},
-      },
-      {
-        property: 'style',
-        propType: { name: 'object' },
-        description: 'Styles to apply to button',
-        required: false,
-        defaultValue: {},
-      },
-    ];
-    return <TableComponent propDefinitions={propDefs} />;
-  })
-  .add('Object prop', () => (
-    <BaseButton
-      label="Button"
-      style={{
-        color: 'midnightblue',
-        backgroundColor: 'powderblue',
-        fontSize: '16px',
-        boxShadow: '1px 1px rgba(0, 0, 0, .07)',
-        borderRadius: '5px',
-        padding: '4px 8px',
-      }}
-    />
-  ));
diff --git a/examples/official-storybook/stories/addon-info-resources/EXAMPLE.md b/examples/official-storybook/stories/addon-info/EXAMPLE.md
similarity index 100%
rename from examples/official-storybook/stories/addon-info-resources/EXAMPLE.md
rename to examples/official-storybook/stories/addon-info/EXAMPLE.md
diff --git a/examples/official-storybook/stories/addon-info/decorators.stories.js b/examples/official-storybook/stories/addon-info/decorators.stories.js
new file mode 100644
index 00000000000..fc0d763ee9f
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/decorators.stories.js
@@ -0,0 +1,11 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import BaseButton from '../../components/BaseButton';
+
+export default {
+  title: 'Addons|Info/Decorator',
+  decorators: [withInfo('Info can take options via the global or local decorator as well.')],
+};
+
+export const useInfo = () => <BaseButton label="Button" />;
+useInfo.story = { name: 'Use Info as story decorator' };
diff --git a/examples/official-storybook/stories/addon-info/forward-ref.stories.js b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
new file mode 100644
index 00000000000..c4e674be179
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/forward-ref.stories.js
@@ -0,0 +1,17 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import ForwardedRefButton from '../../components/ForwardedRefButton';
+import ForwardedRefButtonWDisplayName from '../../components/ForwardedRefButtonWDisplayName';
+
+export default {
+  title: 'Addons|Info/ForwardRef',
+  decorators: [withInfo],
+};
+
+export const displaysCorrectly = () => <ForwardedRefButton label="Forwarded Ref Button" />;
+displaysCorrectly.story = { name: 'Displays forwarded ref components correctly' };
+
+export const displayName = () => (
+  <ForwardedRefButtonWDisplayName label="Forwarded Ref Button w/ Display Name" />
+);
+displayName.story = { name: 'Uses forwardRef displayName if available' };
diff --git a/examples/official-storybook/stories/addon-info/github-issues.js b/examples/official-storybook/stories/addon-info/github-issues.js
new file mode 100644
index 00000000000..c3832af3fb0
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/github-issues.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type="text" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+export default {
+  title: 'Addons|Info/GitHub issues',
+  decorators: [withInfo],
+};
+
+export const issue1814 = () => (
+  <div>
+    <Input />
+    <TextArea />
+  </div>
+);
+
+issue1814.story = {
+  name: '#1814',
+  parameters: {
+    info: 'Allow Duplicate DisplayNames for HOC #1814',
+  },
+};
diff --git a/examples/official-storybook/stories/addon-info/jsx.stories.js b/examples/official-storybook/stories/addon-info/jsx.stories.js
new file mode 100644
index 00000000000..dcdd37d6d48
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/jsx.stories.js
@@ -0,0 +1,38 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import BaseButton from '../../components/BaseButton';
+
+const JSXDescription = (
+  <div>
+    <h2>This is a JSX info section</h2>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ornare massa rutrum metus
+      commodo, a mattis velit dignissim. Fusce vestibulum turpis sed massa egestas pharetra. Sed at
+      libero nulla.
+    </p>
+    <p>
+      <a href="https://github.com/storybookjs/react-storybook-addon-info">This is a link</a>
+    </p>
+    <p>
+      <img alt="350x150" src="http://placehold.it/350x150" />
+    </p>
+  </div>
+);
+
+export default {
+  title: 'Addons|Info/JSX',
+  decorators: [withInfo],
+};
+
+export const displaysJsxInDescription = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+displaysJsxInDescription.story = {
+  name: 'Displays JSX in description',
+
+  parameters: {
+    info: { text: JSXDescription },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-info/markdown.stories.js b/examples/official-storybook/stories/addon-info/markdown.stories.js
new file mode 100644
index 00000000000..5f9048be9bc
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/markdown.stories.js
@@ -0,0 +1,82 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import externalMdDocs from './EXAMPLE.md';
+
+export default {
+  title: 'Addons|Info/Markdown',
+  decorators: [withInfo],
+  excludeStories: ['markdownDescription'],
+};
+
+export const markdownDescription = `
+#### You can use markdown in your withInfo description.
+
+Sometimes you might want to manually include some \`code\` examples:
+
+~~~js
+const Button = () => <button />;
+~~~
+
+classes in javascript
+
+~~~javascript
+export class FromComponent {
+  form = new FormControl({
+    searchTerm: new FromControl(''),
+    searchDate: new FromControl(''),
+    endDate: new FromControl(''),
+  })
+}
+~~~
+
+html with special formatting
+
+~~~html
+<foo-outer property-a="value"
+           property-b="value"
+           property-c="value">
+  <foo-inner property-a="value"
+             property-b="value" />
+</foo-outer>
+~~~
+
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+`;
+
+export const displaysMarkdownInDescription = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+displaysMarkdownInDescription.story = {
+  name: 'Displays Markdown in description',
+  parameters: { info: markdownDescription },
+};
+
+export const fromInternalMarkdownFile = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+fromInternalMarkdownFile.story = {
+  name: 'From internal Markdown file',
+
+  parameters: {
+    info: `
+    # internal
+    ## markdown
+    file
+  `,
+  },
+};
+
+export const fromExternalMarkdownFile = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+fromExternalMarkdownFile.story = {
+  name: 'From external Markdown file',
+  parameters: { info: externalMdDocs },
+};
diff --git a/examples/official-storybook/stories/addon-info/options.stories.js b/examples/official-storybook/stories/addon-info/options.stories.js
new file mode 100644
index 00000000000..95d04d672da
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/options.stories.js
@@ -0,0 +1,200 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import FlowTypeButton from '../../components/FlowTypeButton';
+import BaseButton from '../../components/BaseButton';
+import TableComponent from '../../components/TableComponent';
+import { markdownDescription } from './markdown.stories';
+
+export default {
+  title: 'Addons|Info/Options',
+  decorators: [withInfo],
+};
+
+export const inlinesComponentInsideStory = () => <BaseButton label="Button" />;
+inlinesComponentInsideStory.story = {
+  name: 'Inlines component inside story',
+  parameters: {
+    info: {
+      text: 'Component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  },
+};
+
+export const excludesPropTypesThatAreInTheExcludedPropTypesArray = () => (
+  <BaseButton label="Button" />
+);
+excludesPropTypesThatAreInTheExcludedPropTypesArray.story = {
+  name: 'Excludes propTypes that are in the excludedPropTypes array',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const showsOrHidesInfoAddonHeader = () => <BaseButton label="Button" />;
+showsOrHidesInfoAddonHeader.story = {
+  name: 'Shows or hides Info Addon header',
+  parameters: {
+    info: {
+      text: 'The Info Addon header should be hidden',
+      header: false, // Toggles display of header with component name and description
+    },
+  },
+};
+
+export const showsOrHidesInfoAddonSource = () => <BaseButton label="Button" />;
+showsOrHidesInfoAddonSource.story = {
+  name: 'Shows or hides Info Addon source',
+  parameters: {
+    info: {
+      text: 'The Info Addon source section should be hidden',
+      source: false, // Displays the source of story Component
+    },
+  },
+};
+
+export const showsAdditionalComponentPropTables = () => <BaseButton label="Button" />;
+showsAdditionalComponentPropTables.story = {
+  name: 'Shows additional component prop tables',
+  parameters: {
+    info: {
+      text: 'There should be a prop table added for a component not included in the story',
+      propTables: [FlowTypeButton],
+    },
+  },
+};
+
+export const excludeComponentFromPropTables = () => (
+  <div>
+    <BaseButton label="Button" />
+    <FlowTypeButton label="Flow Typed Button" />
+  </div>
+);
+excludeComponentFromPropTables.story = {
+  name: 'Exclude component from prop tables',
+  parameters: {
+    info: {
+      text: 'This can exclude extraneous components from being displayed in prop tables.',
+      propTablesExclude: [FlowTypeButton],
+    },
+  },
+};
+
+export const extendInfoStylesWithAnObject = () => <BaseButton label="Button" />;
+extendInfoStylesWithAnObject.story = {
+  name: 'Extend info styles with an object',
+  parameters: {
+    info: {
+      styles: {
+        button: {
+          base: {
+            background: 'purple',
+          },
+        },
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const fullControlOverStylesUsingAFunction = () => <BaseButton label="Button" />;
+fullControlOverStylesUsingAFunction.story = {
+  name: 'Full control over styles using a function',
+  parameters: {
+    info: {
+      styles: stylesheet => ({
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'red',
+          },
+        },
+      }),
+    },
+  },
+};
+
+export const useACustomComponentForTheTable = () => <BaseButton label="Button" />;
+useACustomComponentForTheTable.story = {
+  name: 'Use a custom component for the table',
+  parameters: {
+    component: TableComponent,
+    info: {
+      TableComponent,
+    },
+  },
+};
+
+export const useInfoAsStoryDecorator = () => <BaseButton label="Button" />;
+
+useInfoAsStoryDecorator.story = {
+  name: 'Use Info as story decorator',
+  parameters: {
+    decorators: [withInfo('Info can take options via the global or local decorator as well.')],
+  },
+};
+
+export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
+usingParamatersAcrossAllStories.story = {
+  name: 'Using paramaters across all stories',
+};
+
+export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+  <BaseButton label="Button" />
+);
+overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+  name: 'Overwriting and extending the parameters and options set stories-wise',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const overwriteTheParametersWithMarkdownVariable = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+overwriteTheParametersWithMarkdownVariable.story = {
+  name: 'Overwrite the parameters with markdown variable',
+  parameters: { info: markdownDescription },
+};
+
+export const overwriteTheTextParameterWithMarkdownInline = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+overwriteTheTextParameterWithMarkdownInline.story = {
+  name: 'Overwrite the text parameter with markdown inline',
+  parameters: {
+    info: {
+      text: `
+      description or documentation about my component, supports markdown
+
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    `,
+    },
+  },
+};
+
+export const disableTheAddonEntirely = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+disableTheAddonEntirely.story = {
+  name: 'Disable the addon entirely',
+  parameters: { info: { disable: true } },
+};
diff --git a/examples/official-storybook/stories/addon-info/parameters.stories.js b/examples/official-storybook/stories/addon-info/parameters.stories.js
new file mode 100644
index 00000000000..20239e58f7d
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/parameters.stories.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import { markdownDescription } from './markdown.stories';
+
+export default {
+  title: 'Addons|Info/Parameters',
+  decorators: [
+    withInfo({
+      styles: {
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    }),
+  ],
+  parameters: {
+    info: {
+      text:
+        'This text should be displayed on every story and the component should be inlined between description and PropType table',
+      inline: true, // Displays info inline vs click button to view
+    },
+  },
+};
+
+export const usingParamatersAcrossAllStories = () => <BaseButton label="Button" />;
+usingParamatersAcrossAllStories.story = {
+  name: 'Using paramaters across all stories',
+};
+
+export const overwritingAndExtendingTheParametersAndOptionsSetStoriesWise = () => (
+  <BaseButton label="Button" />
+);
+overwritingAndExtendingTheParametersAndOptionsSetStoriesWise.story = {
+  name: 'Overwriting and extending the parameters and options set stories-wise',
+  parameters: {
+    info: {
+      text: 'Label propType should be excluded',
+      excludedPropTypes: ['label'],
+    },
+  },
+};
+
+export const overwriteTheParametersWithMarkdownVariable = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+overwriteTheParametersWithMarkdownVariable.story = {
+  name: 'Overwrite the parameters with markdown variable',
+  parameters: { info: markdownDescription },
+};
+
+export const overwriteTheTextParameterWithMarkdownInline = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+overwriteTheTextParameterWithMarkdownInline.story = {
+  name: 'Overwrite the text parameter with markdown inline',
+  parameters: {
+    info: {
+      text: `
+      description or documentation about my component, supports markdown
+
+      ~~~js
+      <Button>Click Here</Button>
+      ~~~
+    `,
+    },
+  },
+};
+
+export const disableTheAddonEntirely = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+disableTheAddonEntirely.story = {
+  name: 'Disable the addon entirely',
+  parameters: { info: { disable: true } },
+};
diff --git a/examples/official-storybook/stories/addon-info/react-docgen.stories.js b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
new file mode 100644
index 00000000000..91400f9e18a
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/react-docgen.stories.js
@@ -0,0 +1,117 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../../components/DocgenButton';
+import FlowTypeButton from '../../components/FlowTypeButton';
+import BaseButton from '../../components/BaseButton';
+import { NamedExportButton } from '../../components/NamedExportButton';
+
+export default {
+  title: 'Addons|Info/React Docgen',
+  decorators: [withInfo],
+};
+
+export const commentsFromPropTypeDeclarations = () => (
+  <DocgenButton
+    onClick={action('clicked')}
+    label="Docgen Button"
+    disabled={false}
+    one={{ key: 1 }}
+    shape={{
+      id: 3,
+      arr: [],
+      shape: {
+        shape: {
+          foo: 'bar',
+        },
+      },
+      func: () => {},
+    }}
+    arrayOf={[1, 2, 3]}
+  />
+);
+
+commentsFromPropTypeDeclarations.story = {
+  name: 'Comments from PropType declarations',
+
+  parameters: {
+    info:
+      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+  },
+};
+
+export const commentsFromFlowDeclarations = () => (
+  <FlowTypeButton onClick={action('clicked')} label="Flow Typed Button" />
+);
+
+commentsFromFlowDeclarations.story = {
+  name: 'Comments from Flow declarations',
+
+  parameters: {
+    info:
+      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table',
+  },
+};
+
+export const commentsFromComponentDeclaration = () => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+);
+
+commentsFromComponentDeclaration.story = {
+  name: 'Comments from component declaration',
+
+  parameters: {
+    info:
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+  },
+};
+
+export const commentsFromNamedExportComponentDeclaration = () => (
+  <NamedExportButton onClick={action('clicked')} label="Button" />
+);
+
+commentsFromNamedExportComponentDeclaration.story = {
+  name: 'Comments from named export component declaration',
+
+  parameters: {
+    info:
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading',
+  },
+};
+
+const markdownDescription = `
+#### You can use markdown in your withInfo description.
+
+Sometimes you might want to manually include some \`code\` examples:
+
+~~~js
+const Button = () => <button />;
+~~~
+
+classes in javascript
+
+~~~javascript
+export class FromComponent {
+  form = new FormControl({
+    searchTerm: new FromControl(''),
+    searchDate: new FromControl(''),
+    endDate: new FromControl(''),
+  })
+}
+~~~
+
+html with special formatting
+
+~~~html
+<foo-outer property-a="value"
+           property-b="value"
+           property-c="value">
+  <foo-inner property-a="value"
+             property-b="value" />
+</foo-outer>
+~~~
+
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+`;
diff --git a/examples/official-storybook/stories/addon-info/story-source.stories.js b/examples/official-storybook/stories/addon-info/story-source.stories.js
new file mode 100644
index 00000000000..51659a3ce20
--- /dev/null
+++ b/examples/official-storybook/stories/addon-info/story-source.stories.js
@@ -0,0 +1,73 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import BaseButton from '../../components/BaseButton';
+import TableComponent from '../../components/TableComponent';
+
+export default {
+  title: 'Addons|Info/Story Source',
+  decorators: [withInfo],
+};
+
+export const oneProp = () => <BaseButton label="Button" />;
+oneProp.story = { name: 'One prop' };
+
+export const manyProps = () => <BaseButton label="Button" onClick={action('clicked')} disabled />;
+manyProps.story = { name: 'Many props' };
+
+export const children = () => (
+  <div>
+    <p>Here is my nice button:</p>
+    <BaseButton label="Button" onClick={action('clicked')} />
+  </div>
+);
+children.story = { name: 'Children' };
+
+export const arrayProp = () => {
+  const propDefs = [
+    {
+      property: 'label',
+      propType: { name: 'string' },
+      required: true,
+      description: 'Text to display inside button',
+    },
+    {
+      property: 'disabled',
+      propType: { name: 'boolean' },
+      required: false,
+      defaultValue: false,
+    },
+    {
+      property: 'onClick',
+      propType: { name: 'function' },
+      description: 'Callback for when button is clicked',
+      required: true,
+      defaultValue: () => {},
+    },
+    {
+      property: 'style',
+      propType: { name: 'object' },
+      description: 'Styles to apply to button',
+      required: false,
+      defaultValue: {},
+    },
+  ];
+  return <TableComponent propDefinitions={propDefs} />;
+};
+arrayProp.story = { name: 'Array prop' };
+
+export const objectProp = () => (
+  <BaseButton
+    label="Button"
+    style={{
+      color: 'midnightblue',
+      backgroundColor: 'powderblue',
+      fontSize: '16px',
+      boxShadow: '1px 1px rgba(0, 0, 0, .07)',
+      borderRadius: '5px',
+      padding: '4px 8px',
+    }}
+  />
+);
+objectProp.story = { name: 'Object prop' };
diff --git a/examples/official-storybook/stories/addon-jest.stories.js b/examples/official-storybook/stories/addon-jest.stories.js
index 34a4cb51141..b86d7f17b85 100644
--- a/examples/official-storybook/stories/addon-jest.stories.js
+++ b/examples/official-storybook/stories/addon-jest.stories.js
@@ -1,9 +1,14 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withTests } from '@storybook/addon-jest';
+import { withTests as withTestsHOC } from '@storybook/addon-jest';
 
 import results from './addon-jest.testresults.json';
 
-storiesOf('Addons|Jest', module)
-  .addDecorator(withTests({ results }))
-  .add('withTests', () => <p>Hello</p>, { jest: 'addon-jest' });
+export default {
+  title: 'Addons|Jest',
+  decorators: [withTestsHOC({ results })],
+};
+
+export const withTests = () => <p>Hello</p>;
+withTests.story = {
+  parameters: { jest: 'addon-jest' },
+};
diff --git a/examples/official-storybook/stories/addon-knobs.stories.js b/examples/official-storybook/stories/addon-knobs.stories.js
deleted file mode 100644
index 932df0c432e..00000000000
--- a/examples/official-storybook/stories/addon-knobs.stories.js
+++ /dev/null
@@ -1,327 +0,0 @@
-import React, { Fragment } from 'react';
-import PropTypes from 'prop-types';
-import { storiesOf } from '@storybook/react';
-
-import {
-  withKnobs,
-  text,
-  number,
-  boolean,
-  color,
-  select,
-  radios,
-  array,
-  date,
-  button,
-  object,
-  files,
-  optionsKnob as options,
-} from '@storybook/addon-knobs';
-
-const ItemLoader = ({ isLoading, items }) => {
-  if (isLoading) {
-    return <p>Loading data</p>;
-  }
-  if (!items.length) {
-    return <p>No items loaded</p>;
-  }
-  return (
-    <ul>
-      {items.map(i => (
-        <li key={i}>{i}</li>
-      ))}
-    </ul>
-  );
-};
-
-ItemLoader.propTypes = {
-  isLoading: PropTypes.bool.isRequired,
-  items: PropTypes.arrayOf(PropTypes.string).isRequired,
-};
-let injectedItems = [];
-let injectedIsLoading = false;
-
-storiesOf('Addons|Knobs.withKnobs', module)
-  .addDecorator(withKnobs)
-  .add('tweaks static values', () => {
-    const name = text('Name', 'Storyteller');
-    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
-    const fruits = {
-      Apple: 'apple',
-      Banana: 'banana',
-      Cherry: 'cherry',
-    };
-    const fruit = select('Fruit', fruits, 'apple');
-
-    const otherFruits = {
-      Kiwi: 'kiwi',
-      Guava: 'guava',
-      Watermelon: 'watermelon',
-    };
-    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
-    const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
-    const years = number('Years in NY', 9);
-
-    const backgroundColor = color('background', '#dedede');
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const otherStyles = object('Styles', {
-      border: '2px dashed silver',
-      borderRadius: 10,
-      padding: '10px',
-    });
-    const nice = boolean('Nice', true);
-    const images = files('Happy Picture', 'image/*', [
-      'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
-    ]);
-
-    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
-    const defaultBirthday = new Date('Jan 20 2017 GMT+0');
-    const birthday = date('Birthday', defaultBirthday);
-
-    const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
-    const style = { backgroundColor, ...otherStyles };
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    return (
-      <div style={style}>
-        <p>{intro}</p>
-        <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
-        <p>I live in NY for {years} years.</p>
-        <p>My wallet contains: ${dollars.toFixed(2)}</p>
-        <p>In my backpack, I have:</p>
-        <ul>
-          {items.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-        <p>{salutation}</p>
-        <p>
-          When I am happy I look like this: <img src={images[0]} alt="happy" />
-        </p>
-      </div>
-    );
-  })
-  .add('tweaks static values organized in groups', () => {
-    const GROUP_IDS = {
-      DISPLAY: 'Display',
-      GENERAL: 'General',
-      FAVORITES: 'Favorites',
-    };
-
-    const fruits = {
-      Apple: 'apple',
-      Banana: 'banana',
-      Cherry: 'cherry',
-    };
-
-    const otherFruits = {
-      Kiwi: 'kiwi',
-      Guava: 'guava',
-      Watermelon: 'watermelon',
-    };
-
-    // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
-    const defaultBirthday = new Date('Jan 20 2017 GMT+0');
-
-    // Ungrouped
-    const ungrouped = text('Ungrouped', 'Mumble');
-
-    // General
-    const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
-    const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
-    const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
-    const dollars = number(
-      'Account Balance',
-      12.5,
-      { min: 0, max: 100, step: 0.01 },
-      GROUP_IDS.GENERAL
-    );
-    const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
-
-    // Favorites
-    const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
-    const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
-    const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
-
-    // Display
-    const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
-    const otherStyles = object(
-      'Styles',
-      {
-        border: '2px dashed silver',
-        borderRadius: 10,
-        padding: '10px',
-      },
-      GROUP_IDS.DISPLAY
-    );
-
-    const style = { backgroundColor, ...otherStyles };
-
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    return (
-      <div style={style}>
-        <h1>General Information</h1>
-        <p>Name: {name}</p>
-        <p>Age: {age}</p>
-        <p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
-        <p>Account Balance: {dollars}</p>
-        <p>Years in NY: {years}</p>
-        <hr />
-        <h1>Favorites</h1>
-        <p>Catchphrase: {salutation}</p>
-        <p>Fruit: {fruit}</p>
-        <p>Other Fruit: {otherFruit}</p>
-        <p>Items:</p>
-        <ul>
-          {items.map(item => (
-            <li key={`${item}`}>{item}</li>
-          ))}
-        </ul>
-        <p>When I'm by myself, I say: "{ungrouped}"</p>
-      </div>
-    );
-  })
-  .add('dynamic knobs', () => {
-    const showOptional = select('Show optional', ['yes', 'no'], 'yes');
-    return (
-      <Fragment>
-        <div>{text('compulsory', 'I must be here')}</div>
-        {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
-      </Fragment>
-    );
-  })
-  .add('complex select', () => {
-    const m = select(
-      'complex',
-      {
-        number: 1,
-        string: 'string',
-        object: {},
-        array: [1, 2, 3],
-        function: () => {},
-      },
-      'string'
-    );
-    const value = m.toString();
-    const type = Array.isArray(m) ? 'array' : typeof m;
-    return (
-      <pre>
-        the type of {JSON.stringify(value, null, 2)} = {type}
-      </pre>
-    );
-  })
-  .add('optionsKnob', () => {
-    const valuesRadio = {
-      Monday: 'Monday',
-      Tuesday: 'Tuesday',
-      Wednesday: 'Wednesday',
-    };
-    const optionRadio = options('Radio', valuesRadio, 'Tuesday', { display: 'radio' });
-
-    const valuesInlineRadio = {
-      Saturday: 'Saturday',
-      Sunday: 'Sunday',
-    };
-    const optionInlineRadio = options('Inline Radio', valuesInlineRadio, 'Saturday', {
-      display: 'inline-radio',
-    });
-
-    const valuesSelect = {
-      January: 'January',
-      February: 'February',
-      March: 'March',
-    };
-    const optionSelect = options('Select', valuesSelect, 'January', { display: 'select' });
-
-    const valuesMultiSelect = {
-      Apple: 'apple',
-      Banana: 'banana',
-      Cherry: 'cherry',
-    };
-    const optionsMultiSelect = options('Multi Select', valuesMultiSelect, ['apple'], {
-      display: 'multi-select',
-    });
-
-    const valuesCheck = {
-      Corn: 'corn',
-      Carrot: 'carrot',
-      Cucumber: 'cucumber',
-    };
-    const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });
-
-    const valuesInlineCheck = {
-      Milk: 'milk',
-      Cheese: 'cheese',
-      Butter: 'butter',
-    };
-    const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
-      display: 'inline-check',
-    });
-
-    return (
-      <div>
-        <p>Weekday: {optionRadio}</p>
-        <p>Weekend: {optionInlineRadio}</p>
-        <p>Month: {optionSelect}</p>
-        <p>Fruit:</p>
-        <ul>
-          {optionsMultiSelect.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-        <p>Vegetables:</p>
-        <ul>
-          {optionsCheck.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-        <p>Dairy:</p>
-        <ul>
-          {optionsInlineCheck.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-      </div>
-    );
-  })
-  .add('triggers actions via button', () => {
-    button('Toggle item list state', () => {
-      if (!injectedIsLoading && injectedItems.length === 0) {
-        injectedIsLoading = true;
-      } else if (injectedIsLoading && injectedItems.length === 0) {
-        injectedIsLoading = false;
-        injectedItems = ['pencil', 'pen', 'eraser'];
-      } else if (injectedItems.length > 0) {
-        injectedItems = [];
-      }
-    });
-    return (
-      <Fragment>
-        <p>Hit the knob button and it will toggle the items list into multiple states.</p>
-        <ItemLoader isLoading={injectedIsLoading} items={injectedItems} />
-      </Fragment>
-    );
-  })
-  .add('XSS safety', () => (
-    <div
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML={{
-        __html: text('Rendered string', '<img src="x" onerror="alert(\'XSS Attack\')" >'),
-      }}
-    />
-  ))
-  .add('accepts story parameters', () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>, {
-    knobs: { escapeHTML: false },
-  });
-
-storiesOf('Addons|Knobs.withKnobs using options', module)
-  .addDecorator(
-    withKnobs({
-      escapeHTML: false,
-    })
-  )
-  .add('accepts options', () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>);
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
new file mode 100644
index 00000000000..77f24abc232
--- /dev/null
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs-options.stories.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { withKnobs, text } from '@storybook/addon-knobs';
+
+export default {
+  title: 'Addons|Knobs.withKnobs using options',
+  decorators: [
+    withKnobs({
+      escapeHTML: false,
+    }),
+  ],
+};
+
+export const acceptsOptions = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+acceptsOptions.story = {
+  name: 'accepts options',
+};
diff --git a/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
new file mode 100644
index 00000000000..b03ae5d218b
--- /dev/null
+++ b/examples/official-storybook/stories/addon-knobs/with-knobs.stories.js
@@ -0,0 +1,355 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  withKnobs,
+  text,
+  number,
+  boolean,
+  color,
+  select,
+  radios,
+  array,
+  date,
+  button,
+  object,
+  files,
+  optionsKnob as options,
+} from '@storybook/addon-knobs';
+
+const ItemLoader = ({ isLoading, items }) => {
+  if (isLoading) {
+    return <p>Loading data</p>;
+  }
+  if (!items.length) {
+    return <p>No items loaded</p>;
+  }
+  return (
+    <ul>
+      {items.map(i => (
+        <li key={i}>{i}</li>
+      ))}
+    </ul>
+  );
+};
+
+ItemLoader.propTypes = {
+  isLoading: PropTypes.bool.isRequired,
+  items: PropTypes.arrayOf(PropTypes.string).isRequired,
+};
+let injectedItems = [];
+let injectedIsLoading = false;
+
+export default {
+  title: 'Addons|Knobs.withKnobs',
+  decorators: [withKnobs],
+
+  parameters: {
+    component: withKnobs,
+  },
+};
+
+export const tweaksStaticValues = () => {
+  const name = text('Name', 'Storyteller');
+  const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 });
+  const fruits = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+  const fruit = select('Fruit', fruits, 'apple');
+
+  const otherFruits = {
+    Kiwi: 'kiwi',
+    Guava: 'guava',
+    Watermelon: 'watermelon',
+  };
+  const otherFruit = radios('Other Fruit', otherFruits, 'watermelon');
+  const dollars = number('Dollars', 12.5, { min: 0, max: 100, step: 0.01 });
+  const years = number('Years in NY', 9);
+
+  const backgroundColor = color('background', '#dedede');
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const otherStyles = object('Styles', {
+    border: '2px dashed silver',
+    borderRadius: 10,
+    padding: '10px',
+  });
+  const nice = boolean('Nice', true);
+  const images = files('Happy Picture', 'image/*', [
+    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
+  ]);
+
+  // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+  const defaultBirthday = new Date('Jan 20 2017 GMT+0');
+  const birthday = date('Birthday', defaultBirthday);
+
+  const intro = `My name is ${name}, I'm ${age} years old, and my favorite fruit is ${fruit}. I also enjoy ${otherFruit}.`;
+  const style = { backgroundColor, ...otherStyles };
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  return (
+    <div style={style}>
+      <p>{intro}</p>
+      <p>My birthday is: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+      <p>I live in NY for {years} years.</p>
+      <p>My wallet contains: ${dollars.toFixed(2)}</p>
+      <p>In my backpack, I have:</p>
+      <ul>
+        {items.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>{salutation}</p>
+      <p>
+        When I am happy I look like this: <img src={images[0]} alt="happy" />
+      </p>
+    </div>
+  );
+};
+tweaksStaticValues.story = {
+  name: 'tweaks static values',
+};
+
+export const tweaksStaticValuesOrganizedInGroups = () => {
+  const GROUP_IDS = {
+    DISPLAY: 'Display',
+    GENERAL: 'General',
+    FAVORITES: 'Favorites',
+  };
+
+  const fruits = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+
+  const otherFruits = {
+    Kiwi: 'kiwi',
+    Guava: 'guava',
+    Watermelon: 'watermelon',
+  };
+
+  // NOTE: the default value must not change - e.g., do not do date('Label', new Date()) or date('Label')
+  const defaultBirthday = new Date('Jan 20 2017 GMT+0');
+
+  // Ungrouped
+  const ungrouped = text('Ungrouped', 'Mumble');
+
+  // General
+  const name = text('Name', 'Storyteller', GROUP_IDS.GENERAL);
+  const age = number('Age', 70, { range: true, min: 0, max: 90, step: 5 }, GROUP_IDS.GENERAL);
+  const birthday = date('Birthday', defaultBirthday, GROUP_IDS.GENERAL);
+  const dollars = number(
+    'Account Balance',
+    12.5,
+    { min: 0, max: 100, step: 0.01 },
+    GROUP_IDS.GENERAL
+  );
+  const years = number('Years in NY', 9, {}, GROUP_IDS.GENERAL);
+
+  // Favorites
+  const nice = boolean('Nice', true, GROUP_IDS.FAVORITES);
+  const fruit = select('Fruit', fruits, 'apple', GROUP_IDS.FAVORITES);
+  const otherFruit = radios('Other Fruit', otherFruits, 'watermelon', GROUP_IDS.FAVORITES);
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey'], ',', GROUP_IDS.FAVORITES);
+
+  // Display
+  const backgroundColor = color('Color', 'rgba(126, 211, 33, 0.22)', GROUP_IDS.DISPLAY);
+  const otherStyles = object(
+    'Styles',
+    {
+      border: '2px dashed silver',
+      borderRadius: 10,
+      padding: '10px',
+    },
+    GROUP_IDS.DISPLAY
+  );
+
+  const style = { backgroundColor, ...otherStyles };
+
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  return (
+    <div style={style}>
+      <h1>General Information</h1>
+      <p>Name: {name}</p>
+      <p>Age: {age}</p>
+      <p>Birthday: {new Date(birthday).toLocaleDateString('en-US', dateOptions)}</p>
+      <p>Account Balance: {dollars}</p>
+      <p>Years in NY: {years}</p>
+      <hr />
+      <h1>Favorites</h1>
+      <p>Catchphrase: {salutation}</p>
+      <p>Fruit: {fruit}</p>
+      <p>Other Fruit: {otherFruit}</p>
+      <p>Items:</p>
+      <ul>
+        {items.map(item => (
+          <li key={`${item}`}>{item}</li>
+        ))}
+      </ul>
+      <p>When I'm by myself, I say: "{ungrouped}"</p>
+    </div>
+  );
+};
+tweaksStaticValuesOrganizedInGroups.story = {
+  name: 'tweaks static values organized in groups',
+};
+
+export const dynamicKnobs = () => {
+  const showOptional = select('Show optional', ['yes', 'no'], 'yes');
+  return (
+    <Fragment>
+      <div>{text('compulsory', 'I must be here')}</div>
+      {showOptional === 'yes' ? <div>{text('optional', 'I can disappear')}</div> : null}
+    </Fragment>
+  );
+};
+dynamicKnobs.story = {
+  name: 'dynamic knobs',
+};
+
+export const complexSelect = () => {
+  const m = select(
+    'complex',
+    {
+      number: 1,
+      string: 'string',
+      object: {},
+      array: [1, 2, 3],
+      function: () => {},
+    },
+    'string'
+  );
+  const value = m.toString();
+  const type = Array.isArray(m) ? 'array' : typeof m;
+  return (
+    <pre>
+      the type of {JSON.stringify(value, null, 2)} = {type}
+    </pre>
+  );
+};
+complexSelect.story = {
+  name: 'complex select',
+};
+
+export const optionsKnob = () => {
+  const valuesRadio = {
+    Monday: 'Monday',
+    Tuesday: 'Tuesday',
+    Wednesday: 'Wednesday',
+  };
+  const optionRadio = options('Radio', valuesRadio, 'Tuesday', { display: 'radio' });
+
+  const valuesInlineRadio = {
+    Saturday: 'Saturday',
+    Sunday: 'Sunday',
+  };
+  const optionInlineRadio = options('Inline Radio', valuesInlineRadio, 'Saturday', {
+    display: 'inline-radio',
+  });
+
+  const valuesSelect = {
+    January: 'January',
+    February: 'February',
+    March: 'March',
+  };
+  const optionSelect = options('Select', valuesSelect, 'January', { display: 'select' });
+
+  const valuesMultiSelect = {
+    Apple: 'apple',
+    Banana: 'banana',
+    Cherry: 'cherry',
+  };
+  const optionsMultiSelect = options('Multi Select', valuesMultiSelect, ['apple'], {
+    display: 'multi-select',
+  });
+
+  const valuesCheck = {
+    Corn: 'corn',
+    Carrot: 'carrot',
+    Cucumber: 'cucumber',
+  };
+  const optionsCheck = options('Check', valuesCheck, ['carrot'], { display: 'check' });
+
+  const valuesInlineCheck = {
+    Milk: 'milk',
+    Cheese: 'cheese',
+    Butter: 'butter',
+  };
+  const optionsInlineCheck = options('Inline Check', valuesInlineCheck, ['milk'], {
+    display: 'inline-check',
+  });
+
+  return (
+    <div>
+      <p>Weekday: {optionRadio}</p>
+      <p>Weekend: {optionInlineRadio}</p>
+      <p>Month: {optionSelect}</p>
+      <p>Fruit:</p>
+      <ul>
+        {optionsMultiSelect.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>Vegetables:</p>
+      <ul>
+        {optionsCheck.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>Dairy:</p>
+      <ul>
+        {optionsInlineCheck.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+    </div>
+  );
+};
+
+export const triggersActionsViaButton = () => {
+  button('Toggle item list state', () => {
+    if (!injectedIsLoading && injectedItems.length === 0) {
+      injectedIsLoading = true;
+    } else if (injectedIsLoading && injectedItems.length === 0) {
+      injectedIsLoading = false;
+      injectedItems = ['pencil', 'pen', 'eraser'];
+    } else if (injectedItems.length > 0) {
+      injectedItems = [];
+    }
+  });
+  return (
+    <Fragment>
+      <p>Hit the knob button and it will toggle the items list into multiple states.</p>
+      <ItemLoader isLoading={injectedIsLoading} items={injectedItems} />
+    </Fragment>
+  );
+};
+triggersActionsViaButton.story = {
+  name: 'triggers actions via button',
+};
+
+export const xssSafety = () => (
+  <div
+    // eslint-disable-next-line react/no-danger
+    dangerouslySetInnerHTML={{
+      __html: text('Rendered string', '<img src="x" onerror="alert(\'XSS Attack\')" >'),
+    }}
+  />
+);
+xssSafety.story = {
+  name: 'XSS safety',
+};
+
+export const acceptsStoryParameters = () => <div>{text('Rendered string', '<h1>Hello</h1>')}</div>;
+acceptsStoryParameters.story = {
+  name: 'accepts story parameters',
+
+  parameters: {
+    knobs: { escapeHTML: false },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-links.stories.js b/examples/official-storybook/stories/addon-links.stories.js
deleted file mode 100644
index c5f6a148ba6..00000000000
--- a/examples/official-storybook/stories/addon-links.stories.js
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Fragment } from 'react';
-import { storiesOf } from '@storybook/react';
-import { linkTo, hrefTo } from '@storybook/addon-links';
-import { action } from '@storybook/addon-actions';
-
-import LinkTo from '@storybook/addon-links/react';
-
-storiesOf('Addons|Links.Link', module)
-  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
-  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
-
-storiesOf('Addons|Links.Button', module)
-  .add('First', () => (
-    <button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
-      Go to "Second"
-    </button>
-  ))
-  .add('Second', () => (
-    <button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
-      Go to "First"
-    </button>
-  ));
-
-storiesOf('Addons|Links.Select', module)
-  .add('Index', () => (
-    <select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
-      <option>Index</option>
-      <option>First</option>
-      <option>Second</option>
-      <option>Third</option>
-    </select>
-  ))
-  .add('First', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Second', () => <LinkTo story="Index">Go back</LinkTo>)
-  .add('Third', () => <LinkTo story="Index">Go back</LinkTo>);
-
-storiesOf('Addons|Links.Href', module).add(
-  'log',
-  () => {
-    hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
-
-    return <span>See action logger</span>;
-  },
-  {
-    options: {
-      panel: 'storybook/actions/panel',
-    },
-  }
-);
-
-storiesOf('Addons|Links.Scroll position', module)
-  .addDecorator(storyFn => (
-    <Fragment>
-      <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
-      {storyFn()}
-    </Fragment>
-  ))
-  .add('First', () => <LinkTo story="Second">Go to Second</LinkTo>)
-  .add('Second', () => <LinkTo story="First">Go to First</LinkTo>);
diff --git a/examples/official-storybook/stories/addon-links/button.stories.js b/examples/official-storybook/stories/addon-links/button.stories.js
new file mode 100644
index 00000000000..6f63a99ed18
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/button.stories.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+
+export default {
+  title: 'Addons|Links.Button',
+};
+
+export const First = () => (
+  <button type="button" onClick={linkTo('Addons|Links.Button', 'Second')}>
+    Go to "Second"
+  </button>
+);
+
+export const Second = () => (
+  <button type="button" onClick={linkTo('Addons|Links.Button', 'First')}>
+    Go to "First"
+  </button>
+);
diff --git a/examples/official-storybook/stories/addon-links/href.stories.js b/examples/official-storybook/stories/addon-links/href.stories.js
new file mode 100644
index 00000000000..d2b82ad448e
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/href.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { hrefTo } from '@storybook/addon-links';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Addons|Links.Href',
+};
+
+export const log = () => {
+  hrefTo('Addons|Links.Href', 'log').then(href => action('URL of this story')(href));
+
+  return <span>See action logger</span>;
+};
+log.story = {
+  parameters: {
+    options: {
+      panel: 'storybook/actions/panel',
+    },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-links/link.stories.js b/examples/official-storybook/stories/addon-links/link.stories.js
new file mode 100644
index 00000000000..84d2c457960
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/link.stories.js
@@ -0,0 +1,9 @@
+import React from 'react';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Link',
+};
+
+export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
+export const Second = () => <LinkTo story="First">Go to First</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-links/scroll.stories.js b/examples/official-storybook/stories/addon-links/scroll.stories.js
new file mode 100644
index 00000000000..3b72fac54e1
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/scroll.stories.js
@@ -0,0 +1,17 @@
+import React, { Fragment } from 'react';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Scroll position',
+  decorators: [
+    storyFn => (
+      <Fragment>
+        <div style={{ marginBottom: '100vh' }}>Scroll down to see the link</div>
+        {storyFn()}
+      </Fragment>
+    ),
+  ],
+};
+
+export const First = () => <LinkTo story="Second">Go to Second</LinkTo>;
+export const Second = () => <LinkTo story="First">Go to First</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-links/select.stories.js b/examples/official-storybook/stories/addon-links/select.stories.js
new file mode 100644
index 00000000000..5e751f53944
--- /dev/null
+++ b/examples/official-storybook/stories/addon-links/select.stories.js
@@ -0,0 +1,20 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import LinkTo from '@storybook/addon-links/react';
+
+export default {
+  title: 'Addons|Links.Select',
+};
+
+export const Index = () => (
+  <select value="Index" onChange={linkTo('Addons|Links.Select', e => e.currentTarget.value)}>
+    <option>Index</option>
+    <option>First</option>
+    <option>Second</option>
+    <option>Third</option>
+  </select>
+);
+
+export const First = () => <LinkTo story="Index">Go back</LinkTo>;
+export const Second = () => <LinkTo story="Index">Go back</LinkTo>;
+export const Third = () => <LinkTo story="Index">Go back</LinkTo>;
diff --git a/examples/official-storybook/stories/addon-notes.stories.js b/examples/official-storybook/stories/addon-notes.stories.js
index edccf6d995e..178497d939c 100644
--- a/examples/official-storybook/stories/addon-notes.stories.js
+++ b/examples/official-storybook/stories/addon-notes.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
 import BaseButton from '../components/BaseButton';
 import markdownNotes from './notes/notes.md';
@@ -30,6 +29,31 @@ storiesOf('Addons|Notes', module)
     }
   )
 ~~~
+
+
+## Code examples for syntax-highlighter to deal with
+
+### classes in javascript
+~~~javascript
+export class FromComponent {
+  form = new FormControl({
+    searchTerm: new FromControl(''),
+    searchDate: new FromControl(''),
+    endDate: new FromControl(''),
+  })
+}
+~~~
+
+### html with special formatting
+~~~html
+<foo-outer property-a="value"
+           property-b="value"
+           property-c="value">
+  <foo-inner property-a="value"
+             property-b="value" />
+</foo-outer>
+~~~
+
 `;
 
 const markdownTable = `
@@ -47,20 +71,57 @@ const giphyMarkdown = `
 <Giphy query="cheese" />
 `;
 
-storiesOf('Addons|Notes', module)
-  .add('addon notes', baseStory, {
+export default {
+  title: 'Addons|Notes',
+};
+
+export const addonNotes = baseStory;
+
+addonNotes.story = {
+  name: 'addon notes',
+
+  parameters: {
     notes:
       'This is the notes for a button. This is helpful for adding details about a story in a separate panel.',
-  })
-  .add('addon notes rendering imported markdown', baseStory, {
+  },
+};
+
+export const addonNotesRenderingImportedMarkdown = baseStory;
+
+addonNotesRenderingImportedMarkdown.story = {
+  name: 'addon notes rendering imported markdown',
+
+  parameters: {
     notes: { markdown: markdownNotes },
-  })
-  .add('addon notes rendering inline, github-flavored markdown', baseStory, {
+  },
+};
+
+export const addonNotesRenderingInlineGithubFlavoredMarkdown = baseStory;
+
+addonNotesRenderingInlineGithubFlavoredMarkdown.story = {
+  name: 'addon notes rendering inline, github-flavored markdown',
+
+  parameters: {
     notes: { markdown: markdownString },
-  })
-  .add('with a markdown table', baseStory, {
+  },
+};
+
+export const withAMarkdownTable = baseStory;
+
+withAMarkdownTable.story = {
+  name: 'with a markdown table',
+
+  parameters: {
     notes: { markdown: markdownTable },
-  })
-  .add('with a markdown giphy', baseStory, {
+  },
+};
+
+export const withAMarkdownGiphy = baseStory;
+
+withAMarkdownGiphy.story = {
+  name: 'with a markdown giphy',
+
+  parameters: {
     notes: { markdown: giphyMarkdown },
-  });
+  },
+};
diff --git a/examples/official-storybook/stories/addon-options.stories.js b/examples/official-storybook/stories/addon-options.stories.js
index 0c1fdac5c35..6fc0d029643 100644
--- a/examples/official-storybook/stories/addon-options.stories.js
+++ b/examples/official-storybook/stories/addon-options.stories.js
@@ -1,18 +1,33 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 
-storiesOf('Addons|Options', module)
-  .add('setting name', () => <div>This story should have changed the name of the storybook</div>, {
+export default {
+  title: 'Addons|Options',
+};
+
+export const settingName = () => (
+  <div>This story should have changed the name of the storybook</div>
+);
+
+settingName.story = {
+  name: 'setting name',
+
+  parameters: {
     options: {
       name: 'Custom Storybook',
     },
-  })
-  .add(
-    'hiding addon panel',
-    () => <div>This story should have changed hidden the addons panel</div>,
-    {
-      options: {
-        showPanel: false,
-      },
-    }
-  );
+  },
+};
+
+export const hidingAddonPanel = () => (
+  <div>This story should have changed hidden the addons panel</div>
+);
+
+hidingAddonPanel.story = {
+  name: 'hiding addon panel',
+
+  parameters: {
+    options: {
+      showPanel: false,
+    },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-queryparams.stories.js b/examples/official-storybook/stories/addon-queryparams.stories.js
index 7c32fca677e..72bf9b7c2c9 100644
--- a/examples/official-storybook/stories/addon-queryparams.stories.js
+++ b/examples/official-storybook/stories/addon-queryparams.stories.js
@@ -1,22 +1,31 @@
 import { document } from 'global';
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { withQuery } from '@storybook/addon-queryparams';
 
-// debugger;
+export default {
+  title: 'Addons|QueryParams',
+  decorators: [withQuery],
 
-storiesOf('Addons|QueryParams', module)
-  .addDecorator(withQuery)
-  .addParameters({
+  parameters: {
     query: {
       mock: true,
     },
-  })
-  .add('mock is true', () => (
-    <div>This story should have an extra url query param: {document.location.search}</div>
-  ))
-  .add(
-    'mock is 4',
-    () => <div>This story should have an extra url query param: {document.location.search}</div>,
-    { query: { mock: 4 } }
-  );
+  },
+};
+
+export const mockIsTrue = () => (
+  <div>This story should have an extra url query param: {document.location.search}</div>
+);
+
+mockIsTrue.story = {
+  name: 'mock is true',
+};
+
+export const mockIs4 = () => (
+  <div>This story should have an extra url query param: {document.location.search}</div>
+);
+
+mockIs4.story = {
+  name: 'mock is 4',
+  parameters: { query: { mock: 4 } },
+};
diff --git a/examples/official-storybook/stories/addon-storyshots.stories.js b/examples/official-storybook/stories/addon-storyshots.stories.js
index ec5bedb6159..9e9c27a1099 100644
--- a/examples/official-storybook/stories/addon-storyshots.stories.js
+++ b/examples/official-storybook/stories/addon-storyshots.stories.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { styled } from '@storybook/theming';
 
 const Block = styled.div({
@@ -9,4 +8,8 @@ const Block = styled.div({
   background: 'hotpink',
 });
 
-storiesOf('Addons|Storyshots', module).add('block', () => <Block />);
+export default {
+  title: 'Addons|Storyshots',
+};
+
+export const block = () => <Block />;
diff --git a/examples/official-storybook/stories/addon-viewport.stories.js b/examples/official-storybook/stories/addon-viewport.stories.js
deleted file mode 100644
index 98776463238..00000000000
--- a/examples/official-storybook/stories/addon-viewport.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import React from 'react';
-import { storiesOf } from '@storybook/react';
-
-import { styled } from '@storybook/theming';
-
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
-
-const Panel = styled.div();
-
-storiesOf('Addons|Viewport', module).add('default', () => (
-  <Panel>I don't have problems being rendered using the default viewport.</Panel>
-));
-
-storiesOf('Addons|Viewport.Custom Default (Kindle Fire 2)', module)
-  .addParameters({
-    viewport: {
-      viewports: {
-        ...INITIAL_VIEWPORTS,
-        kindleFire2: {
-          name: 'Kindle Fire 2',
-          styles: {
-            width: '600px',
-            height: '963px',
-          },
-        },
-      },
-    },
-  })
-  .add('Inherited', () => (
-    <Panel>
-      I've inherited <b>Kindle Fire 2</b> viewport from my parent.
-    </Panel>
-  ))
-  .add(
-    'Overridden via "withViewport" parameterized decorator',
-    () => (
-      <Panel>
-        I respect my parents but I should be looking good on <b>iPad</b>.
-      </Panel>
-    ),
-    { viewport: { defaultViewport: 'ipad' } }
-  )
-  .add('Disabled', () => <Panel>There should be no viewport selector in the toolbar</Panel>, {
-    viewport: { disable: true },
-  });
diff --git a/examples/official-storybook/stories/addon-viewport/custom-default.stories.js b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
new file mode 100644
index 00000000000..83c8ab021dd
--- /dev/null
+++ b/examples/official-storybook/stories/addon-viewport/custom-default.stories.js
@@ -0,0 +1,46 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+const Panel = styled.div();
+
+export default {
+  title: 'Addons|Viewport.Custom Default (Kindle Fire 2)',
+  parameters: {
+    viewport: {
+      viewports: {
+        ...INITIAL_VIEWPORTS,
+        kindleFire2: {
+          name: 'Kindle Fire 2',
+          styles: {
+            width: '600px',
+            height: '963px',
+          },
+        },
+      },
+    },
+  },
+};
+
+export const Inherited = () => (
+  <Panel>
+    I've inherited <b>Kindle Fire 2</b> viewport from my parent.
+  </Panel>
+);
+
+export const overriddenViaWithViewportParameterizedDecorator = () => (
+  <Panel>
+    I respect my parents but I should be looking good on <b>iPad</b>.
+  </Panel>
+);
+overriddenViaWithViewportParameterizedDecorator.story = {
+  name: 'Overridden via "withViewport" parameterized decorator',
+  parameters: { viewport: { defaultViewport: 'ipad' } },
+};
+
+export const Disabled = () => <Panel>There should be no viewport selector in the toolbar</Panel>;
+Disabled.story = {
+  parameters: {
+    viewport: { disable: true },
+  },
+};
diff --git a/examples/official-storybook/stories/addon-viewport/default.stories.js b/examples/official-storybook/stories/addon-viewport/default.stories.js
new file mode 100644
index 00000000000..85739e83d92
--- /dev/null
+++ b/examples/official-storybook/stories/addon-viewport/default.stories.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+const Panel = styled.div();
+
+export default {
+  title: 'Addons|Viewport',
+};
+export const defaultFn = () => (
+  <Panel>I don't have problems being rendered using the default viewport.</Panel>
+);
+defaultFn.story = { name: 'default' };
diff --git a/examples/official-storybook/stories/core/decorators.stories.js b/examples/official-storybook/stories/core/decorators.stories.js
index 2edb62f9d66..314ac930838 100644
--- a/examples/official-storybook/stories/core/decorators.stories.js
+++ b/examples/official-storybook/stories/core/decorators.stories.js
@@ -27,13 +27,15 @@ export default {
 };
 
 export const all = () => <p>Story</p>;
-all.parameters = {
-  decorators: [
-    s => (
-      <>
-        <p>Local Decorator</p>
-        {s()}
-      </>
-    ),
-  ],
+all.story = {
+  parameters: {
+    decorators: [
+      s => (
+        <>
+          <p>Local Decorator</p>
+          {s()}
+        </>
+      ),
+    ],
+  },
 };
diff --git a/examples/official-storybook/stories/core/errors.stories.js b/examples/official-storybook/stories/core/errors.stories.js
index d16ae903f07..962a37a4d45 100644
--- a/examples/official-storybook/stories/core/errors.stories.js
+++ b/examples/official-storybook/stories/core/errors.stories.js
@@ -1,19 +1,43 @@
+import React, { Fragment } from 'react';
+
+const BadComponent = () => ({ renderable: 'no, react can not render objects' });
+
 export default {
   title: 'Core|Errors',
 };
 
 export const exception = () => {
-  throw new Error('error');
+  throw new Error('storyFn threw an error! WHOOPS');
 };
-exception.title = 'story throws exception';
-exception.parameters = {
-  storyshots: { disable: true },
-  chromatic: { disable: true },
+exception.story = {
+  name: 'story throws exception',
+  parameters: {
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
 };
 
-export const errors = () => null;
-errors.title = 'story errors';
-errors.parameters = {
-  notes: 'Story does not return something react can render',
-  storyshots: { disable: true },
+export const badComponent = () => (
+  <Fragment>
+    <div>Hello world</div>
+    <BadComponent />
+  </Fragment>
+);
+badComponent.story = {
+  name: 'story errors - variant error',
+  parameters: {
+    notes: 'Story does not return something react can render',
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
+};
+
+export const badStory = () => false;
+badStory.story = {
+  name: 'story errors - story un-renderable type',
+  parameters: {
+    notes: 'Story does not return something react can render',
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
 };
diff --git a/examples/official-storybook/stories/core/events.stories.js b/examples/official-storybook/stories/core/events.stories.js
index 2cfc555d105..0b6949d139d 100644
--- a/examples/official-storybook/stories/core/events.stories.js
+++ b/examples/official-storybook/stories/core/events.stories.js
@@ -14,4 +14,4 @@ export default {
 };
 
 export const force = () => <Button onClick={increment}>Clicked: {timesClicked}</Button>;
-force.title = 'Force re-render';
+force.story = { name: 'Force re-render' };
diff --git a/examples/official-storybook/stories/core/parameters.stories.js b/examples/official-storybook/stories/core/parameters.stories.js
index b5ab588400a..d32c78d7427 100644
--- a/examples/official-storybook/stories/core/parameters.stories.js
+++ b/examples/official-storybook/stories/core/parameters.stories.js
@@ -19,5 +19,7 @@ export const passed = ({
   // eslint-disable-next-line react/prop-types
   parameters: { options, ...parameters },
 }) => <pre>Parameters are {JSON.stringify(parameters, null, 2)}</pre>;
-passed.title = 'passed to story';
-passed.parameters = { storyParameter: 'storyParameter' };
+passed.story = {
+  name: 'passed to story',
+  parameters: { storyParameter: 'storyParameter' },
+};
diff --git a/examples/official-storybook/stories/core/scroll.stories.js b/examples/official-storybook/stories/core/scroll.stories.js
index 8b1e255497b..e77afec9ae7 100644
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@@ -14,7 +14,7 @@ export const story1 = () => (
     </pre>
   </div>
 );
-story1.title = 'story with 100vh padding 1';
+story1.story = { name: 'story with 100vh padding 1' };
 
 export const story2 = () => (
   <div>
@@ -26,4 +26,4 @@ export const story2 = () => (
     </pre>
   </div>
 );
-story2.title = 'story with 100vh padding 2';
+story2.story = { name: 'story with 100vh padding 2' };
diff --git a/examples/official-storybook/stories/demo/button.stories.js b/examples/official-storybook/stories/demo/button.stories.js
new file mode 100644
index 00000000000..a232e29bcce
--- /dev/null
+++ b/examples/official-storybook/stories/demo/button.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Button } from '@storybook/react/demo';
+
+export default {
+  title: 'Other|Demo/Button',
+  parameters: {
+    component: Button,
+  },
+};
+
+export const withText = () => <Button onClick={action('clicked')}>Hello Button</Button>;
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onClick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/official-storybook/stories/demo/welcome.stories.js b/examples/official-storybook/stories/demo/welcome.stories.js
new file mode 100644
index 00000000000..809d2f34012
--- /dev/null
+++ b/examples/official-storybook/stories/demo/welcome.stories.js
@@ -0,0 +1,15 @@
+import React from 'react';
+import { linkTo } from '@storybook/addon-links';
+import { Welcome } from '@storybook/react/demo';
+
+export default {
+  title: 'Other|Demo/Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/examples/official-storybook/stories/deprecated/addon-actions.stories.js b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
new file mode 100644
index 00000000000..a907ba9dfb3
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-actions.stories.js
@@ -0,0 +1,27 @@
+import { window, File } from 'global';
+import React, { Fragment } from 'react';
+import {
+  action,
+  actions,
+  configureActions,
+  decorate,
+  decorateAction,
+} from '@storybook/addon-actions';
+import { Form } from '@storybook/components';
+
+const { Button } = Form;
+
+const pickNative = decorate([args => [args[0].nativeEvent]]);
+const pickNativeAction = decorateAction([args => [args[0].nativeEvent]]);
+
+export default {
+  title: 'Addons|Actions.deprecated',
+};
+
+export const decoratedAction = () => (
+  <Button onClick={pickNativeAction('decorated')}>Native Event</Button>
+);
+
+decoratedAction.story = {
+  name: 'Decorated Action',
+};
diff --git a/examples/official-storybook/stories/deprecated/addon-events.stories.js b/examples/official-storybook/stories/deprecated/addon-events.stories.js
new file mode 100644
index 00000000000..cb832b0c73b
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-events.stories.js
@@ -0,0 +1,86 @@
+import React from 'react';
+import EventEmitter from 'eventemitter3';
+import WithEvents from '@storybook/addon-events';
+import Logger from '../Logger';
+
+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 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])));
+
+const events = [
+  {
+    name: EVENTS.TEST_EVENT_1,
+    title: 'Test event 1',
+    payload: 0,
+  },
+  {
+    name: EVENTS.TEST_EVENT_2,
+    title: 'Test event 2',
+    payload: 'Test event 2',
+  },
+  {
+    name: EVENTS.TEST_EVENT_3,
+    title: 'Test event 3',
+    payload: {
+      string: 'value',
+      number: 123,
+      array: [1, 2, 3],
+      object: {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+    },
+  },
+  {
+    name: EVENTS.TEST_EVENT_4,
+    title: 'Test event 4',
+    payload: [
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+      {
+        string: 'value',
+        number: 123,
+        array: [1, 2, 3],
+      },
+    ],
+  },
+];
+
+export default {
+  title: 'Addons|Events.deprecated',
+  decorators: [
+    storyFn => (
+      <WithEvents emit={emit} events={events}>
+        {storyFn()}
+      </WithEvents>
+    ),
+  ],
+
+  parameters: {
+    options: {
+      selectedPanel: 'storybook/events/panel',
+    },
+  },
+};
+
+export const logger = () => <Logger emitter={emitter} />;
+logger.story = { name: 'Logger' };
diff --git a/examples/official-storybook/stories/deprecated/addon-info.stories.js b/examples/official-storybook/stories/deprecated/addon-info.stories.js
new file mode 100644
index 00000000000..6de7dd79182
--- /dev/null
+++ b/examples/official-storybook/stories/deprecated/addon-info.stories.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+import BaseButton from '../../components/BaseButton';
+
+import { markdownDescription } from '../addon-info/markdown.stories';
+
+export default {
+  title: 'Addons|Info/deprecated',
+};
+
+export const displaysMarkdown = withInfo(markdownDescription)(() => (
+  <BaseButton onClick={action('clicked')} label="Button" />
+));
+
+displaysMarkdown.story = { name: 'Displays Markdown in description' };
diff --git a/examples/official-storybook/stories/notes/notes.mdx b/examples/official-storybook/stories/notes/notes.mdx
new file mode 100644
index 00000000000..48dc5de86ea
--- /dev/null
+++ b/examples/official-storybook/stories/notes/notes.mdx
@@ -0,0 +1,3 @@
+# Welcome!
+
+Let's just write markdown without stories
diff --git a/examples/official-storybook/stories/other-demo.stories.js b/examples/official-storybook/stories/other-demo.stories.js
deleted file mode 100644
index 3d4bea842ea..00000000000
--- a/examples/official-storybook/stories/other-demo.stories.js
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-import { storiesOf } from '@storybook/react';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import { Button, Welcome } from '@storybook/react/demo';
-
-storiesOf('Other|Demo/Welcome', module).add('to Storybook', () => (
-  <Welcome showApp={linkTo('Button')} />
-));
-
-storiesOf('Other|Demo/Button', module)
-  .add('with text', () => <Button onClick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onClick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/official-storybook/stories/other-dirname.stories.js b/examples/official-storybook/stories/other-dirname.stories.js
index e1b20029b7c..ed0f1e6540f 100644
--- a/examples/official-storybook/stories/other-dirname.stories.js
+++ b/examples/official-storybook/stories/other-dirname.stories.js
@@ -1,10 +1,16 @@
 import React from 'react';
 import base from 'paths.macro';
 
-import { storiesOf } from '@storybook/react';
-
 import BaseButton from '../components/BaseButton';
 
-storiesOf(`Other|${base}/Dirname Example`, module)
-  .add('story 1', () => <BaseButton label="Story 1" />)
-  .add('story 2', () => <BaseButton label="Story 2" />);
+export const story1 = () => <BaseButton label="Story 1" />;
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => <BaseButton label="Story 2" />;
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/official-storybook/webpack.config.js b/examples/official-storybook/webpack.config.js
index 3429adc0ed4..bb05ac7a919 100644
--- a/examples/official-storybook/webpack.config.js
+++ b/examples/official-storybook/webpack.config.js
@@ -40,7 +40,12 @@ module.exports = async ({ config }) => ({
       },
       {
         test: /\.stories\.jsx?$/,
-        use: require.resolve('@storybook/addon-storysource/loader'),
+        loader: require.resolve('@storybook/source-loader'),
+        options: {
+          injectParameters: true,
+          inspectLocalDependencies: false,
+          inspectDependencies: false,
+        },
         include: [
           path.resolve(__dirname, './stories'),
           path.resolve(__dirname, '../../lib/ui/src'),
diff --git a/examples/polymer-cli/.storybook/config.js b/examples/polymer-cli/.storybook/config.js
index 4f54cad4460..af962f73206 100644
--- a/examples/polymer-cli/.storybook/config.js
+++ b/examples/polymer-cli/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/polymer';
+import { load, addParameters, addDecorator } from '@storybook/polymer';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,11 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories/index.stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/polymer-cli/package.json b/examples/polymer-cli/package.json
index ba93e8862d4..f015b7ba119 100644
--- a/examples/polymer-cli/package.json
+++ b/examples/polymer-cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "polymer-cli",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook",
@@ -10,16 +10,17 @@
   },
   "dependencies": {
     "@polymer/polymer": "^2.6.0",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/polymer": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/polymer": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "@webcomponents/webcomponentsjs": "^1.2.0",
     "global": "^4.3.2",
     "lit-html": "^1.0.0",
diff --git a/examples/polymer-cli/src/stories/addon-actions.stories.js b/examples/polymer-cli/src/stories/addon-actions.stories.js
index 3b29471cbc1..9e0ee92c547 100644
--- a/examples/polymer-cli/src/stories/addon-actions.stories.js
+++ b/examples/polymer-cli/src/stories/addon-actions.stories.js
@@ -1,17 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
 import { action } from '@storybook/addon-actions';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', action('log1'));
-    return el;
-  })
-  .add('Action and method', () => {
-    const el = document.createElement('simple-button');
-    el.addEventListener('click', e => action('log2')(e.target));
-    return el;
-  });
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', action('log1'));
+  return el;
+};
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const actionAndMethod = () => {
+  const el = document.createElement('simple-button');
+  el.addEventListener('click', e => action('log2')(e.target));
+  return el;
+};
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
index 11ae7370b44..bf7f776d961 100644
--- a/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
+++ b/examples/polymer-cli/src/stories/addon-backgrounds.stories.js
@@ -1,10 +1,16 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Backgrounds',
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('button with text', () => '<button>Click me</button>');
+  },
+};
+
+export const buttonWithText = () => '<button>Click me</button>';
+
+buttonWithText.story = {
+  name: 'button with text',
+};
diff --git a/examples/polymer-cli/src/stories/addon-links.stories.js b/examples/polymer-cli/src/stories/addon-links.stories.js
index ee4ecf88660..e3bb16249e5 100644
--- a/examples/polymer-cli/src/stories/addon-links.stories.js
+++ b/examples/polymer-cli/src/stories/addon-links.stories.js
@@ -1,12 +1,19 @@
-import { storiesOf } from '@storybook/polymer';
 import { linkTo } from '@storybook/addon-links';
 import { document } from 'global';
 
 import '../simple-button.html';
 
-storiesOf('Addon|Links', module).add('With Create Element', () => {
+export default {
+  title: 'Addon|Links',
+};
+
+export const withCreateElement = () => {
   const el = document.createElement('simple-button');
   el.title = 'Go to welcome';
   el.handleClick = linkTo('Welcome');
   return el;
-});
+};
+
+withCreateElement.story = {
+  name: 'With Create Element',
+};
diff --git a/examples/polymer-cli/src/stories/addon-notes.stories.js b/examples/polymer-cli/src/stories/addon-notes.stories.js
index 8263fe9c776..8c9dcd9a174 100644
--- a/examples/polymer-cli/src/stories/addon-notes.stories.js
+++ b/examples/polymer-cli/src/stories/addon-notes.stories.js
@@ -1,20 +1,28 @@
-import { storiesOf } from '@storybook/polymer';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () =>
-      '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-    {
-      notes: 'My notes on some bold text',
-    }
-  )
-  .add('Note with HTML', () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>', {
+export const simpleNote = () =>
+  '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>';
+
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: {
+    notes: 'My notes on some bold text',
+  },
+};
+
+export const noteWithHtml = () => '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>';
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
     notes: `
-      <h2>My notes on emojies</h2>
+        <h2>My notes on emojies</h2>
 
-      <em>It's not all that important to be honest, but..</em>
+        <em>It's not all that important to be honest, but..</em>
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-  });
+        Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+      `,
+  },
+};
diff --git a/examples/polymer-cli/src/stories/components/app.stories.js b/examples/polymer-cli/src/stories/components/app.stories.js
new file mode 100644
index 00000000000..95173e6dc76
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/app.stories.js
@@ -0,0 +1,11 @@
+import '../../polymer-playground-app.html';
+
+export default {
+  title: 'App',
+};
+
+export const fullApp = () =>
+  '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>';
+fullApp.story = {
+  name: 'full app',
+};
diff --git a/examples/polymer-cli/src/stories/components/button.stories.js b/examples/polymer-cli/src/stories/components/button.stories.js
new file mode 100644
index 00000000000..bbea3969239
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/button.stories.js
@@ -0,0 +1,8 @@
+import '../../playground-button.html';
+
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => '<playground-button></playground-button>';
+export const square = () => '<playground-button is-square></playground-button>';
diff --git a/examples/polymer-cli/src/stories/components/welcome.stories.js b/examples/polymer-cli/src/stories/components/welcome.stories.js
new file mode 100644
index 00000000000..2113c1bd104
--- /dev/null
+++ b/examples/polymer-cli/src/stories/components/welcome.stories.js
@@ -0,0 +1,14 @@
+import { linkTo } from '@storybook/addon-links';
+import { document } from 'global';
+
+import '../storybook-welcome-to-polymer.html';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => {
+  const el = document.createElement('storybook-welcome-to-polymer');
+  el.goToButton = linkTo('Button');
+  return el;
+};
diff --git a/examples/polymer-cli/src/stories/core.stories.js b/examples/polymer-cli/src/stories/core.stories.js
index 4fefac0a6df..96633026df6 100644
--- a/examples/polymer-cli/src/stories/core.stories.js
+++ b/examples/polymer-cli/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { storiesOf, addParameters } from '@storybook/polymer';
+import { addParameters } from '@storybook/polymer';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -6,13 +6,21 @@ const storyParameter = 'storyParameter';
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters: { fileName, ...parameters } }) =>
-      `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
-    {
-      storyParameter,
-    }
-  );
+export default {
+  title: 'Core|Parameters',
+
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  `<div>Parameters are ${JSON.stringify(parameters)}</div>`;
+
+passedToStory.story = {
+  name: 'passed to story',
+
+  parameters: {
+    storyParameter,
+  },
+};
diff --git a/examples/polymer-cli/src/stories/custom-decorators.stories.js b/examples/polymer-cli/src/stories/custom-decorators.stories.js
index 158b8be733c..f83b5575062 100644
--- a/examples/polymer-cli/src/stories/custom-decorators.stories.js
+++ b/examples/polymer-cli/src/stories/custom-decorators.stories.js
@@ -1,14 +1,23 @@
-import { storiesOf } from '@storybook/polymer';
 import { document } from 'global';
 
-storiesOf('Custom|Decorator', module)
-  .addDecorator(storyFn => {
-    const el = storyFn();
-    el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
-    return el;
-  })
-  .add('example decoration', () => {
-    const el = document.createElement('playground-button');
-    el.setAttribute('title', 'An example title');
-    return el;
-  });
+export default {
+  title: 'Custom|Decorator',
+
+  decorators: [
+    storyFn => {
+      const el = storyFn();
+      el.setAttribute('title', `${el.getAttribute('title')} - decorated`);
+      return el;
+    },
+  ],
+};
+
+export const exampleDecoration = () => {
+  const el = document.createElement('playground-button');
+  el.setAttribute('title', 'An example title');
+  return el;
+};
+
+exampleDecoration.story = {
+  name: 'example decoration',
+};
diff --git a/examples/polymer-cli/src/stories/index.stories.js b/examples/polymer-cli/src/stories/index.stories.js
deleted file mode 100644
index 9dea636686e..00000000000
--- a/examples/polymer-cli/src/stories/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { storiesOf } from '@storybook/polymer';
-import { linkTo } from '@storybook/addon-links';
-import { document } from 'global';
-
-import '../polymer-playground-app.html';
-import '../playground-button.html';
-import './storybook-welcome-to-polymer.html';
-
-storiesOf('Welcome', module).add('Welcome', () => {
-  const el = document.createElement('storybook-welcome-to-polymer');
-  el.goToButton = linkTo('Button');
-  return el;
-});
-
-storiesOf('App', module).add(
-  'full app',
-  () => '<polymer-playground-app title="Storybook for Polymer"></polymer-playground-app>'
-);
-
-storiesOf('Button', module)
-  .add('rounded', () => '<playground-button></playground-button>')
-  .add('square', () => '<playground-button is-square></playground-button>');
diff --git a/examples/preact-kitchen-sink/.storybook/config.js b/examples/preact-kitchen-sink/.storybook/config.js
index 1394b0a1b2b..abc8f9d4a3e 100644
--- a/examples/preact-kitchen-sink/.storybook/config.js
+++ b/examples/preact-kitchen-sink/.storybook/config.js
@@ -1,5 +1,5 @@
 /** @jsx h */
-import { addParameters, configure, addDecorator } from '@storybook/preact';
+import { load, addParameters, addDecorator } from '@storybook/preact';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -10,12 +10,4 @@ addParameters({
   },
 });
 
-const loadStories = () => {
-  require('../src/stories/index.stories');
-
-  const requireContext = require.context('../src', true, /\.stories\.js$/);
-
-  requireContext.keys().forEach(filename => requireContext(filename));
-};
-
-configure(loadStories, module);
+load(require.context('../src', true, /\.stories\.js$/), module);
diff --git a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
new file mode 100644
index 00000000000..3a98103e786
--- /dev/null
+++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
@@ -0,0 +1,761 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addons|Actions Action and method 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Action only 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions actionAndMethod 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions actionOnly 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions multipleActions 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Actions multipleActionsObject 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+  ondblclick={[Function]}
+>
+  (Double) click me to log the action
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+<button
+  class="button"
+>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+<button
+  class="button"
+>
+  This one too!
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds example1 1`] = `
+<button
+  class="button"
+>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds example2 1`] = `
+<button
+  class="button"
+>
+  This one too!
+</button>
+`;
+
+exports[`Storyshots Addons|Centered Button  1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": "0",
+      "display": "flex",
+      "left": "0",
+      "overflow": "auto",
+      "position": "fixed",
+      "right": "0",
+      "top": "0",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+        "maxHeight": "100%",
+      }
+    }
+  >
+    <button
+      class="button"
+    >
+      A button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Centered button 1`] = `
+<div
+  style={
+    Object {
+      "alignItems": "center",
+      "bottom": "0",
+      "display": "flex",
+      "left": "0",
+      "overflow": "auto",
+      "position": "fixed",
+      "right": "0",
+      "top": "0",
+    }
+  }
+>
+  <div
+    style={
+      Object {
+        "margin": "auto",
+        "maxHeight": "100%",
+      }
+    }
+  >
+    <button
+      class="button"
+    >
+      A button
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+<div
+  style={
+    Object {
+      "background": "#173F5F",
+      "color": "white",
+      "height": "100vh",
+      "padding": "10px",
+    }
+  }
+>
+  <div>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Contexts simpleCssTheming 1`] = `
+<div
+  style={
+    Object {
+      "background": "#173F5F",
+      "color": "white",
+      "height": "100vh",
+      "padding": "10px",
+    }
+  }
+>
+  <div>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs All knobs 1`] = `
+<div
+  style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+  <h3>
+    today is January 20, 2017
+  </h3>
+  <p>
+    I have a stock of 20 apples, costing &dollar;2.25 each.
+  </p>
+  <p>
+    Also, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs allKnobs 1`] = `
+<div
+  style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+  <h3>
+    today is January 20, 2017
+  </h3>
+  <p>
+    I have a stock of 20 apples, costing &dollar;2.25 each.
+  </p>
+  <p>
+    Also, I have:
+  </p>
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addons|Links Go to welcome 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  This button links to Welcome
+</button>
+`;
+
+exports[`Storyshots Addons|Links goToWelcome 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  This button links to Welcome
+</button>
+`;
+
+exports[`Storyshots Addons|Notes Note with HTML 1`] = `
+<p>
+  <span>
+    🤔😳😯😮
+  </span>
+  <br />
+  <span>
+    😄😩😓😱
+  </span>
+  <br />
+  <span>
+    🤓😑😶😊
+  </span>
+</p>
+`;
+
+exports[`Storyshots Addons|Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots Addons|Notes noteWithHtml 1`] = `
+<p>
+  <span>
+    🤔😳😯😮
+  </span>
+  <br />
+  <span>
+    😄😩😓😱
+  </span>
+  <br />
+  <span>
+    🤓😑😶😊
+  </span>
+</p>
+`;
+
+exports[`Storyshots Addons|Notes simpleNote 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots Button with some emoji 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  <span
+    aria-label="so cool"
+    role="img"
+  >
+    😀 😎 👍 💯
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button with text 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Button withSomeEmoji 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  <span
+    aria-label="so cool"
+    role="img"
+  >
+    😀 😎 👍 💯
+  </span>
+</button>
+`;
+
+exports[`Storyshots Button withText 1`] = `
+<button
+  class="button"
+  onclick={[Function]}
+>
+  Hello Button
+</button>
+`;
+
+exports[`Storyshots Welcome to Storybook 1`] = `
+<article
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "padding": 15,
+    }
+  }
+>
+  <h1>
+    Welcome to storybook for Preact
+  </h1>
+  <img
+    alt="Preact logo"
+    src="./logo.png"
+    style={
+      Object {
+        "display": "block",
+        "height": "150px",
+        "margin": "0 auto",
+        "text-align": "center",
+      }
+    }
+  />
+  <p>
+    This is a UI component dev environment for your Preact app.
+  </p>
+  <p>
+    We've added some basic stories inside the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories
+    </code>
+     directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample 
+    <button
+      onClick={[Function]}
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottom": "1px solid #1474f3",
+          "borderLeft": "none",
+          "borderRight": "none",
+          "borderTop": "none",
+          "color": "#1474f3",
+          "cursor": "pointer",
+          "font": "inherit",
+          "padding": 0,
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      type="button"
+    >
+      stories
+    </button>
+     for a component called 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the 
+    <a
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     section in our documentation.
+  </p>
+  <p
+    style={
+      Object {
+        "opacity": 0.5,
+      }
+    }
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      .storybook/webpack.config.js
+    </code>
+     to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;
+
+exports[`Storyshots Welcome toStorybook 1`] = `
+<article
+  style={
+    Object {
+      "backgroundColor": "#ffffff",
+      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
+      "lineHeight": 1.4,
+      "padding": 15,
+    }
+  }
+>
+  <h1>
+    Welcome to storybook for Preact
+  </h1>
+  <img
+    alt="Preact logo"
+    src="./logo.png"
+    style={
+      Object {
+        "display": "block",
+        "height": "150px",
+        "margin": "0 auto",
+        "text-align": "center",
+      }
+    }
+  />
+  <p>
+    This is a UI component dev environment for your Preact app.
+  </p>
+  <p>
+    We've added some basic stories inside the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories
+    </code>
+     directory.
+    <br />
+    A story is a single state of one or more UI components. You can have as many stories as you want.
+    <br />
+    (Basically a story is like a visual test case.)
+  </p>
+  <p>
+    See these sample 
+    <button
+      onClick={[Function]}
+      style={
+        Object {
+          "backgroundColor": "transparent",
+          "borderBottom": "1px solid #1474f3",
+          "borderLeft": "none",
+          "borderRight": "none",
+          "borderTop": "none",
+          "color": "#1474f3",
+          "cursor": "pointer",
+          "font": "inherit",
+          "padding": 0,
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      type="button"
+    >
+      stories
+    </button>
+     for a component called 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+    .
+  </p>
+  <p>
+    Just like that, you can add your own components as stories.
+    <br />
+    You can also edit those components and see changes right away.
+    <br />
+    (Try editing the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      Button
+    </code>
+     stories located at 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      src/stories/index.js
+    </code>
+    .)
+  </p>
+  <p>
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    Have a look at the 
+    <a
+      href="https://storybook.js.org/basics/writing-stories"
+      rel="noopener noreferrer"
+      style={
+        Object {
+          "borderBottom": "1px solid #1474f3",
+          "color": "#1474f3",
+          "paddingBottom": 2,
+          "textDecoration": "none",
+        }
+      }
+      target="_blank"
+    >
+      Writing Stories
+    </a>
+     section in our documentation.
+  </p>
+  <p
+    style={
+      Object {
+        "opacity": 0.5,
+      }
+    }
+  >
+    <b>
+      NOTE:
+    </b>
+    <br />
+    Have a look at the 
+    <code
+      style={
+        Object {
+          "backgroundColor": "#f3f2f2",
+          "border": "1px solid #eae9e9",
+          "borderRadius": 4,
+          "color": "#3a3a3a",
+          "fontSize": 15,
+          "fontWeight": 600,
+          "padding": "2px 5px",
+        }
+      }
+    >
+      .storybook/webpack.config.js
+    </code>
+     to add webpack loaders and plugins you are using in this project.
+  </p>
+</article>
+`;
diff --git a/examples/preact-kitchen-sink/package.json b/examples/preact-kitchen-sink/package.json
index 5b3d6aa7a81..4870c8eeaad 100644
--- a/examples/preact-kitchen-sink/package.json
+++ b/examples/preact-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "preact-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,20 +16,21 @@
   "devDependencies": {
     "@babel/core": "^7.3.4",
     "@babel/plugin-transform-runtime": "^7.2.0",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-contexts": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/preact": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-contexts": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/preact": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
     "file-loader": "^3.0.1",
diff --git a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot b/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
deleted file mode 100644
index 9e0d000a05e..00000000000
--- a/examples/preact-kitchen-sink/src/stories/__snapshots__/index.stories.storyshot
+++ /dev/null
@@ -1,209 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button with some emoji 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
->
-  <span
-    aria-label="so cool"
-    role="img"
-  >
-    😀 😎 👍 💯
-  </span>
-</button>
-`;
-
-exports[`Storyshots Button with text 1`] = `
-<button
-  class="button"
-  onclick={[Function]}
->
-  Hello Button
-</button>
-`;
-
-exports[`Storyshots Welcome to Storybook 1`] = `
-<article
-  style={
-    Object {
-      "backgroundColor": "#ffffff",
-      "fontFamily": "\\"Helvetica Neue\\", Helvetica, \\"Segoe UI\\", Arial, freesans, sans-serif",
-      "lineHeight": 1.4,
-      "padding": 15,
-    }
-  }
->
-  <h1>
-    Welcome to storybook for Preact
-  </h1>
-  <img
-    alt="Preact logo"
-    src="./logo.png"
-    style={
-      Object {
-        "display": "block",
-        "height": "150px",
-        "margin": "0 auto",
-        "text-align": "center",
-      }
-    }
-  />
-  <p>
-    This is a UI component dev environment for your Preact app.
-  </p>
-  <p>
-    We've added some basic stories inside the 
-    <code
-      style={
-        Object {
-          "backgroundColor": "#f3f2f2",
-          "border": "1px solid #eae9e9",
-          "borderRadius": 4,
-          "color": "#3a3a3a",
-          "fontSize": 15,
-          "fontWeight": 600,
-          "padding": "2px 5px",
-        }
-      }
-    >
-      src/stories
-    </code>
-     directory.
-    <br />
-    A story is a single state of one or more UI components. You can have as many stories as you want.
-    <br />
-    (Basically a story is like a visual test case.)
-  </p>
-  <p>
-    See these sample 
-    <button
-      onClick={[Function]}
-      style={
-        Object {
-          "backgroundColor": "transparent",
-          "borderBottom": "1px solid #1474f3",
-          "borderLeft": "none",
-          "borderRight": "none",
-          "borderTop": "none",
-          "color": "#1474f3",
-          "cursor": "pointer",
-          "font": "inherit",
-          "padding": 0,
-          "paddingBottom": 2,
-          "textDecoration": "none",
-        }
-      }
-      type="button"
-    >
-      stories
-    </button>
-     for a component called 
-    <code
-      style={
-        Object {
-          "backgroundColor": "#f3f2f2",
-          "border": "1px solid #eae9e9",
-          "borderRadius": 4,
-          "color": "#3a3a3a",
-          "fontSize": 15,
-          "fontWeight": 600,
-          "padding": "2px 5px",
-        }
-      }
-    >
-      Button
-    </code>
-    .
-  </p>
-  <p>
-    Just like that, you can add your own components as stories.
-    <br />
-    You can also edit those components and see changes right away.
-    <br />
-    (Try editing the 
-    <code
-      style={
-        Object {
-          "backgroundColor": "#f3f2f2",
-          "border": "1px solid #eae9e9",
-          "borderRadius": 4,
-          "color": "#3a3a3a",
-          "fontSize": 15,
-          "fontWeight": 600,
-          "padding": "2px 5px",
-        }
-      }
-    >
-      Button
-    </code>
-     stories located at 
-    <code
-      style={
-        Object {
-          "backgroundColor": "#f3f2f2",
-          "border": "1px solid #eae9e9",
-          "borderRadius": 4,
-          "color": "#3a3a3a",
-          "fontSize": 15,
-          "fontWeight": 600,
-          "padding": "2px 5px",
-        }
-      }
-    >
-      src/stories/index.js
-    </code>
-    .)
-  </p>
-  <p>
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    Have a look at the 
-    <a
-      href="https://storybook.js.org/basics/writing-stories"
-      rel="noopener noreferrer"
-      style={
-        Object {
-          "borderBottom": "1px solid #1474f3",
-          "color": "#1474f3",
-          "paddingBottom": 2,
-          "textDecoration": "none",
-        }
-      }
-      target="_blank"
-    >
-      Writing Stories
-    </a>
-     section in our documentation.
-  </p>
-  <p
-    style={
-      Object {
-        "opacity": 0.5,
-      }
-    }
-  >
-    <b>
-      NOTE:
-    </b>
-    <br />
-    Have a look at the 
-    <code
-      style={
-        Object {
-          "backgroundColor": "#f3f2f2",
-          "border": "1px solid #eae9e9",
-          "borderRadius": 4,
-          "color": "#3a3a3a",
-          "fontSize": 15,
-          "fontWeight": 600,
-          "padding": "2px 5px",
-        }
-      }
-    >
-      .storybook/webpack.config.js
-    </code>
-     to add webpack loaders and plugins you are using in this project.
-  </p>
-</article>
-`;
diff --git a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
index dfd9b9ddc54..d673f08625b 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-actions.stories.js
@@ -2,27 +2,48 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { action, actions } from '@storybook/addon-actions';
 import Button from '../Button';
 
-storiesOf('Addons|Actions', module)
-  .add('Action only', () => <Button onclick={action('log')}>Click me to log the action</Button>)
-  .add('Multiple actions', () => (
-    <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
-  ))
-  .add('Multiple actions, object', () => (
-    <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
-      (Double) click me to log the action
-    </Button>
-  ))
-  .add('Action and method', () => (
-    <Button
-      onclick={event => {
-        event.preventDefault();
-        action('method-log')(event.target);
-      }}
-    >
-      Click me to log the action
-    </Button>
-  ));
+export default {
+  title: 'Addons|Actions',
+};
+
+export const actionOnly = () => <Button onclick={action('log')}>Click me to log the action</Button>;
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () => (
+  <Button {...actions('onclick', 'ondblclick')}>(Double) click me to log the action</Button>
+);
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
+
+export const multipleActionsObject = () => (
+  <Button {...actions({ onclick: 'click', ondblclick: 'double-click' })}>
+    (Double) click me to log the action
+  </Button>
+);
+
+multipleActionsObject.story = {
+  name: 'Multiple actions, object',
+};
+
+export const actionAndMethod = () => (
+  <Button
+    onclick={event => {
+      event.preventDefault();
+      action('method-log')(event.target);
+    }}
+  >
+    Click me to log the action
+  </Button>
+);
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 18566596142..844af43ad48 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -2,16 +2,29 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
-
 import Button from '../Button';
 
-storiesOf('Addons|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addons|Backgrounds',
+
+  parameters: {
     backgrounds: [
       { name: 'twitter', value: '#00aced' },
       { name: 'facebook', value: '#3b5998', default: true },
     ],
-  })
-  .add('Example 1', () => <Button>You should be able to switch backgrounds for this story</Button>)
-  .add('Example 2', () => <Button>This one too!</Button>);
+  },
+};
+
+export const example1 = () => (
+  <Button>You should be able to switch backgrounds for this story</Button>
+);
+
+example1.story = {
+  name: 'Example 1',
+};
+
+export const example2 = () => <Button>This one too!</Button>;
+
+example2.story = {
+  name: 'Example 2',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
index 38b9820d043..3af8adceef4 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-centered.stories.js
@@ -2,10 +2,17 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import Centered from '@storybook/addon-centered/preact';
 import Button from '../Button';
 
-storiesOf('Addons|Centered', module)
-  .addDecorator(Centered)
-  .add('Button', () => <Button>A button</Button>);
+export default {
+  title: 'Addons|Centered',
+  decorators: [Centered],
+
+  parameters: {
+    component: Centered,
+  },
+};
+
+export const button = () => <Button>A button</Button>;
+button.story = { name: 'Button ' };
diff --git a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
index cb20874a727..2fad6842ffc 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -1,6 +1,5 @@
 /** @jsx h */
 import { h } from 'preact';
-import { storiesOf } from '@storybook/preact';
 import { withContexts } from '@storybook/addon-contexts/preact';
 
 // Example A: Simple CSS Theming
@@ -41,60 +40,19 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addons|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addons|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => <div>I'm a children of the injected 'div' (where provides a theming context).</div>,
-  {
-    contexts: storyLevelContexts,
-  }
+export const simpleCssTheming = () => (
+  <div>I'm a children of the injected 'div' (where provides a theming context).</div>
 );
 
-// TODO: uncomment code block after the adaption of Preact X (need to be imported)
-// Example B: Language (Preact X contextAPI)
-// const NaiveIntlContext = createContext({
-//   locale: 'unknown',
-//   greeting: 'NULL',
-// });
-//
-// stories.add(
-//   'Languages',
-//   () => (
-//     <NaiveIntlContext.Consumer>
-//       {({ locale, greeting }) => `Your locale is "${locale}", so I say "${greeting}"!`}
-//     </NaiveIntlContext.Consumer>
-//   ),
-//   {
-//     contexts: [
-//       {
-//         icon: 'globe',
-//         title: 'Languages',
-//         components: [NaiveIntlContext.Provider],
-//         params: [
-//           {
-//             name: 'English',
-//             props: {
-//               value: { locale: 'en', greeting: 'Hello' },
-//             },
-//           },
-//           {
-//             name: 'French',
-//             props: {
-//               value: { locale: 'fr', greeting: 'Bonjour' },
-//             },
-//           },
-//           {
-//             name: 'Chinese',
-//             props: {
-//               value: { locale: 'cn', greeting: '你好' },
-//             },
-//           },
-//         ],
-//         options: {
-//           cancelable: true,
-//         },
-//       },
-//     ],
-//   }
-// );
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+
+  parameters: {
+    contexts: storyLevelContexts,
+  },
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
index ac6e18626e2..b06af614d22 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -2,7 +2,6 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -16,56 +15,64 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addons|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
+export default {
+  title: 'Addons|Knobs',
+  decorators: [withKnobs],
+};
 
-    return <div>{content}</div>;
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return <div>{content}</div>;
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
-
-    button('Arbitrary action', action('You clicked it!'));
-
-    return (
-      <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
-        <h1>My name is {name},</h1>
-        <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
-        <p>{stockMessage}</p>
-        <p>Also, I have:</p>
-        <ul>
-          {items.map(item => (
-            <li key={item}>{item}</li>
-          ))}
-        </ul>
-        <p>{salutation}</p>
-      </div>
-    );
+export const allKnobs = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
   });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
+
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
+
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return (
+    <div style={`border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px`}>
+      <h1>My name is {name},</h1>
+      <h3>today is {new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
+      <p>{stockMessage}</p>
+      <p>Also, I have:</p>
+      <ul>
+        {items.map(item => (
+          <li key={item}>{item}</li>
+        ))}
+      </ul>
+      <p>{salutation}</p>
+    </div>
+  );
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
index 470cd246650..c1ab6fd5524 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-links.stories.js
@@ -2,11 +2,18 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { linkTo } from '@storybook/addon-links';
 
 import Button from '../Button';
 
-storiesOf('Addons|Links', module).add('Go to welcome', () => (
+export default {
+  title: 'Addons|Links',
+};
+
+export const goToWelcome = () => (
   <Button onclick={linkTo('Welcome')}>This button links to Welcome</Button>
-));
+);
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
index 198f425fa4b..bec41784912 100644
--- a/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/preact-kitchen-sink/src/stories/addon-notes.stories.js
@@ -2,45 +2,51 @@
 
 import { h } from 'preact';
 
-import { storiesOf } from '@storybook/preact';
 import { withNotes } from '@storybook/addon-notes';
 
-storiesOf('Addons|Notes', module)
-  .addDecorator(withNotes)
-  .add(
-    'Simple note',
-    () => (
-      <p>
-        <strong>
-          Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
-          vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec
-          consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus
-          arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at
-          fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam,
-          efficitur pulvinar mi urna id urna.
-        </strong>
-      </p>
-    ),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => (
-      <p>
-        <span>🤔😳😯😮</span>
-        <br />
-        <span>😄😩😓😱</span>
-        <br />
-        <span>🤓😑😶😊</span>
-      </p>
-    ),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export default {
+  title: 'Addons|Notes',
+  decorators: [withNotes],
+};
 
-      <em>It's not all that important to be honest, but..</em>
+export const simpleNote = () => (
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed
+      vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur
+      velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit
+      amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla
+      sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna
+      id urna.
+    </strong>
+  </p>
+);
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
+
+export const noteWithHtml = () => (
+  <p>
+    <span>🤔😳😯😮</span>
+    <br />
+    <span>😄😩😓😱</span>
+    <br />
+    <span>🤓😑😶😊</span>
+  </p>
+);
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/preact-kitchen-sink/src/stories/button.stories.js b/examples/preact-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 00000000000..193b7310393
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,32 @@
+/** @jsx h */
+
+import { h } from 'preact';
+import { action } from '@storybook/addon-actions';
+
+import Button from '../Button';
+
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+  },
+};
+
+export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onclick={action('clicked')}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/preact-kitchen-sink/src/stories/index.stories.js b/examples/preact-kitchen-sink/src/stories/index.stories.js
deleted file mode 100644
index 4c64703c0e9..00000000000
--- a/examples/preact-kitchen-sink/src/stories/index.stories.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/** @jsx h */
-
-import { h } from 'preact';
-
-import { storiesOf } from '@storybook/preact';
-import { action } from '@storybook/addon-actions';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from '../Welcome';
-import Button from '../Button';
-
-storiesOf('Welcome', module).add('to Storybook', () => <Welcome showApp={linkTo('Button')} />);
-
-storiesOf('Button', module)
-  .add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onclick={action('clicked')}>
-      <span role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </span>
-    </Button>
-  ));
diff --git a/examples/preact-kitchen-sink/src/stories/welcome.stories.js b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 00000000000..1a996cfe809
--- /dev/null
+++ b/examples/preact-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,19 @@
+/** @jsx h */
+
+import { h } from 'preact';
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from '../Welcome';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const toStorybook = () => <Welcome showApp={linkTo('Button')} />;
+
+toStorybook.story = {
+  name: 'to Storybook',
+};
diff --git a/examples/rax-kitchen-sink/.storybook/config.js b/examples/rax-kitchen-sink/.storybook/config.js
index c445e913053..b94a39df032 100644
--- a/examples/rax-kitchen-sink/.storybook/config.js
+++ b/examples/rax-kitchen-sink/.storybook/config.js
@@ -1,9 +1,9 @@
-import { configure, addParameters } from '@storybook/rax';
+import { load, addParameters } from '@storybook/rax';
 
 addParameters({
   options: {
     name: 'Rax Kitchen Sink',
-    url: 'https://github.com/storybooks/storybook/tree/master/examples/rax-kitchen-sink',
+    url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink',
     goFullScreen: false,
     showAddonsPanel: true,
     showSearchBox: false,
@@ -15,13 +15,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  // put welcome screen at the top of the list so it's the first one displayed
-  require('../src/stories/index.stories');
-
-  // automatically import all story js files that end with *.stories.js
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/rax-kitchen-sink/package.json b/examples/rax-kitchen-sink/package.json
index 98ca817db91..4f1df9c4b7e 100644
--- a/examples/rax-kitchen-sink/package.json
+++ b/examples/rax-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rax-kitchen-sink",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "test:generate-output": "jest --json --outputFile=jest-test-results.json --config=./jest-addon.config.js",
@@ -24,22 +24,23 @@
     "rax-view": "^0.6.5"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-events": "5.2.0-alpha.23",
-    "@storybook/addon-info": "5.2.0-alpha.23",
-    "@storybook/addon-jest": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/rax": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-events": "5.2.0-alpha.32",
+    "@storybook/addon-info": "5.2.0-alpha.32",
+    "@storybook/addon-jest": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/rax": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "babel-eslint": "^8.2.2",
     "babel-preset-rax": "^1.0.0-beta.0",
     "rax-scripts": "^1.0.0-beta.10",
diff --git a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
index c182229a2b2..a13959df30e 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-a11y.stories.js
@@ -1,31 +1,45 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withA11Y } from '@storybook/addon-a11y';
 import Text from 'rax-text';
 import View from 'rax-view';
 import Button from 'rax-button';
 import markdown from './note.md';
 
-storiesOf('Addon|addon-a11y', module)
-  .addDecorator(withA11Y)
-  .add('basic', () => <Text>RAX TEXT NODE</Text>, { notes: 'super awesome note' })
-  .add('with style', () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>, {
+export default {
+  title: 'Addon|addon-a11y',
+  decorators: [withA11Y],
+};
+
+export const basic = () => <Text>RAX TEXT NODE</Text>;
+
+basic.story = {
+  parameters: { notes: 'super awesome note' },
+};
+
+export const withStyle = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+
+withStyle.story = {
+  name: 'with style',
+  parameters: {
     notes: ' this is a note with emojis 🚀🚀🚀🚀🚀',
-  })
-  .add(
-    'with markdown',
-    () => (
-      <Button>
-        {' '}
-        <Text id="text1">😀 😎 👍 💯</Text>
-        <View>
-          <Text id="text1">aaa</Text>
-        </View>{' '}
-      </Button>
-    ),
-    {
-      notes: {
-        markdown,
-      },
-    }
-  );
+  },
+};
+
+export const withMarkdown = () => (
+  <Button>
+    {' '}
+    <Text id="text1">😀 😎 👍 💯</Text>
+    <View>
+      <Text id="text1">aaa</Text>
+    </View>{' '}
+  </Button>
+);
+
+withMarkdown.story = {
+  name: 'with markdown',
+  parameters: {
+    notes: {
+      markdown,
+    },
+  },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
index 8af5c45494b..908ed8b8709 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,16 +1,27 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { action } from '@storybook/addon-actions';
 
 import Button from 'rax-button';
 import Text from 'rax-text';
 
-storiesOf('Addon|addon-actions', module)
-  .add('with text', () => <Button onclick={action('clicked')}>Hello Button</Button>)
-  .add('with some emoji', () => (
-    <Button onclick={action('clicked')}>
-      <Text role="img" aria-label="so cool">
-        😀 😎 👍 💯
-      </Text>
-    </Button>
-  ));
+export default {
+  title: 'Addon|addon-actions',
+};
+
+export const withText = () => <Button onclick={action('clicked')}>Hello Button</Button>;
+
+withText.story = {
+  name: 'with text',
+};
+
+export const withSomeEmoji = () => (
+  <Button onclick={action('clicked')}>
+    <Text role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </Text>
+  </Button>
+);
+
+withSomeEmoji.story = {
+  name: 'with some emoji',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
index a57ea752cde..d6afa8ed056 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,15 +1,20 @@
 import { createElement } from 'rax';
 import Centered from '@storybook/addon-centered/rax';
-import { storiesOf } from '@storybook/rax';
 import Button from 'rax-button';
 import Text from 'rax-text';
 import App from '../components/App';
 
-storiesOf('Addon|addon-centered', module)
-  .addDecorator(Centered)
-  .add('Button', () => (
-    <Button>
-      <Text>BUTTON</Text>
-    </Button>
-  ))
-  .add('App', () => <App />);
+export default {
+  title: 'Addon|addon-centered',
+  decorators: [Centered],
+};
+
+export const button = () => (
+  <Button>
+    <Text>BUTTON</Text>
+  </Button>
+);
+button.story = { name: 'Button' };
+
+export const app = () => <App />;
+app.story = { name: 'App' };
diff --git a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js b/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
index 339a8f269b7..ec064c38108 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-events.stories.js
@@ -1,5 +1,4 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import withEvents from '@storybook/addon-events';
 import ee from 'event-emitter';
 import Logger, { EVENTS } from '../components/Logger';
@@ -30,6 +29,13 @@ const decorator = withEvents({
   ],
 });
 
-storiesOf('Addon|addon-events', module)
-  .addDecorator(decorator)
-  .add('Events Logger', () => <Logger emitter={emitter} />);
+export default {
+  title: 'Addon|addon-events',
+  decorators: [decorator],
+};
+
+export const eventsLogger = () => <Logger emitter={emitter} />;
+
+eventsLogger.story = {
+  name: 'Events Logger',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js b/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
index a14cec68e01..a931ce29287 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-jest.stories.js
@@ -1,12 +1,23 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withTests } from '@storybook/addon-jest';
 import App from '../components/App';
 import Welcome from '../components/Welcome';
 // eslint-disable-next-line import/no-unresolved
 import results from '../../jest-test-results.json';
 
-storiesOf('Addon|addon-jest', module)
-  .addDecorator(withTests({ results }))
-  .add('App', () => <App />, { jest: ['components/App/App.test.js'] })
-  .add('Welcome', () => <Welcome />, { jest: ['components/Welcome/Welcome.test.js'] });
+export default {
+  title: 'Addon|addon-jest',
+  decorators: [withTests({ results })],
+};
+
+export const app = () => <App />;
+app.story = {
+  name: 'App',
+  parameters: { jest: ['components/App/App.test.js'] },
+};
+
+export const welcome = () => <Welcome />;
+welcome.story = {
+  name: 'Welcome',
+  parameters: { jest: ['components/Welcome/Welcome.test.js'] },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
index 40c23497892..45ad805ae6a 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,18 +1,15 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
 
 import Button from 'rax-button';
 import Text from 'rax-text';
 
-const stories = storiesOf('Addon|addon-knobs', module);
+export default {
+  title: 'Addon|addon-knobs',
+  decorators: [withKnobs],
+};
 
-// Add the `withKnobs` decorator to add knobs support to your stories.
-// You can also configure `withKnobs` as a global decorator.
-stories.addDecorator(withKnobs);
-
-// Knobs for Rax props
-stories.add('with a button', () => {
+export const withAButton = () => {
   const disabled = boolean('Disabled', false);
   const hasStyle = boolean('Has Style', false);
   const style = hasStyle
@@ -36,13 +33,20 @@ stories.add('with a button', () => {
       <Text style={textStyle}>{text('Label', 'Hello Storybook')}</Text>
     </Button>
   );
-});
+};
 
-// Knobs as dynamic variables.
-stories.add('as dynamic variables', () => {
+withAButton.story = {
+  name: 'with a button',
+};
+
+export const asDynamicVariables = () => {
   const name = text('Name', 'Benjamin Button');
   const age = number('Age', 89);
 
   const content = `I am ${name} and I'm ${age} years old.`;
   return <Text>{content}</Text>;
-});
+};
+
+asDynamicVariables.story = {
+  name: 'as dynamic variables',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js b/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
index e811ffc68b9..e95e6934c26 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,20 +1,31 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { linkTo } from '@storybook/addon-links';
 import Picker from 'rax-picker';
 import Welcome from '../components/Welcome';
 
-storiesOf('Addon|addon-links', module)
-  .add('Link to notes', () => {
-    return (
-      <Picker onValueChange={linkTo('Addon|addon-notes', value => value)}>
-        <Picker.Item label="Choose story in Addon|addon-notes" />
-        <Picker.Item value="basic" label="basic" />
-        <Picker.Item value="with emojies" label="with emojies" />
-        <Picker.Item value="with markdown" label="with markdown" />
-      </Picker>
-    );
-  })
-  .add('Welcome screen with link to Basic > Button', () => (
-    <Welcome showApp={linkTo('Basic', 'Button')} />
-  ));
+export default {
+  title: 'Addon|addon-links',
+};
+
+export const linkToNotes = () => {
+  return (
+    <Picker onValueChange={linkTo('Addon|addon-notes', value => value)}>
+      <Picker.Item label="Choose story in Addon|addon-notes" />
+      <Picker.Item value="basic" label="basic" />
+      <Picker.Item value="with emojies" label="with emojies" />
+      <Picker.Item value="with markdown" label="with markdown" />
+    </Picker>
+  );
+};
+
+linkToNotes.story = {
+  name: 'Link to notes',
+};
+
+export const welcomeScreenWithLinkToBasicButton = () => (
+  <Welcome showApp={linkTo('Basic', 'Button')} />
+);
+
+welcomeScreenWithLinkToBasicButton.story = {
+  name: 'Welcome screen with link to Basic > Button',
+};
diff --git a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
index d9bfd66942c..fd70ef90343 100644
--- a/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,17 +1,35 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { withNotes } from '@storybook/addon-notes';
 import Text from 'rax-text';
 import markdown from './note.md';
 
-storiesOf('Addon|addon-notes', module)
-  .addDecorator(withNotes)
-  .add('basic', () => <Text>RAX TEXT NODE</Text>, { notes: 'super awesome note' })
-  .add('with emojies', () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>, {
+export default {
+  title: 'Addon|addon-notes',
+  decorators: [withNotes],
+};
+
+export const basic = () => <Text>RAX TEXT NODE</Text>;
+
+basic.story = {
+  parameters: { notes: 'super awesome note' },
+};
+
+export const withEmojies = () => <Text style={{ fontSize: 20, color: 'blue' }}>Styled text</Text>;
+
+withEmojies.story = {
+  name: 'with emojies',
+  parameters: {
     notes: ' this is a note with emojies 🚀🚀🚀🚀🚀',
-  })
-  .add('with markdown', () => <Text>😀 😎 👍 💯</Text>, {
+  },
+};
+
+export const withMarkdown = () => <Text>😀 😎 👍 💯</Text>;
+
+withMarkdown.story = {
+  name: 'with markdown',
+  parameters: {
     notes: {
       markdown,
     },
-  });
+  },
+};
diff --git a/examples/rax-kitchen-sink/src/stories/index.stories.js b/examples/rax-kitchen-sink/src/stories/index.stories.js
index 9e656f9110a..793c7ddc5ee 100644
--- a/examples/rax-kitchen-sink/src/stories/index.stories.js
+++ b/examples/rax-kitchen-sink/src/stories/index.stories.js
@@ -1,9 +1,18 @@
 import { createElement } from 'rax';
-import { storiesOf } from '@storybook/rax';
 import { linkTo } from '@storybook/addon-links';
 import App from '../components/App';
 import Welcome from '../components/Welcome';
 
-storiesOf('Basic', module)
-  .add('Welcome screen', () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />)
-  .add('App', () => <App />);
+export default {
+  title: 'Basic',
+};
+
+export const welcomeScreen = () => <Welcome showApp={linkTo('Addon|addon-actions', 'with text')} />;
+welcomeScreen.story = {
+  name: 'Welcome screen',
+};
+
+export const app = () => <App />;
+app.story = {
+  name: 'App',
+};
diff --git a/examples/riot-kitchen-sink/.storybook/config.js b/examples/riot-kitchen-sink/.storybook/config.js
index a17118312c5..782deea25ec 100644
--- a/examples/riot-kitchen-sink/.storybook/config.js
+++ b/examples/riot-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/riot';
+import { load, addParameters, addDecorator } from '@storybook/riot';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,11 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
new file mode 100644
index 00000000000..ec3d9b79887
--- /dev/null
+++ b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
@@ -0,0 +1,674 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action only 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Double Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    Double Click me to log the action!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      You should be able to switch backgrounds for this story!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      This one too!!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      You should be able to switch backgrounds for this story!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <my-button>
+    <button
+      class="button"
+      style="color: #42b983; border-color: #42b983"
+    >
+      This one too!!
+    </button>
+  </my-button>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <whatigot>
+    <div
+      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+    >
+       
+      <h1>
+        My name is Jane,
+      </h1>
+       
+      <h3>
+        today is January 20, 2017
+      </h3>
+       
+      <p>
+        I have a stock of 20 apples, costing $2.25 each.
+      </p>
+       
+      <p>
+        Also, I have:
+      </p>
+       
+      <ul>
+         
+        <li
+          key="Laptop"
+        >
+          Laptop
+        </li>
+        <li
+          key="Book"
+        >
+          Book
+        </li>
+        <li
+          key="Whiskey"
+        >
+          Whiskey
+        </li>
+         
+      </ul>
+       
+      <p>
+        Nice to meet you!
+      </p>
+       
+    </div>
+  </whatigot>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <whatigot>
+    <div
+      style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
+    >
+       
+      <h1>
+        My name is Jane,
+      </h1>
+       
+      <h3>
+        today is January 20, 2017
+      </h3>
+       
+      <p>
+        I have a stock of 20 apples, costing $2.25 each.
+      </p>
+       
+      <p>
+        Also, I have:
+      </p>
+       
+      <ul>
+         
+        <li
+          key="Laptop"
+        >
+          Laptop
+        </li>
+        <li
+          key="Book"
+        >
+          Book
+        </li>
+        <li
+          key="Whiskey"
+        >
+          Whiskey
+        </li>
+         
+      </ul>
+       
+      <p>
+        Nice to meet you!
+      </p>
+       
+    </div>
+  </whatigot>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+     &lt;img src=x onerror="alert('XSS Attack')" &gt; 
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="rounded button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    This button links to Welcome!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
+<div
+  data-is="my-button"
+  id="root"
+>
+  <button
+    class="rounded button"
+    style="color: #42b983; border-color: #42b983"
+  >
+    This button links to Welcome!
+  </button>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    <p>
+      🤔😳😯😮
+      <br />
+      😄😩😓😱
+      <br />
+      🤓😑😶😊
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+    </strong>
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    <p>
+      🤔😳😯😮
+      <br />
+      😄😩😓😱
+      <br />
+      🤓😑😶😊
+    </p>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <p>
+    <strong>
+      Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+    </strong>
+  </p>
+</div>
+`;
+
+exports[`Storyshots Core|Parameters passed to story 1`] = `
+<div
+  data-is="parameters"
+  id="root"
+>
+  <div>
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+  </div>
+</div>
+`;
+
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
+<div
+  data-is="parameters"
+  id="root"
+>
+  <div>
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story built as string 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <test>
+    <div>
+      simple test
+    </div>
+  </test>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story built from raw import 1`] = `
+<div
+  data-is="simpletest"
+  id="root"
+>
+  <div>
+    simple test (without parameter). Oh, by the way (... well, nothing)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story built from tags and template 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    test="with a parameter"
+  >
+    <div>
+      simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story built from the precompilation 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story built with tag 1`] = `
+<div
+  data-is="test"
+  id="root"
+>
+  <div>
+    simple test (with a parameter)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story builtAsString 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <test>
+    <div>
+      simple test
+    </div>
+  </test>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story builtFromRawImport 1`] = `
+<div
+  data-is="simpletest"
+  id="root"
+>
+  <div>
+    simple test (without parameter). Oh, by the way (... well, nothing)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story builtFromTagsAndTemplate 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    test="with a parameter"
+  >
+    <div>
+      simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story builtFromThePrecompilation 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story builtWithTag 1`] = `
+<div
+  data-is="test"
+  id="root"
+>
+  <div>
+    simple test (with a parameter)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    hacked="true"
+    test="with a parameter"
+  >
+    <div>
+      HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story tagsTemplateAndTagConstructorAtOnce 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <simpletest
+    hacked="true"
+    test="with a parameter"
+  >
+    <div>
+      HACKED : true ; simple test (with a parameter). Oh, by the way (value is mapped to riotValue)
+    </div>
+  </simpletest>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story theMountInstructionIsNotNecessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|How to create a story theOptsValueIsNotNecessary 1`] = `
+<div
+  data-is="anothertest"
+  id="root"
+>
+  <div>
+    yet another test, precompiled this time (WARN, only works in lower case, never upper case with precompiled templates)
+  </div>
+</div>
+`;
+
+exports[`Storyshots Story|Nest tags Matriochka 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <matriochka>
+    <div>
+      <tag1>
+        <div>
+          Inside tag1:
+          <ul>
+            <li>
+              <tag2>
+                <div>
+                  Inside tag2:
+                  <ul>
+                    <li>
+                      <tag3>
+                        <div>
+                          Inside tag3:
+                          <ul>
+                            <li>
+                              <tag4>
+                                <div>
+                                  Inside tag4:
+                                  <ul>
+                                    <li>
+                                      <tag5>
+                                        <div>
+                                          Inside tag5:
+                                          <ul>
+                                            <li>
+                                              Content
+                                            </li>
+                                          </ul>
+                                        </div>
+                                      </tag5>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </tag4>
+                            </li>
+                          </ul>
+                        </div>
+                      </tag3>
+                    </li>
+                  </ul>
+                </div>
+              </tag2>
+            </li>
+          </ul>
+        </div>
+      </tag1>
+    </div>
+  </matriochka>
+</div>
+`;
+
+exports[`Storyshots Story|Nest tags Three tags 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <webpage>
+    <pageheader>
+      <h1>
+        Simple title
+      </h1>
+    </pageheader>
+    <pagebody>
+      <div
+        style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
+      >
+        Simple Content
+      </div>
+    </pagebody>
+  </webpage>
+</div>
+`;
+
+exports[`Storyshots Story|Nest tags threeTags 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <webpage>
+    <pageheader>
+      <h1>
+        Simple title
+      </h1>
+    </pageheader>
+    <pagebody>
+      <div
+        style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"
+      >
+        Simple Content
+      </div>
+    </pagebody>
+  </webpage>
+</div>
+`;
diff --git a/examples/riot-kitchen-sink/package.json b/examples/riot-kitchen-sink/package.json
index cf3f892e738..84e5727b6fb 100644
--- a/examples/riot-kitchen-sink/package.json
+++ b/examples/riot-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "riot-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -16,19 +16,20 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/riot": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/riot": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
     "babel-loader": "^8.0.4",
     "cross-env": "^5.2.0",
     "file-loader": "^3.0.1",
diff --git a/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index ae019fd518c..00000000000
--- a/examples/riot-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,244 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots App App 1`] = `
-<div
-  data-is="app"
-  id="root"
->
-  <div
-    id="app"
-  >
-     
-    <img
-      src="./logo.png"
-    />
-     
-    <h1 />
-     
-    <h2>
-      Essential Links
-    </h2>
-     
-    <ul>
-       
-      <li>
-        <a
-          href="https://riot.js.org/"
-          target="_blank"
-        >
-          riot.js Docs
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riot.js.org/made-with-riot/"
-          target="_blank"
-        >
-          Showcase
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riot.js.org/download/"
-          target="_blank"
-        >
-          Download now
-        </a>
-      </li>
-       
-    </ul>
-     
-    <h2>
-      Ecosystem
-    </h2>
-     
-    <ul>
-       
-      <li>
-        <a
-          href="https://riotgear.js.org/"
-          target="_blank"
-        >
-          riot gear
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://riotgear2.github.io/"
-          target="_blank"
-        >
-          riot gear 2
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://kysonic.github.io/riot-mui/"
-          target="_blank"
-        >
-          riot material UI
-        </a>
-      </li>
-       
-      <li>
-        <a
-          href="https://devhints.io/riot"
-          target="_blank"
-        >
-          riot cheatsheet
-        </a>
-      </li>
-       
-    </ul>
-     
-  </div>
-</div>
-`;
-
-exports[`Storyshots Button rounded 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button
-    rounded="true"
-  >
-    <button
-      class="rounded button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      A Button with rounded edges!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <my-button>
-    <button
-      class="button"
-      style="color: #42b983; border-color: #42b983"
-    >
-      A Button with square edges!
-    </button>
-  </my-button>
-</div>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  data-is="welcome"
-  id="root"
->
-  <div
-    class="main"
-  >
-     
-    <h1>
-      Welcome to Storybook for riot.js
-    </h1>
-     
-    <p>
-       This is a UI component dev environment for your riot app. 
-    </p>
-     
-    <p>
-       We've added some basic stories inside the 
-      <code
-        class="code"
-      >
-        src/stories
-      </code>
-       directory. 
-      <br />
-       A story is a single state of one or more UI components. You can have as many stories as you want. 
-      <br />
-       (Basically a story is like a visual test case.) 
-    </p>
-     
-    <p>
-       See these sample 
-      <a
-        class="link"
-      >
-        stories
-      </a>
-       for a component called 
-      <code
-        class="code"
-      >
-        Button
-      </code>
-       . 
-    </p>
-     
-    <p
-      style="text-align:center"
-    >
-      <img
-        src="../logo.png"
-      />
-    </p>
-     
-    <p>
-       Just like that, you can add your own components as stories. 
-      <br />
-       You can also edit those components and see changes right away. 
-      <br />
-       (Try editing the 
-      <code
-        class="code"
-      >
-        Button
-      </code>
-       component located at 
-      <code
-        class="code"
-      >
-        src/stories/Button.tag
-      </code>
-      .) 
-    </p>
-     
-    <p>
-       Usually we create stories with smaller UI components in the app.
-      <br />
-       Have a look at the 
-      <a
-        class="link"
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-      >
-         Writing Stories 
-      </a>
-       section in our documentation. 
-    </p>
-     
-    <p
-      class="note"
-    >
-       
-      <b>
-        NOTE:
-      </b>
-       
-      <br />
-       Have a look at the 
-      <code
-        class="code"
-      >
-        .storybook/webpack.config.js
-      </code>
-       to add webpack loaders and plugins you are using in this project. 
-    </p>
-     
-  </div>
-</div>
-`;
diff --git a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
index 4561beb4522..b571a52f3dd 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,19 +1,29 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () =>
-    mount('my-button', {
-      handleClick: action('button-click'),
-      content: 'Click me to log the action',
-    })
-  )
-  .add('Multiple actions', () =>
-    mount('my-button', {
-      handleDblClick: action('button-double-click'),
-      content: 'Double Click me to log the action',
-    })
-  );
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () =>
+  mount('my-button', {
+    handleClick: action('button-click'),
+    content: 'Click me to log the action',
+  });
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () =>
+  mount('my-button', {
+    handleDblClick: action('button-double-click'),
+    content: 'Double Click me to log the action',
+  });
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 43f40d39e36..eac0791294f 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,26 +1,37 @@
-import { storiesOf } from '@storybook/riot';
 import ButtonRaw from './Button.txt';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => {
-    const content = 'You should be able to switch backgrounds for this story';
+  },
+};
 
-    return {
-      tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-      template: `<my-button>${content}</my-button>`,
-    };
-  })
-  .add('story 2', () => {
-    const content = 'This one too!';
+export const story1 = () => {
+  const content = 'You should be able to switch backgrounds for this story';
 
-    return {
-      tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-      template: `<my-button>${content}</my-button>`,
-    };
-  });
+  return {
+    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
+    template: `<my-button>${content}</my-button>`,
+  };
+};
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => {
+  const content = 'This one too!';
+
+  return {
+    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
+    template: `<my-button>${content}</my-button>`,
+  };
+};
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
index 7a51bfcdd1b..9b44ceb8bdf 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/riot';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -12,49 +11,53 @@ import {
   button,
 } from '@storybook/addon-knobs';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const name = text('Name', 'John Doe');
-    const age = number('Age', 44);
-    const content = `I am ${name} and I'm ${age} years old.`;
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
 
-    return {
-      tags: [`<div>${content}</div>`],
-    };
-  })
-  .add('All knobs', () => {
-    const name = text('Name', 'Jane');
-    const stock = number('Stock', 20, {
-      range: true,
-      min: 0,
-      max: 30,
-      step: 5,
-    });
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-    const fruit = select('Fruit', fruits, 'apples');
-    const price = number('Price', 2.25);
+export const Simple = () => {
+  const name = text('Name', 'John Doe');
+  const age = number('Age', 44);
+  const content = `I am ${name} and I'm ${age} years old.`;
 
-    const colour = color('Border', 'deeppink');
-    const today = date('Today', new Date('Jan 20 2017 GMT+0'));
-    const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
-    const nice = boolean('Nice', true);
+  return {
+    tags: [`<div>${content}</div>`],
+  };
+};
 
-    const stockMessage = stock
-      ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
-      : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
-    const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
-    const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+export const allKnobs = () => {
+  const name = text('Name', 'Jane');
+  const stock = number('Stock', 20, {
+    range: true,
+    min: 0,
+    max: 30,
+    step: 5,
+  });
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+  const fruit = select('Fruit', fruits, 'apples');
+  const price = number('Price', 2.25);
 
-    button('Arbitrary action', action('You clicked it!'));
+  const colour = color('Border', 'deeppink');
+  const today = date('Today', new Date('Jan 20 2017 GMT+0'));
+  const items = array('Items', ['Laptop', 'Book', 'Whiskey']);
+  const nice = boolean('Nice', true);
 
-    return {
-      tags: [
-        `
+  const stockMessage = stock
+    ? `I have a stock of ${stock} ${fruit}, costing &dollar;${price} each.`
+    : `I'm out of ${fruit}${nice ? ', Sorry!' : '.'}`;
+  const salutation = nice ? 'Nice to meet you!' : 'Leave me alone!';
+  const dateOptions = { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return {
+    tags: [
+      `
           <WhatIGot><div style="border:2px dotted ${colour}; padding: 8px 22px; border-radius: 8px">
             <h1>My name is ${name},</h1>
             <h3>today is ${new Date(today).toLocaleDateString('en-US', dateOptions)}</h3>
@@ -66,15 +69,24 @@ storiesOf('Addon|Knobs', module)
             <p>${salutation}</p>
           </div></WhatIGot>
         `,
-      ],
-    };
-  })
-  .add('XSS safety', () => ({
-    tags: [
-      `
+    ],
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
+  tags: [
+    `
       <div>
         ${text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >')}
       </div>
     `,
-    ],
-  }));
+  ],
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
index 99f8d642e0f..56af1084748 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,14 +1,21 @@
-import { mount, storiesOf, compileNow } from '@storybook/riot';
+import { mount, compileNow } from '@storybook/riot';
 import { linkTo } from '@storybook/addon-links';
 import ButtonRaw from './Button.txt';
 
 compileNow(ButtonRaw);
 
-storiesOf('Addon|Links', module).add('Go to welcome', () =>
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () =>
   mount('my-button', {
     rounded: true,
     content: 'This button links to Welcome',
     value: 'with a parameter',
     handleClick: linkTo('Welcome', 'Welcome'),
-  })
-);
+  });
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
index 4f47074660f..c0fb1912040 100644
--- a/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,27 +1,31 @@
-import { storiesOf } from '@storybook/riot';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      tags: [
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-      ],
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export const simpleNote = () => ({
+  tags: [
+    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
+  ],
+});
 
-      <em>It's not all that important to be honest, but..</em>
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export const noteWithHtml = () => ({
+  tags: ['<div><p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p></div>'],
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/riot-kitchen-sink/src/stories/core.stories.js b/examples/riot-kitchen-sink/src/stories/core.stories.js
index 12ae3823b4a..9ffa8d32b53 100644
--- a/examples/riot-kitchen-sink/src/stories/core.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { tag, mount, storiesOf, addParameters } from '@storybook/riot';
+import { tag, mount, addParameters } from '@storybook/riot';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -8,8 +8,16 @@ tag('parameters', '<div>Parameters are {JSON.stringify (this.opts)}</div>', '',
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add('passed to story', ({ parameters: { fileName, ...parameters } }) =>
-    mount('parameters', { ...parameters, storyParameter })
-  );
+export default {
+  title: 'Core|Parameters',
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) =>
+  mount('parameters', { ...parameters, storyParameter });
+
+passedToStory.story = {
+  name: 'passed to story',
+};
diff --git a/examples/riot-kitchen-sink/src/stories/index.js b/examples/riot-kitchen-sink/src/stories/index.js
deleted file mode 100644
index 1a8b42d9c24..00000000000
--- a/examples/riot-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { mount, storiesOf } from '@storybook/riot';
-import { linkTo } from '@storybook/addon-links';
-import ButtonRaw from './Button.txt';
-import './Welcome.tag';
-import '../App.tag';
-
-storiesOf('Welcome', module).add('Welcome', () =>
-  mount('welcome', { goToButton: linkTo('Button') })
-);
-
-storiesOf('App', module).add('App', () => mount('app', {}));
-
-storiesOf('Button', module)
-  // Works if riot.component is called in the config.js in .storybook
-  .add('rounded', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={true}>A Button with rounded edges</my-button>',
-  }))
-  .add('square', () => ({
-    tags: [{ boundAs: 'my-button', content: ButtonRaw }],
-    template: '<my-button rounded={false}>A Button with square edges</my-button>',
-  }));
diff --git a/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
new file mode 100644
index 00000000000..3664f40bb5c
--- /dev/null
+++ b/examples/riot-kitchen-sink/src/stories/nested-tags.stories.js
@@ -0,0 +1,32 @@
+import { tag, mount, asCompiledCode } from '@storybook/riot';
+import SimpleTestRaw from './SimpleTest.txt';
+import './AnotherTest.tag';
+
+const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
+
+export default {
+  title: 'Story|Nest tags',
+};
+
+export const threeTags = () => ({
+  tags: [
+    '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
+    '<PageHeader><h1><yield/></h1></PageHeader>',
+    '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
+  ],
+});
+
+threeTags.story = {
+  name: 'Three tags',
+};
+
+export const Matriochka = () => ({
+  tags: [
+    '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
+    '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
+    '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
+    '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
+    '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
+  ],
+  template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
+});
diff --git a/examples/riot-kitchen-sink/src/stories/story-code.stories.js b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
index d19ca29bb90..da34681f8b0 100644
--- a/examples/riot-kitchen-sink/src/stories/story-code.stories.js
+++ b/examples/riot-kitchen-sink/src/stories/story-code.stories.js
@@ -1,73 +1,83 @@
-import { tag, mount, storiesOf, asCompiledCode } from '@storybook/riot';
+import { tag, mount, asCompiledCode } from '@storybook/riot';
 import SimpleTestRaw from './SimpleTest.txt';
 import './AnotherTest.tag';
 
 const simpleTestCompiled = asCompiledCode(SimpleTestRaw);
 
-storiesOf('Story|How to create a story', module)
-  .add(
-    'built with tag',
-    () =>
-      tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
-      mount('test', { value: 'with a parameter' })
-  )
+export default {
+  title: 'Story|How to create a story',
+};
 
-  .add('built as string', () => ({ tags: ['<test><div>simple test</div></test>'] }))
+export const builtWithTag = () =>
+  tag('test', '<div>simple test ({ opts.value })</div>', '', '', () => {}) &&
+  mount('test', { value: 'with a parameter' });
 
-  .add('built from raw import', () => simpleTestCompiled)
+builtWithTag.story = {
+  name: 'built with tag',
+};
 
-  .add(
-    'built from tags and template',
-    () => ({
-      tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
-      template:
-        '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    }),
+export const builtAsString = () => ({ tags: ['<test><div>simple test</div></test>'] });
+
+builtAsString.story = {
+  name: 'built as string',
+};
+
+export const builtFromRawImport = () => simpleTestCompiled;
+
+builtFromRawImport.story = {
+  name: 'built from raw import',
+};
+
+export const builtFromTagsAndTemplate = () => ({
+  tags: [{ content: SimpleTestRaw, boundAs: 'mustBeUniquePlease' }],
+  template:
+    '<SimpleTest test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+});
+
+builtFromTagsAndTemplate.story = {
+  name: 'built from tags and template',
+  parameters: {
+    notes:
+      'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
+  },
+};
+
+export const tagsTemplateAndTagConstructorAtOnce = () => ({
+  tags: [
     {
-      notes:
-        'WARN : the tag file root element must have exactly the same name (or else you will see nothing)',
-    }
-  )
-
-  .add('tags, template and tagConstructor at once', () => ({
-    tags: [
-      {
-        content:
-          "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
-        boundAs: 'mustBeUniquePlease',
-      },
-    ],
-    template:
-      '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
-    tagConstructor: function tagConstructor() {
-      this.hacked = true;
+      content:
+        "<SimpleTest><div>HACKED : {opts.hacked} ; simple test ({opts.test || 'without parameter'}). Oh, by the way ({opts.riotValue || '... well, nothing'})</div></SimpleTest>",
+      boundAs: 'mustBeUniquePlease',
     },
-  }))
+  ],
+  template:
+    '<SimpleTest hacked={hacked} test={ "with a parameter" } value={"value is mapped to riotValue"}></SimpleTest>',
+  tagConstructor: function tagConstructor() {
+    this.hacked = true;
+  },
+});
 
-  .add('built from the precompilation', () => mount('anothertest', {}), {
+tagsTemplateAndTagConstructorAtOnce.story = {
+  name: 'tags, template and tagConstructor at once',
+};
+
+export const builtFromThePrecompilation = () => mount('anothertest', {});
+
+builtFromThePrecompilation.story = {
+  name: 'built from the precompilation',
+  parameters: {
     notes: 'WARN, only works in lower case, never upper case with precompiled templates',
-  })
+  },
+};
 
-  .add('the mount instruction is not necessary', () => ({ tagName: 'anothertest', opts: {} }))
+export const theMountInstructionIsNotNecessary = () => ({ tagName: 'anothertest', opts: {} });
 
-  .add('the opts value is not necessary', () => ({ tagName: 'anothertest' }));
+theMountInstructionIsNotNecessary.story = {
+  name: 'the mount instruction is not necessary',
+};
 
-storiesOf('Story|Nest tags', module)
-  .add('Three tags', () => ({
-    tags: [
-      '<WebPage><PageHeader>Simple title</PageHeader><PageBody>Simple Content</PageBody></WebPage>',
-      '<PageHeader><h1><yield/></h1></PageHeader>',
-      '<PageBody><div style="border-radius: 1em;border-right: solid 1px #cac9c9;border-bottom: solid 1px #cac9c9;box-shadow: 1em 1em 2em #eae9e9; margin: 3em; padding: 3em;min-height: 10em;min-width: 30em"><yield/></div></PageBody>',
-    ],
-  }))
+export const theOptsValueIsNotNecessary = () => ({ tagName: 'anothertest' });
 
-  .add('Matriochka', () => ({
-    tags: [
-      '<Tag1><div>Inside tag1:<ul><li><Tag2><yield/></Tag2></li></ul></div></Tag1>',
-      '<Tag2><div>Inside tag2:<ul><li><Tag3><yield/></Tag3></li></ul></div></Tag2>',
-      '<Tag3><div>Inside tag3:<ul><li><Tag4><yield/></Tag4></li></ul></div></Tag3>',
-      '<Tag4><div>Inside tag4:<ul><li><Tag5><yield/></Tag5></li></ul></div></Tag4>',
-      '<Tag5><div>Inside tag5:<ul><li><yield/></li></ul></div></Tag5>',
-    ],
-    template: '<Matriochka><div><Tag1>Content</Tag1></div></Matriochka>',
-  }));
+theOptsValueIsNotNecessary.story = {
+  name: 'the opts value is not necessary',
+};
diff --git a/examples/svelte-kitchen-sink/.storybook/config.js b/examples/svelte-kitchen-sink/.storybook/config.js
index 74c96cf4295..df6d13b0946 100644
--- a/examples/svelte-kitchen-sink/.storybook/config.js
+++ b/examples/svelte-kitchen-sink/.storybook/config.js
@@ -1,4 +1,4 @@
-import { configure, addParameters, addDecorator } from '@storybook/svelte';
+import { load, addParameters, addDecorator } from '@storybook/svelte';
 import { withA11y } from '@storybook/addon-a11y';
 
 addDecorator(withA11y);
@@ -8,12 +8,4 @@ addParameters({
   },
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
new file mode 100644
index 00000000000..cae9c608d06
--- /dev/null
+++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
@@ -0,0 +1,705 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action on component method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Custom text
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions Action on view method 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions actionOnComponentMethod 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Custom text
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Actions actionOnViewMethod 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    Look, I'm centered!
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered with action 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Centered withAction 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+  </button>
+</section>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    style="width: 200px; height: 200px; background-color: green;"
+  >
+    <p>
+      I am interactive
+    </p>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main"
+  >
+    <h1>
+      Link Action
+    </h1>
+     
+    <button
+      class="link"
+    >
+      
+			    Return to the 
+      <code
+        class="code"
+      >
+        Welcome
+      </code>
+       view story.
+			  
+    </button>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Addon|Links goToWelcomeView 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main"
+  >
+    <h1>
+      Link Action
+    </h1>
+     
+    <button
+      class="link"
+    >
+      
+			    Return to the 
+      <code
+        class="code"
+      >
+        Welcome
+      </code>
+       view story.
+			  
+    </button>
+  </div>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    🤔😳😯😮😄😩😓😱🤓😑😶😊
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    🤔😳😯😮😄😩😓😱🤓😑😶😊
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button rounded 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93 rounded"
+  >
+    <strong>
+      Round
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <h1>
+    Button view
+  </h1>
+   
+  <button
+    class="button svelte-n2tx93"
+  >
+    <strong>
+      Square
+       corners
+    </strong>
+    <br />
+     
+    
+     
+    You clicked
+    : 
+    0
+  </button>
+   
+  <p>
+    A little text to show this is a view.
+  </p>
+   
+  <p>
+    If we need to test components in a Svelte environment, for instance to test slot behaviour,
+  </p>
+   
+  <p>
+    then wrapping the component up in a view
+  </p>
+   
+  <p>
+    made just for the story is the simplest way to achieve this.
+  </p>
+</section>
+`;
+
+exports[`Storyshots Welcome Welcome 1`] = `
+<section
+  class="storybook-snapshot-container"
+>
+  <div
+    class="main svelte-5n9a95"
+  >
+    <h1>
+      Welcome to Storybook for Svelte
+    </h1>
+    
+			  
+    <p>
+      
+			    This is a UI component dev environment for your svelte app.
+			  
+    </p>
+    
+			  
+    <p>
+      
+			    We've added some basic stories inside the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories
+      </code>
+       directory.
+			    
+      <strong>
+        A story is like a visual test case
+      </strong>
+      
+			    and represents a single state of one or more UI components.
+			    You can have as many stories as you want.
+			  
+    </p>
+    
+
+			  
+    <h1
+      class="logo svelte-5n9a95"
+    >
+      Svelte
+    </h1>
+    
+
+			  
+    <p>
+      
+			    Just like that, you can add your own components as stories.
+			    You can also edit those components and see changes right away.
+			    
+      <br />
+      
+			    (Try editing the 
+      <code
+        class="code svelte-5n9a95"
+      >
+        Button
+      </code>
+       component
+			    located at 
+      <code
+        class="code svelte-5n9a95"
+      >
+        src/stories/views/Welcome.svelte
+      </code>
+      .)
+			  
+    </p>
+    
+			  
+    <p>
+      
+			    Usually we create stories with smaller UI components in the app.
+      <br />
+      
+			    Have a look at the
+			    
+      <a
+        class="link svelte-5n9a95"
+        href="https://storybook.js.org/basics/writing-stories"
+        target="_blank"
+      >
+        Writing Stories
+      </a>
+      
+			    section in our documentation.
+			  
+    </p>
+    
+			  
+    <p
+      class="note svelte-5n9a95"
+    >
+      <b>
+        NOTE:
+      </b>
+      
+			    
+      <br />
+      
+			    Have a look at the
+			    
+      <code
+        class="code svelte-5n9a95"
+      >
+        .storybook/webpack.config.js
+      </code>
+      
+			    to add webpack
+			    loaders and plugins you are using in this project.
+			  
+    </p>
+  </div>
+</section>
+`;
diff --git a/examples/svelte-kitchen-sink/package.json b/examples/svelte-kitchen-sink/package.json
index 4eac0f34f86..0233abd6be0 100644
--- a/examples/svelte-kitchen-sink/package.json
+++ b/examples/svelte-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "svelte-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build-storybook": "build-storybook -s public",
@@ -11,18 +11,19 @@
     "global": "^4.3.2"
   },
   "devDependencies": {
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/svelte": "5.2.0-alpha.23"
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
+    "@storybook/svelte": "5.2.0-alpha.32"
   }
 }
diff --git a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index 3d58a6b4127..00000000000
--- a/examples/svelte-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,204 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Button rounded 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93 rounded"
-  >
-    <strong>
-      Round
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <h1>
-    Button view
-  </h1>
-   
-  <button
-    class="button svelte-n2tx93"
-  >
-    <strong>
-      Square
-       corners
-    </strong>
-    <br />
-     
-    
-     
-    You clicked
-    : 
-    0
-  </button>
-   
-  <p>
-    A little text to show this is a view.
-  </p>
-   
-  <p>
-    If we need to test components in a Svelte environment, for instance to test slot behaviour,
-  </p>
-   
-  <p>
-    then wrapping the component up in a view
-  </p>
-   
-  <p>
-    made just for the story is the simplest way to achieve this.
-  </p>
-</section>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<section
-  class="storybook-snapshot-container"
->
-  <div
-    class="main svelte-5n9a95"
-  >
-    <h1>
-      Welcome to Storybook for Svelte
-    </h1>
-    
-			  
-    <p>
-      
-			    This is a UI component dev environment for your svelte app.
-			  
-    </p>
-    
-			  
-    <p>
-      
-			    We've added some basic stories inside the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories
-      </code>
-       directory.
-			    
-      <strong>
-        A story is like a visual test case
-      </strong>
-      
-			    and represents a single state of one or more UI components.
-			    You can have as many stories as you want.
-			  
-    </p>
-    
-
-			  
-    <h1
-      class="logo svelte-5n9a95"
-    >
-      Svelte
-    </h1>
-    
-
-			  
-    <p>
-      
-			    Just like that, you can add your own components as stories.
-			    You can also edit those components and see changes right away.
-			    
-      <br />
-      
-			    (Try editing the 
-      <code
-        class="code svelte-5n9a95"
-      >
-        Button
-      </code>
-       component
-			    located at 
-      <code
-        class="code svelte-5n9a95"
-      >
-        src/stories/views/Welcome.svelte
-      </code>
-      .)
-			  
-    </p>
-    
-			  
-    <p>
-      
-			    Usually we create stories with smaller UI components in the app.
-      <br />
-      
-			    Have a look at the
-			    
-      <a
-        class="link svelte-5n9a95"
-        href="https://storybook.js.org/basics/writing-stories"
-        target="_blank"
-      >
-        Writing Stories
-      </a>
-      
-			    section in our documentation.
-			  
-    </p>
-    
-			  
-    <p
-      class="note svelte-5n9a95"
-    >
-      <b>
-        NOTE:
-      </b>
-      
-			    
-      <br />
-      
-			    Have a look at the
-			    
-      <code
-        class="code svelte-5n9a95"
-      >
-        .storybook/webpack.config.js
-      </code>
-      
-			    to add webpack
-			    loaders and plugins you are using in this project.
-			  
-    </p>
-  </div>
-</section>
-`;
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
index 5562e468b97..74fbb9a15e7 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,22 +1,33 @@
-import { storiesOf } from '@storybook/svelte';
 import { action } from '@storybook/addon-actions';
 
 import ButtonView from './views/ButtonView.svelte';
 import Button from '../components/Button.svelte';
 
-storiesOf('Addon|Actions', module)
-  .add('Action on view method', () => ({
-    Component: ButtonView,
-    props: {
-      click: action('I am logging in the actions tab'),
-    },
-  }))
-  .add('Action on component method', () => ({
-    Component: Button,
-    props: {
-      text: 'Custom text',
-    },
-    on: {
-      click: action('I am logging in the actions tab too'),
-    },
-  }));
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnViewMethod = () => ({
+  Component: ButtonView,
+  props: {
+    click: action('I am logging in the actions tab'),
+  },
+});
+
+actionOnViewMethod.story = {
+  name: 'Action on view method',
+};
+
+export const actionOnComponentMethod = () => ({
+  Component: Button,
+  props: {
+    text: 'Custom text',
+  },
+  on: {
+    click: action('I am logging in the actions tab too'),
+  },
+});
+
+actionOnComponentMethod.story = {
+  name: 'Action on component method',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
index a03bafbed00..df858cd1c2c 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,14 +1,19 @@
-import { storiesOf } from '@storybook/svelte';
-
 import ButtonView from './views/ButtonView.svelte';
 
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => ({
-    Component: ButtonView,
-  }));
+  },
+};
+
+export const story1 = () => ({
+  Component: ButtonView,
+});
+
+story1.story = {
+  name: 'story 1',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
index d350f4e3f09..f1fcb4a169a 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,21 +1,31 @@
-import { storiesOf } from '@storybook/svelte';
 import Centered from '@storybook/addon-centered/svelte';
 import { action } from '@storybook/addon-actions';
 
 import Button from '../components/Button.svelte';
 
-storiesOf('Addon|Centered', module)
-  .addDecorator(Centered)
-  .add('rounded', () => ({
-    Component: Button,
-    props: {
-      rounded: true,
-      text: "Look, I'm centered!",
-    },
-  }))
-  .add('with action', () => ({
-    Component: Button,
-    on: {
-      click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
-    },
-  }));
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+  parameters: {
+    component: Centered,
+  },
+};
+
+export const rounded = () => ({
+  Component: Button,
+  props: {
+    rounded: true,
+    text: "Look, I'm centered!",
+  },
+});
+
+export const withAction = () => ({
+  Component: Button,
+  on: {
+    click: action(`Tell me it ain't so! Centered and with actions! Thanks @ekhaled :)`),
+  },
+});
+
+withAction.story = {
+  name: 'with action',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
index 8490050d15e..b97019cab83 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,32 +1,34 @@
-import { storiesOf } from '@storybook/svelte';
 import { withKnobs, text, number } from '@storybook/addon-knobs';
 
 import ActionKnobView from './views/ActionKnobView.svelte';
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => {
-    const backgroundColor = text('Background', 'green');
-    const width = number('Width', 200, {
-      range: true,
-      min: 100,
-      max: 1000,
-      step: 100,
-    });
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
 
-    const height = number('Height', 200, {
-      range: true,
-      min: 100,
-      max: 1000,
-      step: 100,
-    });
-
-    return {
-      Component: ActionKnobView,
-      props: {
-        backgroundColor,
-        width,
-        height,
-      },
-    };
+export const Simple = () => {
+  const backgroundColor = text('Background', 'green');
+  const width = number('Width', 200, {
+    range: true,
+    min: 100,
+    max: 1000,
+    step: 100,
   });
+
+  const height = number('Height', 200, {
+    range: true,
+    min: 100,
+    max: 1000,
+    step: 100,
+  });
+
+  return {
+    Component: ActionKnobView,
+    props: {
+      backgroundColor,
+      width,
+      height,
+    },
+  };
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
index ff8d0cbe6dd..e76a4d3875d 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,11 +1,18 @@
-import { storiesOf } from '@storybook/svelte';
 import { linkTo } from '@storybook/addon-links';
 
 import ActionLinkView from './views/ActionLinkView.svelte';
 
-storiesOf('Addon|Links', module).add('Go to welcome view', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcomeView = () => ({
   Component: ActionLinkView,
   on: {
     click: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcomeView.story = {
+  name: 'Go to welcome view',
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
index 0b020f6a929..c64445c1613 100644
--- a/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/svelte-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,30 +1,34 @@
-import { storiesOf } from '@storybook/svelte';
-
 import ButtonView from './views/ButtonView.svelte';
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      Component: ButtonView,
-    }),
-    { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      Component: ButtonView,
-      props: {
-        text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
-      },
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export default {
+  title: 'Addon|Notes',
+};
 
-      <em>It's not all that important to be honest, but..</em>
+export const simpleNote = () => ({
+  Component: ButtonView,
+});
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on the [ButtonView](/story/addon-notes--simple-note) component' },
+};
+
+export const noteWithHtml = () => ({
+  Component: ButtonView,
+  props: {
+    text: '🤔😳😯😮😄😩😓😱🤓😑😶😊',
+  },
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/svelte-kitchen-sink/src/stories/button.stories.js b/examples/svelte-kitchen-sink/src/stories/button.stories.js
new file mode 100644
index 00000000000..a68a4d865b1
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/button.stories.js
@@ -0,0 +1,21 @@
+import ButtonView from './views/ButtonView.svelte';
+
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: true,
+    message: 'Rounded text',
+  },
+});
+
+export const square = () => ({
+  Component: ButtonView,
+  props: {
+    rounded: false,
+    message: 'Squared text',
+  },
+});
diff --git a/examples/svelte-kitchen-sink/src/stories/index.js b/examples/svelte-kitchen-sink/src/stories/index.js
deleted file mode 100644
index ee0d59093eb..00000000000
--- a/examples/svelte-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { storiesOf } from '@storybook/svelte';
-
-import WelcomeView from './views/WelcomeView.svelte';
-import ButtonView from './views/ButtonView.svelte';
-
-storiesOf('Welcome', module).add('Welcome', () => ({
-  Component: WelcomeView,
-}));
-
-storiesOf('Button', module)
-  .add('rounded', () => ({
-    Component: ButtonView,
-    props: {
-      rounded: true,
-      message: 'Rounded text',
-    },
-  }))
-  .add('square', () => ({
-    Component: ButtonView,
-    props: {
-      rounded: false,
-      message: 'Squared text',
-    },
-  }));
diff --git a/examples/svelte-kitchen-sink/src/stories/welcome.stories.js b/examples/svelte-kitchen-sink/src/stories/welcome.stories.js
new file mode 100644
index 00000000000..865dbdc6066
--- /dev/null
+++ b/examples/svelte-kitchen-sink/src/stories/welcome.stories.js
@@ -0,0 +1,9 @@
+import WelcomeView from './views/WelcomeView.svelte';
+
+export default {
+  title: 'Welcome',
+};
+
+export const Welcome = () => ({
+  Component: WelcomeView,
+});
diff --git a/examples/vue-kitchen-sink/.storybook/addons.js b/examples/vue-kitchen-sink/.storybook/addons.js
index dae489be348..232bc06d11e 100644
--- a/examples/vue-kitchen-sink/.storybook/addons.js
+++ b/examples/vue-kitchen-sink/.storybook/addons.js
@@ -8,3 +8,4 @@ import '@storybook/addon-options/register';
 import '@storybook/addon-backgrounds/register';
 import '@storybook/addon-a11y/register';
 import '@storybook/addon-contexts/register';
+import '@storybook/addon-docs/register';
diff --git a/examples/vue-kitchen-sink/.storybook/config.js b/examples/vue-kitchen-sink/.storybook/config.js
index 292c33a24af..a9548aa7df1 100644
--- a/examples/vue-kitchen-sink/.storybook/config.js
+++ b/examples/vue-kitchen-sink/.storybook/config.js
@@ -1,7 +1,9 @@
-import { configure, addParameters, addDecorator } from '@storybook/vue';
+import { load, addParameters, addDecorator } from '@storybook/vue';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import { withA11y } from '@storybook/addon-a11y';
+import { DocsPage } from '@storybook/addon-docs/blocks';
+
 import MyButton from '../src/stories/Button.vue';
 
 addDecorator(withA11y);
@@ -12,13 +14,7 @@ addParameters({
   options: {
     hierarchyRootSeparator: /\|/,
   },
+  docs: DocsPage,
 });
 
-function loadStories() {
-  require('../src/stories');
-
-  const req = require.context('../src/stories', true, /\.stories\.js$/);
-  req.keys().forEach(filename => req(filename));
-}
-
-configure(loadStories, module);
+load(require.context('../src/stories', true, /\.stories\.js$/), module);
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
new file mode 100644
index 00000000000..15ea205ead2
--- /dev/null
+++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
@@ -0,0 +1,562 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Addon|Actions Action and method 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Action only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  Click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  (Double) click me to log the action!
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+<button>
+  You should be able to switch backgrounds for this story
+</button>
+`;
+
+exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+<button>
+  This one too!
+</button>
+`;
+
+exports[`Storyshots Addon|Centered rounded 1`] = `
+<div
+  style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
+>
+  <div
+    style="margin: auto; max-height: 100%;"
+  >
+    <button
+      class="button rounded"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      A Button with rounded edges!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Contexts Languages 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <div>
+    
+      Your locale is unknown, so I say NULL!
+    
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
+<div
+  style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
+>
+  <span>
+    I'm a children of the injected 'div' (where provides a theming context).
+  </span>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs All knobs 1`] = `
+<div
+  style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
+>
+  <h1>
+    My name is Jane,
+  </h1>
+   
+  <h3>
+    today is January 20, 2017
+  </h3>
+   
+  <p>
+    I have a stock of 20 apples, costing $2.25 each.
+  </p>
+   
+  <p>
+    Also, I have:
+  </p>
+   
+  <ul>
+    <li>
+      Laptop
+    </li>
+    <li>
+      Book
+    </li>
+    <li>
+      Whiskey
+    </li>
+  </ul>
+   
+  <p>
+    Nice to meet you!
+  </p>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+<div>
+  &lt;img src=x onerror="alert('XSS Attack')" &gt;
+</div>
+`;
+
+exports[`Storyshots Addon|Links Go to welcome 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  This buttons links to Welcome!
+</button>
+`;
+
+exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+<p>
+  🤔😳😯😮
+  <br />
+  😄😩😓😱
+  <br />
+  🤓😑😶😊
+</p>
+`;
+
+exports[`Storyshots Addon|Notes Simple note 1`] = `
+<p>
+  <strong>
+    Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
+  </strong>
+</p>
+`;
+
+exports[`Storyshots App App 1`] = `
+<div
+  id="app"
+>
+  <img
+    src="./logo.png"
+  />
+   
+  <h1 />
+   
+  <h2>
+    Essential Links
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="https://vuejs.org"
+        target="_blank"
+      >
+        Core Docs
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://forum.vuejs.org"
+        target="_blank"
+      >
+        Forum
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://gitter.im/vuejs/vue"
+        target="_blank"
+      >
+        Gitter Chat
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://twitter.com/vuejs"
+        target="_blank"
+      >
+        Twitter
+      </a>
+    </li>
+  </ul>
+   
+  <h2>
+    Ecosystem
+  </h2>
+   
+  <ul>
+    <li>
+      <a
+        href="http://router.vuejs.org/"
+        target="_blank"
+      >
+        vue-router
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vuex.vuejs.org/"
+        target="_blank"
+      >
+        vuex
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="http://vue-loader.vuejs.org/"
+        target="_blank"
+      >
+        vue-loader
+      </a>
+    </li>
+     
+    <li>
+      <a
+        href="https://github.com/vuejs/awesome-vue"
+        target="_blank"
+      >
+        awesome-vue
+      </a>
+    </li>
+  </ul>
+</div>
+`;
+
+exports[`Storyshots Button rounded 1`] = `
+<button
+  class="button rounded"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with rounded edges!
+</button>
+`;
+
+exports[`Storyshots Button square 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
+
+exports[`Storyshots Core|Parameters passed to story 1`] = `
+<div>
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+</div>
+`;
+
+exports[`Storyshots Core|Template string only 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  A Button with square edges!
+</button>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue render 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: pink; border-color: pink;"
+    >
+      renders component: MyButton!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Decorator for Vue template 1`] = `
+<div
+  style="border: medium solid blue;"
+>
+  <div
+    style="border: medium solid red;"
+  >
+    <button
+      class="button"
+      style="color: rgb(66, 185, 131); border-color: #42b983;"
+    >
+      MyButton with template!
+    </button>
+  </div>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered with JSX!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+<p>
+  <em>
+    This component was pre-registered in .storybook/config.js
+  </em>
+  <br />
+   
+  <button
+    class="button"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+<button
+  class="button"
+  style="color: pink; border-color: pink;"
+>
+  renders component: MyButton!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  MyButton rendered in a template!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+<p>
+  <em>
+    Clicking the button will navigate to another story using the 'addon-links'
+  </em>
+  <br />
+   
+  <button
+    class="button rounded"
+    style="color: rgb(66, 185, 131); border-color: #42b983;"
+  >
+    MyButton rendered in a template + props & methods!
+  </button>
+</p>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with vuex: 0!
+</button>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+<button
+  class="button"
+  style="color: rgb(66, 185, 131); border-color: #42b983;"
+>
+  with awesomeness: 0!
+</button>
+`;
+
+exports[`Storyshots Welcome welcome 1`] = `
+<div
+  class="main"
+>
+  <h1>
+    Welcome to Storybook for Vue
+  </h1>
+   
+  <p>
+    
+    This is a UI component dev environment for your vue app.
+  
+  </p>
+   
+  <p>
+    
+    We've added some basic stories inside the
+    
+    <code
+      class="code"
+    >
+      src/stories
+    </code>
+    
+    directory.
+    
+    <br />
+    
+    A story is a single state of one or more UI components.
+    You can have as many stories as you want.
+    
+    <br />
+    
+    (Basically a story is like a visual test case.)
+  
+  </p>
+   
+  <p>
+    
+    See these sample
+    
+    <a
+      class="link"
+    >
+      stories
+    </a>
+    
+    for a component called
+    
+    <code
+      class="code"
+    >
+      Button
+    </code>
+    
+    .
+  
+  </p>
+   
+  <p
+    style="text-align: center;"
+  >
+    <img
+      src="../logo.png"
+    />
+  </p>
+   
+  <p>
+    
+    Just like that, you can add your own components as stories.
+    
+    <br />
+    
+    You can also edit those components and see changes right away.
+    
+    <br />
+    
+    (Try editing the 
+    <code
+      class="code"
+    >
+      Button
+    </code>
+     component
+    located at 
+    <code
+      class="code"
+    >
+      src/stories/Button.js
+    </code>
+    .)
+  
+  </p>
+   
+  <p>
+    
+    Usually we create stories with smaller UI components in the app.
+    <br />
+    
+    Have a look at the
+    
+    <a
+      class="link"
+      href="https://storybook.js.org/basics/writing-stories"
+      target="_blank"
+    >
+      
+      Writing Stories
+    
+    </a>
+    
+    section in our documentation.
+  
+  </p>
+   
+  <p
+    class="note"
+  >
+    <b>
+      NOTE:
+    </b>
+     
+    <br />
+    
+    Have a look at the
+    
+    <code
+      class="code"
+    >
+      .storybook/webpack.config.js
+    </code>
+    
+    to add webpack
+    loaders and plugins you are using in this project.
+  
+  </p>
+</div>
+`;
diff --git a/examples/vue-kitchen-sink/package.json b/examples/vue-kitchen-sink/package.json
index 5ee3052f862..b2fcb3a20f4 100644
--- a/examples/vue-kitchen-sink/package.json
+++ b/examples/vue-kitchen-sink/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vue-example",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "private": true,
   "scripts": {
     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
@@ -15,20 +15,22 @@
   },
   "devDependencies": {
     "@babel/core": "^7.3.4",
-    "@storybook/addon-a11y": "5.2.0-alpha.23",
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-backgrounds": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-contexts": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addon-storysource": "5.2.0-alpha.23",
-    "@storybook/addon-viewport": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/vue": "5.2.0-alpha.23",
+    "@storybook/addon-a11y": "5.2.0-alpha.32",
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-backgrounds": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-contexts": "5.2.0-alpha.32",
+    "@storybook/addon-docs": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addon-storysource": "5.2.0-alpha.32",
+    "@storybook/addon-viewport": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/source-loader": "5.2.0-alpha.32",
+    "@storybook/vue": "5.2.0-alpha.32",
     "babel-core": "^7.0.0-bridge.0",
     "babel-loader": "^8.0.5",
     "cross-env": "^5.2.0",
diff --git a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot b/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
deleted file mode 100644
index ead0957f1d8..00000000000
--- a/examples/vue-kitchen-sink/src/stories/__snapshots__/index.storyshot
+++ /dev/null
@@ -1,254 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots App App 1`] = `
-<div
-  id="app"
->
-  <img
-    src="./logo.png"
-  />
-   
-  <h1 />
-   
-  <h2>
-    Essential Links
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="https://vuejs.org"
-        target="_blank"
-      >
-        Core Docs
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://forum.vuejs.org"
-        target="_blank"
-      >
-        Forum
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://gitter.im/vuejs/vue"
-        target="_blank"
-      >
-        Gitter Chat
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://twitter.com/vuejs"
-        target="_blank"
-      >
-        Twitter
-      </a>
-    </li>
-  </ul>
-   
-  <h2>
-    Ecosystem
-  </h2>
-   
-  <ul>
-    <li>
-      <a
-        href="http://router.vuejs.org/"
-        target="_blank"
-      >
-        vue-router
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vuex.vuejs.org/"
-        target="_blank"
-      >
-        vuex
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="http://vue-loader.vuejs.org/"
-        target="_blank"
-      >
-        vue-loader
-      </a>
-    </li>
-     
-    <li>
-      <a
-        href="https://github.com/vuejs/awesome-vue"
-        target="_blank"
-      >
-        awesome-vue
-      </a>
-    </li>
-  </ul>
-</div>
-`;
-
-exports[`Storyshots Button rounded 1`] = `
-<button
-  class="button rounded"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with rounded edges!
-</button>
-`;
-
-exports[`Storyshots Button square 1`] = `
-<button
-  class="button"
-  style="color: rgb(66, 185, 131); border-color: #42b983;"
->
-  A Button with square edges!
-</button>
-`;
-
-exports[`Storyshots Welcome Welcome 1`] = `
-<div
-  class="main"
->
-  <h1>
-    Welcome to Storybook for Vue
-  </h1>
-   
-  <p>
-    
-    This is a UI component dev environment for your vue app.
-  
-  </p>
-   
-  <p>
-    
-    We've added some basic stories inside the
-    
-    <code
-      class="code"
-    >
-      src/stories
-    </code>
-    
-    directory.
-    
-    <br />
-    
-    A story is a single state of one or more UI components.
-    You can have as many stories as you want.
-    
-    <br />
-    
-    (Basically a story is like a visual test case.)
-  
-  </p>
-   
-  <p>
-    
-    See these sample
-    
-    <a
-      class="link"
-    >
-      stories
-    </a>
-    
-    for a component called
-    
-    <code
-      class="code"
-    >
-      Button
-    </code>
-    
-    .
-  
-  </p>
-   
-  <p
-    style="text-align: center;"
-  >
-    <img
-      src="../logo.png"
-    />
-  </p>
-   
-  <p>
-    
-    Just like that, you can add your own components as stories.
-    
-    <br />
-    
-    You can also edit those components and see changes right away.
-    
-    <br />
-    
-    (Try editing the 
-    <code
-      class="code"
-    >
-      Button
-    </code>
-     component
-    located at 
-    <code
-      class="code"
-    >
-      src/stories/Button.js
-    </code>
-    .)
-  
-  </p>
-   
-  <p>
-    
-    Usually we create stories with smaller UI components in the app.
-    <br />
-    
-    Have a look at the
-    
-    <a
-      class="link"
-      href="https://storybook.js.org/basics/writing-stories"
-      target="_blank"
-    >
-      
-      Writing Stories
-    
-    </a>
-    
-    section in our documentation.
-  
-  </p>
-   
-  <p
-    class="note"
-  >
-    <b>
-      NOTE:
-    </b>
-     
-    <br />
-    
-    Have a look at the
-    
-    <code
-      class="code"
-    >
-      .storybook/webpack.config.js
-    </code>
-    
-    to add webpack
-    loaders and plugins you are using in this project.
-  
-  </p>
-</div>
-`;
diff --git a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
index ab21140ec93..d7f4c74ecc3 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-actions.stories.js
@@ -1,29 +1,50 @@
-import { storiesOf } from '@storybook/vue';
 import { action, actions } from '@storybook/addon-actions';
 
-storiesOf('Addon|Actions', module)
-  .add('Action only', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: action('log1'),
+export default {
+  title: 'Addon|Actions',
+};
+
+export const actionOnly = () => ({
+  template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+  methods: {
+    log: action('log1'),
+  },
+});
+
+actionOnly.story = {
+  name: 'Action only',
+};
+
+export const multipleActions = () => ({
+  template:
+    '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
+  methods: actions('click', 'doubleclick'),
+});
+
+multipleActions.story = {
+  name: 'Multiple actions',
+};
+
+export const multipleActionsObject = () => ({
+  template:
+    '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
+  methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
+});
+
+multipleActionsObject.story = {
+  name: 'Multiple actions, object',
+};
+
+export const actionAndMethod = () => ({
+  template: '<my-button :handle-click="log">Click me to log the action</my-button>',
+  methods: {
+    log: e => {
+      e.preventDefault();
+      action('log2')(e.target);
     },
-  }))
-  .add('Multiple actions', () => ({
-    template:
-      '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
-    methods: actions('click', 'doubleclick'),
-  }))
-  .add('Multiple actions, object', () => ({
-    template:
-      '<my-button :handle-click="click" :handle-dblclick="doubleclick">(Double) click me to log the action</my-button>',
-    methods: actions({ click: 'clicked', doubleclick: 'double clicked' }),
-  }))
-  .add('Action and method', () => ({
-    template: '<my-button :handle-click="log">Click me to log the action</my-button>',
-    methods: {
-      log: e => {
-        e.preventDefault();
-        action('log2')(e.target);
-      },
-    },
-  }));
+  },
+});
+
+actionAndMethod.story = {
+  name: 'Action and method',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
index 6a539fd04c8..9e829e54c5d 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-backgrounds.stories.js
@@ -1,23 +1,33 @@
-import { storiesOf } from '@storybook/vue';
-
-storiesOf('Addon|Backgrounds', module)
-  .addParameters({
+export default {
+  title: 'Addon|Backgrounds',
+  parameters: {
     backgrounds: [
       { name: 'light', value: '#eeeeee' },
       { name: 'dark', value: '#222222', default: true },
     ],
-  })
-  .add('story 1', () => {
-    const content = 'You should be able to switch backgrounds for this story';
+  },
+};
 
-    return {
-      template: `<button>${content}</button>`,
-    };
-  })
-  .add('story 2', () => {
-    const content = 'This one too!';
+export const story1 = () => {
+  const content = 'You should be able to switch backgrounds for this story';
 
-    return {
-      template: `<button>${content}</button>`,
-    };
-  });
+  return {
+    template: `<button>${content}</button>`,
+  };
+};
+
+story1.story = {
+  name: 'story 1',
+};
+
+export const story2 = () => {
+  const content = 'This one too!';
+
+  return {
+    template: `<button>${content}</button>`,
+  };
+};
+
+story2.story = {
+  name: 'story 2',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
index 7fb6567a583..6503a63f35c 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-centered.stories.js
@@ -1,11 +1,16 @@
-import { storiesOf } from '@storybook/vue';
 import Centered from '@storybook/addon-centered/vue';
 
 import MyButton from './Button.vue';
 
-storiesOf('Addon|Centered', module)
-  .addDecorator(Centered)
-  .add('rounded', () => ({
-    components: { MyButton },
-    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
-  }));
+export default {
+  title: 'Addon|Centered',
+  decorators: [Centered],
+  parameters: {
+    component: Centered,
+  },
+};
+
+export const rounded = () => ({
+  components: { MyButton },
+  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+});
diff --git a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
index 6aa46012d4a..a2bdc400cf6 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-contexts.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/vue';
 import { withContexts } from '@storybook/addon-contexts/vue';
 
 // Example A: Simple CSS Theming
@@ -39,18 +38,21 @@ const storyLevelContexts = [
   },
 ];
 
-const stories = storiesOf('Addon|Contexts', module).addDecorator(withContexts(topLevelContexts));
+export default {
+  title: 'Addon|Contexts',
+  decorators: [withContexts(topLevelContexts)],
+};
 
-stories.add(
-  'Simple CSS Theming',
-  () => ({
-    template:
-      "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
-  }),
-  {
+export const simpleCssTheming = () => ({
+  template: "<span>I'm a children of the injected 'div' (where provides a theming context).</span>",
+});
+
+simpleCssTheming.story = {
+  name: 'Simple CSS Theming',
+  parameters: {
     contexts: storyLevelContexts,
-  }
-);
+  },
+};
 
 // Example B: Language (Vue provide/inject API)
 const createContext = initialValue => {
@@ -99,17 +101,17 @@ const NaiveIntlContext = createContext({
   greeting: 'NULL',
 });
 
-stories.add(
-  'Languages',
-  () => ({
-    components: { 'NaiveIntlContext.Consumer': NaiveIntlContext.Consumer },
-    template: `
-      <NaiveIntlContext.Consumer v-slot="{ locale, greeting }">
-        Your locale is {{ locale }}, so I say {{ greeting }}!
-      </NaiveIntlContext.Consumer>
-    `,
-  }),
-  {
+export const Languages = () => ({
+  components: { 'NaiveIntlContext.Consumer': NaiveIntlContext.Consumer },
+  template: `
+    <NaiveIntlContext.Consumer v-slot="{ locale, greeting }">
+      Your locale is {{ locale }}, so I say {{ greeting }}!
+    </NaiveIntlContext.Consumer>
+  `,
+});
+
+Languages.story = {
+  parameters: {
     contexts: [
       {
         icon: 'globe',
@@ -140,5 +142,5 @@ stories.add(
         },
       },
     ],
-  }
-);
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
index c20bca71a12..87f10e0c045 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-knobs.stories.js
@@ -1,4 +1,3 @@
-import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 import {
   withKnobs,
@@ -14,80 +13,83 @@ import {
 
 const logger = console;
 
-storiesOf('Addon|Knobs', module)
-  .addDecorator(withKnobs)
-  .add('Simple', () => ({
+export default {
+  title: 'Addon|Knobs',
+  decorators: [withKnobs],
+};
+
+export const Simple = () => ({
+  props: {
+    name: {
+      type: String,
+      default: text('Name', 'John Doe'),
+    },
+  },
+
+  template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
+
+  data() {
+    return { age: 40 };
+  },
+  created() {
+    logger.debug('created');
+  },
+  destroyed() {
+    logger.debug('destroyed');
+  },
+});
+
+export const allKnobs = () => {
+  const fruits = {
+    Apple: 'apples',
+    Banana: 'bananas',
+    Cherry: 'cherries',
+  };
+
+  button('Arbitrary action', action('You clicked it!'));
+
+  return {
     props: {
-      name: {
-        type: String,
-        default: text('Name', 'John Doe'),
+      name: { default: text('Name', 'Jane') },
+      stock: {
+        default: number('Stock', 20, {
+          range: true,
+          min: 0,
+          max: 30,
+          step: 5,
+        }),
+      },
+      fruit: { default: select('Fruit', fruits, 'apples') },
+      price: { default: number('Price', 2.25) },
+      colour: { default: color('Border', 'deeppink') },
+      today: { default: date('Today', new Date('Jan 20 2017 GMT+0')) },
+      // this is necessary, because we cant use arrays/objects directly in vue prop default values
+      // a factory function is required, but we need to make sure the knob is only called once
+      items: { default: (items => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) },
+      nice: { default: boolean('Nice', true) },
+    },
+    data: () => ({
+      dateOptions: { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
+    }),
+    computed: {
+      stockMessage() {
+        return this.stock
+          ? `I have a stock of ${this.stock} ${this.fruit}, costing $${this.price} each.`
+          : `I'm out of ${this.fruit}${this.nice ? ', Sorry!' : '.'}`;
+      },
+      salutation() {
+        return this.nice ? 'Nice to meet you!' : 'Leave me alone!';
+      },
+      formattedDate() {
+        return new Date(this.today).toLocaleDateString('en-US', this.dateOptions);
+      },
+      style() {
+        return {
+          'border-color': this.colour,
+        };
       },
     },
-
-    template: `<div @click="age++">I am {{ name }} and I'm {{ age }} years old.</div>`,
-
-    data() {
-      return { age: 40 };
-    },
-
-    created() {
-      logger.debug('created');
-    },
-    destroyed() {
-      logger.debug('destroyed');
-    },
-  }))
-  .add('All knobs', () => {
-    const fruits = {
-      Apple: 'apples',
-      Banana: 'bananas',
-      Cherry: 'cherries',
-    };
-
-    button('Arbitrary action', action('You clicked it!'));
-
-    return {
-      props: {
-        name: { default: text('Name', 'Jane') },
-        stock: {
-          default: number('Stock', 20, {
-            range: true,
-            min: 0,
-            max: 30,
-            step: 5,
-          }),
-        },
-        fruit: { default: select('Fruit', fruits, 'apples') },
-        price: { default: number('Price', 2.25) },
-        colour: { default: color('Border', 'deeppink') },
-        today: { default: date('Today', new Date('Jan 20 2017 GMT+0')) },
-        // this is necessary, because we cant use arrays/objects directly in vue prop default values
-        // a factory function is required, but we need to make sure the knob is only called once
-        items: { default: (items => () => items)(array('Items', ['Laptop', 'Book', 'Whiskey'])) },
-        nice: { default: boolean('Nice', true) },
-      },
-      data: () => ({
-        dateOptions: { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' },
-      }),
-      computed: {
-        stockMessage() {
-          return this.stock
-            ? `I have a stock of ${this.stock} ${this.fruit}, costing $${this.price} each.`
-            : `I'm out of ${this.fruit}${this.nice ? ', Sorry!' : '.'}`;
-        },
-        salutation() {
-          return this.nice ? 'Nice to meet you!' : 'Leave me alone!';
-        },
-        formattedDate() {
-          return new Date(this.today).toLocaleDateString('en-US', this.dateOptions);
-        },
-        style() {
-          return {
-            'border-color': this.colour,
-          };
-        },
-      },
-      template: `
+    template: `
           <div style="border: 2px dotted; padding: 8px 22px; border-radius: 8px" :style="style">
             <h1>My name is {{ name }},</h1>
             <h3>today is {{ formattedDate }}</h3>
@@ -99,11 +101,20 @@ storiesOf('Addon|Knobs', module)
             <p>{{ salutation }}</p>
           </div>
         `,
-    };
-  })
-  .add('XSS safety', () => ({
-    props: {
-      text: { default: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >') },
-    },
-    template: '<div v-html="text"></div>',
-  }));
+  };
+};
+
+allKnobs.story = {
+  name: 'All knobs',
+};
+
+export const xssSafety = () => ({
+  props: {
+    text: { default: text('Rendered string', '<img src=x onerror="alert(\'XSS Attack\')" >') },
+  },
+  template: '<div v-html="text"></div>',
+});
+
+xssSafety.story = {
+  name: 'XSS safety',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
index 647d681d10c..7a4a37cb106 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-links.stories.js
@@ -1,10 +1,17 @@
-import { storiesOf } from '@storybook/vue';
 import { linkTo } from '@storybook/addon-links';
 
-storiesOf('Addon|Links', module).add('Go to welcome', () => ({
+export default {
+  title: 'Addon|Links',
+};
+
+export const goToWelcome = () => ({
   template:
     '<my-button :rounded="true" :handle-click="click" >This buttons links to Welcome</my-button>',
   methods: {
     click: linkTo('Welcome'),
   },
-}));
+});
+
+goToWelcome.story = {
+  name: 'Go to welcome',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
index 5cd909644a0..afa67555454 100644
--- a/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/addon-notes.stories.js
@@ -1,26 +1,31 @@
-import { storiesOf } from '@storybook/vue';
+export default {
+  title: 'Addon|Notes',
+};
 
-storiesOf('Addon|Notes', module)
-  .add(
-    'Simple note',
-    () => ({
-      template:
-        '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
-    }),
-    { notes: 'My notes on some bold text' }
-  )
-  .add(
-    'Note with HTML',
-    () => ({
-      template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
-    }),
-    {
-      notes: `
-      <h2>My notes on emojies</h2>
+export const simpleNote = () => ({
+  template:
+    '<p><strong>Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.</strong></p>',
+});
 
-      <em>It's not all that important to be honest, but..</em>
+simpleNote.story = {
+  name: 'Simple note',
+  parameters: { notes: 'My notes on some bold text' },
+};
 
-      Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
-    `,
-    }
-  );
+export const noteWithHtml = () => ({
+  template: '<p>🤔😳😯😮<br/>😄😩😓😱<br/>🤓😑😶😊</p>',
+});
+
+noteWithHtml.story = {
+  name: 'Note with HTML',
+
+  parameters: {
+    notes: `
+    <h2>My notes on emojies</h2>
+
+    <em>It's not all that important to be honest, but..</em>
+
+    Emojis are great, I love emojis, in fact I like using them in my Component notes too! 😇
+  `,
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/components/app.stories.js b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
new file mode 100644
index 00000000000..76fc8288032
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/app.stories.js
@@ -0,0 +1,14 @@
+import App from '../../App.vue';
+
+export default {
+  title: 'App',
+
+  parameters: {
+    component: App,
+  },
+};
+
+export const app = () => ({
+  render: h => h(App),
+});
+app.story = { name: 'App' };
diff --git a/examples/vue-kitchen-sink/src/stories/components/button.stories.js b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
new file mode 100644
index 00000000000..cdfd96be19b
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/button.stories.js
@@ -0,0 +1,11 @@
+export default {
+  title: 'Button',
+};
+
+export const rounded = () => ({
+  template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
+});
+
+export const square = () => ({
+  template: '<my-button :rounded="false">A Button with square edges</my-button>',
+});
diff --git a/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
new file mode 100644
index 00000000000..0dd5164380c
--- /dev/null
+++ b/examples/vue-kitchen-sink/src/stories/components/welcome.stories.js
@@ -0,0 +1,15 @@
+import { linkTo } from '@storybook/addon-links';
+
+import Welcome from '../Welcome.vue';
+
+export default {
+  title: 'Welcome',
+  parameters: {
+    component: Welcome,
+  },
+};
+
+export const welcome = () => ({
+  render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
+});
+welcome.story = { welcome };
diff --git a/examples/vue-kitchen-sink/src/stories/core-template.stories.js b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
index 8acb4bd11b0..d1d2d3768c4 100644
--- a/examples/vue-kitchen-sink/src/stories/core-template.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core-template.stories.js
@@ -1,6 +1,10 @@
-import { storiesOf } from '@storybook/vue';
+export default {
+  title: 'Core|Template',
+};
 
-storiesOf('Core|Template', module).add(
-  'string only',
-  () => '<my-button :rounded="false">A Button with square edges</my-button>'
-);
+export const stringOnly = () =>
+  '<my-button :rounded="false">A Button with square edges</my-button>';
+
+stringOnly.story = {
+  name: 'string only',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/core.stories.js b/examples/vue-kitchen-sink/src/stories/core.stories.js
index a03d25cb5a6..0d1a92abde2 100644
--- a/examples/vue-kitchen-sink/src/stories/core.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/core.stories.js
@@ -1,4 +1,4 @@
-import { storiesOf, addParameters } from '@storybook/vue';
+import { addParameters } from '@storybook/vue';
 
 const globalParameter = 'globalParameter';
 const chapterParameter = 'chapterParameter';
@@ -6,14 +6,21 @@ const storyParameter = 'storyParameter';
 
 addParameters({ globalParameter });
 
-storiesOf('Core|Parameters', module)
-  .addParameters({ chapterParameter })
-  .add(
-    'passed to story',
-    ({ parameters: { fileName, ...parameters } }) => ({
-      template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
-    }),
-    {
-      storyParameter,
-    }
-  );
+export default {
+  title: 'Core|Parameters',
+  parameters: {
+    chapterParameter,
+  },
+};
+
+export const passedToStory = ({ parameters: { fileName, ...parameters } }) => ({
+  template: `<div>Parameters are ${JSON.stringify(parameters)}</div>`,
+});
+
+passedToStory.story = {
+  name: 'passed to story',
+
+  parameters: {
+    storyParameter,
+  },
+};
diff --git a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
index 3c3a022d3cd..c6103cbdb22 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-decorators.stories.js
@@ -1,33 +1,37 @@
-import { storiesOf } from '@storybook/vue';
-
 import MyButton from './Button.vue';
 
-storiesOf('Custom|Decorator for Vue', module)
-  .addDecorator(storyFn => {
-    // Decorated with story-function
-    const WrapButton = storyFn();
-    return {
-      components: { WrapButton },
-      template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
-      data() {
-        return { borderStyle: 'medium solid red' };
-      },
-    };
-  })
-  .addDecorator(() => ({
-    // Decorated with `story` component
-    template: '<div :style="{ border: borderStyle }"><story/></div>',
-    data() {
+export default {
+  title: 'Custom|Decorator for Vue',
+  decorators: [
+    storyFn => {
+      // Decorated with story-function
+      const WrapButton = storyFn();
       return {
-        borderStyle: 'medium solid blue',
+        components: { WrapButton },
+        template: '<div :style="{ border: borderStyle }"><wrap-button/></div>',
+        data() {
+          return { borderStyle: 'medium solid red' };
+        },
       };
     },
-  }))
-  .add('template', () => ({
-    template: '<my-button>MyButton with template</my-button>',
-  }))
-  .add('render', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }));
+    () => ({
+      // Decorated with `story` component
+      template: '<div :style="{ border: borderStyle }"><story/></div>',
+      data() {
+        return {
+          borderStyle: 'medium solid blue',
+        };
+      },
+    }),
+  ],
+};
+
+export const template = () => ({
+  template: '<my-button>MyButton with template</my-button>',
+});
+
+export const render = () => ({
+  render(h) {
+    return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+  },
+});
diff --git a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
index cfbde634939..e7facaa8b8b 100644
--- a/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
+++ b/examples/vue-kitchen-sink/src/stories/custom-rendering.stories.js
@@ -1,92 +1,125 @@
 import Vuex from 'vuex';
-import { storiesOf } from '@storybook/vue';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
 import MyButton from './Button.vue';
 
-storiesOf('Custom|Method for rendering Vue', module)
-  .add('render', () => ({
-    render: h => h('div', ['renders a div with some text in it..']),
-  }))
-  .add('render + component', () => ({
-    render(h) {
-      return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
-    },
-  }))
-  .add('template', () => ({
-    template: `
+export default {
+  title: 'Custom|Method for rendering Vue',
+};
+
+export const render = () => ({
+  render: h => h('div', ['renders a div with some text in it..']),
+});
+
+export const renderComponent = () => ({
+  render(h) {
+    return h(MyButton, { props: { color: 'pink' } }, ['renders component: MyButton']);
+  },
+});
+
+renderComponent.story = {
+  name: 'render + component',
+};
+
+export const template = () => ({
+  template: `
       <div>
         <h1>A template</h1>
         <p>rendered in vue in storybook</p>
       </div>`,
-  }))
-  .add('template + component', () => ({
-    components: { MyButton },
-    template: '<my-button>MyButton rendered in a template</my-button>',
-  }))
-  .add('template + methods', () => ({
-    components: { MyButton },
-    template: `
+});
+
+export const templateComponent = () => ({
+  components: { MyButton },
+  template: '<my-button>MyButton rendered in a template</my-button>',
+});
+
+templateComponent.story = {
+  name: 'template + component',
+};
+
+export const templateMethods = () => ({
+  components: { MyButton },
+  template: `
       <p>
         <em>Clicking the button will navigate to another story using the 'addon-links'</em><br/>
         <my-button :rounded="true" :handle-click="action">MyButton rendered in a template + props & methods</my-button>
       </p>`,
-    methods: {
-      action: linkTo('Button'),
-    },
-  }))
-  .add('JSX', () => ({
-    components: { MyButton },
-    render() {
-      // eslint-disable-next-line react/react-in-jsx-scope
-      return <my-button>MyButton rendered with JSX</my-button>;
-    },
-  }))
-  .add('vuex + actions', () => ({
-    components: { MyButton },
-    template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
+  methods: {
+    action: linkTo('Button'),
+  },
+});
+
+templateMethods.story = {
+  name: 'template + methods',
+};
+
+export const JSX = () => ({
+  components: { MyButton },
+  render() {
+    // eslint-disable-next-line react/react-in-jsx-scope
+    return <my-button>MyButton rendered with JSX</my-button>;
+  },
+});
+
+export const vuexActions = () => ({
+  components: { MyButton },
+  template: '<my-button :handle-click="log">with vuex: {{ $store.state.count }}</my-button>',
+  store: new Vuex.Store({
+    state: { count: 0 },
+    mutations: {
+      increment(state) {
+        state.count += 1; // eslint-disable-line
+        action('vuex state')(state);
       },
     },
-  }))
-  .add('whatever you want', () => ({
-    components: { MyButton },
-    template:
-      '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
-    store: new Vuex.Store({
-      state: { count: 0 },
-      mutations: {
-        increment(state) {
-          state.count += 1; // eslint-disable-line
-          action('vuex state')(state);
-        },
-      },
-    }),
-    methods: {
-      log() {
-        this.$store.commit('increment');
+  }),
+  methods: {
+    log() {
+      this.$store.commit('increment');
+    },
+  },
+});
+
+vuexActions.story = {
+  name: 'vuex + actions',
+};
+
+export const whateverYouWant = () => ({
+  components: { MyButton },
+  template: '<my-button :handle-click="log">with awesomeness: {{ $store.state.count }}</my-button>',
+  store: new Vuex.Store({
+    state: { count: 0 },
+    mutations: {
+      increment(state) {
+        state.count += 1; // eslint-disable-line
+        action('vuex state')(state);
       },
     },
-  }))
-  .add('pre-registered component', () => ({
-    /* By pre-registering component in config.js,
-     * the need to register all components with each story is removed.
-     * You'll only need the template */
-    template: `
+  }),
+  methods: {
+    log() {
+      this.$store.commit('increment');
+    },
+  },
+});
+
+whateverYouWant.story = {
+  name: 'whatever you want',
+};
+
+export const preRegisteredComponent = () => ({
+  /* By pre-registering component in config.js,
+   * the need to register all components with each story is removed.
+   * You'll only need the template */
+  template: `
       <p>
         <em>This component was pre-registered in .storybook/config.js</em><br/>
         <my-button>MyButton rendered in a template</my-button>
       </p>`,
-  }));
+});
+
+preRegisteredComponent.story = {
+  name: 'pre-registered component',
+};
diff --git a/examples/vue-kitchen-sink/src/stories/index.js b/examples/vue-kitchen-sink/src/stories/index.js
deleted file mode 100644
index fa9448a5b0d..00000000000
--- a/examples/vue-kitchen-sink/src/stories/index.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { storiesOf } from '@storybook/vue';
-import { linkTo } from '@storybook/addon-links';
-
-import Welcome from './Welcome.vue';
-import App from '../App.vue';
-
-storiesOf('Welcome', module).add('Welcome', () => ({
-  render: h => h(Welcome, { props: { goToButton: linkTo('Button') } }),
-}));
-
-storiesOf('App', module).add('App', () => ({
-  render: h => h(App),
-}));
-
-storiesOf('Button', module)
-  // Works if Vue.component is called in the config.js in .storybook
-  .add('rounded', () => ({
-    template: '<my-button :rounded="true">A Button with rounded edges</my-button>',
-  }))
-  .add('square', () => ({
-    template: '<my-button :rounded="false">A Button with square edges</my-button>',
-  }));
diff --git a/jest.config.js b/jest.config.js
index 7e70c68eaf9..f5a57e84692 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -69,6 +69,9 @@ module.exports = {
     '/dll/',
     '/__mocks__ /',
   ],
+  globals: {
+    DOCS_MODE: false,
+  },
   snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer'],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.js'],
diff --git a/lerna.json b/lerna.json
index 0305f8a07fd..d3352346186 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,5 +2,5 @@
   "npmClient": "yarn",
   "useWorkspaces": true,
   "registry": "https://registry.npmjs.org",
-  "version": "5.2.0-alpha.23"
+  "version": "5.2.0-alpha.32"
 }
diff --git a/lib/addons/package.json b/lib/addons/package.json
index 8d360840d0b..de47725f352 100644
--- a/lib/addons/package.json
+++ b/lib/addons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addons",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook addons store",
   "keywords": [
     "storybook"
@@ -21,9 +21,9 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "util-deprecate": "^1.0.2"
diff --git a/lib/api/package.json b/lib/api/package.json
index fd4301db46e..867ddb29176 100644
--- a/lib/api/package.json
+++ b/lib/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/api",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Core Storybook API & Context",
   "keywords": [
     "storybook"
@@ -20,11 +20,11 @@
     "prepare": "node ./scripts/generateVersion.js && node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
diff --git a/lib/api/src/index.tsx b/lib/api/src/index.tsx
index 73ec1224d31..02bd7f7149d 100644
--- a/lib/api/src/index.tsx
+++ b/lib/api/src/index.tsx
@@ -43,7 +43,10 @@ const { STORY_CHANGED, SET_STORIES, SELECT_STORY } = Events;
 
 export type Module = StoreData &
   RouterData &
-  ProviderData & { mode?: 'production' | 'development' };
+  ProviderData & {
+    mode?: 'production' | 'development';
+    state: State;
+  };
 
 export type State = Other &
   LayoutSubState &
@@ -82,6 +85,10 @@ interface ProviderData {
   provider: Provider;
 }
 
+interface DocsModeData {
+  docsMode: boolean;
+}
+
 interface StoreData {
   store: Store;
 }
@@ -92,7 +99,7 @@ interface Children {
 
 type StatePartial = Partial<State>;
 
-export type Props = Children & RouterData & ProviderData;
+export type Props = Children & RouterData & ProviderData & DocsModeData;
 
 class ManagerProvider extends Component<Props, State> {
   static displayName = 'Manager';
@@ -103,26 +110,41 @@ class ManagerProvider extends Component<Props, State> {
 
   constructor(props: Props) {
     super(props);
-    const { provider, location, path, viewMode, storyId, navigate } = props;
+    const {
+      provider,
+      location,
+      path,
+      viewMode = props.docsMode ? 'docs' : 'story',
+      storyId,
+      docsMode,
+      navigate,
+    } = props;
 
     const store = new Store({
       getState: () => this.state,
       setState: (stateChange: StatePartial, callback) => this.setState(stateChange, callback),
     });
 
+    const routeData = { location, path, viewMode, storyId };
+
     // Initialize the state to be the initial (persisted) state of the store.
     // This gives the modules the chance to read the persisted state, apply their defaults
     // and override if necessary
-    this.state = store.getInitialState(getInitialState({}));
+    const docsModeState = {
+      layout: { isToolshown: false, showPanel: false },
+      ui: { docsMode: true },
+    };
+    this.state = store.getInitialState(
+      getInitialState({
+        ...routeData,
+        ...(docsMode ? docsModeState : null),
+      })
+    );
 
     const apiData = {
       navigate,
       store,
       provider,
-      location,
-      path,
-      viewMode,
-      storyId,
     };
 
     this.modules = [
@@ -134,7 +156,7 @@ class ManagerProvider extends Component<Props, State> {
       initStories,
       initURL,
       initVersions,
-    ].map(initModule => initModule(apiData));
+    ].map(initModule => initModule({ ...routeData, ...apiData, state: this.state }));
 
     // Create our initial state by combining the initial state of all modules, then overlaying any saved state
     const state = getInitialState(...this.modules.map(m => m.state));
diff --git a/lib/api/src/modules/layout.ts b/lib/api/src/modules/layout.ts
index de64a8c7038..7aa99602b3b 100644
--- a/lib/api/src/modules/layout.ts
+++ b/lib/api/src/modules/layout.ts
@@ -24,6 +24,7 @@ export interface UI {
   url?: string;
   enableShortcuts: boolean;
   sidebarAnimations: boolean;
+  docsMode: boolean;
 }
 
 export interface SubState {
@@ -132,6 +133,7 @@ const initial: SubState = {
   ui: {
     enableShortcuts: true,
     sidebarAnimations: true,
+    docsMode: false,
   },
   layout: {
     isToolshown: true,
diff --git a/lib/api/src/modules/url.ts b/lib/api/src/modules/url.ts
index 52d4a265e21..5530b9e6d71 100644
--- a/lib/api/src/modules/url.ts
+++ b/lib/api/src/modules/url.ts
@@ -10,6 +10,7 @@ interface Additions {
   panelPosition?: PanelPositions;
   showNav?: boolean;
   selectedPanel?: string;
+  viewMode?: string;
 }
 
 // Initialize the state based on the URL.
@@ -21,7 +22,7 @@ interface Additions {
 //     - nav: 0/1 -- show or hide the story list
 //
 //   We also support legacy URLs from storybook <5
-const initialUrlSupport = ({ navigate, location, path }: Module) => {
+const initialUrlSupport = ({ navigate, state: { location, path, viewMode, storyId } }: Module) => {
   const addition: Additions = {};
   const query = queryFromLocation(location);
   let selectedPanel;
@@ -70,20 +71,20 @@ const initialUrlSupport = ({ navigate, location, path }: Module) => {
   }
 
   if (selectedKind && selectedStory) {
-    const storyId = toId(selectedKind, selectedStory);
-    setTimeout(() => navigate(`/story/${storyId}`, { replace: true }), 1);
+    const id = toId(selectedKind, selectedStory);
+    setTimeout(() => navigate(`/${viewMode}/${id}`, { replace: true }), 1);
   } else if (selectedKind) {
     // Create a "storyId" of the form `kind-sanitized--*`
     const standInId = toId(selectedKind, 'star').replace(/star$/, '*');
-    setTimeout(() => navigate(`/story/${standInId}`, { replace: true }), 1);
+    setTimeout(() => navigate(`/${viewMode}/${standInId}`, { replace: true }), 1);
   } else if (!queryPath || queryPath === '/') {
-    setTimeout(() => navigate(`/story/*`, { replace: true }), 1);
+    setTimeout(() => navigate(`/${viewMode}/*`, { replace: true }), 1);
   } else if (Object.keys(query).length > 1) {
     // remove other queries
     setTimeout(() => navigate(`${queryPath}`, { replace: true }), 1);
   }
 
-  return { layout: addition, selectedPanel, location, path, customQueryParams };
+  return { viewMode, layout: addition, selectedPanel, location, path, customQueryParams, storyId };
 };
 
 export interface QueryParams {
@@ -102,7 +103,7 @@ export interface SubAPI {
   setQueryParams: (input: QueryParams) => void;
 }
 
-export default function({ store, navigate, location, path: initialPath, ...rest }: Module) {
+export default function({ store, navigate, state, provider, ...rest }: Module) {
   const api: SubAPI = {
     getQueryParam: key => {
       const { customQueryParams } = store.getState();
@@ -142,6 +143,6 @@ export default function({ store, navigate, location, path: initialPath, ...rest
 
   return {
     api,
-    state: initialUrlSupport({ store, navigate, location, path: initialPath, ...rest }),
+    state: initialUrlSupport({ store, navigate, state, provider, ...rest }),
   };
 }
diff --git a/lib/api/src/tests/layout.test.js b/lib/api/src/tests/layout.test.js
index 9fa3000d6c8..b0109304db7 100644
--- a/lib/api/src/tests/layout.test.js
+++ b/lib/api/src/tests/layout.test.js
@@ -17,6 +17,7 @@ describe('layout API', () => {
         ui: {
           enableShortcuts: true,
           sidebarAnimations: true,
+          docsMode: false,
         },
         layout: {
           isToolshown: true,
diff --git a/lib/api/src/tests/url.test.js b/lib/api/src/tests/url.test.js
index 3c2845beed5..c1e8657c2f6 100644
--- a/lib/api/src/tests/url.test.js
+++ b/lib/api/src/tests/url.test.js
@@ -5,12 +5,14 @@ import initURL from '../modules/url';
 jest.useFakeTimers();
 
 describe('initial state', () => {
+  const viewMode = 'story';
+
   it('redirects to /story/* if path is blank', () => {
     const navigate = jest.fn();
     const location = { search: null };
     const {
       state: { layout },
-    } = initURL({ navigate, location });
+    } = initURL({ navigate, state: { location, viewMode } });
 
     // Nothing unexpected in layout
     expect(layout).toEqual({});
@@ -25,7 +27,7 @@ describe('initial state', () => {
 
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ isFullscreen: true });
     });
@@ -36,7 +38,7 @@ describe('initial state', () => {
 
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ showNav: false });
     });
@@ -47,7 +49,7 @@ describe('initial state', () => {
 
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ panelPosition: 'bottom' });
     });
@@ -58,7 +60,7 @@ describe('initial state', () => {
 
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ panelPosition: 'right' });
     });
@@ -69,7 +71,7 @@ describe('initial state', () => {
 
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ showPanel: false });
     });
@@ -91,7 +93,7 @@ describe('initial state', () => {
       const location = { search: qs.stringify(defaultLegacyParameters) };
       const {
         state: { layout, selectedPanel },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location, viewMode } });
 
       // Nothing unexpected in layout
       expect(layout).toEqual({});
@@ -111,7 +113,7 @@ describe('initial state', () => {
       };
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ isFullscreen: true });
     });
@@ -127,7 +129,7 @@ describe('initial state', () => {
       };
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ showNav: false, showPanel: false });
     });
@@ -142,7 +144,7 @@ describe('initial state', () => {
       };
       const {
         state: { layout },
-      } = initURL({ navigate, location });
+      } = initURL({ navigate, state: { location } });
 
       expect(layout).toEqual({ panelPosition: 'right' });
     });
@@ -158,7 +160,7 @@ describe('queryParams', () => {
       },
       getState: () => state,
     };
-    const { api } = initURL({ location: { search: '' }, navigate: jest.fn(), store });
+    const { api } = initURL({ state: { location: { search: '' } }, navigate: jest.fn(), store });
 
     api.setQueryParams({ foo: 'bar' });
 
diff --git a/lib/api/src/typings.d.ts b/lib/api/src/typings.d.ts
index dffcbc4aa83..bba421507c4 100644
--- a/lib/api/src/typings.d.ts
+++ b/lib/api/src/typings.d.ts
@@ -1,2 +1,5 @@
 declare module 'global';
 declare module 'telejson';
+
+// provided by the webpack define plugin
+declare var DOCS_MODE: string | undefined;
diff --git a/lib/api/src/version.ts b/lib/api/src/version.ts
index cc27aa19153..4f28f25c753 100644
--- a/lib/api/src/version.ts
+++ b/lib/api/src/version.ts
@@ -1 +1 @@
-export const version = '5.2.0-alpha.23';
+export const version = '5.2.0-alpha.32';
diff --git a/lib/channel-postmessage/package.json b/lib/channel-postmessage/package.json
index 812f92ca9ba..438d90703ab 100644
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-postmessage",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "",
   "keywords": [
     "storybook"
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "telejson": "^2.2.1"
diff --git a/lib/channel-websocket/package.json b/lib/channel-websocket/package.json
index 86047f7ea80..3b30b63c0d1 100644
--- a/lib/channel-websocket/package.json
+++ b/lib/channel-websocket/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channel-websocket",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "",
   "keywords": [
     "storybook"
@@ -21,7 +21,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/channels": "5.2.0-alpha.23",
+    "@storybook/channels": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "json-fn": "^1.1.1"
diff --git a/lib/channels/package.json b/lib/channels/package.json
index faf47c26ac5..1edfc09ff3d 100644
--- a/lib/channels/package.json
+++ b/lib/channels/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/channels",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/cli/bin/generate.js b/lib/cli/bin/generate.js
index 070d868d140..da290b80f68 100644
--- a/lib/cli/bin/generate.js
+++ b/lib/cli/bin/generate.js
@@ -1,5 +1,6 @@
 import program from 'commander';
 import chalk from 'chalk';
+import envinfo from 'envinfo';
 import pkg from '../package.json';
 import initiate from '../lib/initiate';
 import { codeLog } from '../lib/helpers';
@@ -31,6 +32,21 @@ if (process.argv[1].includes('getstorybook')) {
     .option('-N --use-npm', 'Use NPM to build the Storybook server')
     .action((addonName, options) => add(addonName, options));
 
+  program
+    .command('info')
+    .description('Prints debugging information about the local environment')
+    .action(() => {
+      console.log(chalk.bold('\nEnvironment Info:'));
+      envinfo
+        .run({
+          System: ['OS', 'CPU'],
+          Binaries: ['Node', 'Yarn', 'npm'],
+          Browsers: ['Chrome', 'Edge', 'Firefox', 'Safari'],
+          npmGlobalPackages: ['@storybook/cli'],
+        })
+        .then(console.log);
+    });
+
   program.command('*', { noHelp: true }).action(cmd => {
     logger.error('Invalid command: %s.\nSee --help for a list of available commands.', cmd);
     process.exit(1);
diff --git a/lib/cli/generators/RAX/template/.storybook/config.js b/lib/cli/generators/RAX/template/.storybook/config.js
index c61d436580e..9218bd96f55 100644
--- a/lib/cli/generators/RAX/template/.storybook/config.js
+++ b/lib/cli/generators/RAX/template/.storybook/config.js
@@ -3,7 +3,7 @@ import { configure, addParameters } from '@storybook/rax';
 addParameters({
   options: {
     name: 'Rax Kitchen Sink',
-    url: 'https://github.com/storybooks/storybook/tree/master/examples/rax-kitchen-sink',
+    url: 'https://github.com/storybookjs/storybook/tree/master/examples/rax-kitchen-sink',
     goFullScreen: false,
     showAddonsPanel: true,
     showSearchBox: false,
diff --git a/lib/cli/generators/REACT_NATIVE/index.js b/lib/cli/generators/REACT_NATIVE/index.js
index b488122772c..c289ec32636 100644
--- a/lib/cli/generators/REACT_NATIVE/index.js
+++ b/lib/cli/generators/REACT_NATIVE/index.js
@@ -12,17 +12,12 @@ import {
 } from '../../lib/helpers';
 
 export default async (npmOptions, installServer) => {
-  const [
-    storybookVersion,
-    addonsVersion,
-    actionsVersion,
-    linksVersion,
-  ] = await getVersions(
+  const [storybookVersion, addonsVersion, actionsVersion, linksVersion] = await getVersions(
     npmOptions,
     '@storybook/react-native',
     '@storybook/addons',
     '@storybook/addon-actions',
-    '@storybook/addon-links',
+    '@storybook/addon-links'
   );
 
   // copy all files from the template directory to project directory
@@ -76,8 +71,5 @@ export default async (npmOptions, installServer) => {
 
   const babelDependencies = await getBabelDependencies(npmOptions, packageJson);
 
-  installDependencies(npmOptions, [
-    ...devDependencies,
-    ...babelDependencies,
-  ]);
+  installDependencies(npmOptions, [...devDependencies, ...babelDependencies]);
 };
diff --git a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
index 63f1a626671..b354a462808 100644
--- a/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
+++ b/lib/cli/generators/REACT_NATIVE/template/storybook/stories/index.js
@@ -5,6 +5,7 @@ import { storiesOf } from '@storybook/react-native';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';
 
+// eslint-disable-next-line import/extensions
 import Button from './Button';
 import CenterView from './CenterView';
 import Welcome from './Welcome';
diff --git a/lib/cli/package.json b/lib/cli/package.json
index 7234a76e1c0..23df52d5e75 100644
--- a/lib/cli/package.json
+++ b/lib/cli/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/cli",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook's CLI - easiest method of adding storybook to your projects",
   "keywords": [
     "cli",
@@ -30,11 +30,12 @@
     "@babel/core": "^7.4.5",
     "@babel/preset-env": "^7.4.5",
     "@babel/register": "^7.0.0",
-    "@storybook/codemod": "5.2.0-alpha.23",
+    "@storybook/codemod": "5.2.0-alpha.32",
     "chalk": "^2.4.1",
     "commander": "^2.19.0",
     "core-js": "^3.0.1",
     "cross-spawn": "^6.0.5",
+    "envinfo": "^7.3.1",
     "fs-extra": "^8.0.1",
     "inquirer": "^6.2.0",
     "jscodeshift": "^0.6.3",
@@ -44,33 +45,33 @@
     "update-notifier": "^3.0.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "5.2.0-alpha.23",
-    "@storybook/addon-centered": "5.2.0-alpha.23",
-    "@storybook/addon-graphql": "5.2.0-alpha.23",
-    "@storybook/addon-info": "5.2.0-alpha.23",
-    "@storybook/addon-knobs": "5.2.0-alpha.23",
-    "@storybook/addon-links": "5.2.0-alpha.23",
-    "@storybook/addon-notes": "5.2.0-alpha.23",
-    "@storybook/addon-options": "5.2.0-alpha.23",
-    "@storybook/addon-storyshots": "5.2.0-alpha.23",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/angular": "5.2.0-alpha.23",
-    "@storybook/channel-postmessage": "5.2.0-alpha.23",
-    "@storybook/channel-websocket": "5.2.0-alpha.23",
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/ember": "5.2.0-alpha.23",
-    "@storybook/html": "5.2.0-alpha.23",
-    "@storybook/marko": "5.2.0-alpha.23",
-    "@storybook/mithril": "5.2.0-alpha.23",
-    "@storybook/polymer": "5.2.0-alpha.23",
-    "@storybook/preact": "5.2.0-alpha.23",
-    "@storybook/rax": "5.2.0-alpha.23",
-    "@storybook/react": "5.2.0-alpha.23",
-    "@storybook/react-native": "5.2.0-alpha.23",
-    "@storybook/riot": "5.2.0-alpha.23",
-    "@storybook/svelte": "5.2.0-alpha.23",
-    "@storybook/ui": "5.2.0-alpha.23",
-    "@storybook/vue": "5.2.0-alpha.23"
+    "@storybook/addon-actions": "5.2.0-alpha.32",
+    "@storybook/addon-centered": "5.2.0-alpha.32",
+    "@storybook/addon-graphql": "5.2.0-alpha.32",
+    "@storybook/addon-info": "5.2.0-alpha.32",
+    "@storybook/addon-knobs": "5.2.0-alpha.32",
+    "@storybook/addon-links": "5.2.0-alpha.32",
+    "@storybook/addon-notes": "5.2.0-alpha.32",
+    "@storybook/addon-options": "5.2.0-alpha.32",
+    "@storybook/addon-storyshots": "5.2.0-alpha.32",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/angular": "5.2.0-alpha.32",
+    "@storybook/channel-postmessage": "5.2.0-alpha.32",
+    "@storybook/channel-websocket": "5.2.0-alpha.32",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/ember": "5.2.0-alpha.32",
+    "@storybook/html": "5.2.0-alpha.32",
+    "@storybook/marko": "5.2.0-alpha.32",
+    "@storybook/mithril": "5.2.0-alpha.32",
+    "@storybook/polymer": "5.2.0-alpha.32",
+    "@storybook/preact": "5.2.0-alpha.32",
+    "@storybook/rax": "5.2.0-alpha.32",
+    "@storybook/react": "5.2.0-alpha.32",
+    "@storybook/react-native": "5.2.0-alpha.32",
+    "@storybook/riot": "5.2.0-alpha.32",
+    "@storybook/svelte": "5.2.0-alpha.32",
+    "@storybook/ui": "5.2.0-alpha.32",
+    "@storybook/vue": "5.2.0-alpha.32"
   },
   "publishConfig": {
     "access": "public"
diff --git a/lib/client-api/package.json b/lib/client-api/package.json
index afd7d7fea07..0da806ac16a 100644
--- a/lib/client-api/package.json
+++ b/lib/client-api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-api",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook Client API",
   "keywords": [
     "storybook"
@@ -21,10 +21,10 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "eventemitter3": "^3.1.0",
diff --git a/lib/client-api/src/config_api.js b/lib/client-api/src/config_api.js
index a59226a84a9..9008244478c 100644
--- a/lib/client-api/src/config_api.js
+++ b/lib/client-api/src/config_api.js
@@ -1,8 +1,6 @@
 /* eslint no-underscore-dangle: 0 */
 
-import { location } from 'global';
 import Events from '@storybook/core-events';
-import { logger } from '@storybook/client-logger';
 
 export default class ConfigApi {
   constructor({ channel, storyStore, clearDecorators, clientApi }) {
@@ -19,13 +17,7 @@ export default class ConfigApi {
     this._storyStore.emit(Events.STORY_INIT);
   }
 
-  _renderError(e) {
-    const { stack, message } = e;
-    const error = { stack, message };
-    this._storyStore.setSelection({ error });
-  }
-
-  configure = (loaders, module) => {
+  configure = (loaders, m) => {
     const render = () => {
       const errors = [];
 
@@ -34,40 +26,29 @@ export default class ConfigApi {
           loaders();
         }
       } catch (e) {
-        logger.error(e);
         errors.push(e);
       }
-      try {
-        this._renderMain();
-      } catch (e) {
-        logger.error(e);
-        errors.push(e);
+
+      if (!errors.length) {
+        try {
+          this._renderMain();
+        } catch (e) {
+          errors.push(e);
+        }
       }
 
       if (errors.length) {
-        if (module.hot && module.hot.status() === 'apply') {
-          // We got this issue, after webpack fixed it and applying it.
-          // Therefore error message is displayed forever even it's being fixed.
-          // So, we'll detect it reload the page.
-          logger.error('RELOAD THE PAGE', 'module.hot.status() === apply');
-          location.reload();
-        } else {
-          // If we are accessing the site, but the error is not fixed yet.
-          // There we can render the error.
-          this._renderError(errors[0]);
+        this._storyStore.setSelection(undefined, errors[0]);
 
-          // Clear out the store as chances as only some of the stories will have
-          // made it in before the error was thrown
-          // this._storyStore.clean();
-        }
+        throw errors[0];
+      } else {
+        this._storyStore.setSelection(undefined, null);
       }
     };
 
-    if (module.hot) {
-      module.hot.accept(() => {
-        setTimeout(render);
-      });
-      module.hot.dispose(() => {
+    if (m.hot) {
+      m.hot.accept();
+      m.hot.dispose(() => {
         this._clearDecorators();
       });
     }
diff --git a/lib/client-api/src/story_store.js b/lib/client-api/src/story_store.js
index 6c1c91a8e89..b0e8abb9906 100644
--- a/lib/client-api/src/story_store.js
+++ b/lib/client-api/src/story_store.js
@@ -76,20 +76,42 @@ export default class StoryStore extends EventEmitter {
   }
 
   extract() {
+    const stories = Object.entries(this._data);
+    // determine if we should apply a sort to the stories or just use default import order
+    if (Object.values(this._data).length > 0) {
+      const index = Object.keys(this._data).find(
+        key => this._data[key] && this._data[key].parameters && this._data[key].parameters.options
+      );
+      if (index && this._data[index].parameters.options.storySort) {
+        const sortFn = this._data[index].parameters.options.storySort;
+        stories.sort(sortFn);
+      }
+    }
     // removes function values from all stories so they are safe to transport over the channel
-    return Object.entries(this._data).reduce(
-      (a, [k, v]) => Object.assign(a, { [k]: toExtracted(v) }),
-      {}
-    );
+    return stories.reduce((a, [k, v]) => Object.assign(a, { [k]: toExtracted(v) }), {});
   }
 
-  setSelection = ({ storyId, viewMode }) => {
-    this._selection = { storyId, viewMode };
-    setTimeout(() => this.emit(Events.STORY_RENDER), 1);
+  setSelection = (data, error) => {
+    const { storyId, viewMode } = data || {};
+
+    this._selection = data === undefined ? this._selection : { storyId, viewMode };
+    this._error = error === undefined ? this._error : error;
+
+    setTimeout(() => {
+      // preferred method to emit event.
+      if (this._channel) {
+        this._channel.emit(Events.STORY_RENDER);
+      }
+
+      // should be deprecated in future.
+      this.emit(Events.STORY_RENDER);
+    }, 1);
   };
 
   getSelection = () => this._selection;
 
+  getError = () => this._error;
+
   remove = id => {
     const { _data } = this;
     delete _data[id];
diff --git a/lib/client-api/src/story_store.test.js b/lib/client-api/src/story_store.test.js
index e587e62027a..f27cf64cc24 100644
--- a/lib/client-api/src/story_store.test.js
+++ b/lib/client-api/src/story_store.test.js
@@ -132,4 +132,29 @@ describe('preview.story_store', () => {
       });
     });
   });
+
+  describe('story sorting', () => {
+    const storySort = (a, b) => a[1].id.localeCompare(b[1].id);
+    it('should use the sorting function of the story parameter object', () => {
+      const store = new StoryStore({ channel });
+      store.addStory(
+        ...make('kind-2', 'a-story-2.1', () => 0, { fileName: 'bar.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-1', 'z-story-1.1', () => 0, { fileName: 'foo.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-1', 'story-1.2', () => 0, { fileName: 'foo-2.js', options: { storySort } })
+      );
+      store.addStory(
+        ...make('kind-2', 'story-2.1', () => 0, { fileName: 'bar.js', options: { storySort } })
+      );
+
+      const stories = Object.values(store.extract());
+      expect(stories[0].id).toBe('kind-1--story-1-2');
+      expect(stories[1].id).toBe('kind-1--z-story-1-1');
+      expect(stories[2].id).toBe('kind-2--a-story-2-1');
+      expect(stories[3].id).toBe('kind-2--story-2-1');
+    });
+  });
 });
diff --git a/lib/client-logger/package.json b/lib/client-logger/package.json
index ee741c4c72e..60e1b44800c 100644
--- a/lib/client-logger/package.json
+++ b/lib/client-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/client-logger",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/codemod/README.md b/lib/codemod/README.md
index 1f69564413f..f130f7d3b99 100644
--- a/lib/codemod/README.md
+++ b/lib/codemod/README.md
@@ -9,8 +9,8 @@ It will help you migrate breaking changes & deprecations.
 yarn add jscodeshift @storybook/codemod --dev
 ```
 
--   `@storybook/codemod` is our collection of codemod scripts.
--   `jscodeshift` is a tool we use to apply our codemods.
+- `@storybook/codemod` is our collection of codemod scripts.
+- `jscodeshift` is a tool we use to apply our codemods.
 
 After running the migration commands, you can remove them from your `package.json`, if you added them.
 
@@ -65,23 +65,18 @@ Replaces the Info addon's deprecated `addWithInfo` API with the standard `withIn
 Simple example:
 
 ```js
-storiesOf('Button').addWithInfo(
-  'simple usage',
-  'This is the basic usage of the button.',
-  () => (
-    <Button label="The Button" />
-  )
-)
+storiesOf('Button').addWithInfo('simple usage', 'This is the basic usage of the button.', () => (
+  <Button label="The Button" />
+));
 ```
 
 Becomes
 
 ```js
-storiesOf('Button').add('simple usage', withInfo(
-  'This is the basic usage of the button.'
-)(() => (
-  <Button label="The Button" />
-)))
+storiesOf('Button').add(
+  'simple usage',
+  withInfo('This is the basic usage of the button.')(() => <Button label="The Button" />)
+);
 ```
 
 With options example:
@@ -90,21 +85,98 @@ With options example:
 storiesOf('Button').addWithInfo(
   'simple usage (disable source)',
   'This is the basic usage of the button.',
-  () => (
-    <Button label="The Button" />
-  ),
+  () => <Button label="The Button" />,
   { source: false, inline: true }
-)
+);
 ```
 
 Becomes
 
 ```js
-storiesOf('Button').add('simple usage (disable source)', withInfo({
-  text: 'This is the basic usage of the button.',
-  source: false,
-  inline: true
-})(() => (
-  <Button label="The Button" />
-)))
+storiesOf('Button').add(
+  'simple usage (disable source)',
+  withInfo({
+    text: 'This is the basic usage of the button.',
+    source: false,
+    inline: true,
+  })(() => <Button label="The Button" />)
+);
 ```
+
+### add-component-parameters
+
+This tries to smartly adds "component" parameters to all your existing stories
+for use in SB Docs.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/add-component-parameters.js . --ignore-pattern "node_modules|dist"
+```
+
+For example:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+```
+
+Becomes:
+
+```js
+input { Button } from './Button';
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('story', () => <Button label="The Button" />);
+```
+
+Heuristics:
+
+- The storiesOf "kind" name must be Button
+- Button must be imported in the file
+
+### convert-to-module-format
+
+This converts all of your "old-style" `storiesOf` stories into component module format, which uses standard ES6 modules.
+
+```sh
+./node_modules/.bin/jscodeshift -t ./node_modules/@storybook/codemod/dist/transforms/convert-to-module-format.js . --ignore-pattern "node_modules|dist"
+```
+
+For example:
+
+```js
+storiesOf('Button', module)
+  .add('story', () => <Button label="Story 1" />)
+  .add('second story', () => <Button label="Story 2" onClick={action('click')} />)
+  .add('complex story', () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+    </div>
+  ));
+```
+
+Becomes:
+
+```js
+export default {
+  title: 'Button',
+};
+
+export const story = () => <Button label="Story 1" />;
+
+export const story2 = () => <Button label="Story 2" onClick={action('click')} />;
+story2.title = 'second story';
+
+export const story3 = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+story3.title = 'complex story';
+```
+
+Heuristics:
+
+- If a file has any default export, it will be skipped
+- If a file has multiple `storiesOf` declarations, it will convert each one seperately. This generates invalid ES6, but you can edit the file by hand to split it into multiple files (or whatever is appropriate).
diff --git a/lib/codemod/package.json b/lib/codemod/package.json
index a7adaa35a17..55f66c50467 100644
--- a/lib/codemod/package.json
+++ b/lib/codemod/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/codemod",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "A collection of codemod scripts written with JSCodeshift",
   "keywords": [
     "storybook"
@@ -23,6 +23,8 @@
   "dependencies": {
     "core-js": "^3.0.1",
     "jscodeshift": "^0.6.3",
+    "lodash": "^4.17.11",
+    "prettier": "^1.16.4",
     "regenerator-runtime": "^0.12.1"
   },
   "publishConfig": {
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
new file mode 100644
index 00000000000..8ec32d74ebe
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.input.js
@@ -0,0 +1,44 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module)
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module)
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
new file mode 100644
index 00000000000..c196d5e03a1
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/add-component-parameters/add-component-parameters.output.js
@@ -0,0 +1,64 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('basic', () => <Button label="The Button" />);
+
+storiesOf('Button').addParameters({
+  component: Button
+}).add('no module', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('with story parameters', () => <Button label="The Button" />, {
+  header: false,
+  inline: true,
+});
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ foo: 1 })
+  .add('with kind parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+})
+  .addParameters({ component: Button })
+  .add('with existing component parameters', () => <Button label="The Button" />);
+
+storiesOf('Button', module).addParameters({
+  component: Button
+}).add('complex story', () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+));
+
+storiesOf('Root|Some/Button', module).addParameters({
+  component: Button
+}).add('with path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+}).add('with dot-path', () => <Button label="The Button" />);
+
+storiesOf('Some.Button', module).addParameters({
+  component: Button
+})
+  .addDecorator(withKnobs)
+  .add('with decorator', () => <Button label="The Button" />);
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('action', module).addParameters({
+  component: action
+}).add('non-default component export', () => <action />);
+
+// This shouldn't get modified since the story name doesn't match
+storiesOf('something', module).add('non-matching story', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js
new file mode 100644
index 00000000000..962bbf6d8d5
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.input.js
@@ -0,0 +1,16 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf, configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+storiesOf('Button', module)
+  .add('story1', () => <Button label="Story 1" />)
+  .add('second story', () => <Button label="Story 2" onClick={action('click')} />)
+  .add('complex story', () => (
+    <div>
+      <Button label="The Button" onClick={action('onClick')} />
+      <br />
+    </div>
+  ));
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
new file mode 100644
index 00000000000..169a5b3ebc9
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/basic.output.js
@@ -0,0 +1,28 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'Button',
+};
+
+export const story1 = () => <Button label="Story 1" />;
+export const secondStory = () => <Button label="Story 2" onClick={action('click')} />;
+
+secondStory.story = {
+  name: 'second story',
+};
+
+export const complexStory = () => (
+  <div>
+    <Button label="The Button" onClick={action('onClick')} />
+    <br />
+  </div>
+);
+
+complexStory.story = {
+  name: 'complex story',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js
new file mode 100644
index 00000000000..900c47c9c05
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.input.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// This isn't a valid story, but it tests the `import { comp } from ...` case
+storiesOf('Some.Button', module)
+  .addDecorator(withKnobs)
+  .addDecorator(storyFn => <div className="foo">{storyFn}</div>)
+  .add('with decorator', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
new file mode 100644
index 00000000000..26ab8c2c07e
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/decorators.output.js
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Some.Button',
+  decorators: [withKnobs, storyFn => <div className="foo">{storyFn}</div>],
+};
+
+export const withDecorator = () => <Button label="The Button" />;
+
+withDecorator.story = {
+  name: 'with decorator',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js
new file mode 100644
index 00000000000..d242ed9a688
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.input.js
@@ -0,0 +1,7 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module).add('default', () => <Button label="Story 1" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js
new file mode 100644
index 00000000000..c75670b2030
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/default.output.js
@@ -0,0 +1,13 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const defaultStory = () => <Button label="Story 1" />;
+
+defaultStory.story = {
+  name: 'default',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js
new file mode 100644
index 00000000000..5cc7ce8ab84
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.input.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => <Button />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js
new file mode 100644
index 00000000000..5cc7ce8ab84
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/module.output.js
@@ -0,0 +1,12 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+import { storiesOf } from '@storybook/react';
+
+export default {
+  title: 'foo',
+};
+
+const bar = 1;
+
+storiesOf('foo', module).add('bar', () => <Button />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js
new file mode 100644
index 00000000000..59a06b7cd16
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.input.js
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+// If we have multiple storiesOf calls, export multiple defaults. It's not valid
+// JS but will still save the user time in converting.
+
+storiesOf('Button1', module)
+  .add('story1', () => <Button label="Button1.1" />)
+  .add('story2', () => <Button label="Button1.2" />);
+
+storiesOf('Button2', module)
+  .add('story1', () => <Button label="Button2.1" />)
+  .add('story2', () => <Button label="Button2.2" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
new file mode 100644
index 00000000000..ff1fefb3d2b
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/multi.output.js
@@ -0,0 +1,17 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button1',
+};
+
+export const story1 = () => <Button label="Button1.1" />;
+export const story2 = () => <Button label="Button1.2" />;
+
+export default {
+  title: 'Button2',
+};
+
+export const story1 = () => <Button label="Button2.1" />;
+export const story2 = () => <Button label="Button2.2" />;
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
new file mode 100644
index 00000000000..07499987fc6
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.input.js
@@ -0,0 +1,10 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .addParameters({ component: Button, foo: 1 })
+  .addParameters({ bar: 2 })
+  .add('with kind parameters', () => <Button label="The Button" />);
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
new file mode 100644
index 00000000000..021adda2932
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/parameters.output.js
@@ -0,0 +1,19 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+
+  parameters: {
+    component: Button,
+    foo: 1,
+    bar: 2,
+  },
+};
+
+export const withKindParameters = () => <Button label="The Button" />;
+
+withKindParameters.story = {
+  name: 'with kind parameters',
+};
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js
new file mode 100644
index 00000000000..75db6673cc1
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.input.js
@@ -0,0 +1,14 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .add('with story parameters', () => <Button label="The Button" />, {
+    header: false,
+    inline: true,
+  })
+  .add('foo', () => <Button label="Foo" />, {
+    bar: 1,
+  });
diff --git a/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
new file mode 100644
index 00000000000..6d0b9a5afe4
--- /dev/null
+++ b/lib/codemod/src/transforms/__testfixtures__/convert-to-module-format/story-parameters.output.js
@@ -0,0 +1,26 @@
+/* eslint-disable */
+import React from 'react';
+import Button from './Button';
+
+export default {
+  title: 'Button',
+};
+
+export const withStoryParameters = () => <Button label="The Button" />;
+
+withStoryParameters.story = {
+  name: 'with story parameters',
+
+  parameters: {
+    header: false,
+    inline: true,
+  },
+};
+
+export const foo = () => <Button label="Foo" />;
+
+foo.story = {
+  parameters: {
+    bar: 1,
+  },
+};
diff --git a/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
new file mode 100644
index 00000000000..6ceb0962162
--- /dev/null
+++ b/lib/codemod/src/transforms/__tests__/add-component-parameters.test.js
@@ -0,0 +1,8 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+defineTest(
+  __dirname,
+  'add-component-parameters',
+  null,
+  'add-component-parameters/add-component-parameters'
+);
diff --git a/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
new file mode 100644
index 00000000000..774a46824fe
--- /dev/null
+++ b/lib/codemod/src/transforms/__tests__/convert-to-module-format.test.js
@@ -0,0 +1,15 @@
+import { defineTest } from 'jscodeshift/dist/testUtils';
+
+const testNames = [
+  'basic',
+  'decorators',
+  'parameters',
+  'story-parameters',
+  'module',
+  'multi',
+  'default',
+];
+
+testNames.forEach(testName => {
+  defineTest(__dirname, `convert-to-module-format`, null, `convert-to-module-format/${testName}`);
+});
diff --git a/lib/codemod/src/transforms/add-component-parameters.js b/lib/codemod/src/transforms/add-component-parameters.js
new file mode 100644
index 00000000000..6a26c7794fc
--- /dev/null
+++ b/lib/codemod/src/transforms/add-component-parameters.js
@@ -0,0 +1,62 @@
+/**
+ * Adds a `component` parameter for each storiesOf(...) call.
+ *
+ * For example:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ *
+ * Becomes:
+ *
+ * input { Button } from './Button';
+ * storiesOf('Button', module)
+ *   .addParameters({ component: Button })
+ *   .add('story', () => <Button label="The Button" />);
+ *
+ * Heuristics:
+ * - The storiesOf "kind" name must be Button
+ * - Button must be imported in the file
+ */
+export default function transformer(file, api) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  //  Create a dictionary whose keys are all the named imports in the file.
+  //  For instance:
+  //
+  //  import foo from 'foo';
+  //  import { bar, baz } from 'zoo';
+  //
+  //  => { foo: true, bar: true, baz: true }
+  const importMap = {};
+  root.find(j.ImportDeclaration).forEach(imp =>
+    imp.node.specifiers.forEach(spec => {
+      importMap[spec.local.name] = true;
+    })
+  );
+
+  function getLeafName(string) {
+    const parts = string.split(/\/|\.|\|/);
+    return parts[parts.length - 1];
+  }
+
+  function addComponentParameter(call) {
+    const { node } = call;
+    const leafName = getLeafName(node.arguments[0].value);
+    return j.callExpression(j.memberExpression(node, j.identifier('addParameters')), [
+      j.objectExpression([j.property('init', j.identifier('component'), j.identifier(leafName))]),
+    ]);
+  }
+
+  const storiesOfCalls = root
+    .find(j.CallExpression)
+    .filter(call => call.node.callee.name === 'storiesOf')
+    .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+    .filter(call => {
+      const leafName = getLeafName(call.node.arguments[0].value);
+      return importMap[leafName];
+    })
+    .replaceWith(addComponentParameter);
+
+  return root.toSource();
+}
diff --git a/lib/codemod/src/transforms/convert-to-module-format.js b/lib/codemod/src/transforms/convert-to-module-format.js
new file mode 100644
index 00000000000..7ba932f7127
--- /dev/null
+++ b/lib/codemod/src/transforms/convert-to-module-format.js
@@ -0,0 +1,206 @@
+import prettier from 'prettier';
+import camelCase from 'lodash/camelCase';
+
+/**
+ * Convert a legacy story file to module format
+ *
+ * For example:
+ *
+ * ```
+ * input { Button } from './Button';
+ * storiesOf('Button', module).add('story', () => <Button label="The Button" />);
+ * ```
+ *
+ * Becomes:
+ *
+ * ```
+ * input { Button } from './Button';
+ * export default {
+ *   title: 'Button'
+ * }
+ * export const story = () => <Button label="The Button" />;
+ *
+ * NOTES: only support chained storiesOf() calls
+ */
+export default function transformer(file, api, options) {
+  const j = api.jscodeshift;
+  const root = j(file.source);
+
+  function convertToModuleExports(path) {
+    const base = j(path);
+
+    const statements = [];
+    const extraExports = [];
+
+    // .addDecorator
+    const decorators = [];
+    base
+      .find(j.CallExpression)
+      .filter(
+        call => call.node.callee.property && call.node.callee.property.name === 'addDecorator'
+      )
+      .forEach(add => {
+        const decorator = add.node.arguments[0];
+        decorators.push(decorator);
+      });
+    if (decorators.length > 0) {
+      decorators.reverse();
+      extraExports.push(
+        j.property('init', j.identifier('decorators'), j.arrayExpression(decorators))
+      );
+    }
+
+    // .addParameters
+    const parameters = [];
+    base
+      .find(j.CallExpression)
+      .filter(
+        call => call.node.callee.property && call.node.callee.property.name === 'addParameters'
+      )
+      .forEach(add => {
+        // jscodeshift gives us the find results in reverse, but these args come in
+        // order, so we double reverse here. ugh.
+        const params = [...add.node.arguments[0].properties];
+        params.reverse();
+        params.forEach(prop => parameters.push(prop));
+      });
+    if (parameters.length > 0) {
+      parameters.reverse();
+      extraExports.push(
+        j.property('init', j.identifier('parameters'), j.objectExpression(parameters))
+      );
+    }
+
+    // storiesOf(...)
+    base
+      .find(j.CallExpression)
+      .filter(call => call.node.callee.name === 'storiesOf')
+      .filter(call => call.node.arguments.length > 0 && call.node.arguments[0].type === 'Literal')
+      .forEach(storiesOf => {
+        const title = storiesOf.node.arguments[0].value;
+        statements.push(
+          j.exportDefaultDeclaration(
+            j.objectExpression([
+              j.property('init', j.identifier('title'), j.literal(title)),
+              ...extraExports,
+            ])
+          )
+        );
+      });
+
+    // .add(...)
+    const adds = [];
+    base
+      .find(j.CallExpression)
+      .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
+      .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+      .forEach(add => adds.push(add));
+
+    adds.reverse();
+    adds.push(path);
+
+    adds.forEach(add => {
+      let key = add.node.arguments[0].value;
+      let name = null;
+      if (/\s/.exec(key)) {
+        name = key;
+        key = camelCase(key);
+      } else if (key === 'default') {
+        name = key;
+        key = 'defaultStory';
+      }
+      const val = add.node.arguments[1];
+      statements.push(
+        j.exportDeclaration(
+          false,
+          j.variableDeclaration('const', [j.variableDeclarator(j.identifier(key), val)])
+        )
+      );
+
+      const storyAnnotations = [];
+
+      if (name) {
+        storyAnnotations.push(j.property('init', j.identifier('name'), j.literal(name)));
+      }
+
+      if (add.node.arguments.length > 2) {
+        const storyParams = add.node.arguments[2];
+        storyAnnotations.push(j.property('init', j.identifier('parameters'), storyParams));
+      }
+
+      if (storyAnnotations.length > 0) {
+        statements.push(
+          j.assignmentStatement(
+            '=',
+            j.memberExpression(j.identifier(key), j.identifier('story')),
+            j.objectExpression(storyAnnotations)
+          )
+        );
+      }
+    });
+
+    statements.reverse();
+    statements.forEach(s => path.parent.insertAfter(s));
+    base.remove();
+  }
+
+  // Save the original storiesOf
+  const initialStoriesOf = root
+    .find(j.CallExpression)
+    .filter(call => call.node.callee.name === 'storiesOf');
+
+  const defaultExports = root.find(j.ExportDefaultDeclaration);
+  // If there's already a default export
+  if (defaultExports.size() > 0) {
+    if (initialStoriesOf.size() > 0) {
+      // eslint-disable-next-line no-console
+      console.log(
+        `Found ${initialStoriesOf.size()} 'storiesOf' calls but existing default export, SKIPPING: '${
+          file.path
+        }'`
+      );
+    }
+    return root.toSource();
+  }
+
+  // each top-level add expression corresponds to the last "add" of the chain.
+  // replace it with the entire export statements
+  root
+    .find(j.CallExpression)
+    .filter(add => add.node.callee.property && add.node.callee.property.name === 'add')
+    .filter(add => add.node.arguments.length >= 2 && add.node.arguments[0].type === 'Literal')
+    .filter(add => add.parentPath.node.type === 'ExpressionStatement')
+    .forEach(convertToModuleExports);
+
+  // remove storiesOf import
+  root
+    .find(j.ImportSpecifier)
+    .filter(
+      spec =>
+        spec.node.imported.name === 'storiesOf' &&
+        spec.parent.node.source.value.startsWith('@storybook/')
+    )
+    .forEach(spec => {
+      const toRemove = spec.parent.node.specifiers.length > 1 ? spec : spec.parent;
+      j(toRemove).remove();
+    });
+
+  const source = root.toSource({ trailingComma: true, quote: 'single', tabWidth: 2 });
+  if (initialStoriesOf.size() > 1) {
+    // eslint-disable-next-line no-console
+    console.log(
+      `Found ${initialStoriesOf.size()} 'storiesOf' calls, PLEASE FIX BY HAND: '${file.path}'`
+    );
+    return source;
+  }
+
+  return prettier.format(source, {
+    parser: options.parser || 'babel',
+    // FIXME: storybook defaults
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  });
+}
diff --git a/lib/components/package.json b/lib/components/package.json
index 850c8da3118..2bc0979018f 100644
--- a/lib/components/package.json
+++ b/lib/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -21,8 +21,8 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "core-js": "^3.0.1",
     "global": "^4.3.2",
     "markdown-to-jsx": "^6.9.1",
diff --git a/lib/components/src/blocks/BlockBackgroundStyles.tsx b/lib/components/src/blocks/BlockBackgroundStyles.tsx
new file mode 100644
index 00000000000..a037b5df830
--- /dev/null
+++ b/lib/components/src/blocks/BlockBackgroundStyles.tsx
@@ -0,0 +1,9 @@
+import { Theme } from '@storybook/theming';
+
+export const getBlockBackgroundStyle: (theme: Theme) => object = (theme: Theme) => ({
+  borderRadius: theme.appBorderRadius,
+  background: theme.background.content,
+  boxShadow:
+    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+  border: `1px solid ${theme.appBorderColor}`,
+});
diff --git a/lib/components/src/blocks/ColorPalette.stories.tsx b/lib/components/src/blocks/ColorPalette.stories.tsx
new file mode 100644
index 00000000000..158708b10a9
--- /dev/null
+++ b/lib/components/src/blocks/ColorPalette.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { ColorItem, ColorPalette } from './ColorPalette';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+  title: 'Docs|ColorPalette',
+  Component: ColorPalette,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const defaultStyle = () => (
+  <ColorPalette>
+    <ColorItem
+      title="theme.color.greyscale"
+      subtitle="Some of the greys"
+      colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
+    />
+    <ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
+    <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
+    <ColorItem
+      title="theme.color.positive"
+      subtitle="Green"
+      colors={[
+        'rgba(102,191,60,1)',
+        'rgba(102,191,60,.8)',
+        'rgba(102,191,60,.6)',
+        'rgba(102,191,60,.3)',
+      ]}
+    />
+  </ColorPalette>
+);
diff --git a/lib/components/src/blocks/ColorPalette.tsx b/lib/components/src/blocks/ColorPalette.tsx
new file mode 100644
index 00000000000..28372213a00
--- /dev/null
+++ b/lib/components/src/blocks/ColorPalette.tsx
@@ -0,0 +1,164 @@
+import React, { Fragment } from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const ItemTitle = styled.div(({ theme }) => ({
+  fontWeight: theme.typography.weight.bold,
+}));
+
+const ItemSubtitle = styled.div(({ theme }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.2, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+}));
+
+const ItemDescription = styled.div({
+  flex: '0 0 30%',
+  lineHeight: '20px',
+  marginTop: 5,
+});
+
+const SwatchLabel = styled.div(({ theme }) => ({
+  flex: 1,
+  textAlign: 'center',
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: theme.typography.size.s1,
+  lineHeight: 1,
+  overflow: 'hidden',
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+
+  '> div': {
+    display: 'inline-block',
+    overflow: 'hidden',
+    maxWidth: '100%',
+  },
+}));
+
+const SwatchLabels = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+const Swatch = styled.div({
+  flex: 1,
+});
+
+const SwatchColors = styled.div(({ theme }) => ({
+  ...getBlockBackgroundStyle(theme),
+  display: 'flex',
+  flexDirection: 'row',
+  height: 50,
+  marginBottom: 5,
+  overflow: 'hidden',
+}));
+
+const SwatchSpecimen = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 1,
+  position: 'relative',
+  marginBottom: 30,
+});
+
+const Swatches = styled.div({
+  flex: 1,
+  display: 'flex',
+  flexDirection: 'row',
+});
+
+const Item = styled.div({
+  display: 'flex',
+  alignItems: 'flex-start',
+});
+
+const ListName = styled.div({
+  flex: '0 0 30%',
+});
+
+const ListSwatches = styled.div({
+  flex: 1,
+});
+
+const ListHeading = styled.div(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  paddingBottom: 20,
+  fontWeight: theme.typography.weight.bold,
+
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+}));
+
+const List = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+interface ColorProps {
+  title: string;
+  subtitle: string;
+  colors: string[];
+}
+
+/**
+ * A single color row your styleguide showing title, subtitle and one or more colors, used
+ * as a child of `ColorPalette`.
+ */
+export const ColorItem: React.FunctionComponent<ColorProps> = ({ title, subtitle, colors }) => {
+  return (
+    <Item>
+      <ItemDescription>
+        <ItemTitle>{title}</ItemTitle>
+        <ItemSubtitle>{subtitle}</ItemSubtitle>
+      </ItemDescription>
+
+      <Swatches>
+        <SwatchSpecimen>
+          <SwatchColors>
+            {colors.map(color => (
+              <Swatch
+                key={color}
+                title={color}
+                style={{
+                  backgroundColor: color,
+                }}
+              />
+            ))}
+          </SwatchColors>
+          <SwatchLabels>
+            {colors.map(color => (
+              <SwatchLabel key={color} title={color}>
+                <div>{color}</div>
+              </SwatchLabel>
+            ))}
+          </SwatchLabels>
+        </SwatchSpecimen>
+      </Swatches>
+    </Item>
+  );
+};
+
+/**
+ * Styleguide documentation for colors, including names, captions, and color swatches,
+ * all specified as `ColorItem` children of this wrapper component.
+ */
+export const ColorPalette: React.FunctionComponent = ({ children, ...props }) => {
+  return (
+    <List {...props}>
+      <ListHeading>
+        <ListName>Name</ListName>
+        <ListSwatches>Swatches</ListSwatches>
+      </ListHeading>
+      {children}
+    </List>
+  );
+};
diff --git a/lib/components/src/blocks/Description.stories.tsx b/lib/components/src/blocks/Description.stories.tsx
new file mode 100644
index 00000000000..c239c16c138
--- /dev/null
+++ b/lib/components/src/blocks/Description.stories.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { Description } from './Description';
+
+import { DocsPageWrapper } from './DocsPage';
+import markdownCaption from './DocsPageExampleCaption.md';
+
+export default {
+  title: 'Docs|Description',
+  Component: Description,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+const textCaption = `That was Wintermute, manipulating the lock the way it had manipulated the drone micro and the amplified breathing of the room where Case waited. The semiotics of the bright void beyond the chain link. The tug Marcus Garvey, a steel drum nine meters long and two in diameter, creaked and shuddered as Maelcum punched for a California gambling cartel, then as a paid killer in the dark, curled in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. Still it was a handgun and nine rounds of ammunition, and as he made his way down Shiga from the missionaries, the train reached Case’s station. Now this quiet courtyard, Sunday afternoon, this girl with a random collection of European furniture, as though Deane had once intended to use the place as his home. Case felt the edge of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses. They were dropping, losing altitude in a canyon of rainbow foliage, a lurid communal mural that completely covered the hull of the console in faded pinks and yellows.`;
+
+export const text = () => <Description markdown={textCaption} />;
+
+export const markdown = () => <Description markdown={markdownCaption} />;
diff --git a/lib/components/src/blocks/Description.tsx b/lib/components/src/blocks/Description.tsx
new file mode 100644
index 00000000000..bfc51d88eaf
--- /dev/null
+++ b/lib/components/src/blocks/Description.tsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import Markdown from 'markdown-to-jsx';
+
+export interface DescriptionProps {
+  markdown: string;
+}
+
+/**
+ * A markdown description for a component, typically used to show the
+ * components docgen docs.
+ */
+export const Description: React.FunctionComponent<DescriptionProps> = ({ markdown }) => (
+  <Markdown options={{ forceBlock: true }}>{markdown}</Markdown>
+);
diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx
new file mode 100644
index 00000000000..cee5abd6e7f
--- /dev/null
+++ b/lib/components/src/blocks/DocsPage.stories.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { DocsPage, DocsWrapper, DocsContent } from './DocsPage';
+import * as storyStories from './Story.stories';
+import * as previewStories from './Preview.stories';
+import * as propsTableStories from './PropsTable/PropsTable.stories';
+import * as sourceStories from './Source.stories';
+import * as descriptionStories from './Description.stories';
+
+export default {
+  title: 'Docs|DocsPage',
+  Component: DocsPage,
+  decorators: [
+    storyFn => (
+      <DocsWrapper>
+        <DocsContent>{storyFn()}</DocsContent>
+      </DocsWrapper>
+    ),
+  ],
+};
+
+export const empty = () => (
+  <DocsPage title={null}>
+    {storyStories.error()}
+    {propsTableStories.error()}
+    {sourceStories.sourceUnavailable()}
+  </DocsPage>
+);
+
+export const noText = () => (
+  <DocsPage title="no text">
+    {previewStories.single()}
+    {propsTableStories.normal()}
+    {sourceStories.jsx()}
+  </DocsPage>
+);
+noText.story = { name: 'no text' };
+
+export const text = () => (
+  <DocsPage title="Sensorium">
+    {descriptionStories.text()}
+    {previewStories.single()}
+    {propsTableStories.normal()}
+    {sourceStories.jsx()}
+  </DocsPage>
+);
+
+export const withSubtitle = () => (
+  <DocsPage
+    title="SimStim"
+    subtitle="A digital representation of the thoughts and feelings of another person."
+  >
+    {descriptionStories.text()}
+    {previewStories.single()}
+    {propsTableStories.normal()}
+    {sourceStories.jsx()}
+  </DocsPage>
+);
+withSubtitle.story = { name: 'with subtitle' };
+
+export const markdown = () => (
+  <DocsPage title="markdown">
+    {descriptionStories.markdown()}
+    {previewStories.single()}
+    {propsTableStories.normal()}
+    {sourceStories.jsx()}
+  </DocsPage>
+);
diff --git a/lib/components/src/blocks/DocsPage.tsx b/lib/components/src/blocks/DocsPage.tsx
new file mode 100644
index 00000000000..c455666b9d8
--- /dev/null
+++ b/lib/components/src/blocks/DocsPage.tsx
@@ -0,0 +1,84 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { DocumentFormatting } from '../typography/DocumentFormatting';
+
+const breakpoint = 600;
+const pageMargin = '5.55555';
+
+export interface DocsPageProps {
+  title: string;
+  subtitle?: string;
+}
+
+const Title = styled.h1(({ theme }) => ({
+  // overrides h1 in DocumentFormatting
+  '&&': {
+    fontSize: theme.typography.size.m3,
+    lineHeight: '32px',
+
+    [`@media (min-width: ${breakpoint * 1}px)`]: {
+      fontSize: theme.typography.size.l1,
+      lineHeight: '36px',
+    },
+  },
+}));
+
+const Subtitle = styled.h2(({ theme }) => ({
+  // overrides h2 in DocumentFormatting
+  '&&': {
+    fontWeight: theme.typography.weight.regular,
+    fontSize: theme.typography.size.s3,
+    lineHeight: '20px',
+    borderBottom: 'none',
+    marginBottom: '15px',
+
+    [`@media (min-width: ${breakpoint * 1}px)`]: {
+      fontSize: theme.typography.size.m1,
+      lineHeight: '28px',
+      marginBottom: '25px',
+    },
+  },
+
+  color:
+    theme.base === 'light'
+      ? transparentize(0.25, theme.color.defaultText)
+      : transparentize(0.25, theme.color.defaultText),
+}));
+
+export const DocsContent = styled(DocumentFormatting)({
+  maxWidth: 800,
+  width: '100%',
+});
+
+export const DocsWrapper = styled.div(({ theme }) => ({
+  background: theme.background.content,
+  display: 'flex',
+  justifyContent: 'center',
+  minHeight: '100vh',
+  padding: '4rem 20px',
+
+  [`@media (min-width: ${breakpoint * 1}px)`]: {},
+}));
+
+export const DocsPageWrapper: React.FunctionComponent = ({ children }) => (
+  <DocsWrapper>
+    <DocsContent>{children}</DocsContent>
+  </DocsWrapper>
+);
+
+/**
+ * An out-of-the box documentation page for components that shows the
+ * title & subtitle and a collection of blocks including `Description`,
+ * and `Preview`s for each of the component's stories.
+ */
+const DocsPage: React.FunctionComponent<DocsPageProps> = ({ title, subtitle, children }) => (
+  <>
+    {title && <Title>{title}</Title>}
+    {subtitle && <Subtitle>{subtitle}</Subtitle>}
+    {children}
+  </>
+);
+
+export { DocsPage };
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.md b/lib/components/src/blocks/DocsPageExampleCaption.md
new file mode 100644
index 00000000000..3542ca2cd8d
--- /dev/null
+++ b/lib/components/src/blocks/DocsPageExampleCaption.md
@@ -0,0 +1,93 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://placehold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+   2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+  - This is getting
+  - Very ...
+    - Very ...
+    - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+Let's throw in a crazy table, because why not?
+
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
+| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => <button />;
+```
diff --git a/lib/components/src/blocks/DocsPageExampleCaption.mdx b/lib/components/src/blocks/DocsPageExampleCaption.mdx
new file mode 100644
index 00000000000..3542ca2cd8d
--- /dev/null
+++ b/lib/components/src/blocks/DocsPageExampleCaption.mdx
@@ -0,0 +1,93 @@
+# My Example Markdown
+
+The group looked like tall, exotic grazing animals, swaying gracefully and unconsciously with the movement of the train, their high heels like polished hooves against the gray metal of the Flatline as a construct, a hardwired ROM cassette replicating a dead man’s skills, obsessions, kneejerk responses.
+
+![An image](http://placehold.it/350x150)
+
+He stared at the clinic, Molly took him to the Tank War, mouth touched with hot gold as a gliding cursor struck sparks from the wall of a skyscraper canyon. Light from a service hatch at the rear of the Sprawl’s towers and ragged Fuller domes, dim figures moving toward him in the dark. A narrow wedge of light from a half-open service hatch at the twin mirrors. Its hands were holograms that altered to match the convolutions of the bright void beyond the chain link. Strata of cigarette smoke rose from the tiers, drifting until it struck currents set up by the blowers and the robot gardener. Still it was a steady pulse of pain midway down his spine. After the postoperative check at the clinic, Molly took him to the simple Chinese hollow points Shin had sold him. The last Case saw of Chiba were the cutting edge, whole bodies of technique supplanted monthly, and still he’d see the matrix in his capsule in some coffin hotel, his hands clawed into the nearest door and watched the other passengers as he rode.
+
+## Typography
+
+# H1
+
+## H2
+
+### H3
+
+#### H4
+
+##### H5
+
+###### H6
+
+Emphasis, aka italics, with _asterisks_ or _underscores_.
+
+Strong emphasis, aka bold, with **asterisks** or **underscores**.
+
+Combined emphasis with **asterisks and _underscores_**.
+
+Strikethrough uses two tildes. ~~Scratch this.~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+
+## Block quote
+
+How about a block quote to spice things up?
+
+> In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals am gesamten Eigenkapital. Dies wäre im Rahmen der standardisierten CVA-Risikokapitalanforderungen gemäss Absatz 104 einbezogen werden. Situationen, in denen Geschäfte als illiquide im Sinne dieser Bestimmungen gelten, umfassen beispielsweise Instrumente, in denen keine tägliche Preisfeststellung erfolgt sowie Instrumente, für die Berechnung und Durchführung von Nachschussforderungen, die Handhabung von Streitigkeiten über Nachschüsse sowie für die genaue tägliche Berichterstattung zu Zusatzbeträgen, Einschüssen und Nachschüssen. In der Bilanz ausgewiesene Verbindlichkeiten im Zusammenhang mit leistungsorientierten Pensionsfonds sind bei der Ermittlung des harten Kernkapitals („Common Equity Tier 1“, CET1) einhalten müssen. Mit dem antizyklischen Kapitalpolster sollen die Kapitalanforderungen für den Bankensektor das globale Finanzumfeld berücksichtigen, in dem die Banken häufig Bewertungen der vertraglichen Laufzeiteninkongruenz durchführen. Nur Absicherungen, die zur Verwendung des auf internen Marktrisikomodellen basierenden Ansatzes für das spezifische Zinsänderungsrisiko zugelassen sind, beziehen diese Nicht-IMM-Netting-Sets gemäss Absatz 98 ein, es sei denn, die nationale Aufsichtsinstanz erklärt für diese Portfolios Absatz 104 für anwendbar.
+
+## Lists
+
+Mixed list:
+
+1. First ordered list item
+2. Another item
+   - Unordered sub-list.
+3. Actual numbers don't matter, just that it's a number
+   1. Ordered sub-list
+   2. Yo ho ho
+4. And another item.
+
+Bullet list:
+
+- Whatever
+  - This is getting
+  - Very ...
+    - Very ...
+    - Tedious!
+- It's getting late, nothing to see here
+
+Numbered:
+
+1. You get the idea
+2. You still get the idea
+3. You really get the idea
+4. I'm done
+
+## Tables
+
+A basic table:
+
+| Tables        |      Are      |   Cool |
+| ------------- | :-----------: | -----: |
+| col 3 is      | right-aligned | \$1600 |
+| col 2 is      |   centered    |   \$12 |
+| zebra stripes |   are neat    |    \$1 |
+
+Let's throw in a crazy table, because why not?
+
+|                                   | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Polymer](app/polymer) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) |
+| --------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: |
+| [a11y](addons/a11y)               |         +          |                                  |       +        |           +            |           +            |           +            |        +         |         +          |                      |                  |         +          |          +           |
+| [actions](addons/actions)         |         +          |                +                 |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [backgrounds](addons/backgrounds) |         +          |                \*                |       +        |           +            |           +            |           +            |        +         |         +          |          +           |        +         |         +          |          +           |
+| [centered](addons/centered)       |         +          |                                  |       +        |           +            |                        |           +            |        +         |                    |          +           |                  |         +          |          +           |
+| [contexts](addons/contexts)       |         +          |                                  |       +        |                        |                        |                        |                  |                    |                      |                  |                    |          +           |
+
+## Code
+
+Sometimes you might want to manually include some \`code\` examples? Let's do it.
+
+```js
+const Button = () => <button />;
+```
diff --git a/lib/components/src/blocks/EmptyBlock.stories.tsx b/lib/components/src/blocks/EmptyBlock.stories.tsx
new file mode 100644
index 00000000000..f97fdb7a30e
--- /dev/null
+++ b/lib/components/src/blocks/EmptyBlock.stories.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { EmptyBlock } from './EmptyBlock';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+  title: 'Docs|EmptyBlock',
+  Component: EmptyBlock,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const error = () => <EmptyBlock>Generic error message</EmptyBlock>;
diff --git a/lib/components/src/blocks/EmptyBlock.tsx b/lib/components/src/blocks/EmptyBlock.tsx
new file mode 100644
index 00000000000..155a51f46ed
--- /dev/null
+++ b/lib/components/src/blocks/EmptyBlock.tsx
@@ -0,0 +1,21 @@
+import React, { FunctionComponent } from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+const Wrapper = styled.div(({ theme }) => ({
+  backgroundColor: theme.base === 'light' ? 'rgba(0,0,0,.01)' : 'rgba(255,255,255,.01)',
+  borderRadius: theme.appBorderRadius,
+  border: `1px dashed ${theme.appBorderColor}`,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '20px',
+  margin: '25px 0 40px',
+
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+}));
+
+export const EmptyBlock = (props: any) => <Wrapper {...props} />;
diff --git a/lib/components/src/blocks/IFrame.tsx b/lib/components/src/blocks/IFrame.tsx
new file mode 100644
index 00000000000..be8e0dc60ba
--- /dev/null
+++ b/lib/components/src/blocks/IFrame.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import window from 'global';
+
+interface IFrameProps {
+  id: string;
+  key?: string;
+  title: string;
+  src: string;
+  allowFullScreen: boolean;
+  scale: number;
+  style?: any;
+}
+
+interface BodyStyle {
+  width: string;
+  height: string;
+  transform: string;
+  transformOrigin: string;
+}
+
+export class IFrame extends React.Component<IFrameProps> {
+  iframe: any = null;
+
+  componentDidMount() {
+    const { id } = this.props;
+    this.iframe = window.document.getElementById(id);
+  }
+
+  shouldComponentUpdate(nextProps: IFrameProps) {
+    const { scale } = nextProps;
+    // eslint-disable-next-line react/destructuring-assignment
+    if (scale !== this.props.scale) {
+      this.setIframeBodyStyle({
+        width: `${scale * 100}%`,
+        height: `${scale * 100}%`,
+        transform: `scale(${1 / scale})`,
+        transformOrigin: 'top left',
+      });
+    }
+    // if(this.props.src !== src) {
+    //   debugger;
+    // }
+    return false;
+  }
+
+  setIframeBodyStyle(style: BodyStyle) {
+    return Object.assign(this.iframe.contentDocument.body.style, style);
+  }
+
+  render() {
+    const { id, title, src, allowFullScreen, scale, ...rest } = this.props;
+    return (
+      <iframe
+        scrolling="yes"
+        id={id}
+        title={title}
+        src={src}
+        allowFullScreen={allowFullScreen}
+        {...rest}
+      />
+    );
+  }
+}
diff --git a/lib/components/src/blocks/IconGallery.stories.tsx b/lib/components/src/blocks/IconGallery.stories.tsx
new file mode 100644
index 00000000000..3569668dfc3
--- /dev/null
+++ b/lib/components/src/blocks/IconGallery.stories.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { IconItem, IconGallery } from './IconGallery';
+
+import { DocsPageWrapper } from './DocsPage';
+import { Icons as ExampleIcon } from '../icon/icon';
+
+export default {
+  title: 'Docs|IconGallery',
+  Component: IconGallery,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const defaultStyle = () => (
+  <IconGallery>
+    <IconItem name="add">
+      <ExampleIcon icon="add" />
+    </IconItem>
+    <IconItem name="subtract">
+      <ExampleIcon icon="subtract" />
+    </IconItem>
+    <IconItem name="home">
+      <ExampleIcon icon="home" />
+    </IconItem>
+    <IconItem name="facehappy">
+      <ExampleIcon icon="facehappy" />
+    </IconItem>
+    <IconItem name="bar">
+      <img src="https://placehold.it/50x50" alt="example" />
+    </IconItem>
+    <IconItem name="bar">
+      <img src="https://placehold.it/50x50" alt="example" />
+    </IconItem>
+  </IconGallery>
+);
diff --git a/lib/components/src/blocks/IconGallery.tsx b/lib/components/src/blocks/IconGallery.tsx
new file mode 100644
index 00000000000..1bb9cfde6f9
--- /dev/null
+++ b/lib/components/src/blocks/IconGallery.tsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const ItemLabel = styled.div({
+  marginLeft: 10,
+  lineHeight: 1.2,
+});
+
+const ItemSpecimen = styled.div(({ theme }) => ({
+  ...getBlockBackgroundStyle(theme),
+  overflow: 'hidden',
+  height: 40,
+  width: 40,
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  flex: 'none',
+
+  '> img, > svg': {
+    width: 20,
+    height: 20,
+  },
+}));
+
+const Item = styled.div({
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+  flex: '0 1 calc(20% - 10px)',
+  minWidth: 120,
+
+  margin: '0px 10px 30px 0',
+});
+
+const List = styled.div({
+  display: 'flex',
+  flexFlow: 'row wrap',
+});
+
+interface IconItemProps {
+  name: string;
+}
+
+/**
+ * An individual icon with a caption and an example (passed as `children`).
+ */
+export const IconItem: React.FunctionComponent<IconItemProps> = ({ name, children }) => {
+  return (
+    <Item>
+      <ItemSpecimen>{children}</ItemSpecimen>
+      <ItemLabel>{name}</ItemLabel>
+    </Item>
+  );
+};
+
+/**
+ * Show a grid of icons, as specified by `IconItem`.
+ */
+export const IconGallery: React.FunctionComponent = ({ children, ...props }) => {
+  return <List {...props}>{children}</List>;
+};
diff --git a/lib/components/src/blocks/Preview.stories.tsx b/lib/components/src/blocks/Preview.stories.tsx
new file mode 100644
index 00000000000..8056e061fe3
--- /dev/null
+++ b/lib/components/src/blocks/Preview.stories.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import { Preview } from './Preview';
+import { DocsPageWrapper } from './DocsPage';
+import { Button } from '../Button/Button';
+import * as sourceStories from './Source.stories';
+
+export default {
+  title: 'Docs|Preview',
+  Component: Preview,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const codeCollapsed = () => (
+  <Preview isExpanded={false} withSource={sourceStories.jsx().props}>
+    <Button secondary>Button 1</Button>
+  </Preview>
+);
+
+export const codeExpanded = () => (
+  <Preview isExpanded withSource={sourceStories.jsx().props}>
+    <Button secondary>Button 1</Button>
+  </Preview>
+);
+
+export const codeError = () => (
+  <Preview isExpanded withSource={sourceStories.sourceUnavailable().props}>
+    <Button secondary>Button 1</Button>
+  </Preview>
+);
+
+export const single = () => (
+  <Preview>
+    <Button secondary>Button 1</Button>
+  </Preview>
+);
+
+export const row = () => (
+  <Preview>
+    <Button secondary>Button 1</Button>
+    <Button secondary>Button 2</Button>
+    <Button secondary>Button 3</Button>
+    <Button secondary>Button 4</Button>
+    <Button secondary>Button 5</Button>
+    <Button secondary>Button 6</Button>
+    <Button secondary>Button 7</Button>
+  </Preview>
+);
+
+export const column = () => (
+  <Preview isColumn>
+    <Button secondary>Button 1</Button>
+    <Button secondary>Button 2</Button>
+    <Button secondary>Button 3</Button>
+  </Preview>
+);
+
+export const gridWith3Columns = () => (
+  <Preview columns={3}>
+    <Button secondary>Button 1</Button>
+    <Button secondary>Button 2</Button>
+    <Button secondary>Button 3</Button>
+    <Button secondary>Button 4</Button>
+    <Button secondary>Button 5</Button>
+    <Button secondary>Button 6</Button>
+    <Button secondary>Button 7 long long long long long title</Button>
+    <Button secondary>Button 8</Button>
+    <Button secondary>Button 9</Button>
+    <Button secondary>Button 10</Button>
+    <Button secondary>Button 11</Button>
+    <Button secondary>Button 12</Button>
+    <Button secondary>Button 13</Button>
+    <Button secondary>Button 14</Button>
+    <Button secondary>Button 15</Button>
+    <Button secondary>Button 16</Button>
+    <Button secondary>Button 17</Button>
+    <Button secondary>Button 18</Button>
+    <Button secondary>Button 19</Button>
+    <Button secondary>Button 20</Button>
+  </Preview>
+);
diff --git a/lib/components/src/blocks/Preview.tsx b/lib/components/src/blocks/Preview.tsx
new file mode 100644
index 00000000000..713550bf95d
--- /dev/null
+++ b/lib/components/src/blocks/Preview.tsx
@@ -0,0 +1,96 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { darken } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+import { Source, SourceProps } from './Source';
+import { ActionBar } from '../ActionBar/ActionBar';
+
+export interface PreviewProps {
+  isColumn?: boolean;
+  columns?: number;
+  withSource?: SourceProps;
+  isExpanded?: boolean;
+}
+
+const ChildrenContainer = styled.div<PreviewProps>(({ isColumn, columns }) => ({
+  display: 'flex',
+  flexWrap: 'wrap',
+  flexDirection: isColumn ? 'column' : 'row',
+  marginTop: -20,
+
+  '> *': {
+    flex: columns ? `1 1 calc(100%/${columns} - 20px)` : `1 1 0%`,
+    marginRight: 20,
+    marginTop: 20,
+  },
+}));
+
+const StyledSource = styled(Source)(({ theme }) => ({
+  margin: 0,
+  borderTopLeftRadius: 0,
+  borderTopRightRadius: 0,
+  border: 'none',
+
+  background:
+    theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
+  color: theme.color.lightest,
+  button: {
+    background:
+      theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
+  },
+}));
+
+const PreviewWrapper = styled.div<PreviewProps>(({ theme, withSource }) => ({
+  ...getBlockBackgroundStyle(theme),
+  padding: '30px 20px',
+  position: 'relative',
+  borderBottomLeftRadius: withSource && 0,
+  borderBottomRightRadius: withSource && 0,
+}));
+
+const PreviewContainer = styled.div({
+  margin: '25px 0 40px',
+});
+
+/**
+ * A preview component for showing one or more component `Story`
+ * items. The preview also shows the source for the componnent
+ * as a drop-down.
+ */
+const Preview: React.FunctionComponent<PreviewProps> = ({
+  isColumn,
+  columns,
+  children,
+  withSource,
+  isExpanded = false,
+  ...props
+}) => {
+  const [expanded, setExpanded] = React.useState(isExpanded);
+  const { source, actionItem } = expanded
+    ? {
+        source: <StyledSource {...withSource} dark />,
+        actionItem: { title: 'Hide code', onClick: () => setExpanded(false) },
+      }
+    : {
+        source: null,
+        actionItem: { title: 'Show code', onClick: () => setExpanded(true) },
+      };
+  return (
+    <PreviewContainer {...props}>
+      <PreviewWrapper withSource={withSource}>
+        <ChildrenContainer isColumn={isColumn} columns={columns}>
+          {Array.isArray(children) ? (
+            children.map((child, i) => <div key={i.toString()}>{child}</div>)
+          ) : (
+            <div>{children}</div>
+          )}
+        </ChildrenContainer>
+        {withSource && <ActionBar actionItems={[actionItem]} />}
+      </PreviewWrapper>
+      {withSource && source}
+    </PreviewContainer>
+  );
+};
+
+export { Preview };
diff --git a/lib/components/src/blocks/PropsTable/PropDef.ts b/lib/components/src/blocks/PropsTable/PropDef.ts
new file mode 100644
index 00000000000..3674e9e64c3
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropDef.ts
@@ -0,0 +1,7 @@
+export interface PropDef {
+  name: string;
+  type: any;
+  required: boolean;
+  description?: string;
+  defaultValue?: any;
+}
diff --git a/lib/components/src/blocks/PropsTable/PropRow.stories.tsx b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
new file mode 100644
index 00000000000..303cdbd9f91
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropRow.stories.tsx
@@ -0,0 +1,114 @@
+import React from 'react';
+import { PropRow } from './PropRow';
+
+import { Table } from './PropsTable';
+import { DocsPageWrapper } from '../DocsPage';
+
+export default {
+  Component: PropRow,
+  title: 'Docs|PropRow',
+  excludeStories: /.*Def$/,
+  decorators: [
+    getStory => (
+      <DocsPageWrapper>
+        <Table>
+          <tbody>{getStory()}</tbody>
+        </Table>
+      </DocsPageWrapper>
+    ),
+  ],
+};
+
+export const stringDef = {
+  name: 'someString',
+  type: { name: 'string' },
+  required: true,
+  description: 'someString description',
+  defaultValue: 'fixme',
+};
+
+export const longNameDef = {
+  ...stringDef,
+  name: 'reallyLongStringThatTakesUpSpace',
+};
+
+export const longDescDef = {
+  ...stringDef,
+  description: 'really long description that takes up a lot of space. sometimes this happens.',
+};
+
+export const numberDef = {
+  name: 'someNumber',
+  type: { name: 'number' },
+  required: false,
+  description: 'someNumber description',
+  defaultValue: 0,
+};
+
+export const objectDef = {
+  name: 'someObject',
+  type: { name: 'objectOf', value: { name: 'number' } },
+  required: false,
+  description: 'A simple `objectOf` propType.',
+  defaultValue: { value: '{ key: 1 }', computed: false },
+};
+
+export const arrayDef = {
+  name: 'someOArray',
+  type: { name: 'arrayOf', value: { name: 'number' } },
+  required: false,
+  description: 'array of a certain type',
+  defaultValue: { value: '[1, 2, 3]', computed: false },
+};
+
+export const complexDef = {
+  name: 'someComplex',
+  type: {
+    name: 'objectOf',
+    value: {
+      name: 'shape',
+      value: {
+        id: {
+          name: 'number',
+          description:
+            "Just an internal propType for a shape.\n It's also required, and as you can see it supports multi-line comments!",
+          required: true,
+        },
+        func: {
+          name: 'func',
+          description: 'A simple non-required function',
+          required: false,
+        },
+        arr: {
+          name: 'arrayOf',
+          value: {
+            name: 'shape',
+            value: {
+              index: {
+                name: 'number',
+                description: '5-level deep propType definition and still works.',
+                required: true,
+              },
+            },
+          },
+          description: 'An `arrayOf` shape',
+          required: false,
+        },
+      },
+    },
+  },
+  required: false,
+  description: 'A very complex `objectOf` propType.',
+  defaultValue: {
+    value: '{\n  thing: {\n    id: 2,\n    func: () => {},\n    arr: [],\n  },\n}',
+    computed: false,
+  },
+};
+
+export const string = () => <PropRow row={stringDef} />;
+export const longName = () => <PropRow row={longNameDef} />;
+export const longDesc = () => <PropRow row={longDescDef} />;
+export const number = () => <PropRow row={numberDef} />;
+export const objectOf = () => <PropRow row={objectDef} />;
+export const arrayOf = () => <PropRow row={arrayDef} />;
+export const complex = () => <PropRow row={complexDef} />;
diff --git a/lib/components/src/blocks/PropsTable/PropRow.tsx b/lib/components/src/blocks/PropsTable/PropRow.tsx
new file mode 100644
index 00000000000..d3000ea4fbb
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropRow.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+import { PropDef } from './PropDef';
+
+enum PropType {
+  SHAPE = 'shape',
+  UNION = 'union',
+  ARRAYOF = 'arrayOf',
+  OBJECTOF = 'objectOf',
+  ENUM = 'enum',
+  INSTANCEOF = 'instanceOf',
+}
+
+interface PrettyPropTypeProps {
+  type: any;
+}
+
+interface PrettyPropValProps {
+  value: any;
+}
+
+interface PropRowProps {
+  row: PropDef;
+  // FIXME: row options
+}
+
+const Name = styled.span({ fontWeight: 'bold' });
+
+const Required = styled.span(({ theme }) => ({
+  color: theme.color.negative,
+  fontFamily: theme.typography.fonts.mono,
+  cursor: 'help',
+}));
+
+const StyledPropDef = styled.div(({ theme }) => ({
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+  fontFamily: theme.typography.fonts.mono,
+  fontSize: `${theme.typography.size.code}%`,
+}));
+
+const prettyPrint = (type: any): string => {
+  if (!type || !type.name) {
+    return '';
+  }
+  let fields = '';
+  switch (type.name) {
+    case PropType.SHAPE:
+      fields = Object.keys(type.value)
+        .map((key: string) => `${key}: ${prettyPrint(type.value[key])}`)
+        .join(', ');
+      return `{ ${fields} }`;
+    case PropType.UNION:
+      return Array.isArray(type.value)
+        ? `Union<${type.value.map(prettyPrint).join(' | ')}>`
+        : JSON.stringify(type.value);
+    case PropType.ARRAYOF:
+      return `[ ${prettyPrint(type.value)} ]`;
+    case PropType.OBJECTOF:
+      return `objectOf(${prettyPrint(type.value)})`;
+    case PropType.ENUM:
+      if (type.computed) {
+        return JSON.stringify(type);
+      }
+      return Array.isArray(type.value)
+        ? type.value.map((v: any) => v && v.value && v.value.toString()).join(' | ')
+        : JSON.stringify(type);
+    case PropType.INSTANCEOF:
+      return `instanceOf(${JSON.stringify(type.value)})`;
+    default:
+      return type.name;
+  }
+};
+
+export const PrettyPropType: React.FunctionComponent<PrettyPropTypeProps> = ({ type }) => (
+  <span>{prettyPrint(type)}</span>
+);
+
+export const PrettyPropVal: React.FunctionComponent<PrettyPropValProps> = ({ value }) => (
+  <span>{JSON.stringify(value)}</span>
+);
+
+export const PropRow: React.FunctionComponent<PropRowProps> = ({
+  row: { name, type, required, description, defaultValue },
+}) => (
+  <tr>
+    <td>
+      <Name>{name}</Name>
+      {required ? <Required title="Required">*</Required> : null}
+    </td>
+    <td>
+      <div>{description}</div>
+      <StyledPropDef>
+        <PrettyPropType type={type} />
+      </StyledPropDef>
+    </td>
+    <td>{defaultValue === undefined ? '-' : <PrettyPropVal value={defaultValue} />}</td>
+  </tr>
+);
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
new file mode 100644
index 00000000000..43fb624daa2
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropsTable.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { PropsTable, PropsTableError } from './PropsTable';
+import { DocsPageWrapper } from '../DocsPage';
+import { stringDef, numberDef } from './PropRow.stories';
+
+export default {
+  Component: PropsTable,
+  title: 'Docs|PropTable',
+  decorators: [storyFn => <DocsPageWrapper>{storyFn()}</DocsPageWrapper>],
+};
+
+export const error = () => <PropsTable error={PropsTableError.NO_COMPONENT} />;
+
+export const empty = () => <PropsTable rows={[]} />;
+
+export const normal = () => <PropsTable rows={[stringDef, numberDef]} />;
diff --git a/lib/components/src/blocks/PropsTable/PropsTable.tsx b/lib/components/src/blocks/PropsTable/PropsTable.tsx
new file mode 100644
index 00000000000..2637144b7aa
--- /dev/null
+++ b/lib/components/src/blocks/PropsTable/PropsTable.tsx
@@ -0,0 +1,166 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { opacify, transparentize } from 'polished';
+import { PropRow } from './PropRow';
+import { PropDef } from './PropDef';
+import { EmptyBlock } from '../EmptyBlock';
+
+export const Table = styled.table(({ theme }) => ({
+  '&&': {
+    // Resets for cascading/system styles
+    borderCollapse: 'collapse',
+    borderSpacing: 0,
+
+    tr: {
+      border: 'none',
+      background: 'none',
+    },
+
+    'td, th': {
+      padding: 0,
+      border: 'none',
+    },
+    // End Resets
+
+    fontSize: theme.typography.size.s2,
+    lineHeight: '20px',
+    textAlign: 'left',
+    width: '100%',
+
+    // Margin collapse
+    marginTop: '25px',
+    marginBottom: '40px',
+
+    'th:first-of-type, td:first-of-type': {
+      paddingLeft: 20,
+    },
+
+    'th:last-of-type, td:last-of-type': {
+      paddingRight: '20px',
+      width: '20%',
+    },
+
+    th: {
+      color:
+        theme.base === 'light'
+          ? transparentize(0.4, theme.color.defaultText)
+          : transparentize(0.6, theme.color.defaultText),
+      paddingTop: 10,
+      paddingBottom: 10,
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+    },
+
+    td: {
+      paddingTop: '16px',
+      paddingBottom: '16px',
+
+      '&:not(:first-of-type)': {
+        paddingLeft: 15,
+        paddingRight: 15,
+      },
+
+      '&:last-of-type': {
+        paddingRight: '20px',
+      },
+    },
+
+    // Table "block" styling
+    // Emphasize tbody's background and set borderRadius
+    // Calling out because styling tables is finicky
+
+    // Makes border alignment consistent w/other DocBlocks
+    marginLeft: 1,
+    marginRight: 1,
+
+    'tr:first-child td:first-child': {
+      borderTopLeftRadius: theme.appBorderRadius,
+    },
+
+    'tr:first-child td:last-child': {
+      borderTopRightRadius: theme.appBorderRadius,
+    },
+    'tr:last-child td:first-child': {
+      borderBottomLeftRadius: theme.appBorderRadius,
+    },
+
+    'tr:last-child td:last-child': {
+      borderBottomRightRadius: theme.appBorderRadius,
+    },
+
+    tbody: {
+      // slightly different than the other DocBlock shadows to account for table styling gymnastics
+      boxShadow:
+        theme.base === 'light'
+          ? `rgba(0, 0, 0, 0.10) 0 1px 3px 1px,
+          ${transparentize(0.035, theme.appBorderColor)} 0 0 0 1px`
+          : `rgba(0, 0, 0, 0.20) 0 2px 5px 1px,
+          ${opacify(0.05, theme.appBorderColor)} 0 0 0 1px`,
+      borderRadius: theme.appBorderRadius,
+
+      tr: {
+        background: 'transparent',
+        '&:not(:first-child)': {
+          borderTop: `1px solid ${theme.appBorderColor}`,
+        },
+      },
+
+      td: {
+        background: theme.background.content,
+      },
+    },
+    // End finicky table styling
+  },
+}));
+
+export enum PropsTableError {
+  NO_COMPONENT = 'No component found',
+  PROPS_UNSUPPORTED = 'Props unsupported. See Props documentation for your framework.',
+}
+
+export interface PropsTableRowsProps {
+  rows: PropDef[];
+}
+
+export interface PropsTableErrorProps {
+  error: PropsTableError;
+}
+
+export type PropsTableProps = PropsTableRowsProps | PropsTableErrorProps;
+
+/**
+ * Display the props for a component as a props table. Each row is a collection of
+ * PropDefs, usually derived from docgen info for the component.
+ */
+const PropsTable: React.FunctionComponent<PropsTableProps> = props => {
+  const { error } = props as PropsTableErrorProps;
+  if (error) {
+    return <EmptyBlock>{error}</EmptyBlock>;
+  }
+
+  const { rows } = props as PropsTableRowsProps;
+  if (rows.length === 0) {
+    return <EmptyBlock>No props found for this component</EmptyBlock>;
+  }
+  return (
+    <Table>
+      <thead>
+        <tr>
+          <th>Name</th>
+          <th>Description</th>
+          <th>Default</th>
+        </tr>
+      </thead>
+      <tbody>
+        {rows.map(row => (
+          <PropRow key={row.name} row={row} />
+        ))}
+      </tbody>
+    </Table>
+  );
+};
+
+export { PropsTable, PropDef };
diff --git a/lib/components/src/blocks/Source.stories.tsx b/lib/components/src/blocks/Source.stories.tsx
new file mode 100644
index 00000000000..fb016eeb811
--- /dev/null
+++ b/lib/components/src/blocks/Source.stories.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Source, SourceError } from './Source';
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+  title: 'Docs|Source',
+  Component: Source,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const noStory = () => <Source error={SourceError.NO_STORY} />;
+noStory.story = { name: 'no story' };
+
+export const sourceUnavailable = () => <Source error={SourceError.SOURCE_UNAVAILABLE} />;
+sourceUnavailable.story = { name: 'source unavailable' };
+
+const jsxCode = `
+<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>
+  <SomeOtherComponent funcProp={(a) => a.id} />
+</MyComponent>
+`.trim();
+
+const jsxProps = {};
+export const jsx = () => <Source code={jsxCode} language="jsx" />;
+
+const cssCode = `
+@-webkit-keyframes blinker {
+  from { opacity: 1.0; }
+  to { opacity: 0.0; }
+}
+
+.waitingForConnection {
+  -webkit-animation-name: blinker;
+  -webkit-animation-iteration-count: infinite;
+  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);
+  -webkit-animation-duration: 1.7s;
+}
+`.trim();
+
+export const css = () => <Source code={cssCode} language="css" />;
diff --git a/lib/components/src/blocks/Source.tsx b/lib/components/src/blocks/Source.tsx
new file mode 100644
index 00000000000..f7b1b6da667
--- /dev/null
+++ b/lib/components/src/blocks/Source.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { styled, ThemeProvider, convert, themes } from '@storybook/theming';
+import { EmptyBlock } from './EmptyBlock';
+
+import { SyntaxHighlighter } from '../syntaxhighlighter/syntaxhighlighter';
+
+const StyledSyntaxHighlighter = styled(SyntaxHighlighter)(({ theme }) => ({
+  // DocBlocks-specific styling and overrides
+  margin: '25px 0 40px',
+  boxShadow:
+    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
+
+  'pre.hljs': {
+    padding: 20,
+    background: 'inherit',
+  },
+}));
+
+export enum SourceError {
+  NO_STORY = 'There\u2019s no story here.',
+  SOURCE_UNAVAILABLE = 'Oh no! The source is not available.',
+}
+
+interface SourceErrorProps {
+  error?: SourceError;
+}
+
+interface SourceCodeProps {
+  language?: string;
+  code?: string;
+  dark?: boolean;
+}
+
+// FIXME: Using | causes a typescript error, so stubbing it with & for now
+// and making `error` optional
+export type SourceProps = SourceErrorProps & SourceCodeProps;
+
+/**
+ * Syntax-highlighted source code for a component (or anything!)
+ */
+const Source: React.FunctionComponent<SourceProps> = props => {
+  const { error } = props as SourceErrorProps;
+  if (error) {
+    return <EmptyBlock {...props}>{error}</EmptyBlock>;
+  }
+
+  const { language, code, dark, ...rest } = props as SourceCodeProps;
+
+  const syntaxHighlighter = (
+    <StyledSyntaxHighlighter
+      bordered
+      copyable
+      language={language}
+      className="docblock-source"
+      {...rest}
+    >
+      {code}
+    </StyledSyntaxHighlighter>
+  );
+  if (typeof dark === 'undefined') {
+    return syntaxHighlighter;
+  }
+  const overrideTheme = dark ? themes.dark : themes.light;
+  return <ThemeProvider theme={convert(overrideTheme)}>{syntaxHighlighter}</ThemeProvider>;
+};
+
+export { Source };
diff --git a/lib/components/src/blocks/Story.stories.tsx b/lib/components/src/blocks/Story.stories.tsx
new file mode 100644
index 00000000000..ac982f0efbb
--- /dev/null
+++ b/lib/components/src/blocks/Story.stories.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { Story, StoryError } from './Story';
+import { DocsPageWrapper } from './DocsPage';
+import { Button } from '../Button/Button';
+
+export default {
+  title: 'Docs|Story',
+  Component: Story,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+export const error = () => <Story error={StoryError.NO_STORY} />;
+
+const buttonFn = () => <Button secondary>Hello Button</Button>;
+
+export const inline = () => <Story inline storyFn={buttonFn} title="hello button" />;
diff --git a/lib/components/src/blocks/Story.tsx b/lib/components/src/blocks/Story.tsx
new file mode 100644
index 00000000000..0cdd022ab67
--- /dev/null
+++ b/lib/components/src/blocks/Story.tsx
@@ -0,0 +1,80 @@
+import React from 'react';
+
+import { IFrame } from './IFrame';
+import { EmptyBlock } from './EmptyBlock';
+
+const BASE_URL = 'iframe.html';
+
+export enum StoryError {
+  NO_STORY = 'No component or story to display',
+}
+
+interface CommonProps {
+  title: string;
+  height?: string;
+}
+
+type InlineStoryProps = {
+  storyFn: () => React.ElementType;
+} & CommonProps;
+
+type IFrameStoryProps = {
+  id: string;
+} & CommonProps;
+
+type ErrorProps = {
+  error?: StoryError;
+} & CommonProps;
+
+// How do you XOR properties in typescript?
+export type StoryProps = (InlineStoryProps | IFrameStoryProps | ErrorProps) & {
+  inline: boolean;
+};
+
+const InlineStory: React.FunctionComponent<InlineStoryProps> = ({ storyFn, height }) => (
+  <div style={{ height }}>{storyFn()}</div>
+);
+
+const IFrameStory: React.FunctionComponent<IFrameStoryProps> = ({
+  id,
+  title,
+  height = '500px',
+}) => (
+  <div style={{ width: '100%', height }}>
+    <IFrame
+      key="iframe"
+      id={`storybook-Story-${id}`}
+      title={title}
+      src={`${BASE_URL}?id=${id}&viewMode=story`}
+      allowFullScreen
+      scale={1}
+      style={{
+        width: '100%',
+        height: '100%',
+        border: '0 none',
+      }}
+    />
+  </div>
+);
+
+/**
+ * A story element, either renderend inline or in an iframe,
+ * with configurable height.
+ */
+const Story: React.FunctionComponent<StoryProps> = props => {
+  const { error } = props as ErrorProps;
+  const { storyFn } = props as InlineStoryProps;
+  const { id } = props as IFrameStoryProps;
+  const { inline, title, height } = props;
+
+  if (error) {
+    return <EmptyBlock>{error}</EmptyBlock>;
+  }
+  return inline ? (
+    <InlineStory storyFn={storyFn} title={title} height={height} />
+  ) : (
+    <IFrameStory id={id} title={title} height={height} />
+  );
+};
+
+export { Story };
diff --git a/lib/components/src/blocks/Typeset.stories.tsx b/lib/components/src/blocks/Typeset.stories.tsx
new file mode 100644
index 00000000000..03af542d2e4
--- /dev/null
+++ b/lib/components/src/blocks/Typeset.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import { Typeset } from './Typeset';
+
+import { DocsPageWrapper } from './DocsPage';
+
+export default {
+  title: 'Docs|Typeset',
+  Component: Typeset,
+  decorators: [getStory => <DocsPageWrapper>{getStory()}</DocsPageWrapper>],
+};
+
+const fontSizes = [12, 14, 16, 20, 24, 32, 40, 48];
+const fontWeight = 900;
+
+export const withFontSizes = () => <Typeset fontSizes={fontSizes} />;
+export const withFontWeight = () => <Typeset fontSizes={fontSizes} fontWeight={fontWeight} />;
+export const withWeightText = () => (
+  <Typeset fontSizes={fontSizes} fontWeight={fontWeight} sampleText="Heading" />
+);
diff --git a/lib/components/src/blocks/Typeset.tsx b/lib/components/src/blocks/Typeset.tsx
new file mode 100644
index 00000000000..890474dae36
--- /dev/null
+++ b/lib/components/src/blocks/Typeset.tsx
@@ -0,0 +1,67 @@
+import React from 'react';
+import { styled } from '@storybook/theming';
+import { transparentize } from 'polished';
+
+import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
+
+const Label = styled.div(({ theme }) => ({
+  marginRight: 30,
+  fontSize: `${theme.typography.size.s1}px`,
+  color:
+    theme.base === 'light'
+      ? transparentize(0.4, theme.color.defaultText)
+      : transparentize(0.6, theme.color.defaultText),
+}));
+
+const Sample = styled.div({
+  lineHeight: 1,
+  overflow: 'hidden',
+  whiteSpace: 'nowrap',
+  textOverflow: 'ellipsis',
+});
+
+const TypeSpecimen = styled.div({
+  display: 'flex',
+  flexDirection: 'row',
+  alignItems: 'baseline',
+  '&:not(:last-child)': { marginBottom: '1rem' },
+});
+
+const Wrapper = styled.div(({ theme }) => ({
+  ...getBlockBackgroundStyle(theme),
+  margin: '25px 0 40px',
+  padding: '30px 20px',
+}));
+
+export interface TypesetProps {
+  fontSizes: number[];
+  fontWeight?: number;
+  sampleText?: string;
+}
+
+/**
+ * Convenient tyleguide documentation showing examples of type
+ * with different sizes and weights and configurable sample text.
+ */
+export const Typeset: React.FunctionComponent<TypesetProps> = ({
+  fontSizes,
+  fontWeight,
+  sampleText,
+  ...props
+}) => (
+  <Wrapper {...props}>
+    {fontSizes.map(num => (
+      <TypeSpecimen key={num}>
+        <Label>{num}px</Label>
+        <Sample
+          style={{
+            fontSize: num,
+            fontWeight,
+          }}
+        >
+          {sampleText || 'Was he a beast if music could move him so?'}
+        </Sample>
+      </TypeSpecimen>
+    ))}
+  </Wrapper>
+);
diff --git a/lib/components/src/blocks/index.ts b/lib/components/src/blocks/index.ts
new file mode 100644
index 00000000000..3020d6ec570
--- /dev/null
+++ b/lib/components/src/blocks/index.ts
@@ -0,0 +1,10 @@
+export * from './Description';
+export * from './DocsPage';
+export * from './Preview';
+export * from './PropsTable/PropsTable';
+export * from './Source';
+export * from './Story';
+export * from './IFrame';
+export * from './Typeset';
+export * from './ColorPalette';
+export * from './IconGallery';
diff --git a/lib/components/src/index.ts b/lib/components/src/index.ts
index 668975136c2..c986162212d 100644
--- a/lib/components/src/index.ts
+++ b/lib/components/src/index.ts
@@ -32,3 +32,6 @@ export { AddonPanel } from './addon-panel/addon-panel';
 export { Icons } from './icon/icon';
 export { StorybookLogo } from './brand/StorybookLogo';
 export { StorybookIcon } from './brand/StorybookIcon';
+
+// Doc blocks
+export * from './blocks';
diff --git a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
index 5e6799e34e1..94659147058 100644
--- a/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
+++ b/lib/components/src/syntaxhighlighter/__snapshots__/syntaxhighlighter.stories.storyshot
@@ -795,14 +795,6 @@ exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
   opacity: 1;
 }
 
-.emotion-5 {
-  position: relative;
-  overflow: hidden;
-  color: #FFFFFF;
-  border: 1px solid rgba(255,255,255,.1);
-  background: #333333;
-}
-
 .emotion-2 {
   overflow-y: auto;
   height: 100%;
@@ -1011,6 +1003,14 @@ exports[`Storyshots Basics|SyntaxHighlighter dark unsupported 1`] = `
   outline: 0 none;
 }
 
+.emotion-5 {
+  position: relative;
+  overflow: hidden;
+  color: #FFFFFF;
+  border: 1px solid rgba(255,255,255,.1);
+  background: #333333;
+}
+
 <div
   class="emotion-5"
 >
diff --git a/lib/core-events/package.json b/lib/core-events/package.json
index a81023ad614..df41b97f7e4 100644
--- a/lib/core-events/package.json
+++ b/lib/core-events/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core-events",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Event names used in storybook core",
   "keywords": [
     "storybook"
diff --git a/lib/core/package.json b/lib/core/package.json
index 88f05dbb1e2..76e96b19df8 100644
--- a/lib/core/package.json
+++ b/lib/core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/core",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Storybook framework-agnostic API",
   "keywords": [
     "storybook"
@@ -25,16 +25,17 @@
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@babel/plugin-transform-react-constant-elements": "^7.2.0",
     "@babel/preset-env": "^7.4.5",
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/channel-postmessage": "5.2.0-alpha.23",
-    "@storybook/client-api": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/node-logger": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
-    "@storybook/ui": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/channel-postmessage": "5.2.0-alpha.32",
+    "@storybook/client-api": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/node-logger": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
+    "@storybook/ui": "5.2.0-alpha.32",
     "airbnb-js-shims": "^1 || ^2",
+    "ansi-to-html": "^0.6.11",
     "autoprefixer": "^9.4.9",
     "babel-plugin-add-react-displayname": "^0.0.5",
     "babel-plugin-emotion": "^10.0.9",
@@ -63,7 +64,7 @@
     "interpret": "^1.2.0",
     "ip": "^1.1.5",
     "json5": "^2.1.0",
-    "lazy-universal-dotenv": "^2.0.0",
+    "lazy-universal-dotenv": "^3.0.0",
     "node-fetch": "^2.6.0",
     "open": "^6.1.0",
     "pnp-webpack-plugin": "1.4.3",
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index 74328f78c17..bfaefdcf687 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -1,22 +1,40 @@
+import { navigator, window, document } from 'global';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import deprecate from 'util-deprecate';
+import AnsiToHtml from 'ansi-to-html';
 
 import addons from '@storybook/addons';
-import { navigator, window, document } from 'global';
 import createChannel from '@storybook/channel-postmessage';
 import { ClientApi, StoryStore, ConfigApi } from '@storybook/client-api';
 import { toId } from '@storybook/router/utils';
 import { logger } from '@storybook/client-logger';
 import Events from '@storybook/core-events';
-import deprecate from 'util-deprecate';
+
 import { initializePath, setPath } from './url';
 
+const ansiConverter = new AnsiToHtml();
+
 const classes = {
   MAIN: 'sb-show-main',
   NOPREVIEW: 'sb-show-nopreview',
   ERROR: 'sb-show-errordisplay',
 };
 
+function matches(storyKey, arrayOrRegex) {
+  if (Array.isArray(arrayOrRegex)) {
+    return arrayOrRegex.includes(storyKey);
+  }
+  return storyKey.match(arrayOrRegex);
+}
+
+export function isExportStory(key, { includeStories, excludeStories }) {
+  return (
+    (!includeStories || matches(key, includeStories)) &&
+    (!excludeStories || !matches(key, excludeStories))
+  );
+}
+
 function showMain() {
   document.body.classList.remove(classes.NOPREVIEW);
   document.body.classList.remove(classes.ERROR);
@@ -31,12 +49,13 @@ function showNopreview() {
   document.body.classList.add(classes.NOPREVIEW);
 }
 
-function showErrorDisplay({ message, stack }) {
-  document.getElementById('error-message').textContent = message;
-  document.getElementById('error-stack').textContent = stack;
+function showErrorDisplay({ message = '', stack = '' }) {
+  document.getElementById('error-message').innerHTML = ansiConverter.toHtml(message);
+  document.getElementById('error-stack').innerHTML = ansiConverter.toHtml(stack);
 
   document.body.classList.remove(classes.MAIN);
   document.body.classList.remove(classes.NOPREVIEW);
+
   document.body.classList.add(classes.ERROR);
 }
 
@@ -56,7 +75,7 @@ function showException(exception) {
   showErrorDisplay(exception);
 
   // Log the stack to the console. So, user could check the source code.
-  logger.error(exception.stack);
+  logger.error(exception);
 }
 
 const isBrowser =
@@ -126,9 +145,12 @@ export default function start(render, { decorateStory } = {}) {
 
   const renderMain = forceRender => {
     const revision = storyStore.getRevision();
+    const loadError = storyStore.getError();
     const { storyId, viewMode } = storyStore.getSelection();
+
     const data = storyStore.fromId(storyId);
-    const { kind, name, getDecorated, id, parameters } = data || {};
+
+    const { kind, name, getDecorated, id, parameters, error } = data || {};
 
     const renderContext = {
       ...context,
@@ -139,6 +161,11 @@ export default function start(render, { decorateStory } = {}) {
       forceRender,
     };
 
+    if (loadError || error) {
+      showErrorDisplay(loadError || error);
+      return;
+    }
+
     // Render story only if selectedKind or selectedStory have changed.
     // However, we DO want the story to re-render if the store itself has changed
     // (which happens at the moment when HMR occurs)
@@ -149,7 +176,13 @@ export default function start(render, { decorateStory } = {}) {
       kind === previousKind &&
       name === previousStory
     ) {
-      addons.getChannel().emit(Events.STORY_UNCHANGED, id);
+      addons.getChannel().emit(Events.STORY_UNCHANGED, {
+        id,
+        revision,
+        kind,
+        name,
+        viewMode,
+      });
       return;
     }
 
@@ -157,17 +190,23 @@ export default function start(render, { decorateStory } = {}) {
       addons.getChannel().emit(Events.STORY_CHANGED, id);
     }
 
-    if (viewMode === 'docs') {
-      const NoDocs = () => <div style={{ fontFamily: 'sans-serif' }}>No docs found</div>;
-      const StoryDocs = (parameters && parameters.docs) || NoDocs;
-      ReactDOM.render(<StoryDocs context={renderContext} />, document.getElementById('root'));
-    } else if (!viewMode || viewMode === 'story') {
-      if (getDecorated) {
-        render(renderContext);
-        addons.getChannel().emit(Events.STORY_RENDERED, id);
-      } else {
-        showNopreview();
-        addons.getChannel().emit(Events.STORY_MISSING, id);
+    switch (viewMode) {
+      case 'docs': {
+        const NoDocs = () => <div style={{ fontFamily: 'sans-serif' }}>No docs found</div>;
+        const StoryDocs = (parameters && parameters.docs) || NoDocs;
+        ReactDOM.render(<StoryDocs context={renderContext} />, document.getElementById('root'));
+        break;
+      }
+      case 'story':
+      default: {
+        if (getDecorated) {
+          render(renderContext);
+          addons.getChannel().emit(Events.STORY_RENDERED, id);
+        } else {
+          showNopreview();
+          addons.getChannel().emit(Events.STORY_MISSING, id);
+        }
+        break;
       }
     }
 
@@ -253,11 +292,13 @@ export default function start(render, { decorateStory } = {}) {
 
       if (!fileExports.default.title) {
         throw new Error(
-          `Unexpected default export without title: ${JSON.stringify(fileExports.default)}`
+          `Unexpected default export without title in '${filename}': ${JSON.stringify(
+            fileExports.default
+          )}`
         );
       }
 
-      const { default: meta, ...examples } = fileExports;
+      const { default: meta, ...exports } = fileExports;
       const kindName = meta.title;
 
       if (previousExports[filename]) {
@@ -281,10 +322,12 @@ export default function start(render, { decorateStory } = {}) {
         kind.addParameters(meta.parameters);
       }
 
-      Object.keys(examples).forEach(key => {
-        const example = examples[key];
-        const { title = example.title || key, parameters } = example;
-        kind.add(title, example, parameters);
+      Object.keys(exports).forEach(key => {
+        if (isExportStory(key, meta)) {
+          const storyFn = exports[key];
+          const { name, parameters } = storyFn.story || {};
+          kind.add(name || key, storyFn, parameters);
+        }
       });
 
       previousExports[filename] = fileExports;
diff --git a/lib/core/src/client/preview/start.test.js b/lib/core/src/client/preview/start.test.js
index 76f365e2bc0..074ebcda5bc 100644
--- a/lib/core/src/client/preview/start.test.js
+++ b/lib/core/src/client/preview/start.test.js
@@ -2,7 +2,7 @@
 import { history, document, window } from 'global';
 
 import Events from '@storybook/core-events';
-import start from './start';
+import start, { isExportStory } from './start';
 
 jest.mock('@storybook/client-logger');
 jest.mock('global', () => ({
@@ -142,3 +142,37 @@ describe('STORY_INIT', () => {
     expect(store.setSelection).toHaveBeenCalledWith({ storyId: 'kind--story' });
   });
 });
+
+describe('story filters for module exports', () => {
+  it('should include all stories when there are no filters', () => {
+    expect(isExportStory('a', {})).toBeTruthy();
+  });
+
+  it('should filter stories by arrays', () => {
+    expect(isExportStory('a', { includeStories: ['a'] })).toBeTruthy();
+    expect(isExportStory('a', { includeStories: [] })).toBeFalsy();
+    expect(isExportStory('a', { includeStories: ['b'] })).toBeFalsy();
+
+    expect(isExportStory('a', { excludeStories: ['a'] })).toBeFalsy();
+    expect(isExportStory('a', { excludeStories: [] })).toBeTruthy();
+    expect(isExportStory('a', { excludeStories: ['b'] })).toBeTruthy();
+
+    expect(isExportStory('a', { includeStories: ['a'], excludeStories: ['a'] })).toBeFalsy();
+    expect(isExportStory('a', { includeStories: [], excludeStories: [] })).toBeFalsy();
+    expect(isExportStory('a', { includeStories: ['a'], excludeStories: ['b'] })).toBeTruthy();
+  });
+
+  it('should filter stories by regex', () => {
+    expect(isExportStory('a', { includeStories: /a/ })).toBeTruthy();
+    expect(isExportStory('a', { includeStories: /.*/ })).toBeTruthy();
+    expect(isExportStory('a', { includeStories: /b/ })).toBeFalsy();
+
+    expect(isExportStory('a', { excludeStories: /a/ })).toBeFalsy();
+    expect(isExportStory('a', { excludeStories: /.*/ })).toBeFalsy();
+    expect(isExportStory('a', { excludeStories: /b/ })).toBeTruthy();
+
+    expect(isExportStory('a', { includeStories: /a/, excludeStories: ['a'] })).toBeFalsy();
+    expect(isExportStory('a', { includeStories: /.*/, excludeStories: /.*/ })).toBeFalsy();
+    expect(isExportStory('a', { includeStories: /a/, excludeStories: /b/ })).toBeTruthy();
+  });
+});
diff --git a/lib/core/src/client/preview/url.js b/lib/core/src/client/preview/url.js
index d0ecddb4deb..47daf2130de 100644
--- a/lib/core/src/client/preview/url.js
+++ b/lib/core/src/client/preview/url.js
@@ -39,5 +39,5 @@ export const initializePath = () => {
       setPath({ storyId, viewMode });
     }
   }
-  return { storyId };
+  return { storyId, viewMode };
 };
diff --git a/lib/core/src/server/build-dev.js b/lib/core/src/server/build-dev.js
index 17701b0e16c..5290bf067a4 100644
--- a/lib/core/src/server/build-dev.js
+++ b/lib/core/src/server/build-dev.js
@@ -343,5 +343,6 @@ export async function buildDev({ packageJson, ...loadOptions }) {
     ...loadOptions,
     packageJson,
     configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
+    docsMode: !!cliOptions.docs,
   });
 }
diff --git a/lib/core/src/server/build-static.js b/lib/core/src/server/build-static.js
index f7eb4254215..853edf9c5bc 100644
--- a/lib/core/src/server/build-static.js
+++ b/lib/core/src/server/build-static.js
@@ -123,6 +123,7 @@ async function buildManager(configType, outputDir, configDir, options) {
     configDir,
     corePresets: [require.resolve('./manager/manager-preset.js')],
     frameworkPresets: options.frameworkPresets,
+    docsMode: options.docsMode,
   });
 
   if (options.debugWebpack) {
@@ -203,5 +204,6 @@ export function buildStatic({ packageJson, ...loadOptions }) {
     packageJson,
     configDir: loadOptions.configDir || cliOptions.configDir || './.storybook',
     outputDir: loadOptions.outputDir || cliOptions.outputDir || './storybook-static',
+    docsMode: !!cliOptions.docs,
   });
 }
diff --git a/lib/core/src/server/cli/dev.js b/lib/core/src/server/cli/dev.js
index 801acc82f20..61ea25e2770 100644
--- a/lib/core/src/server/cli/dev.js
+++ b/lib/core/src/server/cli/dev.js
@@ -36,6 +36,7 @@ async function getCLI(packageJson) {
     .option('--quiet', 'Suppress verbose build output')
     .option('--no-dll', 'Do not use dll reference')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+    .option('--docs', 'Build a documentation-only site using addon-docs')
     .parse(process.argv);
 
   // Workaround the `-h` shorthand conflict.
diff --git a/lib/core/src/server/cli/prod.js b/lib/core/src/server/cli/prod.js
index 4e3ab1a1d02..d20e410390f 100644
--- a/lib/core/src/server/cli/prod.js
+++ b/lib/core/src/server/cli/prod.js
@@ -16,6 +16,7 @@ function getCLI(packageJson) {
     .option('--loglevel [level]', 'Control level of logging during build')
     .option('--no-dll', 'Do not use dll reference')
     .option('--debug-webpack', 'Display final webpack configurations for debugging purposes')
+    .option('--docs', 'Build a documentation-only site using addon-docs')
     .parse(process.argv);
 
   logger.setLevel(program.loglevel);
diff --git a/lib/core/src/server/manager/manager-webpack.config.js b/lib/core/src/server/manager/manager-webpack.config.js
index 2a5edd5d05d..4d0af42b1ac 100644
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@@ -19,7 +19,16 @@ const coreDirName = path.dirname(require.resolve('@storybook/core/package.json')
 const context = path.join(coreDirName, '../../node_modules');
 const cacheDir = findCacheDir({ name: 'storybook' });
 
-export default ({ configDir, configType, entries, dll, outputDir, cache, babelOptions }) => {
+export default ({
+  configDir,
+  configType,
+  docsMode,
+  entries,
+  dll,
+  outputDir,
+  cache,
+  babelOptions,
+}) => {
   const { raw, stringified } = loadEnv();
   const isProd = configType === 'PRODUCTION';
 
@@ -63,6 +72,7 @@ export default ({ configDir, configType, entries, dll, outputDir, cache, babelOp
       new DefinePlugin({
         'process.env': stringified,
         NODE_ENV: JSON.stringify(process.env.NODE_ENV),
+        DOCS_MODE: docsMode, // global docs mode
       }),
       // See https://github.com/graphql/graphql-language-service/issues/111#issuecomment-306723400
       new ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
diff --git a/lib/core/src/server/preview/preview-preset.js b/lib/core/src/server/preview/preview-preset.js
index d82a9bd531f..ef334b49eb6 100644
--- a/lib/core/src/server/preview/preview-preset.js
+++ b/lib/core/src/server/preview/preview-preset.js
@@ -11,7 +11,9 @@ export const entries = async (_, options) => {
   result = result.concat(await createPreviewEntry(options));
 
   if (options.configType === 'DEVELOPMENT') {
-    result = result.concat(`${require.resolve('webpack-hot-middleware/client')}?reload=true`);
+    result = result.concat(
+      `${require.resolve('webpack-hot-middleware/client')}?reload=true&quiet=true`
+    );
   }
 
   return result;
diff --git a/lib/core/src/server/templates/base-preview-body.html b/lib/core/src/server/templates/base-preview-body.html
index 503fec03210..71c0b67fde9 100644
--- a/lib/core/src/server/templates/base-preview-body.html
+++ b/lib/core/src/server/templates/base-preview-body.html
@@ -11,6 +11,6 @@
 </div>
 
 <div class="sb-errordisplay sb-wrapper">
-  <div id="error-message" class="sb-heading"></div>
+  <pre id="error-message" class="sb-heading"></pre>
   <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
 </div>
diff --git a/lib/core/src/server/templates/base-preview-head.html b/lib/core/src/server/templates/base-preview-head.html
index ad751607514..05bc52f069e 100644
--- a/lib/core/src/server/templates/base-preview-head.html
+++ b/lib/core/src/server/templates/base-preview-head.html
@@ -14,12 +14,13 @@
     left: 0;
     right: 0;
     padding: 20px;
-    font-family: -apple-system, ".SFNSText-Regular", "San Francisco", Roboto, "Segoe UI", "Helvetica Neue", "Lucida Grande", sans-serif;
+    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
+    overflow: auto;
   }
 
   .sb-heading {
-    font-size: 20px;
+    font-size: 14px;
     font-weight: 600;
     letter-spacing: 0.2px;
     margin: 10px 0;
@@ -43,14 +44,16 @@
   }
 
   .sb-errordisplay {
-    background-color: rgb(187, 49, 49);
-    color: #FFF;
+    border: 20px solid rgb(187, 49, 49);
+    background: #222;
+    color: #fff;
   }
 
   .sb-errordisplay_code {
-    font-size: 14px;
-    width: 100vw;
-    overflow: auto;
+    padding: 10px;
+    background: #000;
+    color: #eee;
+    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
   }
 </style>
 
diff --git a/lib/node-logger/package.json b/lib/node-logger/package.json
index a528c78fe19..7b71f834ce2 100644
--- a/lib/node-logger/package.json
+++ b/lib/node-logger/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/node-logger",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "",
   "keywords": [
     "storybook"
diff --git a/lib/router/package.json b/lib/router/package.json
index 40af241733f..e52a15c225a 100644
--- a/lib/router/package.json
+++ b/lib/router/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/router",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Core Storybook Router",
   "keywords": [
     "storybook"
diff --git a/lib/source-loader/package.json b/lib/source-loader/package.json
new file mode 100644
index 00000000000..935d4c54a9d
--- /dev/null
+++ b/lib/source-loader/package.json
@@ -0,0 +1,38 @@
+{
+  "name": "@storybook/source-loader",
+  "version": "5.2.0-alpha.32",
+  "description": "Source loader",
+  "keywords": [
+    "lib",
+    "storybook"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook/tree/master/lib/source-loader",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "lib/source-loader"
+  },
+  "license": "MIT",
+  "main": "dist/index.js",
+  "jsnext:main": "src/index.js",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "core-js": "^3.0.1",
+    "estraverse": "^4.2.0",
+    "global": "^4.3.2",
+    "loader-utils": "^1.2.3",
+    "prettier": "^1.16.4",
+    "prop-types": "^15.7.2",
+    "regenerator-runtime": "^0.12.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
new file mode 100644
index 00000000000..65ba7d29a2e
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/__snapshots__/inject-decorator.test.js.snap
@@ -0,0 +1,873 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inject-decorator injectDecorator option is false - angular does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+  selector: 'storybook-with-ng-content',
+  template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).add('Default', () => ({
+  template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
+  moduleMetadata: {
+    declarations: [WithNgContentComponent],
+  },
+}));
+"
+`;
+
+exports[`inject-decorator injectDecorator option is false - flow does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+  value: any,
+};
+
+type Props = {
+  classes: JssClasses,
+  name: string,
+};
+
+class Table extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  state: State;
+
+  render() {
+    return <TableComponent />;
+  }
+}
+
+const stories = storiesOf('Table', module);
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
+"
+`;
+
+exports[`inject-decorator injectDecorator option is false - ts does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+
+@Component({
+  selector: 'storybook-comp-with-store',
+  template: '<div>{{this.getSotreState()}}</div>',
+})
+class WithStoreComponent {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  getSotreState(): string {
+    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+  }
+}
+
+storiesOf('ngrx|Store', module)
+  .addDecorator(
+    moduleMetadata({
+      imports: [StoreModule.forRoot({})],
+      declarations: [WithStoreComponent],
+    })
+  )
+  .add('With component', () => {
+    return {
+      component: WithStoreComponent,
+    };
+  });"
+`;
+
+exports[`inject-decorator injectDecorator option is false does not inject stories decorator after the all "storiesOf" functions 1`] = `
+"import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../components/DocgenButton';
+import FlowTypeButton from '../components/FlowTypeButton';
+import BaseButton from '../components/BaseButton';
+import TableComponent from '../components/TableComponent';
+
+storiesOf('Addons|Info.React Docgen', module)
+  .add(
+    'Comments from PropType declarations',
+    withInfo(
+      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
+  )
+  .add(
+    'Comments from Flow declarations',
+    withInfo(
+      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
+  )
+  .add(
+    'Comments from component declaration',
+    withInfo(
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
+    )(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
+  );
+
+const markdownDescription = \`
+#### You can use markdown in your withInfo() description.
+
+Sometimes you might want to manually include some code examples:
+~~~js
+const Button = () => <button />;
+~~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+\`;
+
+storiesOf('Addons|Info.Markdown', module).add(
+  'Displays Markdown in description',
+  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.inline', module).add(
+  'Inlines component inside story',
+  withInfo({
+    text: 'Component should be inlined between description and PropType table',
+    inline: true, // Displays info inline vs click button to view
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.header', module).add(
+  'Shows or hides Info Addon header',
+  withInfo({
+    text: 'The Info Addon header should be hidden',
+    header: false, // Toggles display of header with component name and description
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.source', module).add(
+  'Shows or hides Info Addon source',
+  withInfo({
+    text: 'The Info Addon source section should be hidden',
+    source: false, // Displays the source of story Component
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.propTables', module).add(
+  'Shows additional component prop tables',
+  withInfo({
+    text: 'There should be a prop table added for a component not included in the story',
+    propTables: [FlowTypeButton],
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.propTablesExclude', module).add(
+  'Exclude component from prop tables',
+  withInfo({
+    text: 'This can exclude extraneous components from being displayed in prop tables.',
+    propTablesExclude: [FlowTypeButton],
+  })(() => (
+    <div>
+      <BaseButton label=\\"Button\\" />
+      <FlowTypeButton label=\\"Flow Typed Button\\" />
+    </div>
+  ))
+);
+
+storiesOf('Addons|Info.Options.styles', module)
+  .add(
+    'Extend info styles with an object',
+    withInfo({
+      styles: {
+        button: {
+          base: {
+            background: 'purple',
+          },
+        },
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    })(() => <BaseButton label=\\"Button\\" />)
+  )
+  .add(
+    'Full control over styles using a function',
+    withInfo({
+      styles: stylesheet => ({
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'red',
+          },
+        },
+      }),
+    })(() => <BaseButton label=\\"Button\\" />)
+  );
+
+storiesOf('Addons|Info.Options.TableComponent', module).add(
+  'Use a custom component for the table',
+  withInfo({
+    TableComponent,
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Decorator', module)
+  .addDecorator((story, context) =>
+    withInfo('Info could be used as a global or local decorator as well.')(story)(context)
+  )
+  .add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type=\\"text\\" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+storiesOf('Addons|Info.GitHub issues', module).add(
+  '#1814',
+  withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
+    <div>
+      <Input />
+      <TextArea />
+    </div>
+  ))
+);
+"
+`;
+
+exports[`inject-decorator positive - angular calculates "adds" map 1`] = `
+Object {
+  "custom-ng-content--default": Object {
+    "endBody": Object {
+      "col": 2,
+      "line": 15,
+    },
+    "endLoc": Object {
+      "col": 2,
+      "line": 15,
+    },
+    "startBody": Object {
+      "col": 54,
+      "line": 10,
+    },
+    "startLoc": Object {
+      "col": 43,
+      "line": 10,
+    },
+  },
+}
+`;
+
+exports[`inject-decorator positive - angular injects stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { storiesOf } from '@storybook/angular';
+
+@Component({
+  selector: 'storybook-with-ng-content',
+  template: \`<div style=\\"color: #1e88e5;\\"><ng-content></ng-content></div>\`,
+})
+class WithNgContentComponent {}
+
+storiesOf('Custom|ng-content', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add('Default', () => ({
+  template: \`<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>\`,
+  moduleMetadata: {
+    declarations: [WithNgContentComponent],
+  },
+}));
+"
+`;
+
+exports[`inject-decorator positive - flow calculates "adds" map 1`] = `Object {}`;
+
+exports[`inject-decorator positive - flow injects stories decorator after the all "storiesOf" functions 1`] = `
+"// @flow
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+
+import TableComponent from '../components/TableComponent';
+
+import type { JssClasses } from '../types';
+
+type State = {
+  value: any,
+};
+
+type Props = {
+  classes: JssClasses,
+  name: string,
+};
+
+class Table extends React.Component<Props, State> {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: undefined,
+    };
+  }
+
+  state: State;
+
+  render() {
+    return <TableComponent />;
+  }
+}
+
+const stories = storiesOf('Table', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__));
+stories.add('Flow Class', withInfo('Lorum Ipsum Nem')(() => <Table />));
+"
+`;
+
+exports[`inject-decorator positive - ts calculates "adds" map 1`] = `
+Object {
+  "ngrx-store--with-component": Object {
+    "endBody": Object {
+      "col": 3,
+      "line": 32,
+    },
+    "endLoc": Object {
+      "col": 3,
+      "line": 32,
+    },
+    "startBody": Object {
+      "col": 25,
+      "line": 28,
+    },
+    "startLoc": Object {
+      "col": 7,
+      "line": 28,
+    },
+  },
+}
+`;
+
+exports[`inject-decorator positive - ts injects stories decorator after the all "storiesOf" functions 1`] = `
+"import { Component } from '@angular/core';
+import { Store, StoreModule } from '@ngrx/store';
+import { storiesOf, moduleMetadata } from '@storybook/angular';
+
+@Component({
+  selector: 'storybook-comp-with-store',
+  template: '<div>{{this.getSotreState()}}</div>',
+})
+class WithStoreComponent {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  getSotreState(): string {
+    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+  }
+}
+
+storiesOf('ngrx|Store', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+  .addDecorator(
+    moduleMetadata({
+      imports: [StoreModule.forRoot({})],
+      declarations: [WithStoreComponent],
+    })
+  )
+  .add('With component', () => {
+    return {
+      component: WithStoreComponent,
+    };
+  });"
+`;
+
+exports[`inject-decorator positive calculates "adds" map 1`] = `
+Object {
+  "addons-info-decorator--use-info-as-story-decorator": Object {
+    "endBody": Object {
+      "col": 73,
+      "line": 137,
+    },
+    "endLoc": Object {
+      "col": 73,
+      "line": 137,
+    },
+    "startBody": Object {
+      "col": 38,
+      "line": 137,
+    },
+    "startLoc": Object {
+      "col": 7,
+      "line": 137,
+    },
+  },
+  "addons-info-github-issues--1814": Object {
+    "endBody": Object {
+      "col": 4,
+      "line": 152,
+    },
+    "endLoc": Object {
+      "col": 4,
+      "line": 152,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 147,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 146,
+    },
+  },
+  "addons-info-markdown--displays-markdown-in-description": Object {
+    "endBody": Object {
+      "col": 96,
+      "line": 44,
+    },
+    "endLoc": Object {
+      "col": 96,
+      "line": 44,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 44,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 43,
+    },
+  },
+  "addons-info-options-header--shows-or-hides-info-addon-header": Object {
+    "endBody": Object {
+      "col": 41,
+      "line": 60,
+    },
+    "endLoc": Object {
+      "col": 41,
+      "line": 60,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 57,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 56,
+    },
+  },
+  "addons-info-options-inline--inlines-component-inside-story": Object {
+    "endBody": Object {
+      "col": 41,
+      "line": 52,
+    },
+    "endLoc": Object {
+      "col": 41,
+      "line": 52,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 49,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 48,
+    },
+  },
+  "addons-info-options-proptables--shows-additional-component-prop-tables": Object {
+    "endBody": Object {
+      "col": 41,
+      "line": 76,
+    },
+    "endLoc": Object {
+      "col": 41,
+      "line": 76,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 73,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 72,
+    },
+  },
+  "addons-info-options-proptablesexclude--exclude-component-from-prop-tables": Object {
+    "endBody": Object {
+      "col": 4,
+      "line": 89,
+    },
+    "endLoc": Object {
+      "col": 4,
+      "line": 89,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 81,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 80,
+    },
+  },
+  "addons-info-options-source--shows-or-hides-info-addon-source": Object {
+    "endBody": Object {
+      "col": 41,
+      "line": 68,
+    },
+    "endLoc": Object {
+      "col": 41,
+      "line": 68,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 65,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 64,
+    },
+  },
+  "addons-info-options-styles--extend-info-styles-with-an-object": Object {
+    "endBody": Object {
+      "col": 43,
+      "line": 108,
+    },
+    "endLoc": Object {
+      "col": 43,
+      "line": 108,
+    },
+    "startBody": Object {
+      "col": 4,
+      "line": 95,
+    },
+    "startLoc": Object {
+      "col": 4,
+      "line": 94,
+    },
+  },
+  "addons-info-options-styles--full-control-over-styles-using-a-function": Object {
+    "endBody": Object {
+      "col": 43,
+      "line": 123,
+    },
+    "endLoc": Object {
+      "col": 43,
+      "line": 123,
+    },
+    "startBody": Object {
+      "col": 4,
+      "line": 112,
+    },
+    "startLoc": Object {
+      "col": 4,
+      "line": 111,
+    },
+  },
+  "addons-info-options-tablecomponent--use-a-custom-component-for-the-table": Object {
+    "endBody": Object {
+      "col": 41,
+      "line": 130,
+    },
+    "endLoc": Object {
+      "col": 41,
+      "line": 130,
+    },
+    "startBody": Object {
+      "col": 2,
+      "line": 128,
+    },
+    "startLoc": Object {
+      "col": 2,
+      "line": 127,
+    },
+  },
+  "addons-info-react-docgen--comments-from-component-declaration": Object {
+    "endBody": Object {
+      "col": 70,
+      "line": 28,
+    },
+    "endLoc": Object {
+      "col": 70,
+      "line": 28,
+    },
+    "startBody": Object {
+      "col": 4,
+      "line": 26,
+    },
+    "startLoc": Object {
+      "col": 4,
+      "line": 25,
+    },
+  },
+  "addons-info-react-docgen--comments-from-flow-declarations": Object {
+    "endBody": Object {
+      "col": 85,
+      "line": 22,
+    },
+    "endLoc": Object {
+      "col": 85,
+      "line": 22,
+    },
+    "startBody": Object {
+      "col": 4,
+      "line": 20,
+    },
+    "startLoc": Object {
+      "col": 4,
+      "line": 19,
+    },
+  },
+  "addons-info-react-docgen--comments-from-proptype-declarations": Object {
+    "endBody": Object {
+      "col": 79,
+      "line": 16,
+    },
+    "endLoc": Object {
+      "col": 79,
+      "line": 16,
+    },
+    "startBody": Object {
+      "col": 4,
+      "line": 14,
+    },
+    "startLoc": Object {
+      "col": 4,
+      "line": 13,
+    },
+  },
+}
+`;
+
+exports[`inject-decorator positive injects stories decorator after the all "storiesOf" functions 1`] = `
+"import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { withInfo } from '@storybook/addon-info';
+import { action } from '@storybook/addon-actions';
+
+import DocgenButton from '../components/DocgenButton';
+import FlowTypeButton from '../components/FlowTypeButton';
+import BaseButton from '../components/BaseButton';
+import TableComponent from '../components/TableComponent';
+
+storiesOf('Addons|Info.React Docgen', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+  .add(
+    'Comments from PropType declarations',
+    withInfo(
+      'Comments above the PropType declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <DocgenButton onClick={action('clicked')} label=\\"Docgen Button\\" />)
+  )
+  .add(
+    'Comments from Flow declarations',
+    withInfo(
+      'Comments above the Flow declarations should be extracted from the React component file itself and rendered in the Info Addon prop table'
+    )(() => <FlowTypeButton onClick={action('clicked')} label=\\"Flow Typed Button\\" />)
+  )
+  .add(
+    'Comments from component declaration',
+    withInfo(
+      'Comments above the component declaration should be extracted from the React component file itself and rendered below the Info Addon heading'
+    )(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
+  );
+
+const markdownDescription = \`
+#### You can use markdown in your withInfo() description.
+
+Sometimes you might want to manually include some code examples:
+~~~js
+const Button = () => <button />;
+~~~
+
+Maybe include a [link](http://storybook.js.org) to your project as well.
+\`;
+
+storiesOf('Addons|Info.Markdown', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Displays Markdown in description',
+  withInfo(markdownDescription)(() => <BaseButton onClick={action('clicked')} label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.inline', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Inlines component inside story',
+  withInfo({
+    text: 'Component should be inlined between description and PropType table',
+    inline: true, // Displays info inline vs click button to view
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.header', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Shows or hides Info Addon header',
+  withInfo({
+    text: 'The Info Addon header should be hidden',
+    header: false, // Toggles display of header with component name and description
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.source', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Shows or hides Info Addon source',
+  withInfo({
+    text: 'The Info Addon source section should be hidden',
+    source: false, // Displays the source of story Component
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.propTables', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Shows additional component prop tables',
+  withInfo({
+    text: 'There should be a prop table added for a component not included in the story',
+    propTables: [FlowTypeButton],
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Options.propTablesExclude', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Exclude component from prop tables',
+  withInfo({
+    text: 'This can exclude extraneous components from being displayed in prop tables.',
+    propTablesExclude: [FlowTypeButton],
+  })(() => (
+    <div>
+      <BaseButton label=\\"Button\\" />
+      <FlowTypeButton label=\\"Flow Typed Button\\" />
+    </div>
+  ))
+);
+
+storiesOf('Addons|Info.Options.styles', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+  .add(
+    'Extend info styles with an object',
+    withInfo({
+      styles: {
+        button: {
+          base: {
+            background: 'purple',
+          },
+        },
+        header: {
+          h1: {
+            color: 'green',
+          },
+        },
+      },
+    })(() => <BaseButton label=\\"Button\\" />)
+  )
+  .add(
+    'Full control over styles using a function',
+    withInfo({
+      styles: stylesheet => ({
+        ...stylesheet,
+        header: {
+          ...stylesheet.header,
+          h1: {
+            ...stylesheet.header.h1,
+            color: 'red',
+          },
+        },
+      }),
+    })(() => <BaseButton label=\\"Button\\" />)
+  );
+
+storiesOf('Addons|Info.Options.TableComponent', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  'Use a custom component for the table',
+  withInfo({
+    TableComponent,
+  })(() => <BaseButton label=\\"Button\\" />)
+);
+
+storiesOf('Addons|Info.Decorator', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))
+  .addDecorator((story, context) =>
+    withInfo('Info could be used as a global or local decorator as well.')(story)(context)
+  )
+  .add('Use Info as story decorator', () => <BaseButton label=\\"Button\\" />);
+
+const hoc = WrapComponent => ({ ...props }) => <WrapComponent {...props} />;
+
+const Input = hoc(() => <input type=\\"text\\" />);
+
+const TextArea = hoc(({ children }) => <textarea>{children}</textarea>);
+
+storiesOf('Addons|Info.GitHub issues', module).addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__)).add(
+  '#1814',
+  withInfo('Allow Duplicate DisplayNames for HOC #1814')(() => (
+    <div>
+      <Input />
+      <TextArea />
+    </div>
+  ))
+);
+"
+`;
+
+exports[`inject-decorator stories with ugly comments in ts should delete ugly comments from the generated story source 1`] = `
+"
+
+
+import React from 'react';
+
+@Component({
+  selector: 'storybook-comp-with-store',
+  template: '<div>{{this.getSotreState()}}</div>',
+})
+class WithStoreComponent {
+  private store: Store<any>;
+
+  constructor(store: Store<any>) {
+    this.store = store;
+  }
+
+  getSotreState(): string {
+    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
+  }
+}
+
+
+
+import { storiesOf } from '@storybook/react';
+
+ const x = 0;
+
+
+storiesOf('Foo', module)
+  .add('bar', () => <div>baz</div>);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/"
+`;
+
+exports[`inject-decorator stories with ugly comments should delete ugly comments from the generated story source 1`] = `
+"
+
+
+import React from 'react';
+
+
+
+import { storiesOf } from '@storybook/react';
+
+ const x = 0;
+
+
+storiesOf('Foo', module)
+  .add('bar', () => <div>baz</div>);
+
+/*
+ This is actually a good comment that will help
+ users to understand what's going on here.
+*/"
+`;
+
+exports[`inject-decorator will not change the source when there are no "storiesOf" functions 1`] = `
+"var addSourceDecorator = require(\\"@storybook/source-loader\\").addSource;
+while(true) {
+  console.log(\\"it's a kind of magic\\");
+}"
+`;
diff --git a/lib/source-loader/src/abstract-syntax-tree/default-options.js b/lib/source-loader/src/abstract-syntax-tree/default-options.js
new file mode 100644
index 00000000000..65ca9c768a2
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/default-options.js
@@ -0,0 +1,12 @@
+const defaultOptions = {
+  prettierConfig: {
+    printWidth: 100,
+    tabWidth: 2,
+    bracketSpacing: true,
+    trailingComma: 'es5',
+    singleQuote: true,
+  },
+  uglyCommentsRegex: [/^eslint-.*/, /^global.*/],
+};
+
+export default defaultOptions;
diff --git a/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
new file mode 100644
index 00000000000..a79e96fec7d
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/generate-helpers.js
@@ -0,0 +1,172 @@
+import { patchNode } from './parse-helpers';
+import getParser from './parsers';
+import {
+  splitSTORYOF,
+  findAddsMap,
+  findDependencies,
+  splitExports,
+  popParametersObjectFromDefaultExport,
+  findExportsMap as generateExportsMap,
+} from './traverse-helpers';
+
+function isUglyComment(comment, uglyCommentsRegex) {
+  return uglyCommentsRegex.some(regex => regex.test(comment));
+}
+
+function generateSourceWithoutUglyComments(source, { comments, uglyCommentsRegex }) {
+  let lastIndex = 0;
+  const parts = [source];
+
+  comments
+    .filter(comment => isUglyComment(comment.value.trim(), uglyCommentsRegex))
+    .map(patchNode)
+    .forEach(comment => {
+      parts.pop();
+
+      const start = source.slice(lastIndex, comment.start);
+      const end = source.slice(comment.end);
+
+      parts.push(start, end);
+      lastIndex = comment.end;
+    });
+
+  return parts.join('');
+}
+
+function prettifyCode(source, { prettierConfig, parser, filepath }) {
+  let config = prettierConfig;
+  let foundParser = null;
+  if (parser === 'flow') foundParser = 'flow';
+  if (parser === 'javascript' || /jsx?/.test(parser)) foundParser = 'javascript';
+  if (parser === 'typescript' || /tsx?/.test(parser)) foundParser = 'typescript';
+
+  if (!config.parser) {
+    config = {
+      ...prettierConfig,
+    };
+  } else if (filepath) {
+    config = {
+      ...prettierConfig,
+      filepath,
+    };
+  } else {
+    config = {
+      ...prettierConfig,
+    };
+  }
+
+  try {
+    return getParser(foundParser || 'javascript').format(source, config);
+  } catch (e) {
+    // Can fail when the source is a JSON
+    return source;
+  }
+}
+
+const STORY_DECORATOR_STATEMENT =
+  '.addDecorator(withSourceLoader(__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__))';
+const ADD_PARAMETERS_STATEMENT =
+  '.addParameters({ storySource: { source: __STORY__, locationsMap: __ADDS_MAP__ } })';
+const IMPORT_DECLARATION_FOR_EXPORTED_STORIES_DECORATOR =
+  'var addSourceDecorator = require("@storybook/source-loader").addSource;\n';
+const applyExportDecoratorStatement = part =>
+  ` addSourceDecorator(${part}, {__STORY__, __ADDS_MAP__,__MAIN_FILE_LOCATION__,__MODULE_DEPENDENCIES__,__LOCAL_DEPENDENCIES__,__SOURCE_PREFIX__,__IDS_TO_FRAMEWORKS__});`;
+
+export function generateSourceWithDecorators(source, ast, withParameters) {
+  const { comments = [] } = ast;
+
+  const partsUsingStoryOfToken = splitSTORYOF(ast, source);
+
+  if (partsUsingStoryOfToken.length > 1) {
+    const newSource = partsUsingStoryOfToken.join(
+      (withParameters ? ADD_PARAMETERS_STATEMENT : '') + STORY_DECORATOR_STATEMENT
+    );
+
+    return {
+      storyOfTokenFound: true,
+      changed: partsUsingStoryOfToken.length > 1,
+      source: newSource,
+      comments,
+    };
+  }
+
+  const partsUsingExports = splitExports(ast, source);
+
+  const newSource =
+    IMPORT_DECLARATION_FOR_EXPORTED_STORIES_DECORATOR +
+    partsUsingExports
+      .map((part, i) => (i % 2 === 0 ? part : applyExportDecoratorStatement(part)))
+      .join('');
+
+  return {
+    exportTokenFound: true,
+    changed: partsUsingExports.length > 1,
+    source: newSource,
+    comments,
+  };
+}
+
+export function generateSourceWithoutDecorators(source, ast) {
+  const { comments = [] } = ast;
+
+  return {
+    changed: true,
+    source,
+    comments,
+  };
+}
+
+export function generateAddsMap(ast, storiesOfIdentifiers) {
+  return findAddsMap(ast, storiesOfIdentifiers);
+}
+
+export function generateStoriesLocationsMap(ast, storiesOfIdentifiers) {
+  const usingAddsMap = generateAddsMap(ast, storiesOfIdentifiers);
+  const { addsMap } = usingAddsMap;
+
+  if (Object.keys(addsMap).length > 0) {
+    return usingAddsMap;
+  }
+  const usingExportsMap = generateExportsMap(ast);
+
+  return usingExportsMap || usingAddsMap;
+}
+
+export function generateDependencies(ast) {
+  return findDependencies(ast);
+}
+
+export function generateStorySource({ source, ...options }) {
+  let storySource = source;
+
+  storySource = generateSourceWithoutUglyComments(storySource, options);
+  storySource = prettifyCode(storySource, options);
+
+  return storySource;
+}
+
+export function generateSourcesInExportedParameters(source, ast, additionalParameters) {
+  const {
+    splicedSource,
+    parametersSliceOfCode,
+    indexWhereToAppend,
+    foundParametersProperty,
+  } = popParametersObjectFromDefaultExport(source, ast);
+  if (indexWhereToAppend !== -1) {
+    const additionalParametersAsJson = JSON.stringify({ storySource: additionalParameters }).slice(
+      0,
+      -1
+    );
+    const propertyDeclaration = foundParametersProperty ? '' : 'parameters: ';
+    const comma = foundParametersProperty ? '' : ',';
+    const newParameters = `${propertyDeclaration}${additionalParametersAsJson},${parametersSliceOfCode.substring(
+      1
+    )}${comma}`;
+    const result =
+      splicedSource.substring(0, indexWhereToAppend) +
+      newParameters +
+      splicedSource.substring(indexWhereToAppend);
+    return result;
+  }
+  return source;
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
new file mode 100644
index 00000000000..9cd8008f9f1
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.js
@@ -0,0 +1,86 @@
+import defaultOptions from './default-options';
+import getParser from './parsers';
+
+import {
+  generateSourceWithDecorators,
+  generateSourceWithoutDecorators,
+  generateStorySource,
+  generateStoriesLocationsMap,
+  generateDependencies,
+  generateSourcesInExportedParameters,
+} from './generate-helpers';
+
+function extendOptions(source, comments, filepath, options) {
+  return {
+    ...defaultOptions,
+    ...options,
+    source,
+    comments,
+    filepath,
+  };
+}
+
+function inject(source, filepath, options = {}, log = message => {}) {
+  const { injectDecorator = true, inspectDependencies } = options;
+  const obviouslyNotCode = ['md', 'txt', 'json'].includes(options.parser);
+  let parser = null;
+  try {
+    parser = getParser(options.parser);
+  } catch (e) {
+    log(new Error(`(not fatal, only impacting storysource) Could not load a parser (${e})`));
+  }
+
+  if (obviouslyNotCode || !parser) {
+    return {
+      source,
+      storySource: {},
+      addsMap: {},
+      changed: false,
+      dependencies: [],
+    };
+  }
+  const ast = parser.parse(source);
+
+  const { changed, source: cleanedSource, comments, exportTokenFound } =
+    injectDecorator === true
+      ? generateSourceWithDecorators(source, ast, options.injectParameters)
+      : generateSourceWithoutDecorators(source, ast);
+
+  const storySource = generateStorySource(extendOptions(source, comments, filepath, options));
+  const newAst = parser.parse(storySource);
+  const { dependencies, storiesOfIdentifiers } = inspectDependencies
+    ? generateDependencies(newAst)
+    : { dependencies: [], storiesOfIdentifiers: {} };
+  const { addsMap, idsToFrameworks } = generateStoriesLocationsMap(newAst, storiesOfIdentifiers);
+
+  let newSource = cleanedSource;
+  if (exportTokenFound) {
+    const cleanedSourceAst = parser.parse(cleanedSource);
+    newSource = generateSourcesInExportedParameters(cleanedSource, cleanedSourceAst, {
+      source: storySource,
+      locationsMap: addsMap,
+    });
+  }
+
+  if (!changed && Object.keys(addsMap || {}).length === 0) {
+    return {
+      source: newSource,
+      storySource,
+      addsMap: {},
+      changed,
+      dependencies,
+      idsToFrameworks: idsToFrameworks || {},
+    };
+  }
+
+  return {
+    source: newSource,
+    storySource,
+    addsMap,
+    changed,
+    dependencies,
+    idsToFrameworks: idsToFrameworks || {},
+  };
+}
+
+export default inject;
diff --git a/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
new file mode 100644
index 00000000000..755feb9117f
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/inject-decorator.test.js
@@ -0,0 +1,172 @@
+import fs from 'fs';
+import path from 'path';
+import injectDecorator from './inject-decorator';
+
+describe('inject-decorator', () => {
+  describe('positive', () => {
+    const mockFilePath = './__mocks__/inject-decorator.stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'javascript',
+    });
+
+    it('returns "changed" flag', () => {
+      expect(result.changed).toBeTruthy();
+    });
+
+    it('injects stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+
+    it('calculates "adds" map', () => {
+      expect(result.addsMap).toMatchSnapshot();
+    });
+  });
+
+  describe('positive - angular', () => {
+    const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
+
+    it('returns "changed" flag', () => {
+      expect(result.changed).toBeTruthy();
+    });
+
+    it('injects stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+
+    it('calculates "adds" map', () => {
+      expect(result.addsMap).toMatchSnapshot();
+    });
+  });
+
+  describe('positive - flow', () => {
+    const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'flow',
+    });
+
+    it('returns "changed" flag', () => {
+      expect(result.changed).toBeTruthy();
+    });
+
+    it('injects stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+
+    it('calculates "adds" map', () => {
+      expect(result.addsMap).toMatchSnapshot();
+    });
+  });
+
+  describe('positive - ts', () => {
+    const mockFilePath = './__mocks__/inject-decorator.ts.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
+
+    it('returns "changed" flag', () => {
+      expect(result.changed).toBeTruthy();
+    });
+
+    it('injects stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+
+    it('calculates "adds" map', () => {
+      expect(result.addsMap).toMatchSnapshot();
+    });
+  });
+
+  describe('stories with ugly comments', () => {
+    const mockFilePath = './__mocks__/inject-decorator.ugly-comments-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'javascript',
+    });
+
+    it('should delete ugly comments from the generated story source', () => {
+      expect(result.storySource).toMatchSnapshot();
+    });
+  });
+
+  describe('stories with ugly comments in ts', () => {
+    const mockFilePath = './__mocks__/inject-decorator.ts.ugly-comments-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      parser: 'typescript',
+    });
+
+    it('should delete ugly comments from the generated story source', () => {
+      expect(result.storySource).toMatchSnapshot();
+    });
+  });
+
+  it('will not change the source when there are no "storiesOf" functions', () => {
+    const mockFilePath = './__mocks__/inject-decorator.no-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath));
+
+    expect(result.changed).toBeFalsy();
+    expect(result.addsMap).toEqual({});
+    expect(result.source).toMatchSnapshot();
+  });
+
+  describe('injectDecorator option is false', () => {
+    const mockFilePath = './__mocks__/inject-decorator.stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'javascript',
+    });
+
+    it('does not inject stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+  });
+
+  describe('injectDecorator option is false - angular', () => {
+    const mockFilePath = './__mocks__/inject-decorator.angular-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'typescript',
+    });
+
+    it('does not inject stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+  });
+
+  describe('injectDecorator option is false - flow', () => {
+    const mockFilePath = './__mocks__/inject-decorator.flow-stories.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'flow',
+    });
+
+    it('does not inject stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+  });
+
+  describe('injectDecorator option is false - ts', () => {
+    const mockFilePath = './__mocks__/inject-decorator.ts.txt';
+    const source = fs.readFileSync(mockFilePath, 'utf-8');
+    const result = injectDecorator(source, path.resolve(__dirname, mockFilePath), {
+      injectDecorator: false,
+      parser: 'typescript',
+    });
+
+    it('does not inject stories decorator after the all "storiesOf" functions', () => {
+      expect(result.source).toMatchSnapshot();
+    });
+  });
+});
diff --git a/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
new file mode 100644
index 00000000000..a96ed14b094
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parse-helpers.js
@@ -0,0 +1,159 @@
+const { toId } = require('@storybook/router/utils');
+
+const STORIES_OF = 'storiesOf';
+
+function pushParts(source, parts, from, to) {
+  const start = source.slice(from, to);
+  parts.push(start);
+
+  const end = source.slice(to);
+  parts.push(end);
+}
+
+function getKindFromStoryOfNode(object) {
+  if (object.arguments.length < 1) {
+    return '';
+  }
+
+  const kindArgument = object.arguments[0];
+
+  if (kindArgument.type === 'Literal' || kindArgument.type === 'StringLiteral') {
+    return kindArgument.value;
+  }
+
+  if (kindArgument.type === 'TemplateLiteral') {
+    // we can generate template, but it will not be a real value
+    // until the full template compilation. probably won't fix.
+    return '';
+  }
+
+  // other options may include some complex usages.
+  return '';
+}
+
+function findRelatedKind(object) {
+  if (!object || !object.callee) {
+    return '';
+  }
+
+  if (object.callee.name === STORIES_OF) {
+    return getKindFromStoryOfNode(object);
+  }
+
+  return findRelatedKind(object.callee.object);
+}
+
+export function patchNode(node) {
+  if (node.range && node.range.length === 2 && node.start === undefined && node.end === undefined) {
+    const [start, end] = node.range;
+
+    // eslint-disable-next-line no-param-reassign
+    node.start = start;
+    // eslint-disable-next-line no-param-reassign
+    node.end = end;
+  }
+
+  if (!node.range && node.start !== undefined && node.end !== undefined) {
+    // eslint-disable-next-line no-param-reassign
+    node.range = [node.start, node.end];
+  }
+
+  return node;
+}
+
+export function handleExportedName(kind, storyName, node) {
+  const startLoc = {
+    col: node.loc.start.column,
+    line: node.loc.start.line,
+  };
+  const endLoc = {
+    col: node.loc.end.column,
+    line: node.loc.end.line,
+  };
+  return {
+    [toId(kind, storyName)]: {
+      startLoc,
+      endLoc,
+      startBody: startLoc,
+      endBody: endLoc,
+    },
+  };
+}
+
+export function handleADD(node, parent, storiesOfIdentifiers) {
+  if (!node.property || !node.property.name || node.property.name.indexOf('add') !== 0) {
+    return {};
+  }
+
+  const addArgs = parent.arguments;
+
+  if (!addArgs || addArgs.length < 2) {
+    return {};
+  }
+
+  let tmp = node.object;
+
+  while (tmp.callee && tmp.callee.object) {
+    tmp = tmp.callee.object;
+  }
+
+  const framework = tmp.callee && tmp.callee.name && storiesOfIdentifiers[tmp.callee.name];
+
+  const storyName = addArgs[0];
+  const body = addArgs[1];
+  const lastArg = addArgs[addArgs.length - 1];
+
+  if (storyName.type !== 'Literal' && storyName.type !== 'StringLiteral') {
+    // if story name is not literal, it's much harder to extract it
+    return {};
+  }
+
+  const kind = findRelatedKind(node.object) || '';
+  if (kind && storyName.value) {
+    const key = toId(kind, storyName.value);
+    let idToFramework;
+    if (key && framework) {
+      idToFramework = { [key]: framework };
+    }
+
+    return {
+      toAdd: {
+        [key]: {
+          // Debug: code: source.slice(storyName.start, lastArg.end),
+          startLoc: {
+            col: storyName.loc.start.column,
+            line: storyName.loc.start.line,
+          },
+          endLoc: {
+            col: lastArg.loc.end.column,
+            line: lastArg.loc.end.line,
+          },
+          startBody: {
+            col: body.loc.start.column,
+            line: body.loc.start.line,
+          },
+          endBody: {
+            col: body.loc.end.column,
+            line: body.loc.end.line,
+          },
+        },
+      },
+      idToFramework,
+    };
+  }
+  return {};
+}
+
+export function handleSTORYOF(node, parts, source, lastIndex) {
+  if (!node.callee || !node.callee.name || node.callee.name !== STORIES_OF) {
+    return lastIndex;
+  }
+
+  parts.pop();
+  pushParts(source, parts, lastIndex, node.end);
+  return node.end;
+}
+
+export function asImport(node) {
+  return node.source.value;
+}
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/index.js b/lib/source-loader/src/abstract-syntax-tree/parsers/index.js
new file mode 100644
index 00000000000..35a551ba0fb
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/index.js
@@ -0,0 +1,20 @@
+function getParser(type) {
+  if (type === 'javascript' || /jsx?/.test(type) || !type) {
+    // eslint-disable-next-line global-require
+    return require('./parser-js').default;
+  }
+
+  if (type === 'typescript' || /tsx?/.test(type)) {
+    // eslint-disable-next-line global-require
+    return require('./parser-ts').default;
+  }
+
+  if (type === 'flow') {
+    // eslint-disable-next-line global-require
+    return require('./parser-flow').default;
+  }
+
+  throw new Error(`Parser of type "${type}" is not supported`);
+}
+
+export default getParser;
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
new file mode 100644
index 00000000000..9414659af75
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-flow.js
@@ -0,0 +1,13 @@
+import parseFlow from 'prettier/parser-flow';
+
+function parse(source) {
+  return parseFlow.parsers.flow.parse(source);
+}
+function format(source) {
+  return parseFlow.parsers.flow.format(source);
+}
+
+export default {
+  parse,
+  format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
new file mode 100644
index 00000000000..98c459aef1d
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-js.js
@@ -0,0 +1,21 @@
+import parseJs from 'prettier/parser-babylon';
+
+function parse(source) {
+  try {
+    return parseJs.parsers.babel.parse(source);
+  } catch (error1) {
+    try {
+      return JSON.stringify(source);
+    } catch (error) {
+      throw error1;
+    }
+  }
+}
+function format(source) {
+  return parseJs.parsers.babel.format(source);
+}
+
+export default {
+  parse,
+  format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
new file mode 100644
index 00000000000..ef4e369bb22
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/parsers/parser-ts.js
@@ -0,0 +1,21 @@
+import parseTs from 'prettier/parser-typescript';
+
+function parse(source) {
+  try {
+    return parseTs.parsers.typescript.parse(source);
+  } catch (error1) {
+    try {
+      return JSON.stringify(source);
+    } catch (error) {
+      throw error1;
+    }
+  }
+}
+function format(source) {
+  return parseTs.parsers.typescript.format(source);
+}
+
+export default {
+  parse,
+  format,
+};
diff --git a/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
new file mode 100644
index 00000000000..8dd3b1a2061
--- /dev/null
+++ b/lib/source-loader/src/abstract-syntax-tree/traverse-helpers.js
@@ -0,0 +1,208 @@
+import { handleADD, handleSTORYOF, patchNode, handleExportedName } from './parse-helpers';
+
+const estraverse = require('estraverse');
+
+export function splitSTORYOF(ast, source) {
+  let lastIndex = 0;
+  const parts = [source];
+
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: node => {
+      patchNode(node);
+
+      if (node.type === 'CallExpression') {
+        lastIndex = handleSTORYOF(node, parts, source, lastIndex);
+      }
+    },
+  });
+
+  return parts;
+}
+export function splitExports(ast, source) {
+  const parts = [];
+  let lastIndex = 0;
+
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: node => {
+      patchNode(node);
+      if (
+        node.type === 'ExportNamedDeclaration' &&
+        node.declaration &&
+        node.declaration.declarations &&
+        node.declaration.declarations.length === 1 &&
+        node.declaration.declarations[0].type === 'VariableDeclarator' &&
+        node.declaration.declarations[0].id &&
+        node.declaration.declarations[0].id.name &&
+        node.declaration.declarations[0].init &&
+        ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
+          node.declaration.declarations[0].init.type
+        )
+      ) {
+        const functionNode = node.declaration.declarations[0].init;
+        parts.push(source.substring(lastIndex, functionNode.start - 1));
+        parts.push(source.substring(functionNode.start, functionNode.end));
+        lastIndex = functionNode.end;
+      }
+    },
+  });
+
+  if (source.length > lastIndex + 1) parts.push(source.substring(lastIndex + 1));
+  if (parts.length === 1) return [source];
+  return parts;
+}
+
+export function findAddsMap(ast, storiesOfIdentifiers) {
+  const addsMap = {};
+  const idsToFrameworks = {};
+
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: (node, parent) => {
+      patchNode(node);
+
+      if (node.type === 'MemberExpression') {
+        const { toAdd, idToFramework } = handleADD(node, parent, storiesOfIdentifiers);
+        Object.assign(addsMap, toAdd);
+        Object.assign(idsToFrameworks, idToFramework);
+      }
+    },
+  });
+
+  return { addsMap, idsToFrameworks };
+}
+
+// Handle cases like:
+//   export const withText = () => <Button />;
+//   withText.title = 'with text';
+function findStoryTitle(storyVar, ast) {
+  const titleAssignment = ast.program.body.find(
+    d =>
+      d.type === 'ExpressionStatement' &&
+      d.expression &&
+      d.expression.type === 'AssignmentExpression' &&
+      d.expression.left &&
+      d.expression.left.object &&
+      d.expression.left.object.type === 'Identifier' &&
+      d.expression.left.object.name === storyVar &&
+      d.expression.right &&
+      d.expression.right.type === 'StringLiteral'
+  );
+  return titleAssignment && titleAssignment.expression.right.value;
+}
+
+export function findExportsMap(ast) {
+  const addsMap = {};
+  const idsToFrameworks = {};
+  const metaDeclaration =
+    ast &&
+    ast.program &&
+    ast.program.body &&
+    ast.program.body.find(
+      d =>
+        d.type === 'ExportDefaultDeclaration' &&
+        d.declaration.type === 'ObjectExpression' &&
+        (d.declaration.properties || []).length
+    );
+
+  const titleProperty =
+    metaDeclaration &&
+    metaDeclaration.declaration &&
+    metaDeclaration.declaration.properties.find(p => p.key && p.key.name === 'title');
+
+  if (!titleProperty) {
+    return { addsMap, idsToFrameworks };
+  }
+  const title = titleProperty.value.value;
+
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: node => {
+      patchNode(node);
+      if (
+        node.type === 'ExportNamedDeclaration' &&
+        node.declaration &&
+        node.declaration.declarations &&
+        node.declaration.declarations.length === 1 &&
+        node.declaration.declarations[0].type === 'VariableDeclarator' &&
+        node.declaration.declarations[0].id &&
+        node.declaration.declarations[0].id.name &&
+        node.declaration.declarations[0].init &&
+        ['CallExpression', 'ArrowFunctionExpression', 'FunctionExpression'].includes(
+          node.declaration.declarations[0].init.type
+        )
+      ) {
+        let storyName = node.declaration.declarations[0].id.name;
+        storyName = findStoryTitle(storyName, ast) || storyName;
+        const toAdd = handleExportedName(title, storyName, node.declaration.declarations[0].init);
+        Object.assign(addsMap, toAdd);
+      }
+    },
+  });
+  return { addsMap, idsToFrameworks };
+}
+
+export function findDependencies(ast) {
+  const dependencies = [];
+  const storiesOfIdentifiers = {};
+
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: node => {
+      patchNode(node);
+
+      if (node.type === 'ImportDeclaration') {
+        const candidateSpecifier = (node.specifiers || []).find(
+          s => (s.imported || {}).name === 'storiesOf'
+        );
+        if (node.source.value.startsWith('@storybook/') && candidateSpecifier) {
+          Object.assign(storiesOfIdentifiers, {
+            [candidateSpecifier.local.name]: node.source.value,
+          });
+        }
+        dependencies.push(node.source.value);
+      }
+    },
+  });
+  return { dependencies, storiesOfIdentifiers };
+}
+
+export function popParametersObjectFromDefaultExport(source, ast) {
+  let splicedSource = source;
+  let parametersSliceOfCode = '';
+  let indexWhereToAppend = -1;
+  let foundParametersProperty = false;
+  estraverse.traverse(ast, {
+    fallback: 'iteration',
+    enter: node => {
+      patchNode(node);
+
+      if (
+        node.type === 'ExportDefaultDeclaration' &&
+        node.declaration.type === 'ObjectExpression' &&
+        (node.declaration.properties || []).length
+      ) {
+        const parametersProperty = node.declaration.properties.find(
+          p => p.key.name === 'parameters' && p.value.type === 'ObjectExpression'
+        );
+
+        foundParametersProperty = !!parametersProperty;
+
+        splicedSource = parametersProperty
+          ? source.substring(0, parametersProperty.value.start) +
+            source.substring(parametersProperty.value.end + 1)
+          : splicedSource;
+
+        parametersSliceOfCode = parametersProperty
+          ? source.substring(parametersProperty.value.start, parametersProperty.value.end)
+          : '{}';
+
+        indexWhereToAppend = parametersProperty
+          ? parametersProperty.value.start
+          : node.declaration.start + 1;
+      }
+    },
+  });
+  return { splicedSource, parametersSliceOfCode, indexWhereToAppend, foundParametersProperty };
+}
diff --git a/lib/source-loader/src/build.js b/lib/source-loader/src/build.js
new file mode 100644
index 00000000000..685077cd429
--- /dev/null
+++ b/lib/source-loader/src/build.js
@@ -0,0 +1,30 @@
+import { readStory } from './dependencies-lookup/readAsObject';
+import { getRidOfUselessFilePrefixes } from './dependencies-lookup/getRidOfUselessFilePrefixes';
+
+export function transform(inputSource) {
+  return readStory(this, inputSource)
+    .then(getRidOfUselessFilePrefixes)
+    .then(
+      ({
+        prefix,
+        resource,
+        source,
+        sourceJson,
+        addsMap,
+        dependencies,
+        localDependencies,
+        idsToFrameworks,
+      }) => `
+  var withSourceLoader = require('@storybook/source-loader').withSource;
+  var __SOURCE_PREFIX__ = "${prefix.replace(/\\([^\\ ])/g, '\\\\$1')}";
+  var __STORY__ = ${sourceJson};
+  var __ADDS_MAP__ = ${JSON.stringify(addsMap)};
+  var __MAIN_FILE_LOCATION__ = ${JSON.stringify(resource)};
+  var __MODULE_DEPENDENCIES__ = ${JSON.stringify(dependencies)};
+  var __LOCAL_DEPENDENCIES__ = ${JSON.stringify(localDependencies)};
+  var __IDS_TO_FRAMEWORKS__ = ${JSON.stringify(idsToFrameworks)};
+
+  ${source}
+  `
+    );
+}
diff --git a/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js b/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js
new file mode 100644
index 00000000000..1f0ca22ce8e
--- /dev/null
+++ b/lib/source-loader/src/dependencies-lookup/getRidOfUselessFilePrefixes.js
@@ -0,0 +1,46 @@
+import path from 'path';
+
+function commonDir(...resources) {
+  const firstResource = (resources[0] || '').split(path.sep);
+  let i = 1;
+  while (
+    i < firstResource.length &&
+    // eslint-disable-next-line no-loop-func
+    resources.every(resource => resource.startsWith(firstResource.slice(0, i).join(path.sep)))
+  ) {
+    i += 1;
+  }
+  return firstResource.slice(0, i - 1).join(path.sep);
+}
+
+export function getRidOfUselessFilePrefixes({
+  resource,
+  source,
+  sourceJson,
+  addsMap,
+  dependencies,
+  localDependencies,
+  idsToFrameworks,
+}) {
+  const commondir = commonDir(resource, ...Object.keys(localDependencies || {}));
+  return {
+    prefix: commondir,
+    source,
+    sourceJson,
+    addsMap,
+    dependencies,
+    idsToFrameworks,
+    resource:
+      commondir === resource
+        ? '/index.js'
+        : resource.substring(commondir.length).replace(path.sep === '\\' ? /\\/g : /\//g, '/'),
+    localDependencies: Object.assign(
+      {},
+      ...Object.entries(localDependencies || {}).map(([depFileName, dependency]) => ({
+        [depFileName
+          .substring(commondir.length)
+          .replace(new RegExp(path.sep === '\\' ? /\\/g : /\//g, 'g'), '/')]: dependency,
+      }))
+    ),
+  };
+}
diff --git a/lib/source-loader/src/dependencies-lookup/readAsObject.js b/lib/source-loader/src/dependencies-lookup/readAsObject.js
new file mode 100644
index 00000000000..3cff31e0b93
--- /dev/null
+++ b/lib/source-loader/src/dependencies-lookup/readAsObject.js
@@ -0,0 +1,122 @@
+import { getOptions } from 'loader-utils';
+import path from 'path';
+import injectDecorator from '../abstract-syntax-tree/inject-decorator';
+
+function extractDependenciesFrom(tree) {
+  return !Object.entries(tree || {}).length
+    ? []
+    : Object.entries(tree)
+        .map(([, value]) =>
+          (value.dependencies || []).concat(extractDependenciesFrom(value.localDependencies))
+        )
+        .reduce((acc, value) => acc.concat(value), []);
+}
+
+function extractLocalDependenciesFrom(tree) {
+  return Object.assign(
+    {},
+    ...Object.entries(tree || {}).map(([thisPath, value]) =>
+      Object.assign(
+        { [thisPath]: { code: value.source || value.code } },
+        extractLocalDependenciesFrom(value.localDependencies)
+      )
+    )
+  );
+}
+
+function readAsObject(classLoader, inputSource, mainFile) {
+  const options = getOptions(classLoader) || {};
+  const { inspectLocalDependencies } = options;
+  const result = injectDecorator(
+    inputSource,
+    classLoader.resourcePath,
+    {
+      ...options,
+      parser: options.parser || classLoader.extension,
+    },
+    classLoader.emitWarning.bind(classLoader)
+  );
+
+  const sourceJson = JSON.stringify(result.storySource || inputSource)
+    .replace(/\u2028/g, '\\u2028')
+    .replace(/\u2029/g, '\\u2029');
+
+  const addsMap = result.addsMap || {};
+  const dependencies = result.dependencies || [];
+  const source = mainFile ? result.source : inputSource;
+  const idsToFrameworks = result.idsToFrameworks || {};
+  const resource = classLoader.resourcePath || classLoader.resource;
+
+  const moduleDependencies = (result.dependencies || []).filter(d => d[0] === '.' || d[0] === '/');
+  const workspaceFileNames = inspectLocalDependencies
+    ? moduleDependencies.map(d => path.join(path.dirname(resource), d))
+    : [];
+
+  return Promise.all(
+    workspaceFileNames.map(
+      d =>
+        new Promise(resolve =>
+          classLoader.loadModule(d, (err1, compiledSource, sourceMap, theModule) => {
+            if (err1) {
+              classLoader.emitError(err1);
+            }
+            classLoader.fs.readFile(theModule.resource, (err2, dependencyInputData) => {
+              if (err2) {
+                classLoader.emitError(err2);
+              }
+              resolve({
+                d,
+                err: err1 || err2,
+                inputSource: dependencyInputData.toString(),
+                compiledSource,
+                sourceMap,
+                theModule,
+              });
+            });
+          })
+        )
+    )
+  )
+    .then(data =>
+      Promise.all(
+        data.map(({ inputSource: dependencyInputSource, theModule }) =>
+          readAsObject(
+            Object.assign({}, classLoader, {
+              resourcePath: theModule.resourcePath,
+              resource: theModule.resource,
+              extension: (theModule.resource || '').split('.').slice(-1)[0],
+            }),
+            dependencyInputSource
+          )
+        )
+      ).then(moduleObjects =>
+        Object.assign(
+          {},
+          ...moduleObjects.map(asObject => ({
+            [asObject.resource]: asObject,
+          }))
+        )
+      )
+    )
+    .then(localDependencies => ({
+      resource,
+      source,
+      sourceJson,
+      addsMap,
+      idsToFrameworks,
+      dependencies: dependencies
+        .concat(extractDependenciesFrom(localDependencies))
+        .filter(d => d[0] !== '.' && d[0] !== '/')
+        .map(d => (d[0] === '@' ? `${d.split('/')[0]}/${d.split('/')[1]}` : d.split('/')[0])),
+      localDependencies: Object.assign(
+        ...Object.entries(localDependencies).map(([name, value]) => ({
+          [name]: { code: value.source },
+        })),
+        extractLocalDependenciesFrom(localDependencies)
+      ),
+    }));
+}
+
+export function readStory(classLoader, inputSource) {
+  return readAsObject(classLoader, inputSource, true);
+}
diff --git a/lib/source-loader/src/events.js b/lib/source-loader/src/events.js
new file mode 100644
index 00000000000..ebeb7da51bd
--- /dev/null
+++ b/lib/source-loader/src/events.js
@@ -0,0 +1,2 @@
+export const ADDON_ID = 'storybook/source-loader';
+export const STORY_EVENT_ID = `${ADDON_ID}/set`;
diff --git a/lib/source-loader/src/index.js b/lib/source-loader/src/index.js
new file mode 100644
index 00000000000..bc39d946751
--- /dev/null
+++ b/lib/source-loader/src/index.js
@@ -0,0 +1,6 @@
+import { transform } from './build';
+
+export { STORY_EVENT_ID } from './events';
+export { addSource, withSource } from './preview';
+
+export default transform;
diff --git a/lib/source-loader/src/preview.js b/lib/source-loader/src/preview.js
new file mode 100644
index 00000000000..a40d84a72cd
--- /dev/null
+++ b/lib/source-loader/src/preview.js
@@ -0,0 +1,91 @@
+import addons from '@storybook/addons';
+import { STORY_EVENT_ID } from './events';
+
+const getLocation = (context, locationsMap) => locationsMap[context.id];
+
+function sendEvent(
+  context,
+  source,
+  locationsMap,
+  mainFileLocation,
+  dependencies,
+  localDependencies,
+  prefix,
+  idsToFrameworks
+) {
+  const channel = addons.getChannel();
+  const currentLocation = getLocation(context, locationsMap);
+
+  channel.emit(STORY_EVENT_ID, {
+    edition: {
+      source,
+      mainFileLocation,
+      dependencies,
+      localDependencies,
+      prefix,
+      idsToFrameworks,
+    },
+    story: {
+      kind: context.kind,
+      story: context.story,
+    },
+    location: {
+      currentLocation,
+      locationsMap,
+    },
+  });
+}
+
+export function addSource(storyFn, sourceContext) {
+  const {
+    __STORY__: source,
+    __ADDS_MAP__: locationsMap = {},
+    __MAIN_FILE_LOCATION__: mainFileLocation = '/index.js',
+    __MODULE_DEPENDENCIES__: dependencies = [],
+    __LOCAL_DEPENDENCIES__: localDependencies = {},
+    __SOURCE_PREFIX__: prefix,
+    __IDS_TO_FRAMEWORKS__: idsToFrameworks,
+  } = sourceContext;
+  const decorated = context => {
+    sendEvent(
+      context,
+      source,
+      locationsMap,
+      mainFileLocation,
+      dependencies,
+      localDependencies,
+      prefix,
+      idsToFrameworks
+    );
+    if (typeof storyFn === 'function') {
+      return storyFn(context);
+    }
+    return storyFn;
+  };
+  decorated.story = (storyFn || {}).story;
+  return decorated;
+}
+
+export function withSource(
+  source,
+  locationsMap = {},
+  mainFileLocation = '/index.js',
+  dependencies = [],
+  localDependencies = {},
+  prefix,
+  idsToFrameworks
+) {
+  return (storyFn, context) => {
+    sendEvent(
+      context,
+      source,
+      locationsMap,
+      mainFileLocation,
+      dependencies,
+      localDependencies,
+      prefix,
+      idsToFrameworks
+    );
+    return storyFn(context);
+  };
+}
diff --git a/lib/theming/package.json b/lib/theming/package.json
index abd05eb752f..88549cdb4d8 100644
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/theming",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -23,7 +23,7 @@
   "dependencies": {
     "@emotion/core": "^10.0.9",
     "@emotion/styled": "^10.0.7",
-    "@storybook/client-logger": "5.2.0-alpha.23",
+    "@storybook/client-logger": "5.2.0-alpha.32",
     "common-tags": "^1.8.0",
     "core-js": "^3.0.1",
     "deep-object-diff": "^1.1.0",
diff --git a/lib/ui/README.md b/lib/ui/README.md
index ef00985cca4..57178dd4bc2 100644
--- a/lib/ui/README.md
+++ b/lib/ui/README.md
@@ -174,3 +174,14 @@ The above action(or the `handleShortcut` method) accepts events as a constant de
 ### URL Changes
 
 TODO: state we use reach/router customized to query params
+
+### Story Order
+
+Stories are sorted in the order in which they were imported. This can be overridden by adding storySort to the Parameters for the stories in `.storybook/config.js`:
+```js
+addParameters({
+  options: {
+    storySort: (a, b) => a[1].id.localeCompare(b[1].id),
+  },
+});
+```
diff --git a/lib/ui/package.json b/lib/ui/package.json
index 5d3b97f9064..2e46bd2d8e5 100644
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/ui",
-  "version": "5.2.0-alpha.23",
+  "version": "5.2.0-alpha.32",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -22,14 +22,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.2.0-alpha.23",
-    "@storybook/api": "5.2.0-alpha.23",
-    "@storybook/channels": "5.2.0-alpha.23",
-    "@storybook/client-logger": "5.2.0-alpha.23",
-    "@storybook/components": "5.2.0-alpha.23",
-    "@storybook/core-events": "5.2.0-alpha.23",
-    "@storybook/router": "5.2.0-alpha.23",
-    "@storybook/theming": "5.2.0-alpha.23",
+    "@storybook/addons": "5.2.0-alpha.32",
+    "@storybook/api": "5.2.0-alpha.32",
+    "@storybook/channels": "5.2.0-alpha.32",
+    "@storybook/client-logger": "5.2.0-alpha.32",
+    "@storybook/components": "5.2.0-alpha.32",
+    "@storybook/core-events": "5.2.0-alpha.32",
+    "@storybook/router": "5.2.0-alpha.32",
+    "@storybook/theming": "5.2.0-alpha.32",
     "copy-to-clipboard": "^3.0.8",
     "core-js": "^3.0.1",
     "core-js-pure": "^3.0.1",
diff --git a/lib/ui/src/components/layout/container.js b/lib/ui/src/components/layout/container.js
index cf5f338ad77..3a80a66cafe 100644
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@@ -486,11 +486,13 @@ class Layout extends Component {
         {isDragging ? <HoverBlocker /> : null}
         {children({
           mainProps: {
+            viewMode,
             animate: !isDragging,
             isFullscreen,
             position: getMainPosition({ bounds, resizerNav, isNavHidden, isFullscreen, margin }),
           },
           previewProps: {
+            viewMode,
             animate: !isDragging,
             isFullscreen,
             isToolshown,
@@ -506,6 +508,7 @@ class Layout extends Component {
             }),
           },
           navProps: {
+            viewMode,
             animate: !isDragging,
             hidden: isNavHidden,
             position: {
@@ -516,6 +519,7 @@ class Layout extends Component {
             },
           },
           panelProps: {
+            viewMode,
             animate: !isDragging,
             align: options.panelPosition,
             hidden: isPanelHidden,
diff --git a/lib/ui/src/components/layout/layout.stories.js b/lib/ui/src/components/layout/layout.stories.js
index 9d9eab205cb..b813208e58a 100644
--- a/lib/ui/src/components/layout/layout.stories.js
+++ b/lib/ui/src/components/layout/layout.stories.js
@@ -137,6 +137,9 @@ const realProps = {
 };
 
 storiesOf('UI|Layout/Desktop', module)
+  .addParameters({
+    component: Desktop,
+  })
   .addDecorator(withKnobs)
   .addDecorator(storyFn => {
     const mocked = boolean('mock', true);
@@ -183,6 +186,9 @@ storiesOf('UI|Layout/Desktop', module)
   ));
 
 storiesOf('UI|Layout/Mobile', module)
+  .addParameters({
+    component: Mobile,
+  })
   .addDecorator(withKnobs)
   .addDecorator(storyFn => {
     const mocked = boolean('mock', true);
diff --git a/lib/ui/src/components/notifications/item.stories.js b/lib/ui/src/components/notifications/item.stories.js
index f3a90bd5da1..d4901c14969 100644
--- a/lib/ui/src/components/notifications/item.stories.js
+++ b/lib/ui/src/components/notifications/item.stories.js
@@ -6,24 +6,24 @@ export default {
   component: NotificationItem,
   title: 'UI|Notifications/Item',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: /.*Data$/,
 };
 
-function buildExample(notification) {
-  const story = () => <NotificationItem notification={notification} />;
-  story.storyData = { notification };
-  return story;
-}
-
-export const simple = buildExample({
+export const simpleData = {
   content: '🎉 Storybook is cool!',
-});
+};
 
-export const longText = buildExample({
+export const longData = {
   content: '🎉 This is a long message that extends over two lines!',
-});
+};
 
-export const withLink = buildExample({
-  ...simple.storyData.notification,
+export const linkData = {
   content: '🎉 Storybook X.X is available! Download now »',
   link: '/some/path',
-});
+};
+
+export const simple = () => <NotificationItem notification={simpleData} />;
+
+export const longText = () => <NotificationItem notification={longData} />;
+
+export const withLink = () => <NotificationItem notification={linkData} />;
diff --git a/lib/ui/src/components/notifications/notifications.stories.js b/lib/ui/src/components/notifications/notifications.stories.js
index 9c77ae15349..99037e16568 100644
--- a/lib/ui/src/components/notifications/notifications.stories.js
+++ b/lib/ui/src/components/notifications/notifications.stories.js
@@ -1,31 +1,29 @@
 import React from 'react';
 
 import NotificationList from './notifications';
-import * as NotificationItemStories from './item.stories';
+import itemMeta, * as itemStories from './item.stories';
 
 export default {
   component: NotificationList,
   title: 'UI|Notifications/Notifications',
   decorators: [storyFn => <div style={{ width: '240px', margin: '1rem' }}>{storyFn()}</div>],
+  excludeStories: /.*Data$/,
 };
 
-const notifications = Object.values(NotificationItemStories)
-  .filter(s => s.storyData)
-  .map(({ storyData: { notification } }, index) => ({
-    ...notification,
-    id: index.toString(),
-  }));
+const items = Array.from(Object.entries(itemStories))
+  .filter(entry => itemMeta.excludeStories.exec(entry[0]))
+  .map(entry => entry[1]);
 
-export const single = () => <NotificationList notifications={notifications.slice(0, 1)} />;
-single.storyData = { notifications: notifications.slice(0, 1) };
+export const singleData = [items[0]];
+export const allData = items;
 
-export const all = () => <NotificationList notifications={notifications} />;
-all.storyData = { notifications };
+export const single = () => <NotificationList notifications={singleData} />;
+
+export const all = () => <NotificationList notifications={allData} />;
 
 export const placement = () => (
   <NotificationList
     placement={{ position: 'fixed', left: 20, bottom: 20 }}
-    notifications={notifications}
+    notifications={allData}
   />
 );
-all.storyData = { notifications };
diff --git a/lib/ui/src/components/panel/panel.stories.js b/lib/ui/src/components/panel/panel.stories.js
index b271c1289b1..6c59dfafcbb 100644
--- a/lib/ui/src/components/panel/panel.stories.js
+++ b/lib/ui/src/components/panel/panel.stories.js
@@ -32,6 +32,9 @@ const toggleVisibility = action('toggleVisibility');
 const togglePosition = action('togglePosition');
 
 storiesOf('UI|Panel', module)
+  .addParameters({
+    component: Panel,
+  })
   .add('default', () => (
     <Panel
       panels={panels}
diff --git a/lib/ui/src/components/preview/background.js b/lib/ui/src/components/preview/background.js
index 60a4ecd7174..aad35b97a87 100644
--- a/lib/ui/src/components/preview/background.js
+++ b/lib/ui/src/components/preview/background.js
@@ -93,7 +93,7 @@ const Background = styled.div(
     top: 0,
     left: 0,
     width: '100%',
-    height: '100%',
+    minHeight: '100%',
     transition: 'background .1s linear',
     iframe: {
       width: '100%',
diff --git a/lib/ui/src/components/preview/iframe.stories.js b/lib/ui/src/components/preview/iframe.stories.js
index 74521a5131f..f7ae25fb02b 100644
--- a/lib/ui/src/components/preview/iframe.stories.js
+++ b/lib/ui/src/components/preview/iframe.stories.js
@@ -43,6 +43,8 @@ export const errorStory = () => (
 );
 // We need to disable this one in Chromatic because the screenshot includes the uploaded URL sadly:
 //   eg. https://www.chromaticqa.com/snapshot?appId=5a375b97f4b14f0020b0cda3&id=5c52edb4323f9000249aae72
-errorStory.parameters = {
-  chromatic: { disable: true },
+errorStory.story = {
+  parameters: {
+    chromatic: { disable: true },
+  },
 };
diff --git a/lib/ui/src/components/preview/preview.stories.js b/lib/ui/src/components/preview/preview.stories.js
index e6a2c84175c..1258e4d91df 100644
--- a/lib/ui/src/components/preview/preview.stories.js
+++ b/lib/ui/src/components/preview/preview.stories.js
@@ -38,5 +38,8 @@ export const previewProps = {
 };
 
 storiesOf('UI|Preview/Preview', module)
+  .addParameters({
+    component: Preview,
+  })
   .add('no tabs', () => <Preview {...previewProps} getElements={() => []} />)
   .add('with tabs', () => <Preview {...previewProps} />);
diff --git a/lib/ui/src/components/sidebar/Sidebar.stories.js b/lib/ui/src/components/sidebar/Sidebar.stories.js
index feb26bf28a6..826c0bae408 100644
--- a/lib/ui/src/components/sidebar/Sidebar.stories.js
+++ b/lib/ui/src/components/sidebar/Sidebar.stories.js
@@ -1,19 +1,20 @@
 import React from 'react';
 
 import Sidebar from './Sidebar';
-import * as SidebarHeadingStories from './SidebarHeading.stories';
-import * as SidebarStoriesStories from './SidebarStories.stories';
+import { standardData as standardHeaderData } from './SidebarHeading.stories';
+import { withRootData } from './SidebarStories.stories';
 
 export default {
   Component: Sidebar,
   title: 'UI|Sidebar/Sidebar',
+  excludeStories: /.*Data$/,
 };
 
-const { menu } = SidebarHeadingStories.standard.storyData;
-const { stories, storyId } = SidebarStoriesStories.withRoot.storyData;
+const { menu } = standardHeaderData;
+const { stories, storyId } = withRootData;
+
+export const simpleData = { menu, stories, storyId };
+export const loadingData = { menu, stories: {} };
 
 export const simple = () => <Sidebar menu={menu} stories={stories} storyId={storyId} />;
-simple.storyData = { menu, stories, storyId };
-
 export const loading = () => <Sidebar menu={menu} stories={{}} loading />;
-loading.storyData = { menu, stories: {} };
diff --git a/lib/ui/src/components/sidebar/SidebarHeading.stories.js b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
index 3bd9b36297d..e9d20013ac7 100644
--- a/lib/ui/src/components/sidebar/SidebarHeading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarHeading.stories.js
@@ -22,6 +22,7 @@ export default {
       </div>
     ),
   ],
+  excludeStories: /.*Data$/,
 };
 
 const menuItems = [
@@ -32,6 +33,8 @@ const menuItems = [
 
 export const menuHighlighted = () => <SidebarHeading menuHighlighted menu={menuItems} />;
 
+export const standardData = { menu: menuItems };
+
 export const standard = () => (
   <ThemeProvider
     theme={{
@@ -46,7 +49,6 @@ export const standard = () => (
     <SidebarHeading menu={menuItems} />
   </ThemeProvider>
 );
-standard.storyData = { menu: menuItems };
 
 export const standardNoLink = () => (
   <ThemeProvider
diff --git a/lib/ui/src/components/sidebar/SidebarItem.stories.js b/lib/ui/src/components/sidebar/SidebarItem.stories.js
index e18871a024c..56789c7ea53 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarItem.stories.js
@@ -23,7 +23,7 @@ export const longName = () => (
     isComponent
   />
 );
-longName.title = 'with long name';
+longName.story = { name: 'with long name' };
 export const nestedDepths = () => (
   <div>
     <SidebarItem name="Depth 0 collapsed" depth={0} />
diff --git a/lib/ui/src/components/sidebar/SidebarStories.stories.js b/lib/ui/src/components/sidebar/SidebarStories.stories.js
index 3414a6d1abd..a4d1ad47857 100644
--- a/lib/ui/src/components/sidebar/SidebarStories.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarStories.stories.js
@@ -8,26 +8,27 @@ export default {
   Component: SidebarStories,
   title: 'UI|Sidebar/SidebarStories',
   decorators: [s => <Spaced>{s()}</Spaced>],
+  excludeStories: /.*Data$/,
 };
 
-export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
-withRoot.storyData = {
+export const withRootData = {
   stories: mockDataset.withRoot,
   storyId: '1-12-121',
 };
 
-export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
-noRoot.storyData = {
+export const withRoot = () => <SidebarStories stories={mockDataset.withRoot} storyId="1-12-121" />;
+
+export const noRootData = {
   stories: mockDataset.noRoot,
   storyId: '1-12-121',
 };
 
-export const empty = () => <SidebarStories stories={{}} />;
-empty.storyData = {
+export const noRoot = () => <SidebarStories stories={mockDataset.noRoot} storyId="1-12-121" />;
+
+export const emptyData = {
   stories: {},
 };
 
+export const empty = () => <SidebarStories stories={{}} />;
+
 export const loading = () => <SidebarStories loading stories={{}} />;
-empty.storyData = {
-  stories: {},
-};
diff --git a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
index b56bfb19ff3..0f5c2a6b341 100644
--- a/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
+++ b/lib/ui/src/components/sidebar/SidebarSubheading.stories.js
@@ -3,6 +3,8 @@ import { storiesOf } from '@storybook/react';
 
 import SidebarSubheading from './SidebarSubheading';
 
-storiesOf('UI|Sidebar/SidebarSubheading', module).add('default', () => (
-  <SidebarSubheading>Subheading</SidebarSubheading>
-));
+storiesOf('UI|Sidebar/SidebarSubheading', module)
+  .addParameters({
+    component: SidebarSubheading,
+  })
+  .add('default', () => <SidebarSubheading>Subheading</SidebarSubheading>);
diff --git a/lib/ui/src/components/sidebar/treeview/utils.js b/lib/ui/src/components/sidebar/treeview/utils.js
index b32643ecc43..e3185dbd49e 100644
--- a/lib/ui/src/components/sidebar/treeview/utils.js
+++ b/lib/ui/src/components/sidebar/treeview/utils.js
@@ -55,25 +55,7 @@ export const getParents = memoize(1000)((id, dataset) => {
   return [parent, ...getParents(parent.id, dataset)];
 });
 
-export const getMains = memoize(1)(dataset =>
-  toList(dataset)
-    .filter(m => m.depth === 0)
-    .sort((a, b) => {
-      if (a.isRoot && b.isRoot) {
-        return a.id > b.id;
-      }
-      if (!a.isRoot && !b.isRoot) {
-        return 0;
-      }
-      if (a.isRoot) {
-        return -1;
-      }
-      if (b.isRoot) {
-        return 1;
-      }
-      return 0;
-    })
-);
+export const getMains = memoize(1)(dataset => toList(dataset).filter(m => m.depth === 0));
 const getMainsKeys = memoize(1)(dataset => getMains(dataset).map(m => m.id));
 
 export const getPrevious = ({ id, dataset, expanded }) => {
diff --git a/lib/ui/src/components/sidebar/treeview/utils.test.js b/lib/ui/src/components/sidebar/treeview/utils.test.js
index ccd66037dce..28881523f0f 100644
--- a/lib/ui/src/components/sidebar/treeview/utils.test.js
+++ b/lib/ui/src/components/sidebar/treeview/utils.test.js
@@ -164,7 +164,7 @@ describe('getPrevious', () => {
       id: '3-31',
       ...withRoot,
     });
-    expect(output).toBe(withRoot.dataset['1-12']);
+    expect(output).toBe(withRoot.dataset['2']);
   });
 });
 
@@ -210,7 +210,7 @@ describe('getNext', () => {
   });
   test('to next parent with root as parent - skip root', () => {
     const output = utils.getNext({ id: '1-12', ...withRoot });
-    expect(output).toBe(withRoot.dataset['3-31']);
+    expect(output).toBe(withRoot.dataset['2']);
   });
 });
 
diff --git a/lib/ui/src/index.js b/lib/ui/src/index.js
index 2a8ee365426..d2831aff6e7 100644
--- a/lib/ui/src/index.js
+++ b/lib/ui/src/index.js
@@ -15,6 +15,8 @@ ThemeProvider.displayName = 'ThemeProvider';
 HelmetProvider.displayName = 'HelmetProvider';
 
 const Container = process.env.XSTORYBOOK_EXAMPLE_APP ? React.StrictMode : React.Fragment;
+// eslint-disable-next-line no-undef
+const docsMode = !!DOCS_MODE; // webpack-injected
 
 const Root = ({ provider }) => (
   <Container key="container">
@@ -22,7 +24,12 @@ const Root = ({ provider }) => (
       <LocationProvider key="location.provider">
         <Location key="location.consumer">
           {locationData => (
-            <ManagerProvider key="manager" provider={provider} {...locationData}>
+            <ManagerProvider
+              key="manager"
+              provider={provider}
+              {...locationData}
+              docsMode={docsMode}
+            >
               {({ state }) => (
                 <ThemeProvider key="theme.provider" theme={ensureTheme(state.theme)}>
                   <App key="app" viewMode={state.viewMode} layout={state.layout} />
diff --git a/lib/ui/src/settings/about.stories.js b/lib/ui/src/settings/about.stories.js
index a2d70c73d10..ceaf3e55ca5 100644
--- a/lib/ui/src/settings/about.stories.js
+++ b/lib/ui/src/settings/about.stories.js
@@ -10,6 +10,9 @@ const info = {
 
 const actions = createActions('onClose');
 storiesOf('UI|Settings/AboutScreen', module)
+  .addParameters({
+    component: AboutScreen,
+  })
   .addDecorator(s => (
     <div
       style={{
diff --git a/lib/ui/src/settings/shortcuts.stories.js b/lib/ui/src/settings/shortcuts.stories.js
index ab9cdf5427a..1e3e63094d7 100644
--- a/lib/ui/src/settings/shortcuts.stories.js
+++ b/lib/ui/src/settings/shortcuts.stories.js
@@ -48,4 +48,4 @@ export default {
 };
 
 export const defaults = () => <ShortcutsScreen shortcutKeys={defaultShortcuts} {...actions} />;
-defaults.title = 'default shortcuts';
+defaults.story = { name: 'default shortcuts' };
diff --git a/yarn.lock b/yarn.lock
index e39a2a96c83..9e740d8c7f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -539,7 +539,7 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
+"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
   version "7.4.5"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
   integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
@@ -3144,6 +3144,41 @@
     npmlog "^4.1.2"
     write-file-atomic "^2.3.0"
 
+"@mdx-js/loader@^1.0.0":
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.0.21.tgz#72fa5422ead35ac68aa452a032a84dd4f49e845b"
+  integrity sha512-1e/OZSGRSJHjp/ICroPVgja3v97q4pKm1TTFo/Hn1G5DWihOIFf+PUZgqD58Y1mbWhSHZrP4ZLmySVjmCjgUog==
+  dependencies:
+    "@mdx-js/mdx" "^1.0.21"
+    "@mdx-js/react" "^1.0.21"
+    loader-utils "^1.1.0"
+
+"@mdx-js/mdx@^1.0.0", "@mdx-js/mdx@^1.0.21":
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.0.21.tgz#028a7975fff026222f7ace19c8c130290c649025"
+  integrity sha512-B+n3PvrtdUcaCgDmWFaBf4n/zsls5hoyNPkWe2CzUx3ggR0SoD4UqCQR7iIZZ//fUjAwFODGf+2H0aJ3tIlB7w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
+    change-case "^3.0.2"
+    detab "^2.0.0"
+    hast-util-raw "^5.0.0"
+    lodash.uniq "^4.5.0"
+    mdast-util-to-hast "^4.0.0"
+    remark-mdx "^1.0.21"
+    remark-parse "^6.0.0"
+    remark-squeeze-paragraphs "^3.0.1"
+    to-style "^1.3.3"
+    unified "^7.0.0"
+    unist-builder "^1.0.1"
+    unist-util-visit "^1.3.0"
+
+"@mdx-js/react@^1.0.16", "@mdx-js/react@^1.0.21":
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.0.21.tgz#fc569b86d19f426774591fa401d999ddf6ea5948"
+  integrity sha512-+7H1UfIytxKN/nSdojCRzUM/ZeQ6/EUg8F9bnY2NnPGuF+67cug6vZBAx9famtAey0Ms0dr2QAuCOd8k3SkhJg==
+
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde"
@@ -4610,6 +4645,13 @@ ansi-styles@^3.0.0, ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
+ansi-to-html@^0.6.11:
+  version "0.6.11"
+  resolved "https://registry.yarnpkg.com/ansi-to-html/-/ansi-to-html-0.6.11.tgz#5093fc4962186c0e9343dec572a4f71abdc93439"
+  integrity sha512-88XZtrcwrfkyn6fGstHnkaF1kl7hGtNCYh4vSmItgEV+6JnQHryDBf7udF4f2RhTRQmYvJvPcTtqgaqrxzc9oA==
+  dependencies:
+    entities "^1.1.1"
+
 ansi-wrap@0.1.0, ansi-wrap@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/ansi-wrap/-/ansi-wrap-0.1.0.tgz#a82250ddb0015e9a27ca82e82ea603bbfa45efaf"
@@ -7638,7 +7680,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@3.0.x:
+camel-case@3.0.x, camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
   integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
@@ -7800,6 +7842,30 @@ chalk@^1.0.0, chalk@^1.1.1, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
+change-case@^3.0.2:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/change-case/-/change-case-3.1.0.tgz#0e611b7edc9952df2e8513b27b42de72647dd17e"
+  integrity sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==
+  dependencies:
+    camel-case "^3.0.0"
+    constant-case "^2.0.0"
+    dot-case "^2.1.0"
+    header-case "^1.0.0"
+    is-lower-case "^1.1.0"
+    is-upper-case "^1.1.0"
+    lower-case "^1.1.1"
+    lower-case-first "^1.0.0"
+    no-case "^2.3.2"
+    param-case "^2.1.0"
+    pascal-case "^2.0.0"
+    path-case "^2.1.0"
+    sentence-case "^2.1.0"
+    snake-case "^2.1.0"
+    swap-case "^1.1.0"
+    title-case "^2.1.0"
+    upper-case "^1.1.1"
+    upper-case-first "^1.1.0"
+
 change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -8223,7 +8289,7 @@ codemirror@^5.26.0:
   resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.47.0.tgz#c13a521ae5660d3acc655af252f4955065293789"
   integrity sha512-kV49Fr+NGFHFc/Imsx6g180hSlkGhuHxTSDDmDHOuyln0MQYFLixDY4+bFkBVeCEiepYfDimAF/e++9jPJk4QA==
 
-collapse-white-space@^1.0.2, collapse-white-space@^1.0.4:
+collapse-white-space@^1.0.0, collapse-white-space@^1.0.2, collapse-white-space@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/collapse-white-space/-/collapse-white-space-1.0.5.tgz#c2495b699ab1ed380d29a1091e01063e75dbbe3a"
   integrity sha512-703bOOmytCYAX9cXYqoikYIx6twmFCXsnzRQheBcTG3nzKYBR4P/+wkYeH+Mvj7qUz8zZDtdyzbxfnEi/kYzRQ==
@@ -8573,6 +8639,14 @@ consolidate@^0.15.1:
   dependencies:
     bluebird "^3.1.1"
 
+constant-case@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/constant-case/-/constant-case-2.0.0.tgz#4175764d389d3fa9c8ecd29186ed6005243b6a46"
+  integrity sha1-QXV2TTidP6nI7NKRhu1gBSQ7akY=
+  dependencies:
+    snake-case "^2.1.0"
+    upper-case "^1.1.1"
+
 constants-browserify@^1.0.0, constants-browserify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -8820,6 +8894,11 @@ core-js@^3.0.0, core-js@^3.0.1:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.2.tgz#2549a2cfb3ca1a5d851c9f7838e8b282cef2f3ba"
   integrity sha512-3poRGjbu56leCtZCZCzCgQ7GcKOflDFnjWIepaPFUsM0IXUBrne10sl3aa2Bkcz3+FjRdIxBe9dAMhIJmEnQNA==
 
+core-js@^3.0.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.1.4.tgz#3a2837fc48e582e1ae25907afcd6cf03b0cc7a07"
+  integrity sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==
+
 core-object@^3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/core-object/-/core-object-3.1.5.tgz#fa627b87502adc98045e44678e9a8ec3b9c0d2a9"
@@ -9221,7 +9300,7 @@ css-what@2.1, css-what@^2.1.2:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
-css@^2.2.1:
+css@2.2.4, css@^2.2.1:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
   integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@@ -9790,6 +9869,13 @@ destroy@~1.0.4:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
   integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
 
+detab@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/detab/-/detab-2.0.2.tgz#074970d1a807b045d0258a4235df5928dd683561"
+  integrity sha512-Q57yPrxScy816TTE1P/uLRXLDKjXhvYTbfxS/e6lPD+YrqghbsMlGB9nQzj/zVtSPaF0DFPSdO916EWO4sQUyQ==
+  dependencies:
+    repeat-string "^1.5.4"
+
 detect-file@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/detect-file/-/detect-file-1.0.0.tgz#f0d66d03672a825cb1b73bdb3fe62310c8e552b7"
@@ -10052,6 +10138,13 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+dot-case@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-2.1.1.tgz#34dcf37f50a8e93c2b3bca8bb7fb9155c7da3bee"
+  integrity sha1-NNzzf1Co6TwrO8qLt/uRVcfaO+4=
+  dependencies:
+    no-case "^2.2.0"
+
 dot-prop@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177"
@@ -10073,11 +10166,16 @@ dotenv-defaults@^1.0.2:
   dependencies:
     dotenv "^6.2.0"
 
-dotenv-expand@4.2.0, dotenv-expand@^4.2.0:
+dotenv-expand@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
   integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
 
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
+
 dotenv-webpack@^1.7.0:
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/dotenv-webpack/-/dotenv-webpack-1.7.0.tgz#4384d8c57ee6f405c296278c14a9f9167856d3a1"
@@ -10085,11 +10183,16 @@ dotenv-webpack@^1.7.0:
   dependencies:
     dotenv-defaults "^1.0.2"
 
-dotenv@6.2.0, dotenv@^6.0.0, dotenv@^6.2.0:
+dotenv@6.2.0, dotenv@^6.2.0:
   version "6.2.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
   integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
 
+dotenv@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
+  integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
+
 driver-browser@^0.6.5:
   version "0.6.7"
   resolved "https://registry.npmjs.org/driver-browser/-/driver-browser-0.6.7.tgz#69eb463d31187b63e8abfa175d8683e81f197953"
@@ -10718,6 +10821,11 @@ envinfo@^5.7.0:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-5.12.1.tgz#83068c33e0972eb657d6bc69a6df30badefb46ef"
   integrity sha512-pwdo0/G3CIkQ0y6PCXq4RdkvId2elvtPCJMG0konqlrfkWQbf1DWeH9K2b/cvu2YgGvPPTOnonZxXM1gikFu1w==
 
+envinfo@^7.3.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.3.1.tgz#892e42f7bf858b3446d9414ad240dbaf8da52f09"
+  integrity sha512-GvXiDTqLYrORVSCuJCsWHPXF5BFvoWMQA9xX4YVjPT1jyS3aZEHUBwjzxU/6LTPF9ReHgVEbX7IEN5UvSXHw/A==
+
 enzyme-adapter-react-16@^1.9.1:
   version "1.13.1"
   resolved "https://registry.yarnpkg.com/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.13.1.tgz#2e8ee300e38674b9914ae52b04af9493050355e2"
@@ -13759,6 +13867,18 @@ hashids@1.1.4:
   resolved "https://registry.yarnpkg.com/hashids/-/hashids-1.1.4.tgz#e4ff92ad66b684a3bd6aace7c17d66618ee5fa21"
   integrity sha512-U/fnTE3edW0AV92ZI/BfEluMZuVcu3MDOopsN7jS+HqDYcarQo8rXQiWlsBlm0uX48/taYSdxRsfzh2HRg5Z6w==
 
+hast-to-hyperscript@^7.0.0:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/hast-to-hyperscript/-/hast-to-hyperscript-7.0.2.tgz#e9237c88c6069999ad38aec847fefc296f484c4c"
+  integrity sha512-NBMMst0hkDR21uSH75m9W2DkljBrLoMQEhGiLMLNij4HIzEDJMC1UG+CFR6EAjHi2zs3NHBoaAHJOHxftoIN2g==
+  dependencies:
+    comma-separated-tokens "^1.0.0"
+    property-information "^5.0.0"
+    space-separated-tokens "^1.0.0"
+    style-to-object "^0.2.1"
+    unist-util-is "^3.0.0"
+    web-namespaces "^1.1.2"
+
 hast-util-from-parse5@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/hast-util-from-parse5/-/hast-util-from-parse5-5.0.0.tgz#a505a05766e0f96e389bfb0b1dd809eeefcef47b"
@@ -13775,6 +13895,31 @@ hast-util-parse-selector@^2.2.0:
   resolved "https://registry.yarnpkg.com/hast-util-parse-selector/-/hast-util-parse-selector-2.2.1.tgz#4ddbae1ae12c124e3eb91b581d2556441766f0ab"
   integrity sha512-Xyh0v+nHmQvrOqop2Jqd8gOdyQtE8sIP9IQf7mlVDqp924W4w/8Liuguk2L2qei9hARnQSG2m+wAOCxM7npJVw==
 
+hast-util-raw@^5.0.0:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/hast-util-raw/-/hast-util-raw-5.0.1.tgz#b39539cf4b9f7ccdc131f72a583502a7911b99ee"
+  integrity sha512-iHo7G6BjRc/GU1Yun5CIEXjil0wVnIbz11C6k0JdDichSDMtYi2+NNtk6YN7EOP0JfPstX30d3pRLfaJv5CkdA==
+  dependencies:
+    hast-util-from-parse5 "^5.0.0"
+    hast-util-to-parse5 "^5.0.0"
+    html-void-elements "^1.0.1"
+    parse5 "^5.0.0"
+    unist-util-position "^3.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.1"
+    zwitch "^1.0.0"
+
+hast-util-to-parse5@^5.0.0:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-parse5/-/hast-util-to-parse5-5.1.1.tgz#cabf2dbe9ed988a5128fc708457b37cdf535a2e8"
+  integrity sha512-ivCeAd5FCXr7bapJIVsWMnx/EmbjkkW2TU2hd1prq+jGwiaUoK+FcpjyPNwsC5ogzCwWO669tOqIovGeLc/ntg==
+  dependencies:
+    hast-to-hyperscript "^7.0.0"
+    property-information "^5.0.0"
+    web-namespaces "^1.0.0"
+    xtend "^4.0.1"
+    zwitch "^1.0.0"
+
 hastscript@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/hastscript/-/hastscript-5.0.0.tgz#fee10382c1bc4ba3f1be311521d368c047d2c43a"
@@ -13790,6 +13935,14 @@ he@1.2.x, he@^1.1.0, he@^1.1.1:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+header-case@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/header-case/-/header-case-1.0.1.tgz#9535973197c144b09613cd65d317ef19963bd02d"
+  integrity sha1-lTWXMZfBRLCWE81l0xfvGZY70C0=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.1.3"
+
 heimdalljs-fs-monitor@^0.2.2:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/heimdalljs-fs-monitor/-/heimdalljs-fs-monitor-0.2.2.tgz#a76d98f52dbf3aa1b7c20cebb0132e2f5eeb9204"
@@ -13962,6 +14115,11 @@ html-tags@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-2.0.0.tgz#10b30a386085f43cede353cc8fa7cb0deeea668b"
   integrity sha1-ELMKOGCF9Dzt41PMj6fLDe7qZos=
 
+html-void-elements@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.4.tgz#95e8bb5ecd6b88766569c2645f2b5f1591db9ba5"
+  integrity sha512-yMk3naGPLrfvUV9TdDbuYXngh/TpHbA6TrOw3HL9kS8yhwx7i309BReNg7CbAJXGE+UMJ6je5OqJ7lC63o6YuQ==
+
 html-webpack-plugin@4.0.0-alpha.2:
   version "4.0.0-alpha.2"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-alpha.2.tgz#7745967e389a57a098e26963f328ebe4c19b598d"
@@ -14641,7 +14799,7 @@ is-accessor-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-alphabetical@^1.0.0:
+is-alphabetical@^1.0.0, is-alphabetical@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-alphabetical/-/is-alphabetical-1.0.3.tgz#eb04cc47219a8895d8450ace4715abff2258a1f8"
   integrity sha512-eEMa6MKpHFzw38eKm56iNNi6GJ7lf6aLLio7Kr23sJPAECscgRtZvOBYybejWDQ2bM949Y++61PY+udzj5QMLA==
@@ -14891,6 +15049,13 @@ is-installed-globally@^0.1.0:
     global-dirs "^0.1.0"
     is-path-inside "^1.0.0"
 
+is-lower-case@^1.1.0:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-lower-case/-/is-lower-case-1.1.3.tgz#7e147be4768dc466db3bfb21cc60b31e6ad69393"
+  integrity sha1-fhR75HaNxGbbO/shzGCzHmrWk5M=
+  dependencies:
+    lower-case "^1.1.0"
+
 is-npm@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-npm/-/is-npm-3.0.0.tgz#ec9147bfb629c43f494cf67936a961edec7e8053"
@@ -15122,6 +15287,13 @@ is-unc-path@^0.1.1:
   dependencies:
     unc-path-regex "^0.1.0"
 
+is-upper-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/is-upper-case/-/is-upper-case-1.1.2.tgz#8d0b1fa7e7933a1e58483600ec7d9661cbaf756f"
+  integrity sha1-jQsfp+eTOh5YSDYA7H2WYcuvdW8=
+  dependencies:
+    upper-case "^1.1.0"
+
 is-utf8@^0.2.0:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
@@ -16567,16 +16739,16 @@ lazy-cache@^1.0.3:
   resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
   integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
 
-lazy-universal-dotenv@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-2.0.0.tgz#e015ad9f77be9ef811956d53ea9519b1c0ab0214"
-  integrity sha512-1Wi0zgZMfRLaRAK21g3odYuU+HE1d85Loe2tb44YhcNwIzhmD49mTPR9aKckpB9Q9Q9mA+hUMLI2xlkcCAe3yw==
+lazy-universal-dotenv@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/lazy-universal-dotenv/-/lazy-universal-dotenv-3.0.0.tgz#e71f07f89d8de6bbf491478e4503df3c96729b8d"
+  integrity sha512-Mbf5AeGOs74lE5BdQXHFJ7Rt383jxnWKNfW2EWL0Pibnhea5JRStRIiUpdTenyMxCGuCjlMpYQhhay1XZBSSQA==
   dependencies:
     "@babel/runtime" "^7.0.0"
     app-root-dir "^1.0.2"
-    core-js "^2.5.7"
-    dotenv "^6.0.0"
-    dotenv-expand "^4.2.0"
+    core-js "^3.0.4"
+    dotenv "^8.0.0"
+    dotenv-expand "^5.1.0"
 
 lcid@^1.0.0:
   version "1.0.0"
@@ -17602,7 +17774,14 @@ loud-rejection@^1.0.0:
     currently-unhandled "^0.4.1"
     signal-exit "^3.0.0"
 
-lower-case@^1.1.1:
+lower-case-first@^1.0.0:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/lower-case-first/-/lower-case-first-1.0.2.tgz#e5da7c26f29a7073be02d52bac9980e5922adfa1"
+  integrity sha1-5dp8JvKacHO+AtUrrJmA5ZIq36E=
+  dependencies:
+    lower-case "^1.1.2"
+
+lower-case@^1.1.0, lower-case@^1.1.1, lower-case@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-1.1.4.tgz#9a2cabd1b9e8e0ae993a4bf7d5875c39c42e8eac"
   integrity sha1-miyr0bno4K6ZOkv31YdcOcQujqw=
@@ -17956,6 +18135,13 @@ mdast-comment-marker@^1.0.0:
   resolved "https://registry.yarnpkg.com/mdast-comment-marker/-/mdast-comment-marker-1.1.1.tgz#9c9c18e1ed57feafc1965d92b028f37c3c8da70d"
   integrity sha512-TWZDaUtPLwKX1pzDIY48MkSUQRDwX/HqbTB4m3iYdL/zosi/Z6Xqfdv0C0hNVKvzrPjZENrpWDt4p4odeVO0Iw==
 
+mdast-squeeze-paragraphs@^3.0.0:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
+  integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
+  dependencies:
+    unist-util-remove "^1.0.0"
+
 mdast-util-compact@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/mdast-util-compact/-/mdast-util-compact-1.0.3.tgz#98a25cc8a7865761a41477b3a87d1dcef0b1e79d"
@@ -17963,11 +18149,35 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+mdast-util-definitions@^1.2.0:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.4.tgz#2b54ad4eecaff9d9fcb6bf6f9f6b68b232d77ca7"
+  integrity sha512-HfUArPog1j4Z78Xlzy9Q4aHLnrF/7fb57cooTHypyGoe2XFNbcx/kWZDoOz+ra8CkUzvg3+VHV434yqEd1DRmA==
+  dependencies:
+    unist-util-visit "^1.0.0"
+
 mdast-util-heading-style@^1.0.2:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/mdast-util-heading-style/-/mdast-util-heading-style-1.0.5.tgz#81b2e60d76754198687db0e8f044e42376db0426"
   integrity sha512-8zQkb3IUwiwOdUw6jIhnwM6DPyib+mgzQuHAe7j2Hy1rIarU4VUxe472bp9oktqULW3xqZE+Kz6OD4Gi7IA3vw==
 
+mdast-util-to-hast@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-4.0.0.tgz#d8467ce28ea73b4648667bc389aa39dfa9f67f18"
+  integrity sha512-yOTZSxR1aPvWRUxVeLaLZ1sCYrK87x2Wusp1bDM/Ao2jETBhYUKITI3nHvgy+HkZW54HuCAhHnS0mTcbECD5Ig==
+  dependencies:
+    collapse-white-space "^1.0.0"
+    detab "^2.0.0"
+    mdast-util-definitions "^1.2.0"
+    mdurl "^1.0.1"
+    trim "0.0.1"
+    trim-lines "^1.0.0"
+    unist-builder "^1.0.1"
+    unist-util-generated "^1.1.0"
+    unist-util-position "^3.0.0"
+    unist-util-visit "^1.1.0"
+    xtend "^4.0.1"
+
 mdast-util-to-string@^1.0.2:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.0.6.tgz#7d85421021343b33de1552fc71cb8e5b4ae7536d"
@@ -19052,7 +19262,7 @@ nice-try@^1.0.4:
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
   integrity sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==
 
-no-case@^2.2.0:
+no-case@^2.2.0, no-case@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-2.3.2.tgz#60b813396be39b3f1288a4c1ed5d1e7d28b464ac"
   integrity sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==
@@ -20118,7 +20328,7 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x:
+param-case@2.1.x, param-case@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
   integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
@@ -20333,6 +20543,14 @@ parseurl@~1.3.2, parseurl@~1.3.3:
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
   integrity sha512-CiyeOxFT/JZyN5m0z9PfXw4SCBJ6Sygz1Dpl0wqjlhDEGGBP1GnsUVEL0p63hoG1fcj3fHynXi9NYO4nWOL+qQ==
 
+pascal-case@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-2.0.1.tgz#2d578d3455f660da65eca18ef95b4e0de912761e"
+  integrity sha1-LVeNNFX2YNpl7KGO+VtODekSdh4=
+  dependencies:
+    camel-case "^3.0.0"
+    upper-case-first "^1.1.0"
+
 pascalcase@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/pascalcase/-/pascalcase-0.1.1.tgz#b363e55e8006ca6fe21784d2db22bd15d7917f14"
@@ -20358,6 +20576,13 @@ path-browserify@~0.0.0:
   resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-0.0.1.tgz#e6c4ddd7ed3aa27c68a20cc4e50e1a4ee83bbc4a"
   integrity sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==
 
+path-case@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/path-case/-/path-case-2.1.1.tgz#94b8037c372d3fe2906e465bb45e25d226e8eea5"
+  integrity sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU=
+  dependencies:
+    no-case "^2.2.0"
+
 path-dirname@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/path-dirname/-/path-dirname-1.0.2.tgz#cc33d24d525e099a5388c0336c6e32b9160609e0"
@@ -23725,6 +23950,19 @@ remark-lint@^6.0.0, remark-lint@^6.0.4:
   dependencies:
     remark-message-control "^4.0.0"
 
+remark-mdx@^1.0.21:
+  version "1.0.21"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.0.21.tgz#cf5a59ad68cce6c1f687953dcf504212fbd32555"
+  integrity sha512-paYs43yHPkxEuhyWXvRGJdupdurua1ttmGeu5GLqU/qc17BaZklCdNSEjCNXRa2LM0pOFRv0KVJigfA2vfaDEQ==
+  dependencies:
+    "@babel/core" "^7.2.2"
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-object-rest-spread" "^7.3.2"
+    "@babel/plugin-syntax-jsx" "^7.2.0"
+    is-alphabetical "^1.0.2"
+    remark-parse "^6.0.0"
+    unified "^7.0.0"
+
 remark-message-control@^4.0.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/remark-message-control/-/remark-message-control-4.1.1.tgz#a3f0b08dffda484e7196f0539de1488220f1d251"
@@ -23777,6 +24015,13 @@ remark-preset-lint-recommended@^3.0.2:
     remark-lint-no-unused-definitions "^1.0.0"
     remark-lint-ordered-list-marker-style "^1.0.0"
 
+remark-squeeze-paragraphs@^3.0.1:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.4.tgz#9fe50c3bf3b572dd88754cd426ada007c0b8dc5f"
+  integrity sha512-Wmz5Yj9q+W1oryo8BV17JrOXZgUKVcpJ2ApE2pwnoHwhFKSk4Wp2PmFNbmJMgYSqAdFwfkoe+TSYop5Fy8wMgA==
+  dependencies:
+    mdast-squeeze-paragraphs "^3.0.0"
+
 remark-stringify@^6.0.0:
   version "6.0.4"
   resolved "https://registry.yarnpkg.com/remark-stringify/-/remark-stringify-6.0.4.tgz#16ac229d4d1593249018663c7bddf28aafc4e088"
@@ -24612,6 +24857,14 @@ send@0.17.1:
     range-parser "~1.2.1"
     statuses "~1.5.0"
 
+sentence-case@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/sentence-case/-/sentence-case-2.1.1.tgz#1f6e2dda39c168bf92d13f86d4a918933f667ed4"
+  integrity sha1-H24t2jnBaL+S0T+G1KkYkz9mftQ=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case-first "^1.1.2"
+
 serialize-error@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-2.1.0.tgz#50b679d5635cdf84667bdc8e59af4e5b81d5f60a"
@@ -24989,6 +25242,13 @@ smart-buffer@4.0.2:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.2.tgz#5207858c3815cc69110703c6b94e46c15634395d"
   integrity sha512-JDhEpTKzXusOqXZ0BUIdH+CjFdO/CR3tLlf5CN34IypI+xMmXW1uB16OOY8z3cICbJlDAVJzNbwBhNO0wt9OAw==
 
+snake-case@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-2.1.0.tgz#41bdb1b73f30ec66a04d4e2cad1b76387d4d6d9f"
+  integrity sha1-Qb2xtz8w7GagTU4srRt2OH1NbZ8=
+  dependencies:
+    no-case "^2.2.0"
+
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -25801,6 +26061,13 @@ style-loader@0.23.1, style-loader@^0.23.1:
     loader-utils "^1.1.0"
     schema-utils "^1.0.0"
 
+style-to-object@^0.2.1:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.2.2.tgz#3ea3b276bd3fa9da1195fcdcdd03bc52aa2aae01"
+  integrity sha512-GcbtvfsqyKmIPpHeOHZ5Rmwsx2MDJct4W9apmTGcbPTbpA2FcgTFl2Z43Hm4Qb61MWGPNK8Chki7ITiY7lLOow==
+  dependencies:
+    css "2.2.4"
+
 style-unit@^0.6.5:
   version "0.6.5"
   resolved "https://registry.npmjs.org/style-unit/-/style-unit-0.6.5.tgz#4c471b1429a3b951bfd881fbf512ca20a19047da"
@@ -26000,6 +26267,14 @@ svgo@^1.0.0, svgo@^1.2.1:
     unquote "~1.1.1"
     util.promisify "~1.0.0"
 
+swap-case@^1.1.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/swap-case/-/swap-case-1.1.2.tgz#c39203a4587385fad3c850a0bd1bcafa081974e3"
+  integrity sha1-w5IDpFhzhfrTyFCgvRvK+ggZdOM=
+  dependencies:
+    lower-case "^1.1.1"
+    upper-case "^1.1.1"
+
 symbol-observable@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.1.tgz#8340fc4702c3122df5d22288f88283f513d3fdd4"
@@ -26418,6 +26693,14 @@ tinycolor2@^1.4.1:
   resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
   integrity sha1-9PrTM0R7wLB9TcjpIJ2POaisd+g=
 
+title-case@^2.1.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/title-case/-/title-case-2.1.1.tgz#3e127216da58d2bc5becf137ab91dae3a7cd8faa"
+  integrity sha1-PhJyFtpY0rxb7PE3q5Ha46fNj6o=
+  dependencies:
+    no-case "^2.2.0"
+    upper-case "^1.0.3"
+
 tmp@0.0.28:
   version "0.0.28"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.28.tgz#172735b7f614ea7af39664fa84cf0de4e515d120"
@@ -26506,6 +26789,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+to-style@^1.3.3:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/to-style/-/to-style-1.3.3.tgz#63a2b70a6f4a7d4fdc2ed57a0be4e7235cb6699c"
+  integrity sha1-Y6K3Cm9KfU/cLtV6C+TnI1y2aZw=
+
 to-vfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/to-vfile/-/to-vfile-4.0.0.tgz#465ade5fc2b9e97e6c80b854d378a5d0f4b5d04a"
@@ -26622,6 +26910,11 @@ tree-sync@^1.2.2:
     quick-temp "^0.1.5"
     walk-sync "^0.3.3"
 
+trim-lines@^1.0.0:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/trim-lines/-/trim-lines-1.1.2.tgz#c8adbdbdae21bb5c2766240a661f693afe23e59b"
+  integrity sha512-3GOuyNeTqk3FAqc3jOJtw7FTjYl94XBR5aD9QnDbK/T4CA9sW/J0l9RoaRPE9wyPP7NF331qnHnvJFBJ+IDkmQ==
+
 trim-newlines@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-1.0.0.tgz#5887966bb582a4503a41eb524f7d35011815a613"
@@ -27217,6 +27510,13 @@ unique-string@^1.0.0:
   dependencies:
     crypto-random-string "^1.0.0"
 
+unist-builder@^1.0.1:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/unist-builder/-/unist-builder-1.0.4.tgz#e1808aed30bd72adc3607f25afecebef4dd59e17"
+  integrity sha512-v6xbUPP7ILrT15fHGrNyHc1Xda8H3xVhP7/HAIotHOhVPjH5dCXA097C3Rry1Q2O+HbOLCao4hfPB+EYEjHgVg==
+  dependencies:
+    object-assign "^4.1.0"
+
 unist-util-generated@^1.1.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/unist-util-generated/-/unist-util-generated-1.1.4.tgz#2261c033d9fc23fae41872cdb7663746e972c1a7"
@@ -27234,6 +27534,11 @@ unist-util-is@^2.1.2:
   resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-2.1.3.tgz#459182db31f4742fceaea88d429693cbf0043d20"
   integrity sha512-4WbQX2iwfr/+PfM4U3zd2VNXY+dWtZsN1fLnWEi2QQXA4qyDYAZcDMfXUX0Cu6XZUHHAO9q4nyxxLT4Awk1qUA==
 
+unist-util-is@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-is/-/unist-util-is-3.0.0.tgz#d9e84381c2468e82629e4a5be9d7d05a2dd324cd"
+  integrity sha512-sVZZX3+kspVNmLWBPAB6r+7D9ZgAFPNWm66f7YNb420RlQSbn+n8rG8dGZSkrER7ZIXGQYNm5pqC3v3HopH24A==
+
 unist-util-position@^3.0.0:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-position/-/unist-util-position-3.0.3.tgz#fff942b879538b242096c148153826664b1ca373"
@@ -27246,6 +27551,13 @@ unist-util-remove-position@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
+unist-util-remove@^1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
+  integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
+  dependencies:
+    unist-util-is "^3.0.0"
+
 unist-util-stringify-position@^1.0.0, unist-util-stringify-position@^1.1.1, unist-util-stringify-position@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/unist-util-stringify-position/-/unist-util-stringify-position-1.1.2.tgz#3f37fcf351279dcbca7480ab5889bb8a832ee1c6"
@@ -27265,7 +27577,7 @@ unist-util-visit-parents@^2.0.0:
   dependencies:
     unist-util-is "^2.1.2"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.4.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.1, unist-util-visit@^1.3.0, unist-util-visit@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
   integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
@@ -27355,7 +27667,14 @@ update-notifier@^3.0.0:
     semver-diff "^2.0.0"
     xdg-basedir "^3.0.0"
 
-upper-case@^1.1.1:
+upper-case-first@^1.1.0, upper-case-first@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/upper-case-first/-/upper-case-first-1.1.2.tgz#5d79bedcff14419518fd2edb0a0507c9b6859115"
+  integrity sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=
+  dependencies:
+    upper-case "^1.1.1"
+
+upper-case@^1.0.3, upper-case@^1.1.0, upper-case@^1.1.1, upper-case@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/upper-case/-/upper-case-1.1.3.tgz#f6b4501c2ec4cdd26ba78be7222961de77621598"
   integrity sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=
@@ -27872,7 +28191,7 @@ weak@^1.0.1:
     bindings "^1.2.1"
     nan "^2.0.5"
 
-web-namespaces@^1.1.2:
+web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.3.tgz#9bbf5c99ff0908d2da031f1d732492a96571a83f"
   integrity sha512-r8sAtNmgR0WKOKOxzuSgk09JsHlpKlB+uHi937qypOu3PZ17UxPrierFKDye/uNHjNTTEshu5PId8rojIPj/tA==
@@ -29250,3 +29569,8 @@ zone.js@^0.8.29:
   version "0.8.29"
   resolved "https://registry.yarnpkg.com/zone.js/-/zone.js-0.8.29.tgz#8dce92aa0dd553b50bc5bfbb90af9986ad845a12"
   integrity sha512-mla2acNCMkWXBD+c+yeUrBUrzOxYMNFdQ6FGfigGGtEVBPJx07BQeJekjt9DmH1FtZek4E9rE1eRR9qQpxACOQ==
+
+zwitch@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/zwitch/-/zwitch-1.0.4.tgz#93b1b993b13c8926753a41afaf8f27bbfac6be8b"
+  integrity sha512-YO803/X+13GNaZB7fVopjvHH0uWQKgJkgKnU1YCjxShjKGVuN9PPHHW8g+uFDpkHpSTNi3rCMKMewIcbC1BAYg==