Merge branch 'next' into pr/shiatsumat/8028

2025-04-05 16:11:33 +08:00 · 2019-09-27 15:58:47 +02:00 · 2019-09-27 15:58:47 +02:00 · b0e6437cbf
commit b0e6437cbf
parent a0d7b9248e 932f38c9fe
1301 changed files with 51958 additions and 90265 deletions
--- 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',
@ -44,6 +45,13 @@ module.exports = {
        test: withTests,
      },
    },
+    {
+      test: './examples/rax-kitchen-sink',
+      presets: [
+        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+        ['babel-preset-rax', { development: process.env.BABEL_ENV === 'development' }],
+      ],
+    },
    {
      test: './lib',
      presets: [
@ -66,13 +74,11 @@ module.exports = {
    },
    {
      test: [
-        './lib/core/src/server',
        './lib/node-logger',
        './lib/codemod',
        './addons/storyshots',
-        './addons/storysource/src/loader',
-        './app/**/src/server/**',
-        './app/**/src/bin/**',
+        '**/src/server/**',
+        '**/src/bin/**',
      ],
      presets: [
        [
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -4,7 +4,7 @@ aliases:
  - &defaults
    working_directory: /tmp/storybook
    docker:
-      - image: circleci/node:8
+      - image: circleci/node:10

 dependencies:
  pre:
@ -38,6 +38,7 @@ jobs:
            - node_modules
            - examples
            - addons
+            - dev-kits
            - app
            - lib
  chromatic:
@ -49,6 +50,17 @@ jobs:
      - run:
          name: Run chromatic on the pre-built storybook
          command: yarn chromatic -- -d ./storybook-static
+  packtracker:
+    <<: *defaults
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Report webpack stats for manager of official storybook
+          command: |
+            cd examples/official-storybook
+            yarn packtracker
  examples:
    <<: *defaults
    steps:
@ -309,29 +321,6 @@ jobs:
      - run:
          name: Upload coverage
          command: yarn coverage
-  cli-test:
-    <<: *defaults
-    environment:
-      BASH_ENV: ~/.bashrc
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run:
-          name: Test
-          command: yarn test --cli
-          no_output_timeout: 1800
-  cli-test-latest-cra:
-    <<: *defaults
-    environment:
-      BASH_ENV: ~/.bashrc
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
-      - run:
-          name: Test CLI with latest CR(N)A
-          command: yarn test-latest-cra
 workflows:
  version: 2
  build_test_deploy:
@ -349,6 +338,9 @@ workflows:
      - smoke-tests:
          requires:
            - build
+      - packtracker:
+          requires:
+            - build
      - native-smoke-tests:
          requires:
            - build
@ -358,12 +350,6 @@ workflows:
      - coverage:
          requires:
            - test
-      - cli-test:
-          requires:
-            - build
-      - cli-test-latest-cra:
-          requires:
-            - build
      - chromatic:
          requires:
            - examples
--- a/.eslintignore
+++ b/.eslintignore
@ -7,6 +7,7 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
+lib/codemod/src/transforms/__testfixtures__
 scripts/storage
 *.bundle.js
 *.js.map
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,151 +1,8 @@
-const error = 2;
-const warn = 1;
 const ignore = 0;

 module.exports = {
  root: true,
-  extends: [
-    'airbnb',
-    'plugin:jest/recommended',
-    'plugin:import/react-native',
-    'plugin:@typescript-eslint/recommended',
-    'prettier',
-    'prettier/react',
-    'prettier/@typescript-eslint',
-  ],
-  plugins: [
-    '@typescript-eslint',
-    'prettier',
-    'jest',
-    'import',
-    'react',
-    'jsx-a11y',
-    'json',
-    'html',
-  ],
-  parser: '@typescript-eslint/parser',
-  parserOptions: {
-    ecmaVersion: 8,
-    sourceType: 'module',
-    ecmaFeatures: {
-      jsx: true,
-    },
-  },
-  env: { es6: true, node: true, 'jest/globals': true },
-  settings: {
-    'import/core-modules': ['enzyme'],
-    'import/ignore': ['node_modules\\/(?!@storybook)'],
-    'import/resolver': { node: { extensions: ['.js', '.ts', '.tsx', '.mjs'] } },
-    'html/html-extensions': ['.html'],
-  },
-  rules: {
-    'no-restricted-imports': [
-      error,
-      {
-        paths: [
-          {
-            name: 'lodash.isequal',
-            message:
-              'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
-          },
-          {
-            name: 'lodash.mergewith',
-            message:
-              'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
-          },
-          {
-            name: 'lodash.pick',
-            message:
-              'Lodash modularised (and lodash < 4.17.11) have CVE vulnerabilities. Please use tree-shakeable imports like lodash/xxx instead',
-          },
-        ],
-        // catch-all for any lodash modularised. The CVE is listed against the entire family for lodash < 4.17.11
-        patterns: ['lodash.*'],
-      },
-    ],
-    'prettier/prettier': [warn],
-    'no-debugger': process.env.NODE_ENV === 'production' ? error : ignore,
-    'class-methods-use-this': ignore,
-    'import/extensions': [
-      error,
-      'always',
-      {
-        js: 'never',
-        ts: 'never',
-        tsx: 'never',
-        mjs: 'never',
-      },
-    ],
-    'import/no-extraneous-dependencies': [
-      error,
-      {
-        devDependencies: [
-          'examples/**',
-          'examples-native/**',
-          '**/example/**',
-          '*.js',
-          '**/*.test.js',
-          '**/*.stories.*',
-          '**/scripts/*.js',
-          '**/stories/**/*.js',
-          '**/__tests__/**/*.js',
-          '**/.storybook/**/*.*',
-        ],
-        peerDependencies: true,
-      },
-    ],
-    'import/prefer-default-export': ignore,
-    'import/default': error,
-    'import/named': error,
-    'import/namespace': error,
-    'react/jsx-filename-extension': [
-      warn,
-      {
-        extensions: ['.js', '.jsx', '.tsx'],
-      },
-    ],
-    'react/jsx-no-bind': [
-      error,
-      {
-        ignoreDOMComponents: true,
-        ignoreRefs: true,
-        allowArrowFunctions: true,
-        allowFunctions: true,
-        allowBind: true,
-      },
-    ],
-    'jsx-a11y/accessible-emoji': ignore,
-    'jsx-a11y/label-has-associated-control': [
-      warn,
-      {
-        labelComponents: ['CustomInputLabel'],
-        labelAttributes: ['label'],
-        controlComponents: ['CustomInput'],
-        depth: 3,
-      },
-    ],
-    'react/no-unescaped-entities': ignore,
-    'jsx-a11y/label-has-for': [error, { required: { some: ['nesting', 'id'] } }],
-    'jsx-a11y/anchor-is-valid': [
-      error,
-      {
-        components: ['A', 'LinkTo', 'Link'],
-        specialLink: ['overrideParams', 'kind', 'story', 'to'],
-      },
-    ],
-    'no-underscore-dangle': [
-      error,
-      { allow: ['__STORYBOOK_CLIENT_API__', '__STORYBOOK_ADDONS_CHANNEL__'] },
-    ],
-    '@typescript-eslint/no-var-requires': ignore,
-    '@typescript-eslint/camelcase': ignore,
-    '@typescript-eslint/no-unused-vars': ignore,
-    '@typescript-eslint/explicit-member-accessibility': ignore,
-    '@typescript-eslint/explicit-function-return-type': ignore,
-    '@typescript-eslint/no-explicit-any': ignore, // would prefer to enable this
-    '@typescript-eslint/no-use-before-define': ignore, // this is duplicated
-    '@typescript-eslint/interface-name-prefix': ignore, // I don't agree
-  },
+  extends: ['@storybook/eslint-config-storybook'],
  overrides: [
    {
      files: [
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -7,12 +7,12 @@
 /addons/centered/ @kazupon
 /addons/events/ @z4o4z @ndelangen
 /addons/graphql/ @mnmtanish
-/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael @danielduan
+/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael
 /addons/jest/ @renaudtertrais
 /addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx
 /addons/links/ @ndelangen
 /addons/notes/ @alexandrebodin
-/addons/options/ @danielduan @UsulPro
+/addons/options/ @UsulPro
 /addons/storyshots/ @igor-dv @thomasbertet
 /addons/storysource/ @igor-dv
 /addons/viewport/ @saponifi3d
@ -20,7 +20,7 @@
 /app/angular/ @alterx @igor-dv
 /app/polymer/ @ndelangen @naipath @leonrodenburg
 /app/react/ @xavcz @shilman @thomasbertet
-/app/react-native/ @rmevans9 @danielduan @Gongreg @tmeasday
+/app/react-native/ @rmevans9 @Gongreg @tmeasday
 /app/vue/ @thomasbertet @kazupon
 /app/svelte/ @plumpNation

@ -29,12 +29,12 @@
 /examples/angular-cli/ @igor-dv @alterx
 /examples/cra-kitchen-sink/ @ndelangen @UsulPro
 /examples/cra-ts-kitchen-sink/ @mucsi96
-/examples/official-storybook/ @danielduan @UsulPro
+/examples/official-storybook/ @UsulPro
 /examples/polymer-cli/ @naipath @igor-dv
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
 /examples/svelte-kitchen-sink/ @plumpNation

-/examples-native/crna-kitchen-sink/ @Gongreg @danielduan
+/examples-native/crna-kitchen-sink/ @Gongreg

 /lib/addons/ @ndelangen @theinterned
 /lib/channel-postmessage/ @mnmtanish @ndelangen
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -24,12 +24,7 @@ If applicable, add screenshots to help explain your problem.
 If applicable, add code samples to help explain your problem.

 **System:**
- - OS: [e.g. iOS, Windows10, MacOS]
- - Device: [e.g. iPhoneX, Macbook Pro 2018]
- - Browser: [e.g. chrome, safari]
- - Framework: [e.g. react, vue, angular]
- - Addons: [if relevant]
- - Version: [e.g. 4.0.0]
+Please paste the results of `npx -p @storybook/cli@next sb info` here.

 **Additional context**
 Add any other context about the problem here.
--- a/.github/automention.yml
+++ b/.github/automention.yml
@ -5,20 +5,21 @@
 'app: polymer': ['stijnkoopal', 'ndelangen']
 'app: preact': ['BartWaardenburg']
 'app: react-native': ['benoitdion', 'gongreg']
-'app: react-native-server': ['benoitdion', 'igor-dv']
-'app: svelte': ['cam-stitt', 'plumpNation']
-'app: vue': ['backbone87', 'elevatebart']
+'app: react-native-server': ['benoitdion', 'gongreg']
+'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
+'app: vue': ['backbone87', 'elevatebart', 'pksunkara']
 'api: addons': ['ndelangen']
 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
 'addon: contexts': ['leoyli']
-'addon: docs': ['shilman', 'elevatebart']
+'addon: docs': ['shilman', 'elevatebart', 'jeroenreumkens']
 'addon: info': ['shilman', 'elevatebart']
 'addon: knobs': ['leoyli', 'Armanio']
 'addon: storysource': ['igor-dv', 'libetl']
-typescript: ['kroeder', 'gaetanmaisse', 'ndelangen']
+typescript: ['kroeder', 'gaetanmaisse', 'ndelangen', 'emilio-martinez']
 theming: ['ndelangen', 'domyen']
 cra: ['mrmckeb']
 cli: ['Keraito']
 dependencies: ['ndelangen']
 'babel / webpack': ['ndelangen', 'igor-dv', 'shilman']
 'yarn / npm': ['ndelangen', 'tmeasday']
+'source-loader': ['libetl']
--- a/.github/main.workflow
+++ b/.github/main.workflow
@ -1,32 +0,0 @@
-action "Danger JS" {
-  uses = "danger/danger-js@master"
-  secrets = ["GITHUB_TOKEN"]
-  args = "--dangerfile .ci/danger/dangerfile.ts"
-}
-
-workflow "Dangerfile JS Pull" {
-  on = "pull_request"
-  resolves = "Danger JS"
-}
-
-workflow "Dangerfile JS Label" {
-  on = "label"
-  resolves = "Danger JS"
-}
-
-# ===
-
-action "Automention" {
-  uses = "shilman/automention@master"
-  secrets = ["GITHUB_TOKEN"]
-}
-
-workflow "Automention Issues" {
-  on = "issues"
-  resolves = "Automention"
-}
-
-workflow "Automention PRs" {
-  on = "pull_request"
-  resolves = "Automention"
-}
--- a/.github/workflows/issues.yml
+++ b/.github/workflows/issues.yml
@ -0,0 +1,12 @@
+on: issues
+name: Automention Issues
+jobs:
+  automention:
+    name: Automention
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Automention
+      uses: shilman/automention@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@ -0,0 +1,14 @@
+on: label
+name: Dangerfile JS Label
+jobs:
+  dangerJS:
+    name: Danger JS
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Danger JS
+      uses: danger/danger-js@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        args: --dangerfile .ci/danger/dangerfile.ts
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@ -0,0 +1,24 @@
+name: Github CI
+
+on: [push]
+
+jobs:
+  build:
+
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [10]
+        os: [ubuntu-latest]
+
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        version: ${{ matrix.node_version }}
+    - name: install, build, and test
+      run: |
+        yarn bootstrap --core
+        yarn test --core
--- a/.github/workflows/pull_request-automention-prs.yml
+++ b/.github/workflows/pull_request-automention-prs.yml
@ -0,0 +1,12 @@
+on: pull_request
+name: Automention PRs
+jobs:
+  automention:
+    name: Automention
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Automention
+      uses: shilman/automention@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/pull_request-dangerfile-js-pull.yml
+++ b/.github/workflows/pull_request-dangerfile-js-pull.yml
@ -0,0 +1,14 @@
+on: pull_request
+name: Dangerfile JS Pull
+jobs:
+  dangerJS:
+    name: Danger JS
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@master
+    - name: Danger JS
+      uses: danger/danger-js@master
+      env:
+        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+      with:
+        args: --dangerfile .ci/danger/dangerfile.ts
--- a/.gitignore
+++ b/.gitignore
@ -1,6 +1,7 @@
 node_modules
 *.log
 .idea
+*.iml
 .vscode
 *.sw*
 npm-shrinkwrap.json
@ -27,4 +28,7 @@ lib/**/dll
 .expo/packager-info.json
 scripts/storage
 htpasswd
-/false
+/false
+storybook-out
+/addons/docs/common/config-*
+built-storybooks
--- a/.npmignore
+++ b/.npmignore
@ -1,10 +0,0 @@
-/example/
-/demo/
-/docs/
-/media/
-/node_modules/
-/.storybook/
-
-*.md
-
-.babelrc
--- a/.remarkrc.js
+++ b/.remarkrc.js
@ -1,3 +1,2 @@
-module.exports = {
-  plugins: ['remark-preset-lint-recommended', ['remark-lint-list-item-indent', false]],
-};
+/* eslint-disable import/no-extraneous-dependencies */
+module.exports = require('@storybook/linter-config/remark.config');
--- a/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
+++ b/.teamcity/OpenSourceProjects_Storybook/buildTypes/OpenSourceProjects_Storybook_Bootstrap.kt
@ -0,0 +1,81 @@
+package OpenSourceProjects_Storybook.buildTypes
+
+import jetbrains.buildServer.configs.kotlin.v2017_2.*
+import jetbrains.buildServer.configs.kotlin.v2017_2.buildFeatures.commitStatusPublisher
+import jetbrains.buildServer.configs.kotlin.v2017_2.buildSteps.script
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.vcs
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.retryBuild
+import jetbrains.buildServer.configs.kotlin.v2017_2.triggers.VcsTrigger
+
+object OpenSourceProjects_Storybook_Bootstrap : BuildType({
+    uuid = "9f9177e7-9ec9-4e2e-aabb-d304fd667712"
+    id = "OpenSourceProjects_Storybook_Bootstrap"
+    name = "Bootstrap"
+
+    artifactRules = """
+        addons/*/dist/** => dist.zip/addons
+        addons/storyshots/*/dist/** => dist.zip/addons/storyshots
+        app/*/dist/** => dist.zip/app
+        dev-kits/*/dist/** => dist.zip/dev-kits
+        lib/*/dist/** => dist.zip/lib
+        lib/core/dll/** => dist.zip/lib/core/dll
+    """.trimIndent()
+
+    vcs {
+        root(OpenSourceProjects_Storybook.vcsRoots.OpenSourceProjects_Storybook_HttpsGithubComStorybooksStorybookRefsHeadsMaster)
+    }
+
+    steps {
+        script {
+            name = "Bootstrap"
+            scriptContent = """
+                #!/bin/sh
+
+                set -e -x
+
+                yarn
+                yarn bootstrap --core
+            """.trimIndent()
+            dockerImage = "node:%docker.node.version%"
+        }
+    }
+
+    triggers {
+        vcs {
+            quietPeriodMode = VcsTrigger.QuietPeriodMode.USE_DEFAULT
+            triggerRules = "-:comment=^TeamCity change:**"
+            branchFilter = """
+                +:pull/*
+                +:release/*
+                +:master
+                +:next
+                +:snyk-fix-*
+            """.trimIndent()
+            enabled = false
+        }
+        retryBuild {
+            delaySeconds = 60
+            enabled = false
+        }
+    }
+
+    features {
+        commitStatusPublisher {
+            publisher = github {
+                githubUrl = "https://api.github.com"
+                authType = personalToken {
+                    token = "credentialsJSON:5ffe2d7e-531e-4f6f-b1fc-a41bfea26eaa"
+                }
+            }
+            param("github_oauth_user", "Hypnosphi")
+        }
+    }
+
+    requirements {
+        doesNotContain("env.OS", "Windows")
+    }
+
+    cleanup {
+        artifacts(days = 1)
+    }
+})
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,17 @@
+language: node_js
+node_js:
+  - "10"
+
+cache:
+  yarn: true
+
+install:
+  - yarn install
+  - yarn bootstrap --core
+
+script:
+
+jobs:
+  include:
+    - script: travis_wait 30 yarn test --cli
+    - script: travis_wait 30 yarn test-latest-cra
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@ -8,6 +8,7 @@
 |[centered](addons/centered)                 |+| |+|+| |+|+| |+| |+|+|
 |[contexts](addons/contexts)                 |+| |+| | | | | | | | |+|
 |[events](addons/events)                     |+| |+|+|+|+|+|+| | |+|+|
+|[design assets](addons/design-assets)       |+| |+|+|+|+|+|+|+|+|+|+|
 |[graphql](addons/graphql)                   |+| | | | | | | | | | | |
 |[google-analytics](addons/google-analytics) |+|+|+|+|+|+|+|+|+|+|+|+|
 |[info](addons/info)                         |+| | | | | | | | | | | |
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -27,7 +27,6 @@ To test your project against the current latest version of storybook, you can cl
 ```sh
 git clone https://github.com/storybookjs/storybook.git
 cd storybook
-yarn install
 yarn bootstrap
 ```

@ -139,7 +138,6 @@ A good way to do that is using the example `cra-kitchen-sink` app embedded in th
 # Download and build this repository:
 git clone https://github.com/storybookjs/storybook.git
 cd storybook
-yarn install
 yarn bootstrap --core

 # make changes to try and reproduce the problem, such as adding components + stories
@ -164,7 +162,7 @@ If you follow that process, you can then link to the GitHub repository in the is

 Sometimes your storybook is deeply ingrained in your own setup and it's hard to create a minimal viable reproduction somewhere else.

-Inside the storybook repo we have a script that allows you to test the packages inside this repo in your own seperate project.
+Inside the storybook repo we have a script that allows you to test the packages inside this repo in your own separate project.

 You can use `npm link` on all packages, but npm linking is cumbersome and has subtle differences from what happens in a registry-based installation.
 So the way our script works is that it:
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,62 +1,124 @@
 # Migration

- [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
-  - [babel.config.js support](#babelconfigjs-support)
- [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
-  - [React native server](#react-native-server)
-  - [Angular 7](#angular-7)
-  - [CoreJS 3](#corejs-3)
- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
-  - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
- [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
-  - [Webpack config simplification](#webpack-config-simplification)
-  - [Theming overhaul](#theming-overhaul)
-  - [Story hierarchy defaults](#story-hierarchy-defaults)
-  - [Options addon deprecated](#options-addon-deprecated)
-  - [Individual story decorators](#individual-story-decorators)
-  - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
-  - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
-  - [Addon viewport uses parameters](#addon-viewport-uses-parameters)
-  - [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed)
-  - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
-  - [New URL structure](#new-url-structure)
-  - [Vue integration](#vue-integration)
- [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
-  - [Private addon config](#private-addon-config)
-  - [React 15.x](#react-15x)
- [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
-  - [React 16.3+](#react-163)
-  - [Generic addons](#generic-addons)
-  - [Knobs select ordering](#knobs-select-ordering)
-  - [Knobs URL parameters](#knobs-url-parameters)
-  - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
-  - [Removed addWithInfo](#removed-addwithinfo)
-  - [Removed RN packager](#removed-rn-packager)
-  - [Removed RN addons](#removed-rn-addons)
-  - [Storyshots Changes](#storyshots-changes)
-  - [Webpack 4](#webpack-4)
-  - [Babel 7](#babel-7)
-  - [Create-react-app](#create-react-app)
-    - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
-    - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
-  - [start-storybook opens browser](#start-storybook-opens-browser)
-  - [CLI Rename](#cli-rename)
-  - [Addon story parameters](#addon-story-parameters)
- [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
- [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
-  - [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
-  - [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
-  - [Refactored Knobs](#refactored-knobs)
- [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
-  - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
-  - [Updated Addons API](#updated-addons-api)
- [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
-  - [Moved TypeScript definitions](#moved-typescript-definitions)
-  - [Deprecated head.html](#deprecated-headhtml)
- [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
-  - [Webpack upgrade](#webpack-upgrade)
-  - [Packages renaming](#packages-renaming)
-  - [Deprecated embedded addons](#deprecated-embedded-addons)
+- [Migration](#migration)
+  - [From version 5.1.x to 5.2.x](#from-version-51x-to-52x)
+    - [Source-loader](#source-loader)
+    - [Default viewports](#default-viewports)
+    - [Grid toolbar-feature](#grid-toolbar-feature)
+    - [Docs mode docgen](#docs-mode-docgen)
+    - [storySort option](#storysort-option)
+  - [From version 5.1.x to 5.1.10](#from-version-51x-to-5110)
+    - [babel.config.js support](#babelconfigjs-support)
+  - [From version 5.0.x to 5.1.x](#from-version-50x-to-51x)
+    - [React native server](#react-native-server)
+    - [Angular 7](#angular-7)
+    - [CoreJS 3](#corejs-3)
+  - [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
+    - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
+  - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
+    - [sortStoriesByKind](#sortstoriesbykind)
+    - [Webpack config simplification](#webpack-config-simplification)
+    - [Theming overhaul](#theming-overhaul)
+    - [Story hierarchy defaults](#story-hierarchy-defaults)
+    - [Options addon deprecated](#options-addon-deprecated)
+    - [Individual story decorators](#individual-story-decorators)
+    - [Addon backgrounds uses parameters](#addon-backgrounds-uses-parameters)
+    - [Addon cssresources name attribute renamed](#addon-cssresources-name-attribute-renamed)
+    - [Addon viewport uses parameters](#addon-viewport-uses-parameters)
+    - [Addon a11y uses parameters, decorator renamed](#addon-a11y-uses-parameters-decorator-renamed)
+    - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
+    - [New URL structure](#new-url-structure)
+    - [Rename of the `--secure` cli parameter to `--https`](#rename-of-the---secure-cli-parameter-to---https)
+    - [Vue integration](#vue-integration)
+  - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
+    - [Private addon config](#private-addon-config)
+    - [React 15.x](#react-15x)
+  - [From version 3.4.x to 4.0.x](#from-version-34x-to-40x)
+    - [React 16.3+](#react-163)
+    - [Generic addons](#generic-addons)
+    - [Knobs select ordering](#knobs-select-ordering)
+    - [Knobs URL parameters](#knobs-url-parameters)
+    - [Keyboard shortcuts moved](#keyboard-shortcuts-moved)
+    - [Removed addWithInfo](#removed-addwithinfo)
+    - [Removed RN packager](#removed-rn-packager)
+    - [Removed RN addons](#removed-rn-addons)
+    - [Storyshots Changes](#storyshots-changes)
+    - [Webpack 4](#webpack-4)
+    - [Babel 7](#babel-7)
+    - [Create-react-app](#create-react-app)
+      - [Upgrade CRA1 to babel 7](#upgrade-cra1-to-babel-7)
+      - [Migrate CRA1 while keeping babel 6](#migrate-cra1-while-keeping-babel-6)
+    - [start-storybook opens browser](#start-storybook-opens-browser)
+    - [CLI Rename](#cli-rename)
+    - [Addon story parameters](#addon-story-parameters)
+  - [From version 3.3.x to 3.4.x](#from-version-33x-to-34x)
+  - [From version 3.2.x to 3.3.x](#from-version-32x-to-33x)
+    - [`babel-core` is now a peer dependency (#2494)](#babel-core-is-now-a-peer-dependency-2494)
+    - [Base webpack config now contains vital plugins (#1775)](#base-webpack-config-now-contains-vital-plugins-1775)
+    - [Refactored Knobs](#refactored-knobs)
+  - [From version 3.1.x to 3.2.x](#from-version-31x-to-32x)
+    - [Moved TypeScript addons definitions](#moved-typescript-addons-definitions)
+    - [Updated Addons API](#updated-addons-api)
+  - [From version 3.0.x to 3.1.x](#from-version-30x-to-31x)
+    - [Moved TypeScript definitions](#moved-typescript-definitions)
+    - [Deprecated head.html](#deprecated-headhtml)
+  - [From version 2.x.x to 3.x.x](#from-version-2xx-to-3xx)
+    - [Webpack upgrade](#webpack-upgrade)
+    - [Packages renaming](#packages-renaming)
+    - [Deprecated embedded addons](#deprecated-embedded-addons)
+
+## From version 5.1.x to 5.2.x
+
+### Source-loader
+
+Addon-storysource contains a loader, `@storybook/addon-storysource/loader`, which has been deprecated in 5.2. If you use it, you'll see the warning:
+
+```
+@storybook/addon-storysource/loader is deprecated, please use @storybook/source-loader instead.
+```
+
+To upgrade to `@storybook/source-loader`, simply `npm install -D @storybook/source-laoder` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loaoder` with `@storybook/source-loader`.
+
+### Default viewports
+
+The default viewports have been reduced to a smaller set, we think is enough for most use cases.
+You can get the old default back by adding the following to your `config.js`:
+
+```js
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+addParameters({
+  viewport: {
+    viewports: INITIAL_VIEWPORTS,
+  },
+});
+```
+
+### Grid toolbar-feature
+
+The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.
+
+### 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.
+
+### storySort option
+
+In 5.0.x the global option `sortStoriesByKind` option was [inadverttly removed](#sortstoriesbykind). In 5.2 we've introduced a new option, `storySort`, to replace it. `storySort` takes a comparator function, so it is strictly more powerful than `sortStoriesByKind`.
+
+For example, here's how to sort by story ID using `storySort`:
+
+```js
+addParameters({
+  options: {
+    storySort: (a, b) =>
+      a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+  },
+});
+```

 ## From version 5.1.x to 5.1.10

@ -187,7 +249,7 @@ sortedModules.forEach(key => {
 });
 ```

-## Webpack config simplification
+### Webpack config simplification

 The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change. Storybook's "full control mode" for webpack allows you to override the webpack config with a function that returns a configuration object.

@ -201,11 +263,11 @@ In contrast, the 4.x configuration function accepted either two or three argumen

 Please see the [current custom webpack documentation](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config.

-## Theming overhaul
+### Theming overhaul

 Theming has been rewritten in v5. If you used theming in v4, please consult the [theming docs](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/configurations/theming/index.md) to learn about the new API.

-## Story hierarchy defaults
+### Story hierarchy defaults

 Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).

@ -233,7 +295,7 @@ addParameters({
 });
 ```

-## Options addon deprecated
+### Options addon deprecated

 In 4.x we added story parameters. In 5.x we've deprecated the options addon in favor of [global parameters](./docs/src/pages/configurations/options-parameter/index.md), and we've also renamed some of the options in the process (though we're maintaining backwards compatibility until 6.0).

@ -287,7 +349,7 @@ Storybook v5 removes the search dialog box in favor of a quick search in the nav

 Storybook v5 introduce a new tool bar above the story view and you can show\hide it with the new `isToolshown` option.

-## Individual story decorators
+### Individual story decorators

 The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybookjs/storybook/issues/5781)).

@ -310,7 +372,7 @@ storiesOf('Stories', module)
  .add('centered', () => 'Hello', { decorators: [centered] });
 ```

-## Addon backgrounds uses parameters
+### Addon backgrounds uses parameters

 Similarly, `@storybook/addon-backgrounds` uses parameters to pass background options. If you previously had:

@ -329,7 +391,7 @@ storiesOf('Stories', module).addParameters({ backgrounds: options });

 You can pass `backgrounds` parameters at the global level (via `addParameters` imported from `@storybook/react` et al.), and the story level (via the third argument to `.add()`).

-## Addon cssresources name attribute renamed
+### Addon cssresources name attribute renamed

 In the options object for `@storybook/addon-cssresources`, the `name` attribute for each resource has been renamed to `id`. If you previously had:

@ -369,7 +431,7 @@ addDecorator(
 );
 ```

-## Addon viewport uses parameters
+### Addon viewport uses parameters

 Similarly, `@storybook/addon-viewport` uses parameters to pass viewport options. If you previously had:

@ -391,7 +453,7 @@ The `withViewport` decorator is also no longer supported and should be replaced

 See the [viewport addon README](https://github.com/storybookjs/storybook/blob/master/addons/viewport/README.md) for more information.

-## Addon a11y uses parameters, decorator renamed
+### Addon a11y uses parameters, decorator renamed

 Similarly, `@storybook/addon-a11y` uses parameters to pass a11y options. If you previously had:

@ -415,7 +477,7 @@ Furthermore, the decorator `checkA11y` has been deprecated and renamed to `withA

 See the [a11y addon README](https://github.com/storybookjs/storybook/blob/master/addons/a11y/README.md) for more information.

-## New keyboard shortcuts defaults
+### New keyboard shortcuts defaults

 Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can:

@ -431,7 +493,7 @@ Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via
 | Prev component         |             | alt-↑ |
 | Search                 |             | /     |

-## New URL structure
+### New URL structure

 We've update Storybook's URL structure in 5.0. The old structure used URL parameters to save the UI state, resulting in long ugly URLs. v5 respects the old URL parameters, but largely does away with them.

@ -445,7 +507,7 @@ https://url-of-storybook?path=/story/<storyId>

 The structure of `storyId` is a slugified `<selectedKind>--<selectedStory>` (slugified = lowercase, hyphen-separated). Each `storyId` must be unique. We plan to build more features into Storybook in upcoming versions based on this new structure.

-## Rename of the `--secure` cli parameter to `--https`
+### Rename of the `--secure` cli parameter to `--https`

 Storybook for React Native's start commands & the Web versions' start command were a bit different, for no reason.
 We've changed the start command for Reactnative to match the other.
@ -464,7 +526,7 @@ You have to replace it with:
 start-storybook --https
 ```

-## Vue integration
+### Vue integration

 The Vue integration was updated, so that every story returned from a story or decorator function is now being normalized with `Vue.extend` **and** is being wrapped by a functional component. Returning a string from a story or decorator function is still supported and is treated as a component with the returned string as the template.

@ -474,11 +536,11 @@ Currently there is no recommended way of accessing the component options of a st

 There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.

-## Private addon config
+### Private addon config

 If your Storybook contains custom addons defined that are defined in your app (as opposed to installed from packages) and those addons rely on reconfiguring webpack/babel, Storybook 4.1 may break for you. There's a workaround [described in the issue](https://github.com/storybookjs/storybook/issues/4995), and we're working on official support in the next release.

-## React 15.x
+### React 15.x

 Storybook 4.1 supports React 15.x (which had been [lost in the 4.0 release](#react-163)). So if you've been blocked on upgrading, we've got you covered. You should be able to upgrade according to the 4.0 migration notes below, or following the [4.0 upgrade guide](https://medium.com/storybookjs/migrating-to-storybook-4-c65b19a03d2c).

--- a/README.md
+++ b/README.md
@ -1,37 +1,62 @@
-# Storybook
-
 <p align="center">
-  <a href="https://circleci.com/gh/storybookjs/storybook"><img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" /></a>
-  <a href="https://www.codefactor.io/repository/github/storybookjs/storybook"><img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" /></a>
-  <a href="https://snyk.io/test/github/storybookjs/storybook"><img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" /></a>
-  <a href="https://bettercodehub.com/results/storybookjs/storybook"><img src="https://bettercodehub.com/edge/badge/storybookjs/storybook" alt="BCH compliance" /></a>
-  <a href="https://codecov.io/gh/storybookjs/storybook"><img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" /></a>
-  <a href="https://github.com/storybookjs/storybook/blob/master/LICENSE"><img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" /></a></p>
-</p>
-<p align="center">
-  <a href="https://discord.gg/sMFvFsG"><img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" /></a>
-  <a href="https://now-examples-slackin-rrirkqohko.now.sh/"><img src="https://now-examples-slackin-rrirkqohko.now.sh/badge.svg?logo=slack" alt="Storybook Slack" /></a>
-  <a href="#backers"><img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" /></a>
-  <a href="#sponsors"><img src="https://opencollective.com/storybook/sponsors/badge.svg" alt="Sponsors on Open Collective" /></a>
+  <a href="https://storybook.js.org/">
+    <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
+  </a>
 </p>

---
+<p align="center">Build bulletproof UI components faster</p>
+
+<br/>
+
+<p align="center">
+  <a href="https://circleci.com/gh/storybookjs/storybook">
+    <img src="https://circleci.com/gh/storybookjs/storybook.svg?style=shield" alt="Build Status on CircleCI" />
+  </a>
+  <a href="https://www.codefactor.io/repository/github/storybookjs/storybook">
+    <img src="https://www.codefactor.io/repository/github/storybookjs/storybook/badge" alt="CodeFactor" />
+  </a>
+  <a href="https://snyk.io/test/github/storybookjs/storybook">
+    <img src="https://snyk.io/test/github/storybookjs/storybook/badge.svg" alt="Known Vulnerabilities" />
+  </a>
+  <a href="https://codecov.io/gh/storybookjs/storybook">
+    <img src="https://codecov.io/gh/storybookjs/storybook/branch/master/graph/badge.svg" alt="codecov" />
+  </a>
+  <a href="https://github.com/storybookjs/storybook/blob/master/LICENSE">
+    <img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" />
+  </a>
+  <br/>
+  <a href="https://discord.gg/sMFvFsG">
+    <img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />
+  </a>
+  <a href="https://now-examples-slackin-rrirkqohko.now.sh/">
+    <img src="https://now-examples-slackin-rrirkqohko.now.sh/badge.svg?logo=slack" alt="Storybook Slack" />
+  </a>
+  <a href="#backers">
+    <img src="https://opencollective.com/storybook/backers/badge.svg" alt="Backers on Open Collective" />
+  </a>
+  <a href="#sponsors">
+    <img src="https://opencollective.com/storybook/sponsors/badge.svg" alt="Sponsors on Open Collective" />
+  </a>
+  <a href="https://twitter.com/intent/follow?screen_name=storybookjs">
+    <img src="https://badgen.net/twitter/follow/storybookjs?icon=twitter&label=%40storybookjs" alt="Official Twitter Handle" />
+  </a>
+</p>

 Storybook is a development environment for UI components.
 It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

-## Intro
-
 <center>
  <img src="media/storybook-intro.gif" width="100%" />
 </center>

 <p align="center">
-  README for:<br/>
+  View README for:<br/>
  <a href="https://github.com/storybookjs/storybook/blob/master/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
 </p>

+## Intro
+
 Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

 Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>
@ -51,6 +76,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduct
  - 👨‍💻[Development scripts](#development-scripts)
  - 💵[Backers](#backers)
  - 💸[Sponsors](#sponsors)
+- :memo:[License](#license)

 ## Getting Started

@ -112,6 +138,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [centered](addons/centered/)                | Center the alignment of your components within the Storybook UI            |
 | [contexts](addons/contexts/)                | Interactively inject component contexts for stories in the Storybook UI    |
 | [cssresources](addons/cssresources/)        | Dynamically add/remove css resources to the component iframe               |
+| [design assets](addons/design-assets/)      | View images, videos, weblinks alongside your story                         |
 | [events](addons/events/)                    | Interactively fire events to components that respond to EventEmitter       |
 | [graphql](addons/graphql/)                  | Query a GraphQL server within Storybook stories                            |
 | [google-analytics](addons/google-analytics) | Reports google analytics on stories                                        |
@ -137,7 +164,7 @@ We have a badge! Link it to your live Storybook example.
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](link to site)
 ```

-If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybookjs/press).
+If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [brand repo](https://github.com/storybookjs/brand).

 ## Community

@ -162,7 +189,7 @@ Looking for a first issue to tackle?

 ### Development scripts

-Storybook is organized as a monorepo using [Lerna](https://lernajs.io). Useful scripts include:
+Storybook is organized as a monorepo using [Lerna](https://lerna.js.org/). Useful scripts include:

 #### `yarn bootstrap`

--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@ -45,7 +45,7 @@ storiesOf('button', module)
 ```

 For more customizability. Use the `addParameters` function to configure [aXe options](https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure).
-You can override these options at story level too.
+You can override these options [at story level too](https://storybook.js.org/docs/configurations/options-parameter/#per-story-options).

 ```js
 import React from 'react';
@ -78,7 +78,7 @@ storiesOf('button', module)

 ## Roadmap

-* Make UI accessibile
+* Make UI accessible
 * Show in story where violations are.
 * Add more example tests
 * Add tests
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -20,19 +20,25 @@
    "directory": "addons/a11y"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "register.js"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.1.11",
-    "@storybook/api": "5.1.11",
-    "@storybook/client-logger": "5.1.11",
-    "@storybook/components": "5.1.11",
-    "@storybook/core-events": "5.1.11",
-    "@storybook/theming": "5.1.11",
-    "axe-core": "^3.2.2",
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/client-logger": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
+    "@storybook/theming": "5.3.0-alpha.4",
+    "axe-core": "^3.3.2",
    "common-tags": "^1.8.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@ -34,15 +34,15 @@ const Icon = styled(Icons)(
      : {}
 );

-const Passes = styled.span(({ theme }) => ({
+const Passes = styled.span<{}>(({ theme }) => ({
  color: theme.color.positive,
 }));

-const Violations = styled.span(({ theme }) => ({
+const Violations = styled.span<{}>(({ theme }) => ({
  color: theme.color.negative,
 }));

-const Incomplete = styled.span(({ theme }) => ({
+const Incomplete = styled.span<{}>(({ theme }) => ({
  color: theme.color.warning,
 }));

--- a/addons/a11y/src/components/ColorBlindness.tsx
+++ b/addons/a11y/src/components/ColorBlindness.tsx
@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component } from 'react';
+import React, { Component, ReactNode } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';

@ -38,86 +38,90 @@ const ColorIcon = styled.span(
 interface ColorBlindnessProps {}

 interface ColorBlindnessState {
-  expanded: boolean;
-  filter: string | null;
+  active: string | null;
 }

+const baseList = [
+  'protanopia',
+  'protanomaly',
+  'deuteranopia',
+  'deuteranomaly',
+  'tritanopia',
+  'tritanomaly',
+  'achromatopsia',
+  'achromatomaly',
+  'mono',
+];
+
+export interface Link {
+  id: string;
+  title: ReactNode;
+  right?: ReactNode;
+  active: boolean;
+  onClick: () => void;
+}
+
+const getColorList = (active: string | null, set: (i: string | null) => void): Link[] => [
+  ...(active !== null
+    ? [
+        {
+          id: 'reset',
+          title: 'Reset color filter',
+          onClick: () => {
+            set(null);
+          },
+          right: undefined,
+          active: false,
+        },
+      ]
+    : []),
+  ...baseList.map(i => ({
+    id: i,
+    title: i.charAt(0).toUpperCase() + i.slice(1),
+    onClick: () => {
+      set(i);
+    },
+    right: <ColorIcon filter={i} />,
+    active: active === i,
+  })),
+];
+
 export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
  state: ColorBlindnessState = {
-    expanded: false,
-    filter: null,
+    active: null,
  };

-  setFilter = (filter: string | null) => {
+  setActive = (active: string | null) => {
    const iframe = getIframe();

    if (iframe) {
-      iframe.style.filter = getFilter(filter);
+      iframe.style.filter = getFilter(active);
      this.setState({
-        expanded: false,
-        filter,
+        active,
      });
    } else {
      logger.error('Cannot find Storybook iframe');
    }
  };

-  onVisibilityChange = (s: boolean) => {
-    const { expanded } = this.state;
-    if (expanded !== s) {
-      this.setState({ expanded: s });
-    }
-  };
-
  render() {
-    const { filter, expanded } = this.state;
-
-    let colorList = [
-      'protanopia',
-      'protanomaly',
-      'deuteranopia',
-      'deuteranomaly',
-      'tritanopia',
-      'tritanomaly',
-      'achromatopsia',
-      'achromatomaly',
-      'mono',
-    ].map(i => ({
-      id: i,
-      title: i.charAt(0).toUpperCase() + i.slice(1),
-      onClick: () => {
-        this.setFilter(i);
-      },
-      right: <ColorIcon filter={i} />,
-      active: filter === i,
-    }));
-
-    if (filter !== null) {
-      colorList = [
-        {
-          id: 'reset',
-          title: 'Reset color filter',
-          onClick: () => {
-            this.setFilter(null);
-          },
-          right: undefined,
-          active: false,
-        },
-        ...colorList,
-      ];
-    }
+    const { active } = this.state;

    return (
      <WithTooltip
        placement="top"
        trigger="click"
-        tooltipShown={expanded}
-        onVisibilityChange={this.onVisibilityChange}
-        tooltip={<TooltipLinkList links={colorList} />}
+        tooltip={({ onHide }) => {
+          const colorList = getColorList(active, i => {
+            this.setActive(i);
+            onHide();
+          });
+          return <TooltipLinkList links={colorList} />;
+        }}
        closeOnClick
-        onDoubleClick={() => this.setFilter(null)}
+        onDoubleClick={() => this.setActive(null)}
      >
-        <IconButton key="filter" active={!!filter} title="Color Blindness Emulation">
+        <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
          <Icons icon="mirror" />
        </IconButton>
      </WithTooltip>
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@ -11,7 +11,7 @@ const Item = styled.li({
  fontWeight: 600,
 });

-const ItemTitle = styled.span(({ theme }) => ({
+const ItemTitle = styled.span<{}>(({ theme }) => ({
  borderBottom: `1px solid ${theme.appBorderColor}`,
  width: '100%',
  display: 'flex',
--- a/addons/a11y/src/components/Report/HighlightToggle.tsx
+++ b/addons/a11y/src/components/Report/HighlightToggle.tsx
@ -31,7 +31,7 @@ enum CheckBoxStates {
  INDETERMINATE,
 }

-const Checkbox = styled.input(({ disabled }) => ({
+const Checkbox = styled.input<{ disabled: boolean }>(({ disabled }) => ({
  cursor: disabled ? 'not-allowed' : 'pointer',
 }));

--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@ -10,7 +10,7 @@ import { Tags } from './Tags';
 import { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';

-const Wrapper = styled.div(({ theme }) => ({
+const Wrapper = styled.div<{}>(({ theme }) => ({
  display: 'flex',
  width: '100%',
  borderBottom: `1px solid ${theme.appBorderColor}`,
@ -30,7 +30,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
  display: 'inline-flex',
 }));

-const HeaderBar = styled.div(({ theme }) => ({
+const HeaderBar = styled.div<{}>(({ theme }) => ({
  padding: theme.layoutMargin,
  paddingLeft: theme.layoutMargin - 3,
  background: 'none',
--- a/addons/a11y/src/components/Report/Tags.tsx
+++ b/addons/a11y/src/components/Report/Tags.tsx
@ -9,7 +9,7 @@ const Wrapper = styled.div({
  margin: '12px 0',
 });

-const Item = styled.div(({ theme }) => ({
+const Item = styled.div<{}>(({ theme }) => ({
  margin: '0 6px',
  padding: '5px',
  border: `1px solid ${theme.appBorderColor}`,
--- a/addons/a11y/src/components/Report/snapshots/HighlightToggle.test.js.snap
+++ b/addons/a11y/src/components/Report/snapshots/HighlightToggle.test.js.snap
@ -321,7 +321,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
        }
      }
    >
-      <ConnectFunction>
+      <Connect(HighlightToggle)>
        <HighlightToggle
          addElement={[Function]}
          elementsToHighlight={Array []}
@ -346,7 +346,7 @@ exports[`HighlightToggle component should match snapshot 1`] = `
            />
          </Styled(input)>
        </HighlightToggle>
-      </ConnectFunction>
+      </Connect(HighlightToggle)>
    </ThemeProvider>
  </ThemedHighlightToggle>
 </Provider>
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@ -15,7 +15,7 @@ const Container = styled.div({
  minHeight: '100%',
 });

-const HighlightToggleLabel = styled.label(({ theme }) => ({
+const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
  cursor: 'pointer',
  userSelect: 'none',
  marginBottom: '3px',
@ -77,7 +77,7 @@ const Item = styled.button(

 const TabsWrapper = styled.div({});

-const List = styled.div(({ theme }) => ({
+const List = styled.div<{}>(({ theme }) => ({
  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
  background: 'rgba(0, 0, 0, .05)',
  display: 'flex',
--- a/addons/a11y/src/components/snapshots/A11YPanel.test.js.snap
+++ b/addons/a11y/src/components/snapshots/A11YPanel.test.js.snap
@ -120,6 +120,7 @@ exports[`A11YPanel should render report 1`] = `
  display: -ms-flexbox;
  display: flex;
  background: #FFFFFF;
+  z-index: 1;
 }

 .emotion-3 {
@ -138,6 +139,7 @@ exports[`A11YPanel should render report 1`] = `
  background: #FFFFFF;
  font-size: 12px;
  line-height: 16px;
+  font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-weight: 700;
  border-top: 1px solid rgba(0,0,0,.1);
  border-left: 1px solid rgba(0,0,0,.1);
@ -214,15 +216,15 @@ exports[`A11YPanel should render report 1`] = `
              "insert": [Function],
              "inserted": Object {
                "0": true,
-                "110qmus": true,
+                "11xgcgt": true,
                "1551xjo": true,
                "15paq49": true,
                "1977chw": true,
                "19mcg9j": true,
                "1ez3l8h": true,
+                "1imo1gr": true,
                "1kbt4a0": true,
                "1l7fvsg": true,
-                "1myfomu": true,
                "1vwgrhn": true,
                "4ryd4s": true,
                "6hqipu": true,
@ -490,13 +492,13 @@ exports[`A11YPanel should render report 1`] = `
                    data-emotion="css"
                  >
                    
-                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                  </style>
                  <style
                    data-emotion="css"
                  >
                    
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                  </style>
                  <style
                    data-emotion="css"
@ -716,13 +718,13 @@ exports[`A11YPanel should render report 1`] = `
                    data-emotion="css"
                  >
                    
-                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;}
+                    .emotion-4{position:absolute;bottom:0;right:0;max-width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;background:#FFFFFF;z-index:1;}
                  </style>,
                  <style
                    data-emotion="css"
                  >
                    
-                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
+                    .emotion-3{border:0 none;padding:4px 10px;cursor:pointer;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:#333333;background:#FFFFFF;font-size:12px;line-height:16px;font-family:"Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:700;border-top:1px solid rgba(0,0,0,.1);border-left:1px solid rgba(0,0,0,.1);margin-left:-1px;border-radius:4px 0 0 0;}
                  </style>,
                  <style
                    data-emotion="css"
--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
@ -2,7 +2,7 @@ import React, { Fragment, FunctionComponent } from 'react';
 import { styled } from '@storybook/theming';

 import { addons, types } from '@storybook/addons';
-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { ColorBlindness } from './components/ColorBlindness';
 import { A11YPanel } from './components/A11YPanel';

@ -94,6 +94,7 @@ addons.register(ADDON_ID, api => {
    title: 'Accessibility',
    type: types.PANEL,
    render: ({ active, key }) => <A11YPanel key={key} api={api} active={active} />,
+    paramKey: PARAM_KEY,
  });

  addons.add(PANEL_ID, {
--- a/addons/actions/README.md
+++ b/addons/actions/README.md
@ -78,7 +78,7 @@ storiesOf('Button', module).add('default view', () => (

 ## Configuration

-Arguments which are passed to the action call will have to be serialized while be "transfered"
+Arguments which are passed to the action call will have to be serialized while be "transferred"
 over the channel.

 This is not very optimal and can cause lag when large objects are being logged, for this reason it is possible 
@ -111,7 +111,7 @@ action('my-action', {

 |Name|Type|Description|Default|
 |---|---|---|---|
-|`depth`|Number|Configures the transfered depth of any logged objects.|`10`|
+|`depth`|Number|Configures the transferred depth of any logged objects.|`10`|
 |`clearOnStoryChange`|Boolean|Flag whether to clear the action logger when switching away from the current story.|`true`|
 |`limit`|Number|Limits the number of items logged in the action logger|`50`|

--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -15,21 +15,27 @@
    "directory": "addons/actions"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "register.js"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.1.11",
-    "@storybook/api": "5.1.11",
-    "@storybook/components": "5.1.11",
-    "@storybook/core-events": "5.1.11",
-    "@storybook/theming": "5.1.11",
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/client-api": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
+    "@storybook/theming": "5.3.0-alpha.4",
    "core-js": "^3.0.1",
    "fast-deep-equal": "^2.0.1",
    "global": "^4.3.2",
-    "lodash": "^4.17.11",
    "polished": "^3.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
--- a/addons/actions/src/components/ActionLogger/style.tsx
+++ b/addons/actions/src/components/ActionLogger/style.tsx
@ -10,7 +10,7 @@ export const Action = styled.div({
  alignItems: 'flex-start',
 });

-export const Counter = styled.div(({ theme }) => ({
+export const Counter = styled.div<{}>(({ theme }) => ({
  backgroundColor: opacify(0.5, theme.appBorderColor),
  color: theme.color.inverseText,
  fontSize: theme.typography.size.s1,
--- a/addons/actions/src/constants.ts
+++ b/addons/actions/src/constants.ts
@ -1,3 +1,4 @@
+export const PARAM_KEY = 'actions';
 export const ADDON_ID = 'storybook/actions';
 export const PANEL_ID = `${ADDON_ID}/panel`;
 export const EVENT_ID = `${ADDON_ID}/action-event`;
--- a/addons/actions/src/manager.tsx
+++ b/addons/actions/src/manager.tsx
@ -1,13 +1,14 @@
 import React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
-import { ADDON_ID, PANEL_ID } from '.';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';

 export function register() {
  addons.register(ADDON_ID, api => {
    addons.addPanel(PANEL_ID, {
      title: 'Actions',
      render: ({ active, key }) => <ActionLogger key={key} api={api} active={active} />,
+      paramKey: PARAM_KEY,
    });
  });
 }
--- a/addons/actions/src/models/ActionsFunction.ts
+++ b/addons/actions/src/models/ActionsFunction.ts
@ -0,0 +1,81 @@
+import { ActionOptions } from './ActionOptions';
+import { ActionsMap } from './ActionsMap';
+
+export interface ActionsFunction {
+  <T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(...handlers: T[]): ActionsMap<T>;
+
+  <T extends string>(handler1: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(handler1: T, handler2: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(handler1: T, handler2: T, handler3: T, options?: ActionOptions): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    handler9: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+  <T extends string>(
+    handler1: T,
+    handler2: T,
+    handler3: T,
+    handler4: T,
+    handler5: T,
+    handler6: T,
+    handler7: T,
+    handler8: T,
+    handler9: T,
+    handler10: T,
+    options?: ActionOptions
+  ): ActionsMap<T>;
+}
--- a/addons/actions/src/models/ActionsMap.ts
+++ b/addons/actions/src/models/ActionsMap.ts
@ -1,5 +1,3 @@
 import { HandlerFunction } from './HandlerFunction';

-export interface ActionsMap {
-  [key: string]: HandlerFunction;
-}
+export type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;
--- a/addons/actions/src/models/index.ts
+++ b/addons/actions/src/models/index.ts
@ -1,4 +1,5 @@
 export * from './ActionDisplay';
+export * from './ActionsFunction';
 export * from './ActionOptions';
 export * from './ActionsMap';
 export * from './DecoratorFunction';
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@ -1,4 +1,4 @@
-import uuid from 'uuid/v1';
+import uuid from 'uuid/v4';
 import { addons } from '@storybook/addons';
 import { EVENT_ID } from '../constants';
 import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
--- a/addons/actions/src/preview/actions.ts
+++ b/addons/actions/src/preview/actions.ts
@ -1,8 +1,8 @@
 import { action } from './action';
-import { ActionOptions, ActionsMap } from '../models';
+import { ActionsFunction, ActionOptions, ActionsMap } from '../models';
 import { config } from './configureActions';

-export function actions(...args: any[]): ActionsMap {
+export const actions: ActionsFunction = (...args: any[]) => {
  let options: ActionOptions = config;
  const names = args;
  // last argument can be options
@ -26,4 +26,4 @@ export function actions(...args: any[]): ActionsMap {
    actionsObject[name] = action(namesObject[name], options);
  });
  return actionsObject;
-}
+};
--- a/addons/actions/src/preview/withActions.ts
+++ b/addons/actions/src/preview/withActions.ts
@ -1,14 +1,9 @@
 // Based on http://backbonejs.org/docs/backbone.html#section-164
 import { document, Element } from 'global';
-import { isEqual } from 'lodash';
-import { addons } from '@storybook/addons';
-import Events from '@storybook/core-events';
+import { useEffect } from '@storybook/client-api';

 import { actions } from './actions';

-let lastSubscription: () => () => void;
-let lastArgs: any[];
-
 const delegateEventSplitter = /^(\S+)\s*(.*)$/;

 const isIE = Element != null && !Element.prototype.matches;
@ -42,24 +37,17 @@ const createHandlers = (actionsFn: (...arg: any[]) => object, ...args: any[]) =>
  });
 };

-const actionsSubscription = (...args: any[]) => {
-  if (!isEqual(args, lastArgs)) {
-    lastArgs = args;
-    // @ts-ignore
-    const handlers = createHandlers(...args);
-    lastSubscription = () => {
+export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
+  useEffect(() => {
+    if (root != null) {
+      const handlers = createHandlers(actionsFn, ...args);
      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
      return () =>
        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
-    };
-  }
-  return lastSubscription;
-};
+    }
+    return undefined;
+  }, [root, actionsFn, args]);

-export const createDecorator = (actionsFn: any) => (...args: any[]) => (storyFn: () => any) => {
-  if (root != null) {
-    addons.getChannel().emit(Events.REGISTER_SUBSCRIPTION, actionsSubscription(actionsFn, ...args));
-  }
  return storyFn();
 };

--- a/addons/backgrounds/README.md
+++ b/addons/backgrounds/README.md
@ -4,7 +4,7 @@ Storybook Background Addon can be used to change background colors inside the pr

 [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)

-![React Storybook Screenshot](https://storybook.js.org/img/addon-backgrounds.gif)
+![React Storybook Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/master/docs/static/img/addon-backgrounds.gif)

 ## Installation

--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -19,18 +19,24 @@
  },
  "license": "MIT",
  "author": "jbaxleyiii",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "register.js"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.1.11",
-    "@storybook/api": "5.1.11",
-    "@storybook/client-logger": "5.1.11",
-    "@storybook/components": "5.1.11",
-    "@storybook/core-events": "5.1.11",
-    "@storybook/theming": "5.1.11",
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/client-logger": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
+    "@storybook/theming": "5.3.0-alpha.4",
    "core-js": "^3.0.1",
    "memoizerific": "^1.11.3",
    "react": "^16.8.3",
--- a/addons/backgrounds/src/constants.ts
+++ b/addons/backgrounds/src/constants.ts
@ -1,5 +1,6 @@
 export const ADDON_ID = 'storybook/background';
 export const PARAM_KEY = 'backgrounds';
+export const GRID_PARAM_KEY = 'grid';

 export const EVENTS = {
  UPDATE: `${ADDON_ID}/update`,
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Component, Fragment, ReactElement } from 'react';
 import memoize from 'memoizerific';

 import { Combo, Consumer, API } from '@storybook/api';
@ -14,7 +14,7 @@ interface Item {
  title: string;
  onClick: () => void;
  value: string;
-  right?: any;
+  right?: ReactElement;
 }

 interface Input {
@ -23,7 +23,7 @@ interface Input {
  default?: boolean;
 }

-const iframeId = 'storybook-preview-background';
+const iframeId = 'storybook-preview-iframe';

 const createBackgroundSelectorItem = memoize(1000)(
  (
@ -63,66 +63,64 @@ const getSelectedBackgroundColor = (list: Input[], currentSelectedValue: string)
  return 'transparent';
 };

-const mapper = ({ api, state }: Combo): { items: Input[] } => {
+const mapper = ({ api, state }: Combo): { items: Input[]; selected: string | null } => {
  const story = state.storiesHash[state.storyId];
  const list = story ? api.getParameters(story.id, PARAM_KEY) : [];
+  const selected = state.addons[PARAM_KEY] || null;

-  return { items: list || [] };
+  return { items: list || [], selected };
 };

-const getDisplayedItems = memoize(10)((list: Input[], selected: State['selected'], change) => {
-  let availableBackgroundSelectorItems: Item[] = [];
+const getDisplayedItems = memoize(10)(
+  (
+    list: Input[],
+    selected: string | null,
+    change: (arg: { selected: string; name: string }) => void
+  ) => {
+    let availableBackgroundSelectorItems: Item[] = [];

-  if (selected !== 'transparent') {
-    availableBackgroundSelectorItems.push(
-      createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
-    );
+    if (selected !== 'transparent') {
+      availableBackgroundSelectorItems.push(
+        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change)
+      );
+    }
+
+    if (list.length) {
+      availableBackgroundSelectorItems = [
+        ...availableBackgroundSelectorItems,
+        ...list.map(({ name, value }) =>
+          createBackgroundSelectorItem(null, name, value, true, change)
+        ),
+      ];
+    }
+
+    return availableBackgroundSelectorItems;
  }
+);

-  if (list.length) {
-    availableBackgroundSelectorItems = [
-      ...availableBackgroundSelectorItems,
-      ...list.map(({ name, value }) =>
-        createBackgroundSelectorItem(null, name, value, true, change)
-      ),
-    ];
-  }
-
-  return availableBackgroundSelectorItems;
-});
-
-interface State {
-  selected: string;
-  expanded: boolean;
+interface GlobalState {
+  name: string | undefined;
+  selected: string | undefined;
 }

-export class BackgroundSelector extends Component<{ api: API }, State> {
-  state: State = {
-    selected: null,
-    expanded: false,
-  };
+interface Props {
+  api: API;
+}

-  change = ({ selected, name }: { selected: string; name: string }) => {
+export class BackgroundSelector extends Component<Props> {
+  change = ({ selected, name }: GlobalState) => {
    const { api } = this.props;
-    api.emit(EVENTS.UPDATE, { selected, name });
-    this.setState({ selected, expanded: false });
-  };
-
-  onVisibilityChange = (s: boolean) => {
-    const { expanded } = this.state;
-    if (expanded !== s) {
-      this.setState({ expanded: s });
+    if (typeof selected === 'string') {
+      api.setAddonState<string>(PARAM_KEY, selected);
    }
+    api.emit(EVENTS.UPDATE, { selected, name });
  };

  render() {
-    const { expanded, selected } = this.state;
-
    return (
      <Consumer filter={mapper}>
-        {({ items }: { items: Input[] }) => {
+        {({ items, selected }: ReturnType<typeof mapper>) => {
          const selectedBackgroundColor = getSelectedBackgroundColor(items, selected);
-          const links = getDisplayedItems(items, selectedBackgroundColor, this.change);

          return items.length ? (
            <Fragment>
@ -130,7 +128,7 @@ export class BackgroundSelector extends Component<{ api: API }, State> {
                <Global
                  styles={(theme: Theme) => ({
                    [`#${iframeId}`]: {
-                      background:
+                      backgroundColor:
                        selectedBackgroundColor === 'transparent'
                          ? theme.background.content
                          : selectedBackgroundColor,
@ -141,9 +139,14 @@ export class BackgroundSelector extends Component<{ api: API }, State> {
              <WithTooltip
                placement="top"
                trigger="click"
-                tooltipShown={expanded}
-                onVisibilityChange={this.onVisibilityChange}
-                tooltip={<TooltipLinkList links={links} />}
+                tooltip={({ onHide }) => (
+                  <TooltipLinkList
+                    links={getDisplayedItems(items, selectedBackgroundColor, i => {
+                      this.change(i);
+                      onHide();
+                    })}
+                  />
+                )}
                closeOnClick
              >
                <IconButton
--- a/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/addons/backgrounds/src/containers/GridSelector.tsx
@ -0,0 +1,51 @@
+import React, { FunctionComponent, memo } from 'react';
+
+import { useAddonState, useParameter } from '@storybook/api';
+import { Global } from '@storybook/theming';
+import { Icons, IconButton } from '@storybook/components';
+
+import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
+
+export interface BackgroundGridParameters {
+  cellSize: number;
+}
+
+const iframeId = 'storybook-preview-iframe';
+
+export const GridSelector: FunctionComponent = memo(() => {
+  const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
+  const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
+
+  return (
+    <IconButton
+      key="background"
+      active={state}
+      title="Change the background of the preview"
+      onClick={() => setState(!state)}
+    >
+      <Icons icon="grid" />
+      {state ? (
+        <Global
+          styles={{
+            [`#${iframeId}`]: {
+              backgroundSize: [
+                `${cellSize * 5}px ${cellSize * 5}px`,
+                `${cellSize * 5}px ${cellSize * 5}px`,
+                `${cellSize}px ${cellSize}px`,
+                `${cellSize}px ${cellSize}px`,
+              ].join(', '),
+              backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
+              backgroundBlendMode: 'difference',
+              backgroundImage: [
+                'linear-gradient(rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
+                'linear-gradient(90deg, rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
+                'linear-gradient(rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
+                'linear-gradient(90deg, rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
+              ].join(', '),
+            },
+          }}
+        />
+      ) : null}
+    </IconButton>
+  );
+});
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@ -1,14 +1,20 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { addons, types } from '@storybook/addons';

 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
+import { GridSelector } from './containers/GridSelector';

 addons.register(ADDON_ID, api => {
  addons.add(ADDON_ID, {
    title: 'Backgrounds',
    type: types.TOOL,
    match: ({ viewMode }) => viewMode === 'story',
-    render: () => <BackgroundSelector api={api} />,
+    render: () => (
+      <Fragment>
+        <BackgroundSelector api={api} />
+        <GridSelector />
+      </Fragment>
+    ),
  });
 });
--- a/addons/centered/README.md
+++ b/addons/centered/README.md
@ -4,6 +4,8 @@ Storybook Centered Decorator can be used to center components inside the preview

 [Framework Support](https://github.com/storybookjs/storybook/blob/master/ADDONS_SUPPORT.md)

+⚠️ This addon applies styling to the view in order to center the component. This may impact the look and feel of story.
+
 ### Usage

 ```sh
@ -195,3 +197,15 @@ configure(function () {
  //...
 }, module);
 ```
+
+If you don't want to use centered for a story, you can disable it by using `{ disable: true }` to skip the addon:
+
+```js
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+
+storiesOf('Button', module)
+  .add('example', () => <button>Click me</button>, {
+    centered: { disable: true },
+  });
+```
--- a/addons/centered/angular.d.ts
+++ b/addons/centered/angular.d.ts
@ -1,3 +1,5 @@
+import { StoryFn } from "@storybook/addons";
+
 export interface ICollection {
  [p: string]: any;
 }
@ -11,11 +13,13 @@ export interface NgModuleMetadata {
 }

 export interface IStory {
-  props?: ICollection;
-  moduleMetadata?: Partial<NgModuleMetadata>;
  component?: any;
+  props?: ICollection;
+  propsMeta?: ICollection;
+  moduleMetadata?: NgModuleMetadata;
  template?: string;
+  styles?: string[];
 }
 declare module '@storybook/addon-centered/angular' {
-  export function centered(story: IStory): IStory;
+  export function centered(story: StoryFn<IStory>): IStory;
 }
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "Storybook decorator to center components",
  "keywords": [
    "addon",
@ -17,12 +17,27 @@
  },
  "license": "MIT",
  "author": "Muhammed Thanish <mnmtanish@gmail.com>",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "angular.js",
+    "angular.d.ts",
+    "ember.js",
+    "html.js",
+    "mithril.js",
+    "preact.js",
+    "rax.js",
+    "react.js",
+    "svelte.js",
+    "vue.js"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
+    "@storybook/addons": "5.3.0-alpha.4",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "util-deprecate": "^1.0.2"
@ -32,13 +47,5 @@
    "mithril": "*",
    "preact": "*",
    "react": "*"
-  },
-  "peerDependencies": {
-    "mithril": "*",
-    "preact": "*",
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
  }
 }
--- a/addons/centered/rax.js
+++ b/addons/centered/rax.js
@ -0,0 +1 @@
+module.exports = require('./dist/rax');
--- a/addons/centered/src/angular.ts
+++ b/addons/centered/src/angular.ts
@ -1,3 +1,6 @@
+import { makeDecorator, StoryFn } from '@storybook/addons';
+import { IStory } from '../angular.d';
+import parameters from './parameters';
 import styles from './styles';

 function getComponentSelector(component: any) {
@ -43,7 +46,7 @@ function getModuleMetadata(metadata: any) {
  return moduleMetadata;
 }

-export default function(metadataFn: any) {
+function centered(metadataFn: StoryFn<IStory>) {
  const metadata = metadataFn();

  return {
@ -57,6 +60,11 @@ export default function(metadataFn: any) {
  };
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as StoryFn),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/ember.ts
+++ b/addons/centered/src/ember.ts
@ -1,7 +1,9 @@
 import { document } from 'global';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

-export default function(storyFn: () => { template: any; context: any }) {
+function centered(storyFn: () => { template: any; context: any }) {
  const { template, context } = storyFn();

  const element = document.createElement('div');
@ -24,6 +26,11 @@ export default function(storyFn: () => { template: any; context: any }) {
  };
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/html.ts
+++ b/addons/centered/src/html.ts
@ -1,4 +1,6 @@
 import { document, Node } from 'global';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

 const INNER_ID = 'sb-addon-centered-inner';
@ -26,7 +28,7 @@ function getWrapperDiv() {
  return getOrCreate(WRAPPER_ID, styles.style);
 }

-export default function(storyFn: () => any) {
+function centered(storyFn: () => any) {
  const inner = getInnerDiv();
  const wrapper = getWrapperDiv();
  wrapper.appendChild(inner);
@ -45,6 +47,11 @@ export default function(storyFn: () => any) {
  return wrapper;
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/mithril.tsx
+++ b/addons/centered/src/mithril.tsx
@ -1,8 +1,11 @@
 /** @jsx m */
+/* eslint-disable import/no-extraneous-dependencies */
 import m, { ComponentTypes } from 'mithril';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

-export default function(storyFn: () => ComponentTypes) {
+function centered(storyFn: () => ComponentTypes) {
  return {
    view: () => (
      <div style={styles.style}>
@ -12,6 +15,11 @@ export default function(storyFn: () => ComponentTypes) {
  };
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/parameters.ts
+++ b/addons/centered/src/parameters.ts
@ -0,0 +1,7 @@
+// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
+const parameters = {
+  name: 'centered',
+  parameterName: 'centered',
+} as const;
+
+export default parameters;
--- a/addons/centered/src/preact.tsx
+++ b/addons/centered/src/preact.tsx
@ -1,11 +1,19 @@
 /** @jsx h */
+/* eslint-disable import/no-extraneous-dependencies */
 import { Component, h } from 'preact';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

-export default function(storyFn: () => Component) {
+function centered(storyFn: () => Component) {
  return (
    <div style={styles.style}>
      <div style={styles.innerStyle}>{storyFn()}</div>
    </div>
  );
 }
+
+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
--- a/addons/centered/src/rax.js
+++ b/addons/centered/src/rax.js
@ -0,0 +1,24 @@
+/** @jsx createElement */
+/* eslint-disable import/no-extraneous-dependencies */
+import { createElement } from 'rax';
+import View from 'rax-view';
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
+import styles from './styles';
+
+function centered(storyFn) {
+  return (
+    <View style={styles.style}>
+      <View style={styles.innerStyle}>{storyFn()}</View>
+    </View>
+  );
+}
+
+export default makeDecorator({
+  ...parameters,
+  wrapper: centered,
+});
+
+if (module && module.hot && module.hot.decline) {
+  module.hot.decline();
+}
--- a/addons/centered/src/react.tsx
+++ b/addons/centered/src/react.tsx
@ -1,7 +1,10 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { ReactNode } from 'react';
+import { makeDecorator, StoryFn } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

-export default function(storyFn: () => ReactNode) {
+function centered(storyFn: () => ReactNode) {
  return (
    <div style={styles.style}>
      <div style={styles.innerStyle}>{storyFn()}</div>
@ -9,6 +12,11 @@ export default function(storyFn: () => ReactNode) {
  );
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as StoryFn),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/styles.ts
+++ b/addons/centered/src/styles.ts
@ -1,3 +1,4 @@
+// eslint-disable-next-line @typescript-eslint/no-object-literal-type-assertion
 const styles = {
  style: {
    position: 'fixed',
--- a/addons/centered/src/svelte.ts
+++ b/addons/centered/src/svelte.ts
@ -1,6 +1,8 @@
+import { makeDecorator } from '@storybook/addons';
 import Centered from './components/Centered.svelte';
 import styles from './styles';
 import json2CSS from './helpers/json2CSS';
+import parameters from './parameters';

 const centeredStyles = {
  /** @type {string} */
@ -18,7 +20,7 @@ const centeredStyles = {
 *
 * @see https://svelte.technology/guide#svelte-component
 */
-export default function(storyFn: () => any) {
+function centered(storyFn: () => any) {
  const { Component: OriginalComponent, props, on } = storyFn();

  return {
@ -30,6 +32,11 @@ export default function(storyFn: () => any) {
  };
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: getStory => centered(getStory as any),
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/centered/src/vue.ts
+++ b/addons/centered/src/vue.ts
@ -1,6 +1,8 @@
+import { makeDecorator } from '@storybook/addons';
+import parameters from './parameters';
 import styles from './styles';

-export default function() {
+function centered() {
  return {
    template: `
      <div :style="style">
@ -15,6 +17,11 @@ export default function() {
  };
 }

+export default makeDecorator({
+  ...parameters,
+  wrapper: centered,
+});
+
 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
 }
--- a/addons/contexts/README.md
+++ b/addons/contexts/README.md
@ -8,14 +8,14 @@
 Real world users expects your application being customizable, that is why often your components are **polymorphic**:
 they simply need to adapt themselves under different contextual environments. Imagine your components can speak
 Chinese, English, or even French, and they change their skin tone under dark or light theme. Yeah, you want to make
-sure a component look great in all scenario.
+sure a component looks great in all scenarios.

 A good practice to write maintainable components is separate the presentation and its business logic. Storybook is
 a great place for exercising the visualization and interaction of your components, which may depend on some contexts.
 Often enough, you will find it become very tedious to wrap each component deeply with its contextual environments
 before you can really write the main story. You even start to write extra components or factory functions just to
-make your life easier. How about changing the context of your story dynamically?! There were simply having no good
-way so you ended up writing stories like an accountant.
+make your life easier. How about changing the context of your story dynamically?! There was simply no good way so 
+you ended up writing stories like an accountant.

 That is why you need this. An elegant way to wrap your component stories and change their contextual environment
 directly and dynamically in Storybook UI! Kind of like a dependency injection, eh! The best bit is **you define it
@ -26,17 +26,17 @@ once then apply it everywhere**.
 1. Define a single global file for managing contextual environments (a.k.a. containers) for all of your stories
   declaratively. No more repetitive setups or noisy wrapping, making your stories more focused and readable.
 2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can easily slice into
-   different environments (e.g. languages or themes ) to understand how your component is going to response.
+   different environments (e.g. languages or themes ) to understand how your component is going to respond.
 3. Library agnostic: no presumption on what kind of components you want to wrap around your stories. You can even
   use it to bridge with your favorite routing, state-management solutions, or even your own
   [React Context](https://reactjs.org/docs/context.html) provider.
 4. Offer chainable and granular configurations. It is even possible to fine-tune at per story level.
-5. Visual regression friendly. You can use this addon to driving the same story under different contexts to smoke
-   testing important visual states.
+5. Visual regression friendly. You can use this addon to drive the same story under different contexts to smoke
+   test important visual states.

 ## 🧰 Requirements

-Make sure the version of your Storybook is above v5. For the full list the current supported framework, see
+Make sure the version of your Storybook is above v5. For the full list of the current supported frameworks, see
 [Addon / Framework Support Table](../../ADDONS_SUPPORT.md).

 ## 🎬 Getting started
@ -54,7 +54,7 @@ under the storybook config directory of your project):
 import '@storybook/addon-contexts/register';
 ```

-To load your contextual setups for your stories globally, adding the following lines into `config.js` file (you should
+To load your contextual setups for your stories globally, add the following lines into `config.js` file (you should
 see it near your `addon.js` file):

 ```js
@ -132,8 +132,8 @@ export const contexts = [
 #### `withContexts(contexts) : function`

 A decorating function for wrapping your stories under your predefined `contexts`. This means multiple contextual
-environments are supported. They are going to be loaded layer by layer and wraped in a descending oder (top -> down
-> story). The `contexts` is an array of object that should has the following properties:
+environments are supported. They are going to be loaded layer by layer and wrapped in a descending oder (top -> down
+-> story). The `contexts` is an array of objects that should have the following properties:

 ---

@ -141,10 +141,10 @@ environments are supported. They are going to be loaded layer by layer and wrape

 (default `undefined`)

-A icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for
-each contextual environment individually. Take a look from what are currently supported
+An icon displayed in the Storybook toolbar to control contextual props. This addon allows you to define an icon for
+each contextual environment individually. Take a look at the currently supported
 [icon lists](https://storybooks-official.netlify.com/?path=/story/basics-icon--labels) from the official Storybook
-story. You must define an icon first if you want to take advantage on switching props dynamically in your Storybook
+story. You must define an icon first if you want to take advantage of switching props dynamically in your Storybook
 toolbar.

 ---
@ -153,7 +153,7 @@ toolbar.

 (required)

-An unique name of a contextual environment; if duplicated names provided, the later is going to be ignored.
+A unique name of a contextual environment; if duplicate names are provided, the latter is going to be ignored.

 ---

@ -161,10 +161,10 @@ An unique name of a contextual environment; if duplicated names provided, the la

 (required)

-An array of components that is going to be injected to wrap stories. This means this addon allow multiple wrapping
-components coexisted. The wrapping sequence is from the left to right (parent -> children -> story). This nested
+An array of components that is going to be injected to wrap stories. This means this addon allows multiple wrapping
+components to coexist. The wrapping sequence is from the left to right (parent -> children -> story). This nested
 wrapping behaviour can be useful in some cases; for instance, in the above example, we are wrapping stories under
-`styled-componnets` and `material-ui` theme providers. Also, you can use this addon to wrap any valid HTML tags.
+`styled-components` and `material-ui` theme providers. Also, you can use this addon to wrap any valid HTML tags.

 ---

@ -178,13 +178,13 @@ An array of params contains a set of predefined `props` for `components`. This o

 (required)

-An unique name for representing the props.
+A unique name for representing the props.

 #### `params.props : object | null:`

 (required)

-The `props` that is accepted by the wrapping component(s).
+The `props` that are accepted by the wrapping component(s).

 #### `params.default : true?`

@ -220,16 +220,16 @@ be shown at first in the toolbar menu in your Storybook.

 ## 📔 Notes

-1. You can use this addon to inject any valid components, that is why `icon`, and `params` can be just optional.
+1. You can use this addon to inject any valid components, that is why `icon` and `params` can be just optional.
 2. As mentioned, extra contextual environment setups can be added at the story level. Please make sure they are
   passed via the second argument as `{ contexts: [{ /* extra contexts */ }}`.
-3. Additional `params` can be "appended" into an existed setups at the story level too (make sure it goes with the
+3. Additional `params` can be "appended" into an existing setup at the story level too (make sure it goes with the
   correct `title`); however, they are never be able to overridden the default setups. So it is important to have
-   non-collided names.
+   non-colliding names.
 4. The addon will persist the selected params (the addon state) between stories at run-time (similar to other
-   addons). If the active param were gone after story switching, it fallback to the default then the first. As a
-   rule of thumbs, whenever collisions made possible, always the first wins.
-5. Query parameters are supported for pre-selecting contexts param, which comes handy for visual regression testing.
+   addons). If the active params were gone after story switching, it falls back to the default then the first. As a
+   rule of thumb, whenever collisions are possible, the first always wins.
+5. Query parameters are supported for pre-selecting contexts param, which comes in handy for visual regression testing.
   You can do this by appending `&contexts=[name of contexts]=[name of param]` in the URL under iframe mode. Use `,`
   to separate multiple contexts (e.g. `&contexts=Theme=Forests,Language=Fr`).

--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@ -1,16 +1,20 @@
 {
  "name": "@storybook/addon-contexts",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "Storybook Addon Contexts",
  "keywords": [
-    "storybook",
    "preact",
    "react",
+    "storybook",
    "vue"
  ],
-  "author": "Leo Y. Li",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/storybookjs/storybook.git",
+    "directory": "addons/contexts"
+  },
  "license": "MIT",
-  "main": "dist/register.js",
+  "author": "Leo Y. Li",
  "files": [
    "dist/**/*",
    "register.js",
@ -18,21 +22,19 @@
    "react.js",
    "vue.js"
  ],
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "addons/contexts"
-  },
+  "main": "dist/register.js",
  "scripts": {
-    "prepare": "node ../../scripts/prepare.js",
-    "dev:check-types": "tsc --noEmit"
+    "dev:check-types": "tsc --noEmit",
+    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.1.11",
-    "@storybook/api": "5.1.11",
-    "@storybook/components": "5.1.11",
-    "@storybook/core-events": "5.1.11",
-    "core-js": "^3.0.1"
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "qs": "^6.6.0"
  },
  "peerDependencies": {
    "global": "*",
@ -41,11 +43,6 @@
    "react": "*",
    "vue": "*"
  },
-  "devDependencies": {
-    "preact": "*",
-    "react": "*",
-    "vue": "*"
-  },
  "publishConfig": {
    "access": "public"
  }
--- a/addons/contexts/src/manager/ContextsManager.tsx
+++ b/addons/contexts/src/manager/ContextsManager.tsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState, useCallback } from 'react';
-import { useChannel } from './libs/useChannel';
+import { useChannel } from '@storybook/api';
 import { ToolBar } from './components/ToolBar';
 import { deserialize, serialize } from '../shared/serializers';
 import { PARAM, REBOOT_MANAGER, UPDATE_MANAGER, UPDATE_PREVIEW } from '../shared/constants';
@ -21,11 +21,13 @@ export const ContextsManager: ContextsManager = ({ api }) => {
  );

  // from preview
-  useChannel(UPDATE_MANAGER, newNodes => setNodes(newNodes), []);
+  const emit = useChannel({
+    [UPDATE_MANAGER]: newNodes => setNodes(newNodes || []),
+  });

  // to preview
-  useEffect(() => api.emit(REBOOT_MANAGER), []);
-  useEffect(() => api.emit(UPDATE_PREVIEW, state), [state]);
+  useEffect(() => emit(REBOOT_MANAGER), []);
+  useEffect(() => emit(UPDATE_PREVIEW, state), [state]);
  useEffect(() => api.setQueryParams({ [PARAM]: serialize(state) }), [state]);

  return <ToolBar nodes={nodes} state={state || {}} setSelected={setSelected} />;
--- a/addons/contexts/src/manager/components/ToolBarControl.tsx
+++ b/addons/contexts/src/manager/components/ToolBarControl.tsx
@ -47,5 +47,7 @@ export const ToolBarControl: ToolBarControl = ({
    },
  };

-  return icon && list.length && !options.disable ? <ToolBarMenu icon={icon} {...props} /> : null;
+  return Array.isArray(list) && list.length && !options.disable ? (
+    <ToolBarMenu icon={icon} {...props} />
+  ) : null;
 };
--- a/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
+++ b/addons/contexts/src/manager/components/ToolBarMenu.test.tsx
@ -23,10 +23,13 @@ describe('Tests on addon-contexts component: ToolBarMenu', () => {

    // then
    expect(result).toMatchInlineSnapshot(`
-      <lifecycle(WithTooltipPure)
+      <WithTooltipPure
        closeOnClick={true}
+        hasChrome={true}
+        modifiers={Object {}}
        onVisibilityChange={[Function]}
        placement="top"
+        svg={false}
        tooltip={
          <ToolBarMenuOptions
            activeName="A"
@ -50,7 +53,57 @@ describe('Tests on addon-contexts component: ToolBarMenu', () => {
            icon="globe"
          />
        </IconButton>
-      </lifecycle(WithTooltipPure)>
+      </WithTooltipPure>
+    `);
+  });
+
+  it('should render TabButton with title if the icon is given', () => {
+    // given
+    const someProps = {
+      title: 'Some Context',
+      active: true,
+      expanded: false,
+      setExpanded: jest.fn,
+      optionsProps: {
+        activeName: 'A',
+        list: ['A', 'B'],
+        onSelectOption: jest.fn,
+      },
+    };
+
+    // when
+    const result = shallow(<ToolBarMenu {...someProps} />);
+
+    // then
+    expect(result).toMatchInlineSnapshot(`
+      <WithTooltipPure
+        closeOnClick={true}
+        hasChrome={true}
+        modifiers={Object {}}
+        onVisibilityChange={[Function]}
+        placement="top"
+        svg={false}
+        tooltip={
+          <ToolBarMenuOptions
+            activeName="A"
+            list={
+              Array [
+                "A",
+                "B",
+              ]
+            }
+            onSelectOption={[Function]}
+          />
+        }
+        tooltipShown={false}
+        trigger="click"
+      >
+        <TabButton
+          active={true}
+        >
+          Some Context
+        </TabButton>
+      </WithTooltipPure>
    `);
  });
 });
--- a/addons/contexts/src/manager/components/ToolBarMenu.tsx
+++ b/addons/contexts/src/manager/components/ToolBarMenu.tsx
@ -1,10 +1,10 @@
 import React, { ComponentProps } from 'react';
-import { Icons, IconButton, WithTooltip } from '@storybook/components';
+import { Icons, IconButton, WithTooltipPure, TabButton } from '@storybook/components';
 import { ToolBarMenuOptions } from './ToolBarMenuOptions';
 import { ContextNode, FCNoChildren } from '../../shared/types.d';

 type ToolBarMenu = FCNoChildren<{
-  icon: ComponentProps<typeof Icons>['icon'];
+  icon?: ComponentProps<typeof Icons>['icon'] | '' | void;
  title: ContextNode['title'];
  active: boolean;
  expanded: boolean;
@ -20,7 +20,7 @@ export const ToolBarMenu: ToolBarMenu = ({
  setExpanded,
  optionsProps,
 }) => (
-  <WithTooltip
+  <WithTooltipPure
    closeOnClick
    trigger="click"
    placement="top"
@ -28,8 +28,12 @@ export const ToolBarMenu: ToolBarMenu = ({
    onVisibilityChange={setExpanded}
    tooltip={<ToolBarMenuOptions {...optionsProps} />}
  >
-    <IconButton active={active} title={title}>
-      <Icons icon={icon} />
-    </IconButton>
-  </WithTooltip>
+    {icon ? (
+      <IconButton active={active} title={title}>
+        <Icons icon={icon} />
+      </IconButton>
+    ) : (
+      <TabButton active={active}>{title}</TabButton>
+    )}
+  </WithTooltipPure>
 );
--- a/addons/contexts/src/manager/libs/useChannel.ts
+++ b/addons/contexts/src/manager/libs/useChannel.ts
@ -1,19 +0,0 @@
-import addons from '@storybook/addons';
-import { useEffect } from 'react';
-import { AnyFunctionReturns } from '../../shared/types.d';
-
-/**
- * The React hook version of Storybook Channel API.
- */
-type UseChannel = (
-  event: string,
-  eventHandler: AnyFunctionReturns<void>,
-  input?: unknown[]
-) => void;
-
-export const useChannel: UseChannel = (event, eventHandler, inputs = []) =>
-  useEffect(() => {
-    const channel = addons.getChannel();
-    channel.on(event, eventHandler);
-    return () => channel.removeListener(event, eventHandler);
-  }, inputs);
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "5.1.11",
+  "version": "5.3.0-alpha.4",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -19,16 +19,22 @@
  },
  "license": "MIT",
  "author": "nm123github",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "register.js"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.1.11",
-    "@storybook/api": "5.1.11",
-    "@storybook/components": "5.1.11",
-    "@storybook/core-events": "5.1.11",
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3"
--- a/addons/cssresources/src/register.tsx
+++ b/addons/cssresources/src/register.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { addons, types } from '@storybook/addons';

-import { ADDON_ID, PANEL_ID } from './constants';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { CssResourcePanel } from './css-resource-panel';

 addons.register(ADDON_ID, api => {
@ -10,5 +10,6 @@ addons.register(ADDON_ID, api => {
    type: types.PANEL,
    title: 'CSS resources',
    render: ({ active }) => <CssResourcePanel key={PANEL_ID} api={api} active={active} />,
+    paramKey: PARAM_KEY,
  });
 });
--- a/addons/design-assets/README.md
+++ b/addons/design-assets/README.md
@ -0,0 +1,55 @@
+# Storybook addon for design assets
+
+This addon for storybook allows you to link to image files, other files, and even url's for embedding in the storybook panel!
+
+You can add as many assets to a single story as you want.
+
+## Install
+
+```sh
+npm install @storybook/addon-design-assets
+```
+
+## Usage
+within `addons.js`:
+
+```js
+import '@storybook/addon-design-assets/register';
+```
+
+within your stories:
+```js
+import { storiesOf } from '@storybook/react';
+
+import imageUrl from './images/my-image.jpg'; 
+
+storiesOf('root|group/component', module)
+  .addParameters({
+    assets: [
+      imageUrl, // link to a file imported
+      'https://via.placeholder.com/300/09f/fff.png', // link to an external image
+      'https://www.example.com', // link to a webpage
+      'https://www.example.com?id={id}', // link to a webpage with the current story's id in the url
+    ],
+  })
+  .add('variant', () => <div>your story here</div>);
+```
+
+If you have a set of different assets on 1 story, you might want to name then:
+```js
+import { storiesOf } from '@storybook/react';
+
+import imageUrl from './images/my-image.jpg'; 
+
+storiesOf('root|group/component', module)
+  .addParameters({
+    assets: [{
+      url: 'https://via.placeholder.com/300/09f/fff.png', // link to an external image
+      name: 'blue',
+    }, {
+      url: 'https://via.placeholder.com/300/f90/fff.png', // link to an external image
+      name: 'orange',
+    }],
+  })
+  .add('variant', () => <div>your story here</div>);
+```
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -0,0 +1,54 @@
+{
+  "name": "@storybook/addon-design-assets",
+  "version": "5.3.0-alpha.4",
+  "description": "Design asset preview for storybook",
+  "keywords": [
+    "addon",
+    "assets",
+    "design",
+    "files",
+    "parameter",
+    "storybook",
+    "viewer"
+  ],
+  "homepage": "https://github.com/storybookjs/storybook#readme",
+  "bugs": {
+    "url": "https://github.com/storybookjs/storybook/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/storybookjs/storybook.git",
+    "directory": "addons/design-assets"
+  },
+  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "register.js"
+  ],
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "prepare": "node ../../scripts/prepare.js"
+  },
+  "dependencies": {
+    "@storybook/addons": "5.3.0-alpha.4",
+    "@storybook/api": "5.3.0-alpha.4",
+    "@storybook/client-logger": "5.3.0-alpha.4",
+    "@storybook/components": "5.3.0-alpha.4",
+    "@storybook/core-events": "5.3.0-alpha.4",
+    "@storybook/theming": "5.3.0-alpha.4",
+    "common-tags": "^1.8.0",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "react": "^16.8.3",
+    "use-image": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/common-tags": "^1.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}
--- a/addons/design-assets/register.js
+++ b/addons/design-assets/register.js
@ -0,0 +1 @@
+require('./dist/register');
--- a/addons/design-assets/src/constants.ts
+++ b/addons/design-assets/src/constants.ts
@ -0,0 +1,3 @@
+export const ADDON_ID = 'storybook/design-assets';
+export const PANEL_ID = `${ADDON_ID}/panel`;
+export const PARAM_KEY = `assets`;
--- a/addons/design-assets/src/panel.tsx
+++ b/addons/design-assets/src/panel.tsx
@ -0,0 +1,78 @@
+import React, { Fragment, useMemo, ReactElement } from 'react';
+
+import { useParameter, useAddonState, useStorybookState } from '@storybook/api';
+import { styled } from '@storybook/theming';
+import { ActionBar } from '@storybook/components';
+import { PARAM_KEY, ADDON_ID } from './constants';
+
+interface AssetDescription {
+  url: string;
+  name: string;
+}
+
+type Results = (string | AssetDescription)[];
+type Selected = number;
+
+const Iframe = styled.iframe({
+  width: '100%',
+  height: '100%',
+  border: '0 none',
+});
+const Img = styled.img({
+  width: '100%',
+  height: '100%',
+  border: '0 none',
+  objectFit: 'contain',
+});
+
+const Asset = ({ url }: { url: string | undefined }): ReactElement => {
+  if (!url) {
+    return null;
+  }
+  if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
+    // do image viewer
+    return <Img alt="" src={url} />;
+  }
+  if (url.match(/\.(mp4|ogv|webm)/)) {
+    // do video viewer
+    return <div>not implemented yet, sorry</div>;
+  }
+
+  return <Iframe title={url} src={url} />;
+};
+
+const getUrl = (input: AssetDescription | string): string => {
+  return typeof input === 'string' ? input : input.url;
+};
+
+export const Panel = () => {
+  const results = useParameter<Results>(PARAM_KEY, []);
+  const [selected, setSelected] = useAddonState<Selected>(ADDON_ID, 0);
+  const { storyId } = useStorybookState();
+
+  return useMemo(() => {
+    if (results.length === 0) {
+      return null;
+    }
+
+    if (results.length && !results[selected]) {
+      setSelected(0);
+      return null;
+    }
+    const url = getUrl(results[selected]).replace('{id}', storyId);
+    return (
+      <Fragment>
+        <Asset url={url} />
+        {results.length > 1 ? (
+          <ActionBar
+            key="actionbar"
+            actionItems={results.map((i, index) => ({
+              title: typeof i === 'string' ? `asset #${index + 1}` : i.name,
+              onClick: () => setSelected(index),
+            }))}
+          />
+        ) : null}
+      </Fragment>
+    );
+  }, [results, selected, storyId]);
+};
--- a/addons/design-assets/src/register.tsx
+++ b/addons/design-assets/src/register.tsx
@ -0,0 +1,19 @@
+import React from 'react';
+
+import { addons, types } from '@storybook/addons';
+import { AddonPanel } from '@storybook/components';
+import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
+import { Panel } from './panel';
+
+addons.register(ADDON_ID, () => {
+  addons.add(PANEL_ID, {
+    title: 'design assets',
+    type: types.PANEL,
+    render: ({ active, key }) => (
+      <AddonPanel active={active} key={key}>
+        <Panel />
+      </AddonPanel>
+    ),
+    paramKey: PARAM_KEY,
+  });
+});
--- a/addons/design-assets/tsconfig.json
+++ b/addons/design-assets/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "./src",
+    "types": ["webpack-env"]
+  },
+  "include": [
+    "src/**/*"
+  ],
+  "exclude": [
+    "src/__tests__/**/*"
+  ]
+}
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -0,0 +1,218 @@
+<center>
+  <img src="docs/media/hero.png" width="100%" />
+</center>
+
+# Storybook Docs
+
+Storybook Docs transforms your Storybook stories into world-class component documentation.
+
+**DocsPage.** Out of the box, all your stories get a `DocsPage`. `DocsPage` is a zero-config aggregation of your component stories, text descriptions, docgen comments, props tables, and code examples into simple, easy-to-read pages.
+
+**MDX.** If you want more control, `MDX` allows you to write long-form markdown documentation and stories in one file. You can also use it to write pure documentation pages and embed them inside your Storybook alongside your stories.
+
+Just like Storybook, Docs supports every major view layer including React, Vue, Angular, HTML, Web components, Svelte, and many more.
+
+Read on to learn more:
+
+- [DocsPage](#docspage)
+- [MDX](#mdx)
+- [Framework support](#framework-support)
+- [Installation](#installation)
+- [Preset options](#preset-options)
+- [Manual configuration](#manual-configuration)
+- [TypeScript configuration](#typescript-configuration)
+- [More resources](#more-resources)
+
+## DocsPage
+
+When you [install Docs](#installation), every story gets a `DocsPage`. `DocsPage` pulls information from your stories, components, source code, and story metadata to construct a sensible, zero-config default.
+
+Click on the `Docs` tab to see it:
+
+<center>
+  <img src="docs/media/docs-tab.png" width="100%" />
+</center>
+
+For more information on how it works, see the [`DocsPage` reference](./docs/docspage.md).
+
+## MDX
+
+`MDX` is a syntax for writing long-form documentation and stories side-by-side in the same file. In contrast to `DocsPage`, which provides smart documentation out of the box, `MDX` gives you full control over your component documentation.
+
+Here's an example file:
+
+```md
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Checkbox } from './Checkbox';
+
+<Meta title="MDX|Checkbox" component={Checkbox} />
+
+# Checkbox
+
+With `MDX` we can define a story for `Checkbox` right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name="all checkboxes">
+    <form>
+      <Checkbox id="Unchecked" label="Unchecked" />
+      <Checkbox id="Checked" label="Checked" checked />
+      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+    </form>
+  </Story>
+</Preview>
+```
+
+And here's how that's rendered in Storybook:
+
+<center>
+  <img src="docs/media/mdx-simple.png" width="100%" />
+</center>
+
+For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
+
+## Framework support
+
+Storybook 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 | HTML | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact |
+| ----------------- | :---: | :-: | :-----: | :--: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: |
+| MDX stories       |   +   |  +  |    +    |  +   |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| CSF stories       |   +   |  +  |    +    |  +   |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| StoriesOf stories |   +   |  +  |    +    |  +   |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Source            |   +   |  +  |    +    |  +   |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Notes / Info      |   +   |  +  |    +    |  +   |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Props table       |   +   |  #  |    #    |      |        |         |       |         |      |       |        |
+| Docgen            |   +   |  #  |    #    |      |        |         |       |         |      |       |        |
+| Inline stories    |   +   |  #  |         |      |        |         |       |         |      |       |        |
+
+**Note:** `#` = WIP support
+
+## Installation
+
+First add the package. Make sure that the versions for your `@storybook/*` packages match:
+
+```sh
+yarn add -D @storybook/addon-docs@next
+```
+
+Docs has peer dependencies on `react` and `babel-loader`. If you want to write stories in MDX, you may need to add these dependencies as well:
+
+```sh
+yarn add -D react babel-loader
+```
+
+Then add the following to your `.storybook/presets.js` exports:
+
+```js
+module.exports = ['@storybook/addon-docs/react/preset'];
+```
+
+If you're not using `react`, replace it with your framework of choice corresponding to the Storybook package name, e.g. `angular` for `@storybook/angular` etc.
+
+**Configure.** If you're migrating from an earlier version of Storybook and want to use `MDX`, you need to upgrade your Storybook config:
+
+```js
+import { configure } from '@storybook/react';
+
+configure(require.context('../src', true, /\.stories\.(js|mdx)$/), module);
+```
+
+For more information on the new `configure`, see ["Loading stories"](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#loading-stories) in the Storybook documentation.
+
+## Preset options
+
+The `addon-docs` preset has a few configuration options that can be used to configure its babel/webpack loading behavior. Here's an example of how to use the preset with options:
+
+```js
+module.exports = [
+  {
+    name: '@storybook/addon-docs/react/preset',
+    options: {
+      configureJSX: true,
+      babelOptions: {},
+      sourceLoaderOptions: null,
+    },
+  },
+];
+```
+
+The `configureJsx` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.
+
+`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `webpack.config.js`.
+
+## Manual configuration
+
+If you don't want to use the preset, and prefer 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 in `.storybook/webpack.config.js` to understand MDX story files and annotate TS/JS story files with source code using `source-loader`:
+
+```js
+const createCompiler = require('@storybook/addon-docs/mdx-compiler-plugin');
+
+module.exports = async ({ config }) => {
+  config.module.rules.push({
+    test: /\.(stories|story)\.mdx$/,
+    use: [
+      {
+        loader: 'babel-loader',
+        // may or may not need this line depending on your app's setup
+        options: {
+          plugins: ['@babel/plugin-transform-react-jsx'],
+        },
+      },
+      {
+        loader: '@mdx-js/loader',
+        options: {
+          compilers: [createCompiler({})],
+        },
+      },
+    ],
+  });
+  config.module.rules.push({
+    test: /\.(stories|story)\.[tj]sx?$/,
+    loader: require.resolve('@storybook/source-loader'),
+    exclude: [/node_modules/],
+    enforce: 'pre',
+  });
+  return config;
+};
+```
+
+Finally, you'll need to set up DocsPage in `.storybook/config.js`:
+
+```js
+import { addParameters } from '@storybook/react';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+});
+```
+
+## TypeScript configuration
+
+SB Docs for React uses `babel-plugin-react-docgen` to extract Docgen comments from your code automatically. However, if you're using TypeScript, some extra configuration maybe required to get this information included in your docs.
+
+1. You can add [react-docgen-typescript-loader](https://www.npmjs.com/package/react-docgen-typescript-loader) to your project by following the instructions there.
+2. You can use [@storybook/preset-typescript](https://www.npmjs.com/package/@storybook/preset-typescript) which includes `react-docgen-typescript-loader`.
+
+Install the preset with care. If you've already configured Typescript manually, that configuration may conflict with the preset. You can [debug your final webpack configuration with `--debug-webpack`](https://storybook.js.org/docs/configurations/custom-webpack-config/#debug-the-default-webpack-config).
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/angular/config.js
+++ b/addons/docs/angular/config.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/angular/config');
--- a/addons/docs/angular/index.js
+++ b/addons/docs/angular/index.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/common/index');
--- a/addons/docs/angular/preset.js
+++ b/addons/docs/angular/preset.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/common/makePreset').default('angular');
--- a/addons/docs/blocks.js
+++ b/addons/docs/blocks.js
@ -0,0 +1 @@
+module.exports = require('./dist/blocks');
--- a/addons/docs/common/index.js
+++ 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');
--- a/addons/docs/common/preset.js
+++ b/addons/docs/common/preset.js
@ -0,0 +1 @@
+module.exports = require('../dist/frameworks/common/preset');
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@ -0,0 +1,248 @@
+<center>
+  <img src="./media/docspage-hero.png" width="100%" />
+</center>
+
+# Storybook DocsPage
+
+When you install [Storybook Docs](../README.md), `DocsPage` is the zero-config default documentation that all stories get out of the box. It aggregates your stories, text descriptions, docgen comments, props tables, and code examples into a single page for each component.
+
+- [Motivation](#motivation)
+- [Component parameter](#component-parameter)
+- [DocsPage slots](#docspage-slots)
+- [Replacing DocsPage](#replacing-docspage)
+- [Story file names](#story-file-names)
+- [More resources](#more-resources)
+
+## Motivation
+
+`DocsPage` is the successor to [`addon-info`](https://github.com/storybookjs/storybook/tree/next/addons/info), which was one of the most popular Storybook addons despite many limitations.
+
+Like `addon-info`, `DocsPage` provides sensible defaults, meaning it adds documentation to your existing Storybook without requiring any additional work on your part.
+
+However, `DocsPage` brings the following improvements:
+
+- It supports all frameworks that Storybook supports, including React, Vue, Angular and [many others](../README.md#framework-support).
+- It generates better documentation that can be used as a standalone docs site, independently of Storybook.
+- It supports better configuration, so you can capture project specific information with ease.
+- It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation.
+
+## Component parameter
+
+`DocsPage` pulls info from many sources, but one of the main ones is the `component` parameter, which is a new addition to Storybook in 5.2. It's based on the best practice that each component should have an associated set of documentation and stories (versus organizing it in some other way).
+
+Storybook uses `component` to extract the component's description and props, and will rely on it further in future releases. We encourage you to add it to existing stories and use it in all new stories.
+
+Here's how to set the component in [Component Story Format (CSF)](https://storybook.js.org/docs/formats/component-story-format/):
+
+```js
+import { Badge } from './Badge';
+
+export default {
+  title: 'Path/to/Badge',
+  component: Badge,
+};
+```
+
+And here's how to do the same thing the underlying `storiesOf` API:
+
+```js
+import { storiesOf } from '@storybook/react';
+import { Badge } from './Badge';
+
+storiesOf('Path/to/Badge', module).addParameters({ component: Badge });
+```
+
+If you're coming from the `storiesOf` format, there's [a codemod that adds it for you](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md#add-component-parameters).
+
+## DocsPage slots
+
+`DocsPage` is organized into a series of "slots" including Title, Subtitle, Description, Props, and Story. Each of these slots pulls information from your project and formats it for the screen.
+
+<center>
+  <img style="padding: 30px; border: 3px solid #eee;" src="./media/docspage-slots.png" width="100%" />
+</center>
+
+## Slot values
+
+Each of the slots is computed by a built-in function, that can also be overridden using [Slot Function](#slot-functions).
+
+Here is a summary of the slots, where the data comes from by default, and the slot function that can be used to override it:
+
+| Slot        | Default source                      | Slot function     | Frameworks |
+| ----------- | ----------------------------------- | ----------------- | ---------- |
+| Title       | component `title`                   | `titleSlot`       | All        |
+| Subtitle    | `componentSubtitle` parameter       | `subtitleSlot`    | All        |
+| Description | component `docgen` comment          | `descriptionSlot` | React, Vue |
+| Primary     | storybook stories                   | `primarySlot`     | All        |
+| Props       | component docgen props or propTypes | `propsSlot`       | React, Vue |
+| Stories     | storybook stories                   | `storiesSlot`     | All        |
+
+For more information on frameworks, see ["Framework support"](../README.md#framework-support)
+
+### Title
+
+`Title` is computed from the component's `title`, and matches the component caption in Storybook's navigation.
+
+For example:
+
+```js
+export default {
+  title: 'Path/to/Badge',
+};
+```
+
+### Subtitle
+
+The `Subtitle` slot is computed from the component's `componentSubtitle` parameter.
+
+For example in [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df):
+
+```js
+export default {
+  ...
+  parameters: {
+    componentSubtitle: 'Handy status label',
+  },
+};
+```
+
+### Description
+
+The `Description` slot is computed from the Component's docgen comments in the component's source.
+
+For example, here's the source for `Badge`:
+
+```js
+/**
+ * Use `Badge` to highlight key info with a predefined status. Easy peasy!
+ */
+export const Badge = ({ status, children }) => { ... }
+```
+
+### Primary
+
+The `Primary` slot is computed from the first user-defined story for the component.
+
+For example here are `Badge`'s stories in CSF. The `allBadges` is selected as the primary story because it's first:
+
+```js
+// export default { ... }; /* Badge component metadata */
+export const allBadges = () => ...
+export const positive = () => ...
+export const negative = () => ...
+```
+
+### Props
+
+The `Props` slot is computed from the component's docgen props, which can be defined in typescript or using `react` PropTypes.
+
+For example, here are the `PropTypes` for the `Badge` component
+
+```js
+import PropTypes from 'prop-types';
+
+// ... Badge definition ...
+
+Badge.propTypes = {
+  status: PropTypes.oneOf(['positive', 'negative', 'neutral', 'error', 'warning']),
+};
+Badge.defaultProps = {
+  status: 'neutral',
+};
+```
+
+### Stories
+
+The `Stories` slot is computed from the user-defined stories for the component, excluding the first.
+
+For example here are `Badge`'s stories in CSF. The `positive` and `negative` stories are selected in that order:
+
+```js
+// export default { ... }; /* Badge component metadata */
+export const allBadges = () => ...
+export const positive = () => ...
+export const negative = () => ...
+```
+
+## Slot functions
+
+> ⚠️ Slot functions are an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
+
+The value for each slot is computed from a `SlotContext` context, and the function that's used to compute the value can be overridden if you need to customize the page. If you find yourself doing a lot of configuration, or wanting different configurations for different pages, you might be better off using `MDX`. Everything that `DocsPage` gives you can be reconstructed in a few lines of `MDX`.
+
+Here is the `SlotContext` type definition:
+
+```ts
+export interface SlotContext {
+  id?: string;
+  selectedKind?: string;
+  selectedStory?: string;
+  parameters?: any;
+  storyStore?: any;
+}
+```
+
+And here are the return type signatures for each of the slot functions
+
+| Slot     | Function     | Inputs                       | Output             |
+| -------- | ------------ | ---------------------------- | ------------------ |
+| Title    | titleSlot    | `SlotContext`                | `string?`          |
+| Subtitle | subtitleSlot | `SlotContext`                | `string?`          |
+| Primary  | primarySlot  | `StoryData[]`, `SlotContext` | `StoryProps?`      |
+| Props    | propsSlot    | `SlotContext`                | `PropsTableProps?` |
+| Stories  | storiesSlot  | `StoryData[]`, `SlotContext` | `StoryProps[]?`    |
+
+## Replacing DocsPage
+
+What if you don't want a `DocsPage` for your storybook, for a specific component, or even for a specific story?
+
+You can replace DocsPage at any level by overriding the `docs.page` parameter:
+
+- With `null` to remove docs
+- [With MDX](#csf-stories-with-mdx-docs) docs
+- With a custom React component
+
+**Globally (config.js)**
+
+```js
+import { addParameters } from '@storybook/react';
+addParameters({ docs: { page: null } });
+```
+
+**Component-level (Button.stories.js)**
+
+```js
+import { Button } from './Button';
+export default {
+  title: 'Demo/Button',
+  component: Button,
+  parameters: { docs: { page: null } },
+};
+```
+
+**Story-level (Button.stories.js)**
+
+```js
+import { Button } from './Button';
+// export default { ... }
+export const basic => () => <Button>Basic</Button>
+basic.story = {
+  parameters: { docs: { page: null } }
+}
+```
+
+## Story file names
+
+Unless you use a custom webpack configuration, all of your story files should have the suffix `*.stories.[jt]sx?`, e.g. `"Badge.stories.js"`, `"Badge.stories.tsx"`, etc.
+
+The docs preset assumes this naming convention for its `source-loader` setup. If you want to use a different naming convention, you'll need a [manual configuration](../README.md#manual-configuration).
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [README](../README.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/faq.md
+++ b/addons/docs/docs/faq.md
@ -0,0 +1,53 @@
+# Storybook Docs FAQs
+
+You've read the [Storybook Docs README](../README.md). You're already familiar with both [DocsPage](./docspage.md) and [MDX](./mdx.md). You've even browsed our [Docs recipes](/./recipes.md). But Docs is a big project and you've still got questions! Maybe you'll find your answer here:
+
+- [Storybook Docs FAQs](#storybook-docs-faqs)
+  - [Does Docs support framework X?](#does-docs-support-framework-x)
+  - [How does Docs interact with existing addons?](#how-does-docs-interact-with-existing-addons)
+  - [How do I debug my MDX story?](#how-do-i-debug-my-mdx-story)
+  - [More resources](#more-resources)
+
+## Does Docs support framework X?
+
+Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, Polymer, and others.
+
+## How does Docs interact with existing addons?
+
+Currently we hide the addons panel when docs is visible. It's tricky because all the addons assume that there is only one story currently visible, and in docs there are potentially many. We have a proposal for "knobs v2" to address this for knobs, but nothing planned to address it in general. How we deal with it generally is [open for discussion](https://github.com/storybooks/storybook/issues/6700)!
+
+## How do I debug my MDX story?
+
+<center>
+  <img src="./media/faq-debug.png" width="100%" />
+</center>
+
+> "My story renders in docs, but doesn’t show up the way I’d expect in the Canvas”
+
+The original MDX gets compiled to Javascript, and the easiest way to debug your MDX stories in the Canvas is to inspect that Javascript. To do this, open your browser dev tools and view the source that’s being served by the webpack dev server. You may need to hunt for it a little bit under the `webpack > > . > path/to/your/stories` folder, but it’s there.
+
+For example, the following MDX story:
+
+```jsx
+<Story name="solo story">
+  <Button onClick={action('clicked')}>solo</Button>
+</Story>
+```
+
+Shows up in the dev tools as follows:
+
+<center>
+  <img src="./media/faq-devtools.png" width="100%" />
+</center>
+
+This is just [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so it should be easy to debug. You can copy and paste this code into a new `.stories.js` file and play around with it at a lower level to understand what's going wrong.
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/mdx.md
+++ b/addons/docs/docs/mdx.md
@ -0,0 +1,205 @@
+<center>
+  <img src="./media/mdx-hero.png" width="100%" />
+</center>
+
+# Storybook Docs MDX
+
+> ⚠️ MDX support is an experimental feature in Storybook 5.2. The API may change in 5.3 outside of the normal semver rules. Be forewarned!
+
+`MDX` is the syntax [Storybook Docs](../README.md) uses to capture long-form markdown documentation and stories in one file. You can also write pure documentation pages in `MDX` and add them to Storybook alongside your stories.
+
+- [Basic example](#basic-example)
+- [MDX-Flavored CSF](#mdx-flavored-csf)
+- [Writing stories](#writing-stories)
+- [Embedding stories](#embedding-stories)
+- [Decorators and parameters](#decorators-and-parameters)
+- [Documentation-only MDX](#documentation-only-mdx)
+- [MDX file names](#mdx-file-names)
+- [More resources](#more-resources)
+
+## Basic example
+
+Let's get started with a simple example that combines markdown with a single story:
+
+```md
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { Checkbox } from './Checkbox';
+
+<Meta title="MDX|Checkbox" component={Checkbox} />
+
+# Checkbox
+
+With `MDX` we can define a story for `Checkbox` right in the middle of our
+markdown documentation.
+
+<Preview>
+  <Story name="all checkboxes">
+    <form>
+      <Checkbox id="Unchecked" label="Unchecked" />
+      <Checkbox id="Checked" label="Checked" checked />
+      <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+    </form>
+  </Story>
+</Preview>
+```
+
+And here's how that's rendered in Storybook:
+
+<center>
+  <img src="./media/mdx-simple.png" width="100%" />
+</center>
+
+As you can see there's a lot going on here. We're writing Markdown, we're writing JSX, and somehow we're also defining Storybook stories that are drop-in compatible with the entire Storybook ecosystem.
+
+Let's break it down.
+
+## MDX-Flavored CSF
+
+[MDX](https://mdxjs.com/) is a standard file format that combines Markdown with JSX. This means you can use Markdown’s terse syntax (such as `# heading`) for your documentation, and freely embed JSX component blocks at any point in the file.
+
+MDX-flavored [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df) includes a collection of components called **"Doc Blocks"**, that allow Storybook to translate MDX files into storybook stories. MDX-defined stories are identical to regular Storybook stories, so they can be used with Storybook's entire ecosystem of addons and view layers.
+
+For example, here's the story from `Checkbox` example above, rewritten in CSF:
+
+```js
+import React from 'react';
+import { Checkbox } from './Checkbox';
+export default { title: "MDX|Checkbox" component: Checkbox };
+export const allCheckboxes = () => (
+  <form>
+    <Checkbox id="Unchecked" label="Unchecked" />
+    <Checkbox id="Checked" label="Checked" checked />
+    <Checkbox appearance="secondary" id="second" label="Secondary" checked />
+  </form>
+);
+```
+
+There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn directly corresponds to Storybook's internal `storiesOf` API. As a user this means your existing Storybook knowledge should easily translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.
+
+## Writing stories
+
+Now let's look at a more realistic example to see a few more things we can do:
+
+```md
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+
+import { Badge } from './Badge';
+import { Icon } from './Icon';
+
+<Meta title="MDX|Badge" component={Badge} />
+
+# Badge
+
+Let's define a story for our `Badge` component:
+
+<Story name="positive">
+  <Badge status="positive">Positive</Badge>
+</Story>
+
+We can drop it in a `Preview` to get a code snippet:
+
+<Preview>
+  <Story name="negative">
+    <Badge status="negative">Negative</Badge>
+  </Story>
+</Preview>
+
+We can even preview multiple stories in a block. This
+gets rendered as a group, but defines individual stories
+with unique URLs and isolated snapshot tests.
+
+<Preview>
+  <Story name="warning">
+    <Badge status="warning">Warning</Badge>
+  </Story>
+  <Story name="neutral">
+    <Badge status="neutral">Neutral</Badge>
+  </Story>
+  <Story name="error">
+    <Badge status="error">Error</Badge>
+  </Story>
+  <Story name="with icon">
+    <Badge status="warning">
+      <Icon icon="check" inline />
+      with icon
+    </Badge>
+  </Story>
+</Preview>
+```
+
+And here's how that gets rendered in Storybook:
+
+<center>
+  <img src="./media/mdx-page.png" width="100%" />
+</center>
+
+## Embedding stories
+
+Suppose you have an existing story and want to embed it into your docs. Here's how to show a story with ID `some--id` (check the browser URL in Storybook v5+ to see a story's ID):
+
+```md
+import { Story } from "@storybook/addon-docs/blocks";
+
+# Some header
+
+And markdown here
+
+<Story id="some--id" />
+```
+
+You can also use the rest of the MDX features in conjunction with embedding. That includes source, preview, and prop tables.
+
+## Decorators and parameters
+
+To add [decorators](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#decorators) and [parameters](https://github.com/storybookjs/storybook/blob/next/docs/src/pages/basics/writing-stories/index.md#parameters) in MDX:
+
+```md
+<Meta
+  title='MyComponent'
+  decorators={[ ... ]}
+  parameters={{ ... }}
+/>
+
+<Story name="story" decorators={[ ... ]} parameters={{ ... }} >
+...
+</Story>
+```
+
+In addition, global decorators work just like before, e.g. adding the following to your `.storybook/config.js`:
+
+```js
+import { addDecorator, addParameters } from '@storybook/react';
+
+addDecorator(...);
+addParameters({ ... });
+```
+
+## Documentation-only MDX
+
+Typically, when you use Storybook MDX, you define stories in the MDX documentation is automatically associated with those stories. But what if you want to write Markdown-style documentation and have it show up in your Storybook?
+
+If you don't define stories in your MDX, you can write MDX documentation and associate it with an existing story, or embed that MDX as its own documentation node in your Storybook's navigation.
+
+If you don't define a `Meta`, you can write Markdown and associate with an existing story. See ["CSF Stories with MDX Docs"](recipes.md#csf-stories-with-mdx-docs).
+
+To get a "documentation-only story", in your UI, simply define a `<Meta>` as you normally would, but don't define any stories. It will show up in your UI as a documentation node:
+
+<center>
+  <img src="./media/mdx-documentation-only.png" width="100%" />
+</center>
+
+## MDX file names
+
+Unless you use a custom webpack configuration, all of your `MDX` files should have the suffix `*.stories.mdx`. This tells Storybook to apply its special processing to the `<Meta>` and `<Story>` elements in the file.
+
+Be sure to update your Storybook config file to load `.stories.mdx` stories, as per the [`addon-docs` installation instructions](../README.md#installation).
+
+## More resources
+
+`MDX` is an experimental feature and there's a lot more that hasn't been documented yet. Here are some more articles on Storybook Docs that contain more information:
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md)
+- Vision: [Storybook Docs sneak peak](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a)
+- Announcement: [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf)
+- Example: [Storybook Design System](https://github.com/storybookjs/design-system)
+- [Technical preview guide](https://docs.google.com/document/d/1un6YX7xDKEKl5-MVb-egnOYN8dynb5Hf7mq0hipk8JE/edit?usp=sharing)
--- a/addons/docs/docs/media/docs-tab.png
+++ b/addons/docs/docs/media/docs-tab.png
--- a/addons/docs/docs/media/docspage-hero.png
+++ b/addons/docs/docs/media/docspage-hero.png
--- a/addons/docs/docs/media/docspage-slots.png
+++ b/addons/docs/docs/media/docspage-slots.png
--- a/addons/docs/docs/media/faq-debug.png
+++ b/addons/docs/docs/media/faq-debug.png
--- a/addons/docs/docs/media/faq-devtools.png
+++ b/addons/docs/docs/media/faq-devtools.png
--- a/addons/docs/docs/media/hero.png
+++ b/addons/docs/docs/media/hero.png
--- a/addons/docs/docs/media/mdx-documentation-only.png
+++ b/addons/docs/docs/media/mdx-documentation-only.png
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`module.exports = require('../dist/frameworks/angular/config');`