Merge branch 'next' into pr/atanasster/7939

# Conflicts: # examples/dev-kits/addons.js # examples/dev-kits/package.json
2025-03-20 05:02:37 +08:00 · 2019-10-29 16:36:26 +01:00 · 2019-10-29 16:36:26 +01:00 · 9883cd6d88
commit 9883cd6d88
parent c526932f29 a388ee7883
1161 changed files with 21114 additions and 14125 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -1,14 +1,11 @@
-version: 2
+version: 2.1

 aliases:
  - &defaults
    working_directory: /tmp/storybook
    docker:
-      - image: circleci/node:8
+      - image: circleci/node:10

-dependencies:
-  pre:
-    - yarn global add npm
 jobs:
  build:
    <<: *defaults
@ -17,7 +14,7 @@ jobs:
      - restore_cache:
          name: Restore core dependencies cache
          keys:
-            - core-dependencies-v3-{{ checksum "yarn.lock" }}
+            - core-dependencies-v4-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn install
@ -29,9 +26,11 @@ jobs:
          command: yarn bootstrap --core
      - save_cache:
          name: Cache core dependencies
-          key: core-dependencies-v3-{{ checksum "yarn.lock" }}
+          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
          paths:
-            - ~/.cache/yarn
+            - ~/.cache
+            - node_modules
+            - /root/.cache
      - persist_to_workspace:
          root: .
          paths:
@ -48,8 +47,12 @@ jobs:
      - attach_workspace:
          at: .
      - run:
-          name: Run chromatic on the pre-built storybook
-          command: yarn chromatic -- -d ./storybook-static
+          name: Run chromatic on the pre-built official example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/official-storybook" --exit-zero-on-changes --app-code="ab7m45tp9p"
+      - run:
+          name: Run chromatic on the pre-built angular example
+          command: yarn chromatic --storybook-build-dir="built-storybooks/angular-cli" --exit-zero-on-changes --app-code="tl92yzsj6w"
+
  packtracker:
    <<: *defaults
    steps:
@ -63,97 +66,50 @@ jobs:
            yarn packtracker
  examples:
    <<: *defaults
+    parallelism: 4
    steps:
      - checkout
      - attach_workspace:
          at: .
      - run:
-          name: Workaround for https://github.com/GoogleChrome/puppeteer/issues/290
-          command: sh ./scripts/workaround-puppeteer-issue-290.sh
-      - run:
-          name: Build react kitchen-sink
+          name: examples
          command: |
-            cd examples/cra-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build react typescript kitchen-sink
-          command: |
-            cd examples/cra-ts-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build vue kitchen-sink
-          command: |
-            cd examples/vue-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build svelte kitchen-sink
-          command: |
-            cd examples/svelte-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build angular-cli
-          command: |
-            cd examples/angular-cli
-            yarn build-storybook
-      - run:
-          name: Build ember-cli
-          command: |
-            cd examples/ember-cli
-            yarn build-storybook
-      - run:
-          name: Build polymer-cli
-          command: |
-            cd examples/polymer-cli
-            yarn build-storybook
-      - run:
-          name: Build marko-cli
-          command: |
-            cd examples/marko-cli
-            yarn build-storybook
-      - run:
-          name: Build mithril kitchen-sink
-          command: |
-            cd examples/mithril-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build html kitchen-sink
-          command: |
-            cd examples/html-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build riot kitchen-sink
-          command: |
-            cd examples/riot-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build preact kitchen-sink
-          command: |
-            cd examples/preact-kitchen-sink
-            yarn build-storybook
-      - run:
-          name: Build cra react15
-          command: |
-            cd examples/cra-react15
-            yarn build-storybook
-      - run:
-          name: Build official-storybook
-          command: |
-            cd examples/official-storybook
-            yarn build-storybook
-      # - run:
-      #     name: Run image snapshots
-      #     command: yarn test --image
-      - store_artifacts:
-          path: examples/official-storybook/image-snapshots/__image_snapshots__
-          destination: official_storybook_image_snapshots
+            yarn build-storybooks
      - persist_to_workspace:
          root: .
          paths:
+            - built-storybooks
+  e2e:
+    working_directory: /tmp/storybook
+    docker:
+      - image: cypress/base:8
+        environment:
+          TERM: xterm
+    steps:
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: install cypress
+          command: yarn cypress install
+      - save_cache:
+          name: Cache core dependencies
+          key: core-dependencies-v4-{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache
            - node_modules
-            - examples
-            - addons
-            - app
-            - lib
+            - /root/.cache
+      - run:
+          name: running example
+          command: yarn serve-storybooks
+          background: true
+      - run:
+          name: await running examples
+          command: yarn await-serve-storybooks
+      - run:
+          name: cypress run
+          command: yarn cypress run
+
  smoke-tests:
    <<: *defaults
    steps:
@ -250,18 +206,13 @@ jobs:
      - restore_cache:
          name: Restore core dependencies cache
          keys:
-            - core-dependencies-v3-{{ checksum "yarn.lock" }}
+            - core-dependencies-v4-{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
-          command: yarn install
+          command: yarn bootstrap --install
      - run:
          name: Trigger build
          command: ./scripts/build-frontpage.js
-      - save_cache:
-          name: Cache core dependencies
-          key: core-dependencies-v3-{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
  docs:
    <<: *defaults
    steps:
@ -284,12 +235,7 @@ jobs:
          name: Cache docs dependencies
          key: docs-dependencies-v2-{{ checksum "docs/yarn.lock" }}
          paths:
-            - ~/.cache/yarn
-      - persist_to_workspace:
-          root: .
-          paths:
-            - docs/public
-            - docs/node_modules
+            - ~/.cache
  lint:
    <<: *defaults
    steps:
@ -322,19 +268,18 @@ jobs:
          name: Upload coverage
          command: yarn coverage
 workflows:
-  version: 2
-  build_test_deploy:
+  test:
    jobs:
      - build
-      - docs
-      - frontpage
      - lint:
          requires:
-            - docs
            - build
      - examples:
          requires:
            - build
+      - e2e:
+          requires:
+            - examples
      - smoke-tests:
          requires:
            - build
@ -353,3 +298,7 @@ workflows:
      - chromatic:
          requires:
            - examples
+  deploy:
+    jobs:
+      - docs
+      - frontpage
--- a/.eslintignore
+++ b/.eslintignore
@ -12,6 +12,8 @@ scripts/storage
 *.bundle.js
 *.js.map
 *.d.ts
+examples/ember-cli/.storybook/preview-head.html
+examples/official-storybook/tests/addon-jest.test.js

 !.remarkrc.js
 !.babelrc.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,161 +1,44 @@
-const error = 2;
-const warn = 1;
 const ignore = 0;
+// const warn = 1;
+const error = 2;

 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', '.d.ts'],
-        paths: ['node_modules/', 'node_modules/@types/'],
-      },
-    },
-    'html/html-extensions': ['.html'],
-  },
+  extends: ['@storybook/eslint-config-storybook'],
  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',
-      },
+      'never',
+      { ignorePackages: true, md: 'always', svg: 'always', json: 'always', tag: 'always' },
    ],
-    'import/no-extraneous-dependencies': [
+    'import/no-unresolved': [error, { ignore: ['@storybook'] }],
+    'react/state-in-constructor': ignore,
+    'react/static-property-placement': ignore,
+    'react/jsx-props-no-spreading': ignore,
+    'react/jsx-fragments': ignore,
+    '@typescript-eslint/ban-ts-ignore': ignore,
+    '@typescript-eslint/no-object-literal-type-assertion': ignore,
+    'react/sort-comp': [
      error,
      {
-        devDependencies: [
-          'examples/**',
-          'examples-native/**',
-          '**/example/**',
-          '*.js',
-          '**/*.test.js',
-          '**/*.stories.*',
-          '**/scripts/*.js',
-          '**/stories/**/*.js',
-          '**/__tests__/**/*.js',
-          '**/.storybook/**/*.*',
+        order: [
+          'staticLifecycle',
+          'static-methods',
+          'instance-variables',
+          'lifecycle',
+          '/^on.+$/',
+          '/^(get|set)(?!(DerivedStateFromProps|SnapshotBeforeUpdate$)).+$/',
+          'instance-methods',
+          'instance-variables',
+          'everything-else',
+          'render',
        ],
-        peerDependencies: true,
+        groups: {
+          staticLifecycle: ['displayName', 'propTypes', 'defaultProps', 'getDerivedStateFromProps'],
+        },
      },
    ],
-    '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__',
-          '__STORYBOOK_STORY_STORE__',
-        ],
-      },
-    ],
-    '@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
+    'max-classes-per-file': ignore,
  },
  overrides: [
    {
@ -168,6 +51,7 @@ module.exports = {
        'docs/src/stories/**',
      ],
      rules: {
+        '@typescript-eslint/no-empty-function': ignore,
        'import/no-extraneous-dependencies': ignore,
      },
    },
--- a/.github/automention.yml
+++ b/.github/automention.yml
@ -7,7 +7,8 @@
 'app: react-native': ['benoitdion', 'gongreg']
 'app: react-native-server': ['benoitdion', 'gongreg']
 'app: svelte': ['rixo', 'cam-stitt', 'plumpNation']
-'app: vue': ['backbone87', 'elevatebart', 'pksunkara']
+'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool']
+'app: web-components': ['daKmoR']
 'api: addons': ['ndelangen']
 'addon: a11y': ['CodeByAlex', 'Armanio', 'jsomsanith']
 'addon: contexts': ['leoyli']
--- 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
@ -1,24 +0,0 @@
-name: Node CI
-
-on: [push]
-
-jobs:
-  build:
-
-    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
-    runs-on: ${{ matrix.os }}
-    strategy:
-      matrix:
-        node-version: [8, 10, 12]
-        os: [ubuntu-latest, windows-latest, macOS-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/.github/workflows/tests-cli.yml
+++ b/.github/workflows/tests-cli.yml
@ -0,0 +1,40 @@
+name: CLI tests
+
+on: 
+  push
+  # push:
+# disabled for now:
+# https://github.community/t5/GitHub-Actions/Preserve-status-from-previous-action-run/m-p/33821#M1661
+#     paths:
+#     - 'lib/**'
+#     - 'app/**'
+
+jobs:
+  cli:
+    name: CLI Fixtures
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v1
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: cli
+      run: |
+        yarn test --cli
+  latest-cra:
+    name: Latest CRA
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - uses: actions/checkout@v1
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: latest-cra
+      run: |
+        yarn test-latest-cra
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@ -0,0 +1,20 @@
+name: Unit tests
+
+on: [push]
+
+jobs:
+  build:
+
+    name: Test on node ${{ matrix.node_version }} and ${{ matrix.os }}
+    runs-on: ${{ matrix.os }}
+    steps:
+    - uses: actions/checkout@v1
+    - uses: actions/setup-node@v1
+      with:
+        node-version: '10.x'
+    - name: install, bootstrap
+      run: |
+        yarn bootstrap --core
+    - name: test
+      run: |
+        yarn test --core
--- a/.gitignore
+++ b/.gitignore
@ -30,4 +30,7 @@ scripts/storage
 htpasswd
 /false
 storybook-out
-/addons/docs/common/config-*
+/addons/docs/common/config-*
+built-storybooks
+cypress/videos
+cypress/screenshots
--- 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/.travis.yml
+++ b/.travis.yml
@ -1,17 +1,14 @@
 language: node_js
 node_js:
-  - "8"
+  - "10"

-cache:
-  yarn: true
-
-install:
-  - yarn install
-  - yarn bootstrap --core
+# install:
+  # - yarn install
+  # - yarn bootstrap --core

 script:

 jobs:
  include:
-    - script: travis_wait 30 yarn test --cli
-    - script: travis_wait 30 yarn test-latest-cra
+    - script: echo "placeholder task"
+      name: "Placeholder task"
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,545 @@
+## 5.3.0-alpha.33 (October 28, 2019)
+
+### Maintenance
+
+* Web-components: Move custom-elements utils to app ([#8592](https://github.com/storybookjs/storybook/pull/8592))
+
+## 5.3.0-alpha.32 (October 28, 2019)
+
+### Features
+
+* Addon-docs: Props / Description for web-components ([#8585](https://github.com/storybookjs/storybook/pull/8585))
+* Core: Global addDecorator/addParameters ([#8573](https://github.com/storybookjs/storybook/pull/8573))
+* Addon-docs: Generalize Description doc block ([#8590](https://github.com/storybookjs/storybook/pull/8590))
+
+### Bug Fixes
+
+* React-native-server: Changed default port to number in CLI options ([#8584](https://github.com/storybookjs/storybook/pull/8584))
+
+### Maintenance
+
+* Typescript: Use native package types now available ([#8588](https://github.com/storybookjs/storybook/pull/8588))
+* Build: Fix now deploy maybe ([#8589](https://github.com/storybookjs/storybook/pull/8589))
+
+## 5.3.0-alpha.31 (October 27, 2019)
+
+### Dependency Upgrades
+
+* Upgrade babel-plugin-react-docgen to 4.0.0-beta.1 ([#8581](https://github.com/storybookjs/storybook/pull/8581))
+
+## 5.3.0-alpha.30 (October 27, 2019)
+
+### Features
+
+* Addon-docs: Modify Typeset doc block to accept units ([#8574](https://github.com/storybookjs/storybook/pull/8574))
+
+### Bug Fixes
+
+* Web-components: Use framework id 'web-components' ([#8579](https://github.com/storybookjs/storybook/pull/8579))
+
+### Maintenance
+
+* WC-kitchen-sink: Add babel-loader dependency ([#8578](https://github.com/storybookjs/storybook/pull/8578))
+
+### Dependency Upgrades
+
+* Upgrade babel-plugin-react-docgen to 3.2.0 ([#8580](https://github.com/storybookjs/storybook/pull/8580))
+
+## 5.3.0-alpha.29 (October 25, 2019)
+
+### Features
+
+* Addon-docs: Add props loader to vue preset ([#8567](https://github.com/storybookjs/storybook/pull/8567))
+
+### Dependency Upgrades
+
+* Angular: bump zone.js version in peer dependencies ([#8558](https://github.com/storybookjs/storybook/pull/8558))
+
+## 5.3.0-alpha.28 (October 25, 2019)
+
+### Features
+
+* Addon-docs: Publish web-components preset ([#8563](https://github.com/storybookjs/storybook/pull/8563))
+* Addon-docs: Vue slots/events props table + generalization ([#8489](https://github.com/storybookjs/storybook/pull/8489))
+
+## 5.3.0-alpha.27 (October 24, 2019)
+
+### Features
+
+* Core: Allow linking to kind/component ID ([#7648](https://github.com/storybookjs/storybook/pull/7648))
+* Addon-docs: Jest MDX transform for storyshots ([#8189](https://github.com/storybookjs/storybook/pull/8189))
+* CLI: Add flag to disable version checks ([#8488](https://github.com/storybookjs/storybook/pull/8488))
+* Typescript: add types for react demo ([#8517](https://github.com/storybookjs/storybook/pull/8517))
+
+### Bug Fixes
+
+* UI: Increase TooltipLinkList max-height to accommodate more links ([#8545](https://github.com/storybookjs/storybook/pull/8545))
+* UI: Prevent form submission as search is done while typing ([#8546](https://github.com/storybookjs/storybook/pull/8546))
+
+### Dependency Upgrades
+
+* Remove outdated and unused `jsx-to-string` library ([#8549](https://github.com/storybookjs/storybook/pull/8549))
+
+## 5.3.0-alpha.26 (October 23, 2019)
+
+Fix web-components storybook dependencies
+
+## 5.3.0-alpha.25 (October 23, 2019)
+
+### Features
+
+* Web-components: New storybook app ([#8400](https://github.com/storybookjs/storybook/pull/8400))
+* Core: Allow custom postcss config ([#8498](https://github.com/storybookjs/storybook/pull/8498))
+
+## 5.3.0-alpha.24 (October 22, 2019)
+
+### Features
+
+* Docs: Highlight ts and tsx syntax ([#8493](https://github.com/storybookjs/storybook/pull/8493))
+
+### Bug Fixes
+
+* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
+
+### Maintenance
+
+* Automate codemod tests as jest snapshots ([#8506](https://github.com/storybookjs/storybook/pull/8506))
+
+### Dependency Upgrades
+
+* Add  "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
+
+## 5.2.5 (October 22, 2019)
+
+### Bug Fixes
+
+* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
+* React-native-server: Convert port to number in CLI options ([#8491](https://github.com/storybookjs/storybook/pull/8491))
+* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
+* MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
+* React: Fix custom themes breaking the welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
+* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
+
+### Dependency Upgrades
+
+* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
+
+### Dependency Upgrades
+
+* Add  "@types/react-textarea-autosize" to dependencies ([#8503](https://github.com/storybookjs/storybook/pull/8503))
+
+## 5.3.0-alpha.23 (October 19, 2019)
+
+### Features
+
+* Webpack: Enabled error details ([#8391](https://github.com/storybookjs/storybook/pull/8391))
+
+### Bug Fixes
+
+* Addon-docs: Fix React.forwardedRef/memo props ([#8445](https://github.com/storybookjs/storybook/pull/8445))
+* MDX: Handle `<Story>` name starting with number ([#8469](https://github.com/storybookjs/storybook/pull/8469))
+
+### Maintenance
+
+* ADD a step in circleci to upload storybook for angular ([#8477](https://github.com/storybookjs/storybook/pull/8477))
+* Core: Check module type in configure ([#8412](https://github.com/storybookjs/storybook/pull/8412))
+* Angular: Convert angular-cli stories to CSF ([#7668](https://github.com/storybookjs/storybook/pull/7668))
+* Typescript: Migrate @storybook/mithril ([#8320](https://github.com/storybookjs/storybook/pull/8320))
+
+## 5.3.0-alpha.22 (October 18, 2019)
+
+### Features
+
+* CLI: Add component meta to framework templates ([#8462](https://github.com/storybookjs/storybook/pull/8462))
+
+### Maintenance
+
+* Build: Add cypress to Storybook CI ([#8397](https://github.com/storybookjs/storybook/pull/8397))
+* Incorrect minimal required node version ([#8427](https://github.com/storybookjs/storybook/pull/8427))
+
+## 5.3.0-alpha.21 (October 17, 2019)
+
+### Features
+
+* CLI: React-scripts TS template & test ([#8451](https://github.com/storybookjs/storybook/pull/8451))
+* Addon-storysource: Add preset ([#8437](https://github.com/storybookjs/storybook/pull/8437))
+
+### Bug Fixes
+
+* UI: Fix React15 support ([#8454](https://github.com/storybookjs/storybook/pull/8454))
+* Addon-centered: Fix zoom issues for non-Firefox browsers ([#8442](https://github.com/storybookjs/storybook/pull/8442))
+* CLI: Add CRA preset to MDX template ([#8452](https://github.com/storybookjs/storybook/pull/8452))
+* CLI: Add preset-create-react-app to CRA presets template ([#8449](https://github.com/storybookjs/storybook/pull/8449))
+* CLI: Fix CRA-ts fixture package name ([#8457](https://github.com/storybookjs/storybook/pull/8457))
+
+## 5.3.0-alpha.20 (October 15, 2019)
+
+### Features
+
+* Addon-docs: Support MDX source in Preview w/ no Story blocks ([#7966](https://github.com/storybookjs/storybook/pull/7966))
+
+### Bug Fixes
+
+* Addon-docs: Fix react inline stories ([#8419](https://github.com/storybookjs/storybook/pull/8419))
+* React: Fix custom themes breaking welcome demo ([#8259](https://github.com/storybookjs/storybook/pull/8259))
+
+## 5.3.0-alpha.19 (October 15, 2019)
+
+### Features
+
+* React: Move Create React App support to external preset ([#8416](https://github.com/storybookjs/storybook/pull/8416))
+* CLI: MDX template support ([#8396](https://github.com/storybookjs/storybook/pull/8396))
+
+### Bug Fixes
+
+* Addon-jest: Make withTests type generic ([#8410](https://github.com/storybookjs/storybook/pull/8410))
+* Addon-docs: Don't error in React when there's no `prepareForInline` ([#8415](https://github.com/storybookjs/storybook/pull/8415))
+
+### Dependency Upgrades
+
+* [Security] Bump lodash from 4.17.11 to 4.17.15 ([#8351](https://github.com/storybookjs/storybook/pull/8351))
+
+## 5.3.0-alpha.18 (October 14, 2019)
+
+### Bug Fixes
+
+* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
+* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
+* Addon-docs: Fix typo in default config ([#8403](https://github.com/storybookjs/storybook/pull/8403))
+* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
+* CLI: Update button.svelte template ([#8369](https://github.com/storybookjs/storybook/pull/8369))
+
+### Maintenance
+
+* Official-storybook: Add a story with duplicate decorators ([#8407](https://github.com/storybookjs/storybook/pull/8407))
+
+## 5.2.4 (October 14, 2019)
+
+### Bug Fixes
+
+* Angular: Fix angular2-template-loader / raw-loader version conflicts ([#8269](https://github.com/storybookjs/storybook/pull/8269))
+* CSF: Warn when CSF and `storiesOf` mixed in one file ([#8411](https://github.com/storybookjs/storybook/pull/8411))
+* Addon API: Clean preview hooks when removing a story ([#8408](https://github.com/storybookjs/storybook/pull/8408))
+* Update button.svelte ([#8369](https://github.com/storybookjs/storybook/pull/8369))
+* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
+
+### Maintenance
+
+* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
+
+## 5.3.0-alpha.17 (October 10, 2019)
+
+### Maintenance
+
+* Publish top-level .js and .d.ts files ([#8354](https://github.com/storybookjs/storybook/pull/8354))
+
+## 5.3.0-alpha.16 (October 10, 2019)
+
+Publish failed
+
+## 5.3.0-alpha.15 (October 8, 2019)
+
+### Features
+
+* Addon-docs: support vue inline rendering ([#7929](https://github.com/storybookjs/storybook/pull/7929))
+
+### Maintenance
+
+* Typescript: Migrate addon-storyshots ([#7674](https://github.com/storybookjs/storybook/pull/7674))
+
+## 5.3.0-alpha.14 (October 8, 2019)
+
+NPM publish failed
+
+## 5.3.0-alpha.13 (October 8, 2019)
+
+### Features
+
+* MDX: Better ergonomics for documenting CSF ([#8312](https://github.com/storybookjs/storybook/pull/8312))
+* Addon-docs: Story parameter for disabling docs ([#8313](https://github.com/storybookjs/storybook/pull/8313))
+
+### Dependency Upgrades
+
+* Remove redundant dependency on hoist-non-react-statics (#6349) ([#8310](https://github.com/storybookjs/storybook/pull/8310))
+
+## 5.3.0-alpha.12 (October 7, 2019)
+
+### Features
+
+* CSF: Allow multiple CSF with same title ([#8133](https://github.com/storybookjs/storybook/pull/8133))
+
+### Bug Fixes
+
+* CSF: Ignore __esModule export ([#8317](https://github.com/storybookjs/storybook/pull/8317))
+* React: Improve type of storyFn ([#8197](https://github.com/storybookjs/storybook/pull/8197))
+
+## 5.2.3 (October 7, 2019)
+
+### Bug Fixes
+
+* Core: Fix lib/core whitelist ([#8182](https://github.com/storybookjs/storybook/pull/8182))
+
+## 5.2.2 (October 7, 2019)
+
+### Bug Fixes
+
+* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
+* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
+* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
+* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
+* Addon-knobs: Add missing type def  #8105 ([#8118](https://github.com/storybookjs/storybook/pull/8118))
+* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
+* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
+* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
+* Addon-ondevice-notes: Validate the state content ([#8261](https://github.com/storybookjs/storybook/pull/8261))
+* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
+* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
+* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
+* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
+* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
+* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
+
+## 5.3.0-alpha.11 (October 6, 2019)
+
+### Bug Fixes
+
+* Storyshots: Update `read-pkg-up` usage to work with version `7` ([#8299](https://github.com/storybookjs/storybook/pull/8299))
+
+### Maintenance
+
+* Remove `weak` dependency Node 12 ([#8300](https://github.com/storybookjs/storybook/pull/8300))
+
+## 5.3.0-alpha.10 (October 5, 2019)
+
+### Bug Fixes
+
+* Storyshots: First-class CSF support ([#8000](https://github.com/storybookjs/storybook/pull/8000))
+
+### Maintenance
+
+* Build: Add CLI test in github actions ([#8064](https://github.com/storybookjs/storybook/pull/8064))
+
+## 5.3.0-alpha.9 (October 4, 2019)
+
+### Features
+
+* API: Add method to set manager config ([#8232](https://github.com/storybookjs/storybook/pull/8232))
+
+### Bug Fixes
+
+* Core: Show exception rather than error on react error boundary ([#8100](https://github.com/storybookjs/storybook/pull/8100))
+* Addon-knobs: Fix issues caused by rerenders ([#8287](https://github.com/storybookjs/storybook/pull/8287))
+
+### Maintenance
+
+* Fix local `yarn lint` ([#8289](https://github.com/storybookjs/storybook/pull/8289))
+* Fix button knob story ([#8282](https://github.com/storybookjs/storybook/pull/8282))
+* Official examples: apply babel-preset-minify only in production mode ([#8283](https://github.com/storybookjs/storybook/pull/8283))
+* Build: Upgrade chromatic to test ([#8246](https://github.com/storybookjs/storybook/pull/8246))
+
+### Dependency Upgrades
+
+* Upgrade regenerator-runtime to 0.13 in all packages ([#8258](https://github.com/storybookjs/storybook/pull/8258))
+* Misc upgrades ([#8280](https://github.com/storybookjs/storybook/pull/8280))
+
+## 5.3.0-alpha.9 (October 4, 2019)
+
+NPM publish failed
+
+## 5.3.0-alpha.7 (October 2, 2019)
+
+### Features
+
+* UI: Preferred color scheme awareness ([#8271](https://github.com/storybookjs/storybook/pull/8271))
+
+### Bug Fixes
+
+* UI: Fix inline code styling for dark theme ([#8260](https://github.com/storybookjs/storybook/pull/8260))
+
+### Maintenance
+
+* Regenerate lockfile ([#8263](https://github.com/storybookjs/storybook/pull/8263))
+
+## 5.3.0-alpha.6 (October 1, 2019)
+
+### Bug Fixes
+
+* Addon-ondevice-notes: Validate the state content  ([#8261](https://github.com/storybookjs/storybook/pull/8261))
+* API: Fix require cycles in addons hooks ([#8236](https://github.com/storybookjs/storybook/pull/8236))
+* API: Fix missing `channel.off` ([#8234](https://github.com/storybookjs/storybook/pull/8234))
+* Telejson: New version with typings and bugfixes ([#8228](https://github.com/storybookjs/storybook/pull/8228))
+* Addon-links: Update linkTo type to accept function ([#8117](https://github.com/storybookjs/storybook/pull/8117))
+* React: Add DecoratorFn type to exports ([#8121](https://github.com/storybookjs/storybook/pull/8121))
+
+### Maintenance
+
+* Update angular example to v8 ([#7747](https://github.com/storybookjs/storybook/pull/7747))
+* Hitting some flakiness in now deploys, this might help ([#8200](https://github.com/storybookjs/storybook/pull/8200))
+* Remov hooks from extracted StoryItem ([#8256](https://github.com/storybookjs/storybook/pull/8256))
+
+### Dependency Upgrades
+
+* Bump react-native-swipe-gestures to 1.0.4 ([#8235](https://github.com/storybookjs/storybook/pull/8235))
+
+## 5.3.0-alpha.5 (September 27, 2019)
+
+### Maintenance
+
+* UI: Improve code indentation ([#8218](https://github.com/storybookjs/storybook/pull/8218))
+* Use the extracted linting configs ([#8213](https://github.com/storybookjs/storybook/pull/8213))
+
+## 5.3.0-alpha.4 (September 26, 2019)
+
+### Bug Fixes
+
+* UI: Move addon dependencies to devDependencies ([#8206](https://github.com/storybookjs/storybook/pull/8206))
+* Addon-knobs: Handle undefined array value ([#8006](https://github.com/storybookjs/storybook/pull/8006))
+
+### Maintenance
+
+* Build: Upgrade from node8 to node10 ([#8207](https://github.com/storybookjs/storybook/pull/8207))
+
+## 5.3.0-alpha.3 (September 25, 2019)
+
+### Bug Fixes
+
+* Dependencies: add @types/webpack-env to apps that depend on it ([#8119](https://github.com/storybookjs/storybook/pull/8119))
+* UI: Removes default CSS margins on viewport ([#7742](https://github.com/storybookjs/storybook/pull/7742))
+
+## 5.3.0-alpha.2 (September 24, 2019)
+
+### Bug Fixes
+
+* Core: Fix lib/core files ([#8182](https://github.com/storybookjs/storybook/pull/8182))
+
+## 5.3.0-alpha.1 (September 23, 2019)
+
+### Bug Fixes
+
+* Preact: Allow JSX.Element story ([#8159](https://github.com/storybookjs/storybook/pull/8159))
+* Addon-docs: CSS classes for escape-hatch theming wrapper/content ([#8061](https://github.com/storybookjs/storybook/pull/8061))
+* CLI: Fix variable collisions in storiesof-to-csf ([#8106](https://github.com/storybookjs/storybook/pull/8106))
+* Storyshots: Fix STORYBOOK_HOOKS_CONTEXT error ([#8163](https://github.com/storybookjs/storybook/pull/8163))
+* Addon-contexts: Remove peer dependencies ([#7675](https://github.com/storybookjs/storybook/pull/7675))
+* Addon-knobs: Add missing type def ([#8118](https://github.com/storybookjs/storybook/pull/8118))
+
+### Dependency Upgrades
+
+* Update react-draggable to 4.0.3 ([#8145](https://github.com/storybookjs/storybook/pull/8145))
+
+## 5.2.1 (September 17, 2019)
+
+### Bug Fixes
+
+* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
+
+## 5.3.0-alpha.0 (September 16, 2019)
+
+### Features
+
+* UI: Debounce sidebar search filter ([#8032](https://github.com/storybookjs/storybook/pull/8032))
+
+### Bug Fixes
+
+* Core: Fix error handling ([#8097](https://github.com/storybookjs/storybook/pull/8097))
+
+### Maintenance
+
+* CLI: Add wrapper packages: sb & storybook ([#8034](https://github.com/storybookjs/storybook/pull/8034))
+* Build: Update now config ([#8049](https://github.com/storybookjs/storybook/pull/8049))
+
+## 5.2.0 (September 13, 2019)
+
+Storybook 5.2 is here!
+
+- 📚 DocsPage: Zero-config documentation
+- 📦 Component Story Format: Portable ES6 modules
+- 🖼 Design System: Best practice component development
+- 🧩 Addon API: Simplified w/ hooks
+
+5.2 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.2.0-alpha.*`, `5.2.0-beta.*`, and `5.2.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.
+
+## 5.2.0-rc.11 (September 10, 2019)
+
+### Features
+
+* DocsPage: show docs.storyDescription above story ([#8037](https://github.com/storybookjs/storybook/pull/8037))
+
+### Maintenance
+
+* Migrate to new github actions ([#8045](https://github.com/storybookjs/storybook/pull/8045))
+
+## 5.2.0-rc.10 (September 9, 2019)
+
+### Bug Fixes
+
+* Angular: remove webpack-env from tsconfig types ([#8036](https://github.com/storybookjs/storybook/pull/8036))
+
+### Documentation
+
+* Guides: Update all guides to CSF ([#8030](https://github.com/storybookjs/storybook/pull/8030))
+
+## 5.2.0-rc.9 (September 7, 2019)
+
+### Bug Fixes
+
+* Addon-knobs: allow array values in select and options knobs ([#8027](https://github.com/storybookjs/storybook/pull/8027))
+
+## 5.2.0-rc.8 (September 6, 2019)
+
+### Bug Fixes
+
+* Addon-docs: Scroll story into view ([#7994](https://github.com/storybookjs/storybook/pull/7994))
+* Addon-docs: Fix LI styling for dark color theme ([#8015](https://github.com/storybookjs/storybook/pull/8015))
+
+## 5.2.0-rc.7 (September 6, 2019)
+
+Publish failed
+
+## 5.2.0-rc.6 (September 5, 2019)
+
+### Bug Fixes
+
+* Addon-docs: Doc blocks fixes for dark theme ([#7991](https://github.com/storybookjs/storybook/pull/7991))
+* API: Fix useEfect in inline Docs ([#7992](https://github.com/storybookjs/storybook/pull/7992))
+* UI: Fix enableShortcuts option ([#7990](https://github.com/storybookjs/storybook/pull/7990))
+* Addon-docs: Error handling for invalid Story id ([#7965](https://github.com/storybookjs/storybook/pull/7965))
+
+## 5.2.0-rc.5 (September 4, 2019)
+
+### Bug Fixes
+
+* CLI: Force welcome stories to show up first in load order ([#7979](https://github.com/storybookjs/storybook/pull/7979))
+
+## 5.2.0-rc.4 (September 3, 2019)
+
+### Bug Fixes
+
+* Addon-docs: Fix MDX theme bleed with reset context ([#7974](https://github.com/storybookjs/storybook/pull/7974))
+
+## 5.2.0-rc.3 (September 3, 2019)
+
+Failed publish
+
+## 5.2.0-rc.2 (September 1, 2019)
+
+### Bug Fixes
+
+* Addon-docs: Fix inline stories using react hooks ([#7946](https://github.com/storybookjs/storybook/pull/7946))
+
+## 5.2.0-rc.1 (August 31, 2019)
+
+### Features
+
+*  Core: Add html lang attribute to iframe ([#7892](https://github.com/storybookjs/storybook/pull/7892))
+
+### Bug Fixes
+
+* Source-loader: Fix CSF display name handling ([#7940](https://github.com/storybookjs/storybook/pull/7940))
+* React-native: Resolve deprecated methods ([#7908](https://github.com/storybookjs/storybook/pull/7908))
+* Addon-viewport: keep styles on rotation-change ([#7683](https://github.com/storybookjs/storybook/pull/7683))
+* Addon-viewport: Fix defaultViewport ([#7934](https://github.com/storybookjs/storybook/pull/7934))
+
 ## 5.2.0-rc.0 (August 30, 2019)

 5.2 is in RC!!! 🎉What this means:
@ -928,7 +1470,7 @@ Storybook 5.1 is a juicy upgrade including:
 - 🛠 Context addon: New UI for themes, internationalization, & more
 - 🎛 Presets: One-line configuration for babel, webpack, & addons

-5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `5.0` or earlier.
+5.1 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.1.0-alpha.*`, `5.1.0-beta.*`, and `5.1.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `5.0` or earlier.

 ## 5.1.0 (June 5, 2019)

@ -2020,7 +2562,7 @@ Storybook 5.0 is a completely new UI with the following improvements:
 - ⌨️ Improved keyboard shortcuts that are user configurable
 - 🌍 New URL structure that eliminates long strings of query parameters

-  5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to ugprade from `4.x`.
+  5.0 contains hundreds more fixes, features, and tweaks. Browse the changelogs matching `5.0.0-alpha.*`, `5.0.0-beta.*`, and `5.0.0-rc.*` for the full list of changes. See [MIGRATION.md](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md) to upgrade from `4.x`.

 ## 5.0.0-rc.11 (March 5, 2019)

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -175,7 +175,7 @@ So the way our script works is that it:
 Our script leaves the local registry running, for **as long as you keep it running** you can install storybook packages from this local registry.

 - Navigate to your own project and then change `package.json` so the storybook packages match the version of the one you just published.
- Then just do the normal install procedure using `yarn` or `npm`
+- Then you can install using `yarn` or `npm`
 - Start using your storybook as normally.

 If you've made a change to storybook's codebase and would want this change to be reflected in your app:
@ -229,7 +229,7 @@ We use the following label scheme to categorize issues:

 All issues should have a `type` label. `bug`/`feature`/`question`/`discussion` are self-explanatory. `dependencies` is for keeping package dependencies up to date. `maintenance` is a catch-all for any kind of cleanup or refactoring.

-They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can easily see all of the issues for a particular area, and keep the total number of open issues under control.
+They should also have one or more `area`/`status` labels. We use these labels to filter issues down so we can see all of the issues for a particular area, and keep the total number of open issues under control.

 For example, here is the list of [open, untyped issues](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20-label%3A%22bug%22%20-label%3A%22discussion%22%20-label%3A%22feature%22%20-label%3A%22maintenance%22%20-label%3A%22question%20%2F%20support%22%20-label%3A%22documentation%22%20-label%3A%22greenkeeper%22), or here is a list of [bugs that have not been modified since 2017-04-01](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20label%3A%22bug%22%20updated%3A%3C%3D2017-04-01%20). For more info see [searching issues](https://help.github.com/articles/searching-issues/) in the Github docs.

@ -299,7 +299,7 @@ Storybook is broken up into sub-projects that you can install as you need them.

 #### Connecting Your App To Storybook

-**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by simply linking each addon you want to use.
+**_Note:_** If you aren't seeing addons after linking storybook, you probably have a versioning issue which can be fixed by linking each addon you want to use.
 This applies for the kitchen sink apps as well as your own projects.

 _Make sure `yarn dev` is running_
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,7 +1,12 @@
 # Migration

 - [Migration](#migration)
+  - [From version 5.2.x to 5.3.x](#from-version-52x-to-53x)
+    - [Create React App preset](#create-react-app-preset)
+    - [Description docs block](#description-docs-block)
  - [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)
@ -65,11 +70,37 @@
    - [Packages renaming](#packages-renaming)
    - [Deprecated embedded addons](#deprecated-embedded-addons)

+## From version 5.2.x to 5.3.x
+
+### Create React App preset
+
+You can now move to the new preset for [Create React App](https://create-react-app.dev/). The in-built preset for Create React App will be disabled in Storybook 6.0.
+
+Simply install [`@storybook/preset-create-react-app`](https://github.com/storybookjs/presets/tree/master/packages/preset-create-react-app) and it will be used automatically.
+
+### Description doc block
+
+In 5.3 we've changed `addon-docs`'s `Description` doc block's default behavior. Technically this is a breaking change, but MDX was not officially released in 5.2 and we reserved the right to make small breaking changes. The behavior of `DocsPage`, which was officially released, remains unchanged.
+
+The old behavior of `<Description of={Component} />` was to concatenate the info parameter or notes parameter, if available, with the docgen information loaded from source comments. If you depend on the old behavior, it's still available with `<Description of={Component} type='legacy-5.2' />`. This description type will be removed in Storybook 6.0.
+
+The new default behavior is to use the framework-specific description extractor, which for React/Vue is still docgen, but may come from other places (e.g. a JSON file) for other frameworks.
+
 ## From version 5.1.x to 5.2.x

-### default viewports
+### Source-loader

-The default viewports have been reduced to a smaller set, we think is enough for most usecases.
+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`, run `npm install -D @storybook/source-loader` (or use `yarn`), and replace every instance of `@storybook/addon-storysource/loader` 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
@ -95,7 +126,7 @@ This isn't a breaking change per se, because `addon-docs` is a new feature. Howe

 ### 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`.
+In 5.0.x the global option `sortStoriesByKind` option was [inadvertently 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`:

@ -127,7 +158,7 @@ Storybook 5.1 contains a major overhaul of `@storybook/react-native` as compared

 In addition, both packages share more code with the rest of Storybook, which will reduce bugs and increase compatibility (e.g. with the latest versions of babel, etc.).

-As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Simply upgrading the library should be enough.
+As a user with an existing 4.1.x RN setup, no migration should be necessary to your RN app. Upgrading the library should be enough.

 If you wish to run the optional web server, you will need to do the following migration:

@ -272,7 +303,7 @@ In 5.0, we now provide recommended defaults:

 This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.

-If you wish to opt-out of this new behavior and restore the flat UI, simply set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:
+If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:

 ```js
 addParameters({
@ -643,7 +674,7 @@ Storybook now uses Babel 7. There's a couple of cases when it can break with you
 If you are using `create-react-app` (aka CRA), you may need to do some manual steps to upgrade, depending on the setup.

 - `create-react-app@1` may require manual migrations.
-  - If you're adding storybook for the first time, it should just work: `sb init` should add the correct dependencies.
+  - If you're adding storybook for the first time: `sb init` should add the correct dependencies.
  - If you're upgrading an existing project, your `package.json` probably already uses Babel 6, making it incompatible with `@storybook/react@4` which uses Babel 7. There are two ways to make it compatible, each of which is spelled out in detail in the next section:
    - Upgrade to Babel 7 if you are not dependent on Babel 6-specific features.
    - Migrate Babel 6 if you're heavily dependent on some Babel 6-specific features).
@ -662,7 +693,7 @@ yarn add @babel/core babel-loader --dev
 yarn add babel-loader@7
 ```

-Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's a simple one that works:
+Also, make sure you have a `.babelrc` in your project directory. You probably already do if you are using Babel 6 features (otherwise you should consider upgrading to Babel 7 instead). If you don't have one, here's one that works:

 ```json
 {
@ -706,7 +737,7 @@ storiesOf('My component', module)

 This example applies notes globally to all stories. You can apply it locally with `storiesOf(...).addDecorator(withNotes)`.

-The story parameters correspond directly to the old withX arguments, so it's easy to migrate your code. See the parameters documentation for the packages that have been upgraded:
+The story parameters correspond directly to the old withX arguments, so it's less demanding to migrate your code. See the parameters documentation for the packages that have been upgraded:

 - [Notes](https://github.com/storybookjs/storybook/blob/master/addons/notes/README.md)
 - [Jest](https://github.com/storybookjs/storybook/blob/master/addons/jest/README.md)
@ -736,11 +767,11 @@ This was done to support different major versions of babel.

 ### Base webpack config now contains vital plugins ([#1775](https://github.com/storybookjs/storybook/pull/1775))

-This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was just a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.
+This affects you if you use custom webpack config in [Full Control Mode](https://storybook.js.org/configurations/custom-webpack-config/#full-control-mode) while not preserving the plugins from `storybookBaseConfig`. Before `3.3`, preserving them was a recommendation, but now it [became](https://github.com/storybookjs/storybook/pull/2578) a requirement.

 ### Refactored Knobs

-Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is easy:
+Knobs users: there was a bug in 3.2.x where using the knobs addon imported all framework runtimes (e.g. React and Vue). To fix the problem, we [refactored knobs](https://github.com/storybookjs/storybook/pull/1832). Switching to the new style is only takes one line of code.

 In the case of React or React-Native, import knobs like this:

@ -867,7 +898,7 @@ The new package names are:
 | `@kadira/storybook-addon-graphql`            | `@storybook/addon-graphql`       |
 | `@kadira/react-storybook-decorator-centered` | `@storybook/addon-centered`      |

-If your codebase is small, it's probably doable to just replace them by hand. (in your codebase and in `package.json`).
+If your codebase is small, it's probably doable to replace them by hand (in your codebase and in `package.json`).

 But if you have a lot of occurrences in your codebase, you can use a [codemod we created](./lib/codemod) for you.

@ -881,7 +912,7 @@ You have to change your `package.json`, prune old and install new dependencies b

 We used to ship 2 addons with every single installation of storybook: `actions` and `links`. But in practice not everyone is using them, so we decided to deprecate this and in the future, they will be completely removed. If you use `@storybook/react/addons` you will get a deprecation warning.

-If you **are** using these addons, migrating is simple:
+If you **are** using these addons, it takes two steps to migrate:

 - add the addons you use to your `package.json`.
 - update your code:
--- a/README.md
+++ b/README.md
@ -61,7 +61,7 @@ Storybook runs outside of your app. This allows you to develop UI components in

 Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/examples/>

-Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's easy-to-use API makes it easy to configure and extend in various ways. It has even been extended to support React Native development for mobile.
+Storybook comes with a lot of [addons](https://storybook.js.org/addons/introduction/) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native development for mobile.

 ## Table of contents

@ -91,7 +91,8 @@ If you'd rather set up your project manually, take a look at our [Slow Start Gui

 Once it's installed, you can `npm run storybook` and it will run the development server on your local machine, and give you a URL to browse some sample stories.

-**Storybook v2.x migration note**: If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:
+**Storybook v2.x migration note**: 
+If you're using Storybook v2.x and want to shift to 4.x version the easiest way is:

 ```sh
 cd my-storybook-v2-app
@ -148,7 +149,7 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | [links](addons/links/)                      | Create links between stories                                               |
 | [notes](addons/notes/)                      | Annotate Storybook stories with notes                                      |
 | [options](addons/options/)                  | Customize the Storybook UI in code                                         |
-| [storyshots](addons/storyshots/)            | Easy snapshot testing for components in Storybook                          |
+| [storyshots](addons/storyshots/)            | Snapshot testing for components in Storybook                               |
 | [storysource](addons/storysource/)          | View the code of your stories within the Storybook UI                      |
 | [viewport](addons/viewport/)                | Change display sizes and layouts for responsive components using Storybook |

@ -164,7 +165,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

--- a/RELEASES.md
+++ b/RELEASES.md
@ -93,7 +93,7 @@ is to upvote it by adding a "thumbs-up" reaction in Github. This way important
 bugs quickly bubble to the top [with a
 search](https://github.com/storybookjs/storybook/issues?utf8=%E2%9C%93&q=is%3Aissue%20is%3Aopen%20sort%3Areactions-%2B1-desc%20label%3Abug).

-And of course, the best way to make sure a bug gets addressed quickly is to fix
+The best way to make sure a bug gets addressed quickly is to fix
 it yourself and issue a PR. If the fix is good, we'll try to release it quickly
 in a patch release.

--- a/ROADMAP.md
+++ b/ROADMAP.md
@ -24,7 +24,7 @@ Doing these will be backwards compatible.

 ### Responsive + multi-device viewports preview.

-If you're smart about it you can already view the preview on multiple devices and windows. It's just an iframe after-all.
+If you're smart about it you can already view the preview on multiple devices and windows. It's an iframe after-all.
 But story selection and addon-settings are not synced.
 We want to make this much much simpler and a core feature of storybook.

@ -41,7 +41,7 @@ We're interested in full customizability of our UI, though addons and options.
 ### Add a playground addon

 Many other styleguide-type projects have what's called a playground, where developers can change the code rendering the component inside the app.
-Storybook has, of course, a very tight connection with your editor, and it has a knobs addon.
+Storybook has a very tight connection with your editor, and it has a knobs addon.
 But we still see value in an addon that will allow the workflow of a playground.

 ### See multiple (or all) stories in 1 preview.
--- a/mocks/inject-decorator.stories.txt
+++ b/mocks/inject-decorator.stories.txt
@ -3,7 +3,7 @@ import { storiesOf } from '@storybook/react';
 import { withInfo } from '@storybook/addon-info';
 import { action } from '@storybook/addon-actions';

-import DocgenButton from '../components/DocgenButton';
+import { DocgenButton } from '../components/DocgenButton';
 import FlowTypeButton from '../components/FlowTypeButton';
 import BaseButton from '../components/BaseButton';
 import TableComponent from '../components/TableComponent';
--- a/mocks/inject-decorator.ts.csf.txt
+++ b/mocks/inject-decorator.ts.csf.txt
@ -0,0 +1,19 @@
+import React from "react";
+import { action } from "@storybook/addon-actions";
+import { Button } from "@storybook/react/demo";
+
+export default {
+  title: "Button"
+};
+
+export const text = () => (
+  <Button onClick={action("clicked")}>Hello Button</Button>
+);
+
+export const emoji = () => (
+  <Button onClick={action("clicked")}>
+    <span role="img" aria-label="so cool">
+      😀 😎 👍 💯
+    </span>
+  </Button>
+);
--- 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';
--- a/addons/a11y/docs/screenshot.png
+++ b/addons/a11y/docs/screenshot.png
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -20,32 +20,37 @@
    "directory": "addons/a11y"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/client-logger": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
-    "@storybook/theming": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/client-logger": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
+    "@storybook/theming": "5.3.0-alpha.33",
    "axe-core": "^3.3.2",
-    "common-tags": "^1.8.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
-    "hoist-non-react-statics": "^3.3.0",
    "memoizerific": "^1.11.3",
    "react": "^16.8.3",
    "react-redux": "^7.0.2",
    "react-sizeme": "^2.5.2",
    "redux": "^4.0.1",
+    "ts-dedent": "^1.1.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@types/common-tags": "^1.8.0",
    "@types/react-redux": "^7.0.6"
  },
  "publishConfig": {
--- 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, ReactNode } from 'react';
+import React, { FunctionComponent, ReactNode, useState } from 'react';
 import memoize from 'memoizerific';
 import { styled } from '@storybook/theming';

@ -34,13 +34,6 @@ const ColorIcon = styled.span(
  })
 );

-// eslint-disable-next-line @typescript-eslint/no-empty-interface
-interface ColorBlindnessProps {}
-
-interface ColorBlindnessState {
-  active: string | null;
-}
-
 const baseList = [
  'protanopia',
  'protanomaly',
@ -86,45 +79,39 @@ const getColorList = (active: string | null, set: (i: string | null) => void): L
  })),
 ];

-export class ColorBlindness extends Component<ColorBlindnessProps, ColorBlindnessState> {
-  state: ColorBlindnessState = {
-    active: null,
-  };
+export const ColorBlindness: FunctionComponent = () => {
+  const [active, setActiveState] = useState(null);

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

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

-  render() {
-    const { active } = this.state;
-
-    return (
-      <WithTooltip
-        placement="top"
-        trigger="click"
-        tooltip={({ onHide }) => {
-          const colorList = getColorList(active, i => {
-            this.setActive(i);
-            onHide();
-          });
-          return <TooltipLinkList links={colorList} />;
-        }}
-        closeOnClick
-        onDoubleClick={() => this.setActive(null)}
-      >
-        <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
-          <Icons icon="mirror" />
-        </IconButton>
-      </WithTooltip>
-    );
-  }
-}
+  return (
+    <WithTooltip
+      placement="top"
+      trigger="click"
+      tooltip={({ onHide }) => {
+        const colorList = getColorList(active, i => {
+          setActive(i);
+          onHide();
+        });
+        return <TooltipLinkList links={colorList} />;
+      }}
+      closeOnClick
+      onDoubleClick={() => setActive(null)}
+    >
+      <IconButton key="filter" active={!!active} title="Color Blindness Emulation">
+        <Icons icon="mirror" />
+      </IconButton>
+    </WithTooltip>
+  );
+};
--- a/addons/a11y/src/components/Report/HighlightToggle.tsx
+++ b/addons/a11y/src/components/Report/HighlightToggle.tsx
@ -1,5 +1,5 @@
 import { document } from 'global';
-import React, { Component } from 'react';
+import React, { Component, createRef } from 'react';
 import { connect } from 'react-redux';
 import { styled, themes, convert } from '@storybook/theming';
 import memoize from 'memoizerific';
@ -100,7 +100,7 @@ class HighlightToggle extends Component<ToggleProps> {
    elementsToHighlight: [],
  };

-  private checkBoxRef = React.createRef<HTMLInputElement>();
+  private checkBoxRef = createRef<HTMLInputElement>();

  componentDidMount() {
    const { elementsToHighlight, highlightedElementsMap } = this.props;
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState } from 'react';

 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';
@ -59,55 +59,42 @@ interface ItemProps {
  type: RuleType;
 }

-interface ItemState {
-  open: boolean;
-}
+// export class Item extends Component<ItemProps, ItemState> {
+export const Item = (props: ItemProps) => {
+  const [open, onToggle] = useState(false);

-export class Item extends Component<ItemProps, ItemState> {
-  state = {
-    open: false,
-  };
+  const { item, type } = props;
+  const highlightToggleId = `${type}-${item.id}`;

-  onToggle = () =>
-    this.setState(prevState => ({
-      open: !prevState.open,
-    }));
-
-  render() {
-    const { item, type } = this.props;
-    const { open } = this.state;
-    const highlightToggleId = `${type}-${item.id}`;
-
-    return (
-      <Fragment>
-        <Wrapper>
-          <HeaderBar onClick={this.onToggle} role="button">
-            <Icon
-              icon="chevrondown"
-              size={10}
-              color="#9DA5AB"
-              style={{
-                transform: `rotate(${open ? 0 : -90}deg)`,
-              }}
-            />
-            {item.description}
-          </HeaderBar>
-          <HighlightToggleElement>
-            <HighlightToggle
-              toggleId={highlightToggleId}
-              type={type}
-              elementsToHighlight={item ? item.nodes : null}
-            />
-          </HighlightToggleElement>
-        </Wrapper>
-        {open ? (
-          <Fragment>
-            <Info item={item} key="info" />
-            <Elements elements={item.nodes} type={type} key="elements" />
-            <Tags tags={item.tags} key="tags" />
-          </Fragment>
-        ) : null}
-      </Fragment>
-    );
-  }
-}
+  return (
+    <Fragment>
+      <Wrapper>
+        <HeaderBar onClick={() => onToggle(!open)} role="button">
+          <Icon
+            icon="chevrondown"
+            size={10}
+            color="#9DA5AB"
+            style={{
+              transform: `rotate(${open ? 0 : -90}deg)`,
+            }}
+          />
+          {item.description}
+        </HeaderBar>
+        <HighlightToggleElement>
+          <HighlightToggle
+            toggleId={highlightToggleId}
+            type={type}
+            elementsToHighlight={item ? item.nodes : null}
+          />
+        </HighlightToggleElement>
+      </Wrapper>
+      {open ? (
+        <Fragment>
+          <Info item={item} key="info" />
+          <Elements elements={item.nodes} type={type} key="elements" />
+          <Tags tags={item.tags} key="tags" />
+        </Fragment>
+      ) : null}
+    </Fragment>
+  );
+};
--- a/addons/a11y/src/index.ts
+++ b/addons/a11y/src/index.ts
@ -1,8 +1,7 @@
-/* eslint-disable @typescript-eslint/no-object-literal-type-assertion */
 import { document } from 'global';
 import axe, { AxeResults, ElementContext, RunOptions, Spec } from 'axe-core';
 import deprecate from 'util-deprecate';
-import { stripIndents } from 'common-tags';
+import dedent from 'ts-dedent';

 import addons, { makeDecorator } from '@storybook/addons';
 import { EVENTS, PARAM_KEY } from './constants';
@ -80,7 +79,7 @@ export const configureA11y = deprecate(
  (config: any) => {
    setup = config;
  },
-  stripIndents`
+  dedent`
    configureA11y is deprecated, please configure addon-a11y using the addParameter api:
    
    addParameters({
--- a/addons/actions/docs/screenshot.png
+++ b/addons/actions/docs/screenshot.png
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -15,25 +15,32 @@
    "directory": "addons/actions"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/client-api": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
-    "@storybook/theming": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/client-api": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
+    "@storybook/theming": "5.3.0-alpha.33",
    "core-js": "^3.0.1",
    "fast-deep-equal": "^2.0.1",
    "global": "^4.3.2",
    "polished": "^3.3.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
-    "react-inspector": "^3.0.2",
+    "react-inspector": "^4.0.0",
    "uuid": "^3.3.2"
  },
  "devDependencies": {
--- a/addons/actions/src/manager.tsx
+++ b/addons/actions/src/manager.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import addons from '@storybook/addons';
 import ActionLogger from './containers/ActionLogger';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
--- 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.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -19,18 +19,25 @@
  },
  "license": "MIT",
  "author": "jbaxleyiii",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/client-logger": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
-    "@storybook/theming": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/client-logger": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
+    "@storybook/theming": "5.3.0-alpha.33",
    "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
@ -128,7 +128,7 @@ export class BackgroundSelector extends Component<Props> {
                <Global
                  styles={(theme: Theme) => ({
                    [`#${iframeId}`]: {
-                      background:
+                      backgroundColor:
                        selectedBackgroundColor === 'transparent'
                          ? theme.background.content
                          : selectedBackgroundColor,
--- a/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/addons/backgrounds/src/containers/GridSelector.tsx
@ -1,15 +1,20 @@
-import React, { FunctionComponent } from 'react';
+import React, { FunctionComponent, memo } from 'react';

-import { useAddonState } from '@storybook/api';
+import { useAddonState, useParameter } from '@storybook/api';
 import { Global } from '@storybook/theming';
 import { Icons, IconButton } from '@storybook/components';

-import { ADDON_ID } from '../constants';
+import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
+
+export interface BackgroundGridParameters {
+  cellSize: number;
+}

 const iframeId = 'storybook-preview-iframe';

-export const GridSelector: FunctionComponent = () => {
+export const GridSelector: FunctionComponent = memo(() => {
  const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
+  const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });

  return (
    <IconButton
@ -23,19 +28,24 @@ export const GridSelector: FunctionComponent = () => {
        <Global
          styles={{
            [`#${iframeId}`]: {
-              backgroundSize: '100px 100px, 100px 100px, 20px 20px, 20px 20px',
+              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,rgb(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(','),
+                '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/centered/ember.d.ts
+++ b/addons/centered/ember.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/ember';
+export default centered;
--- a/addons/centered/html.d.ts
+++ b/addons/centered/html.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/html';
+export default centered;
--- a/addons/centered/mithril.d.ts
+++ b/addons/centered/mithril.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/mithril';
+export default centered;
--- a/addons/centered/package.json
+++ b/addons/centered/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-centered",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "Storybook decorator to center components",
  "keywords": [
    "addon",
@ -17,13 +17,19 @@
  },
  "license": "MIT",
  "author": "Muhammed Thanish <mnmtanish@gmail.com>",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "util-deprecate": "^1.0.2"
@ -33,13 +39,5 @@
    "mithril": "*",
    "preact": "*",
    "react": "*"
-  },
-  "peerDependencies": {
-    "mithril": "*",
-    "preact": "*",
-    "react": "*"
-  },
-  "publishConfig": {
-    "access": "public"
  }
 }
--- a/addons/centered/preact.d.ts
+++ b/addons/centered/preact.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/preact';
+export default centered;
--- a/addons/centered/react.d.ts
+++ b/addons/centered/react.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/react';
+export default centered;
--- a/addons/centered/src/mithril.tsx
+++ b/addons/centered/src/mithril.tsx
@ -1,4 +1,5 @@
 /** @jsx m */
+/* eslint-disable import/no-extraneous-dependencies */
 import m, { ComponentTypes } from 'mithril';
 import { makeDecorator } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/centered/src/preact.tsx
+++ b/addons/centered/src/preact.tsx
@ -1,4 +1,5 @@
 /** @jsx h */
+/* eslint-disable import/no-extraneous-dependencies */
 import { Component, h } from 'preact';
 import { makeDecorator } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/centered/src/rax.js
+++ b/addons/centered/src/rax.js
@ -1,9 +1,8 @@
 /** @jsx createElement */
-// eslint-disable-next-line import/no-extraneous-dependencies
+/* eslint-disable import/no-extraneous-dependencies */
 import { createElement } from 'rax';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import View from 'rax-view';
-import { makeDecorator } from '@storybook/addons/src/make-decorator';
+import { makeDecorator } from '@storybook/addons';
 import parameters from './parameters';
 import styles from './styles';

--- a/addons/centered/src/react.tsx
+++ b/addons/centered/src/react.tsx
@ -1,3 +1,4 @@
+/* eslint-disable import/no-extraneous-dependencies */
 import React, { ReactNode } from 'react';
 import { makeDecorator, StoryFn } from '@storybook/addons';
 import parameters from './parameters';
--- a/addons/centered/svelte.d.ts
+++ b/addons/centered/svelte.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/svelte';
+export default centered;
--- a/addons/centered/vue.d.ts
+++ b/addons/centered/vue.d.ts
@ -0,0 +1,2 @@
+import centered from './dist/vue';
+export default centered;
--- a/addons/contexts/README.md
+++ b/addons/contexts/README.md
@ -6,7 +6,7 @@
 ## 💡 Why you need this?

 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
+they 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 looks great in all scenarios.

@ -25,7 +25,7 @@ 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
+2. Support dynamic contextual props switching from Storybook toolbar at runtime. You can slice into
   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
@ -65,7 +65,7 @@ import { contexts } from './configs/contexts'; // we will define the contextual
 addDecorator(withContexts(contexts));
 ```

-Alternatively, just like other addons, you can use this addon only for a given set of stories:
+Alternatively, like other addons, you can use this addon only for a given set of stories:

 ```js
 import { storiesOf } from '@storybook/[framework]';
@ -220,7 +220,7 @@ 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 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 existing setup at the story level too (make sure it goes with the
--- a/addons/contexts/package.json
+++ b/addons/contexts/package.json
@ -1,38 +1,39 @@
 {
  "name": "@storybook/addon-contexts",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "Storybook Addon Contexts",
  "keywords": [
-    "storybook",
    "preact",
    "react",
+    "storybook",
    "vue"
  ],
-  "author": "Leo Y. Li",
-  "license": "MIT",
-  "main": "dist/register.js",
-  "files": [
-    "dist/**/*",
-    "register.js",
-    "preact.js",
-    "react.js",
-    "vue.js"
-  ],
  "repository": {
    "type": "git",
    "url": "https://github.com/storybookjs/storybook.git",
    "directory": "addons/contexts"
  },
+  "license": "MIT",
+  "author": "Leo Y. Li",
+  "files": [
+    "dist/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
+  "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.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
-    "core-js": "^3.0.1"
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
+    "core-js": "^3.0.1",
+    "global": "^4.3.2",
+    "qs": "^6.6.0"
  },
  "peerDependencies": {
    "global": "*",
@ -41,11 +42,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/ToolBar.tsx
+++ b/addons/contexts/src/manager/components/ToolBar.tsx
@ -1,4 +1,4 @@
-import React, { ComponentProps } from 'react';
+import React, { ComponentProps, memo } from 'react';
 import { Separator } from '@storybook/components';
 import { ToolBarControl } from './ToolBarControl';
 import { ContextNode, FCNoChildren, SelectionState } from '../../shared/types.d';
@ -9,7 +9,7 @@ type ToolBar = FCNoChildren<{
  setSelected: ComponentProps<typeof ToolBarControl>['setSelected'];
 }>;

-export const ToolBar: ToolBar = React.memo(({ nodes, state, setSelected }) =>
+export const ToolBar: ToolBar = memo(({ nodes, state, setSelected }) =>
  nodes.length ? (
    <>
      <Separator />
--- a/addons/contexts/src/manager/components/ToolBarControl.tsx
+++ b/addons/contexts/src/manager/components/ToolBarControl.tsx
@ -1,7 +1,7 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ToolBarMenu } from './ToolBarMenu';
 import { OPT_OUT } from '../../shared/constants';
-import { ContextNode, FCNoChildren, Omit } from '../../shared/types.d';
+import { ContextNode, FCNoChildren } from '../../shared/types.d';

 type ToolBarControl = FCNoChildren<
  Omit<
@ -22,7 +22,7 @@ export const ToolBarControl: ToolBarControl = ({
  selected,
  setSelected,
 }) => {
-  const [expanded, setExpanded] = React.useState(false);
+  const [expanded, setExpanded] = useState(false);
  const paramNames = params.map(({ name }) => name);
  const activeName =
    // validate the integrity of the selected name
--- a/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx
+++ b/addons/contexts/src/manager/components/ToolBarMenuOptions.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { TooltipLinkList } from '@storybook/components';
 import { OPT_OUT } from '../../shared/constants';
 import { FCNoChildren } from '../../shared/types.d';
--- 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/contexts/src/preview/frameworks/react.ts
+++ b/addons/contexts/src/preview/frameworks/react.ts
@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement, ReactElement } from 'react';
 import { createAddonDecorator, Render } from '../../index';
 import { ContextsPreviewAPI } from '../ContextsPreviewAPI';

@ -6,9 +6,9 @@ import { ContextsPreviewAPI } from '../ContextsPreviewAPI';
 * This is the framework specific bindings for React.
 * '@storybook/react' expects the returning object from a decorator to be a 'React Element' (vNode).
 */
-export const renderReact: Render<React.ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
+export const renderReact: Render<ReactElement> = (contextNodes, propsMap, getStoryVNode) => {
  const { getRendererFrom } = ContextsPreviewAPI();
-  return getRendererFrom(React.createElement)(contextNodes, propsMap, getStoryVNode);
+  return getRendererFrom(createElement)(contextNodes, propsMap, getStoryVNode);
 };

 export const withContexts = createAddonDecorator(renderReact);
--- a/addons/contexts/src/shared/types.d.ts
+++ b/addons/contexts/src/shared/types.d.ts
@ -6,7 +6,6 @@ export { API as ManagerAPI } from '@storybook/api';
 // helpers
 export declare type AnyFunctionReturns<T> = (...arg: any[]) => T;
 export declare type FCNoChildren<P> = FunctionComponent<{ children?: never } & P>;
-export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 export declare type GenericProp = null | {
  readonly [key: string]: unknown;
 };
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -19,16 +19,23 @@
  },
  "license": "MIT",
  "author": "nm123github",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
    "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,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';
 import { addons, types } from '@storybook/addons';

 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,14 +1,14 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
-    "storybook",
-    "parameter",
-    "design",
    "assets",
+    "design",
    "files",
+    "parameter",
+    "storybook",
    "viewer"
  ],
  "homepage": "https://github.com/storybookjs/storybook#readme",
@ -21,27 +21,31 @@
    "directory": "addons/design-assets"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/client-logger": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/core-events": "5.2.0-rc.0",
-    "@storybook/theming": "5.2.0-rc.0",
-    "common-tags": "^1.8.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/client-logger": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/core-events": "5.3.0-alpha.33",
+    "@storybook/theming": "5.3.0-alpha.33",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
+    "ts-dedent": "^1.1.0",
    "use-image": "^1.0.3"
  },
-  "devDependencies": {
-    "@types/common-tags": "^1.8.0"
-  },
  "publishConfig": {
    "access": "public"
  }
--- a/addons/design-assets/src/register.tsx
+++ b/addons/design-assets/src/register.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import * as React from 'react';

 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -6,7 +6,7 @@

 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.
+**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 clean, readable 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.

@ -73,22 +73,23 @@ 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
+Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. 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    |   +   |  #  |         |      |        |         |       |         |      |       |        |
+|                   | React | Vue | Angular | HTML | [Web Components](./web-components) | Svelte | Polymer | Marko | Mithril | Riot | Ember | Preact |
+| ----------------- | :---: | :-: | :-----: | :--: | :--------------------------------: | :----: | :-----: | :---: | :-----: | :--: | :---: | :----: |
+| MDX stories       |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| CSF stories       |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| StoriesOf stories |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Source            |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Notes / Info      |   +   |  +  |    +    |  +   |                 +                  |   +    |    +    |   +   |    +    |  +   |   +   |   +    |
+| Props table       |   +   |  +  |    #    |      |                 +                  |        |         |       |         |      |       |        |
+| Description       |   +   |  +  |    #    |      |                 +                  |        |         |       |         |      |       |        |
+| Inline stories    |   +   |  +  |         |      |                                    |        |         |       |         |      |       |        |

 **Note:** `#` = WIP support

+Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md)
+
 ## Installation

 First add the package. Make sure that the versions for your `@storybook/*` packages match:
@ -97,10 +98,10 @@ First add the package. Make sure that the versions for your `@storybook/*` packa
 yarn add -D @storybook/addon-docs
 ```

-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:
+Docs has peer dependencies on `react`, `react-is`, 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
+yarn add -D react react-is babel-loader
 ```

 Then add the following to your `.storybook/presets.js` exports:
@ -121,6 +122,24 @@ 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.

+If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to
+configure Jest to transform MDX stories into something Storyshots can understand:
+
+Add the following to your Jest configuration:
+
+```json
+{
+  "transform": {
+    "^.+\\.[tj]sx?$": "babel-jest",
+    "^.+\\.mdx$": "@storybook/addon-docs/jest-transform-mdx"
+  }
+}
+```
+
+### Be sure to check framework specific installation needs
+
+- [Web Components](./web-components)
+
 ## 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:
@ -162,7 +181,9 @@ module.exports = async ({ config }) => {
      {
        loader: 'babel-loader',
        // may or may not need this line depending on your app's setup
-        plugins: ['@babel/plugin-transform-react-jsx'],
+        options: {
+          plugins: ['@babel/plugin-transform-react-jsx'],
+        },
      },
      {
        loader: '@mdx-js/loader',
@ -209,7 +230,8 @@ Install the preset with care. If you've already configured Typescript manually,

 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)
+- 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/common/index.js
+++ b/addons/docs/common/index.js
@ -1,2 +1 @@
-// FIXME: move this to typescript and src/react folder
-module.exports = require('../dist/lib/getPropDefs');
+module.exports = require('../dist/frameworks/common');
--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@ -24,7 +24,7 @@ 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.
+- It's built to work with [`MDX`](./mdx.md) when you need more control of your documentation.

 ## Component parameter

@ -32,7 +32,7 @@ However, `DocsPage` brings the following improvements:

 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)]():
+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';
@ -77,6 +77,8 @@ Here is a summary of the slots, where the data comes from by default, and the sl
 | Props       | component docgen props or propTypes | `propsSlot`       | React, Vue |
 | Stories     | storybook stories                   | `storiesSlot`     | All        |

+The `storiesSlot` uses the `docs.storyDescription` parameter to show a description for each story, if available.
+
 For more information on frameworks, see ["Framework support"](../README.md#framework-support)

 ### Title
@ -114,7 +116,7 @@ For example, here's the source for `Badge`:

 ```js
 /**
- * Use `Badge` to highlight key info with a predefined status. Easy peasy!
+ * Use `Badge` to highlight key info with a predefined status.
 */
 export const Badge = ({ status, children }) => { ... }
 ```
@ -199,7 +201,7 @@ What if you don't want a `DocsPage` for your storybook, for a specific component
 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 MDX](./recipes.md#csf-stories-with-mdx-docs) docs
 - With a custom React component

 **Globally (config.js)**
@ -237,11 +239,36 @@ Unless you use a custom webpack configuration, all of your story files should ha

 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).

+## Inline stories vs. Iframe stories
+
+Due to the complex nature of writing a cross-framework utility like Storybook, the story blocks for most frameworks exist within an `<iframe>` element. This creates a clean separation of the context the code for each framework lives inside, but it isn't a perfect tradeoff. It does create a set of disadvantages--namely, you have to explicitly set the height of a story. It also causes some headaches for certain dev tools (Vue dev tools, for example, don't pick up components that exist in an iframe, without substantial jerry-rigging).
+
+That being said, there is a system in place to remove the necessity of this tradeoff. The docs configuration contains two options, `inlineStories` and `prepareForInline` that can work together to integrate non-react stories seamlessly (or should I say "scroll-bar-less-ly") into DocsPage. Setting `inlineStories` to `true` tells storybook to stop putting your stories into an iframe. The hard(er) part is providing the `prepareForInline` parameter. This parameter accepts a function that transforms story content in your given framework into something react can render. Any given framework will need to approach this in a different way. Angular, for example, might convert its story content into a custom element (you can read about that [here](https://angular.io/guide/elements)). We've actually taken the initiative and implemented Vue inline stories _for you_ in the default docs config for Vue, because we're such nice people. The following docs config block allows Vue components to be rendered inline through an effect hook provided by [@egoist/vue-to-react](https://github.com/egoist/vue-to-react):
+
+```js
+import React from 'react';
+import { render } from 'react-dom';
+import toReact from '@egoist/vue-to-react';
+import { addParameters } from '@storybook/vue';
+
+addParameters({
+  docs: {
+    prepareForInline: storyFn => {
+      const Story = toReact(storyFn());
+      return <Story />;
+    },
+  },
+});
+```
+
+With that function, anyone using the docs addon for `@storybook/vue` can make their stories render inline, either globally with the `inlineStories` docs parameter, or on a per-story-basis using the `inline` prop on the `<Story>` doc block. If you come up with an elegant and flexible implementation for the `prepareForInline` function for your own framework, let us know! We'd love to make it the default configuration, to make inline stories more accessible for a larger variety of frameworks!
+
 ## 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)
+- 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
@ -40,13 +40,14 @@ Shows up in the dev tools as follows:
  <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.
+This is [Component Story Format (CSF)](https://medium.com/storybookjs/component-story-format-66f4c32366df), so there are ways 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)
+- 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
@ -19,7 +19,7 @@

 ## Basic example

-Let's get started with a simple example that combines markdown with a single story:
+Let's get started with an example that combines markdown with a single story:

 ```md
 import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
@ -74,7 +74,7 @@ export const allCheckboxes = () => (
 );
 ```

-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.
+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 translate between the three. And technically, this means that the transformations that happen under the hood are simple and predictable.

 ## Writing stories

@ -182,7 +182,7 @@ If you don't define stories in your MDX, you can write MDX documentation and ass

 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:
+To get a "documentation-only story", in your UI, 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%" />
@ -198,7 +198,8 @@ Be sure to update your Storybook config file to load `.stories.mdx` stories, as

 `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)
+- 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/addons/docs/docs/media/mdx-hero.png
+++ b/addons/docs/docs/media/mdx-hero.png
--- a/addons/docs/docs/media/mdx-page.png
+++ b/addons/docs/docs/media/mdx-page.png
--- a/addons/docs/docs/media/mdx-simple.png
+++ b/addons/docs/docs/media/mdx-simple.png
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@ -0,0 +1,107 @@
+# Storybook Docs framework dev guide
+
+Storybook Docs [provides basic support for all non-RN Storybook view layers](../README.md#framework-support) out of the box. However, some frameworks have been docs-optimized, adding features like automatic props table generation and inline story rendering. This document is a dev guide for how to set up a new framework in docs.
+
+- [Adding a preset](#adding-a-preset)
+- [Props tables](#props-tables)
+- [Component descriptions](#component-descriptions)
+- [Inline story rendering](#inline-story-rendering)
+
+## Adding a preset
+
+To get basic support, you need to add a [preset](https://storybook.js.org/docs/presets/introduction). By default this doesn't need to do much.
+
+Here's a basic preset for `@storybook/html` in `addons/docs/html/preset.js`:
+
+```js
+module.exports = require('../dist/frameworks/common/makePreset').default('html');
+```
+
+This automatically adds [DocsPage](./docspage.md) for each story, as well as webpack/babel settings for MDX support.
+
+There is also a little hoop-jumping that will hopefully be unnecessary soon.
+
+`addons/docs/src/frameworks/html/config.js`
+
+```js
+import { addParameters } from '@storybook/html';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+
+addParameters({
+  docs: {
+    container: DocsContainer,
+    page: DocsPage,
+  },
+});
+```
+
+`addons/docs/html/config.js`
+
+```js
+module.exports = require('../dist/frameworks/html/config');
+```
+
+## Props tables
+
+Props tables are enabled by the framework-specific `docs.extractProps` parameter, which extracts a component's props into a common data structure.
+
+Here's how it's done in Vue's framework-specific `config.js`:
+
+```js
+import { extractProps } from './extractProps';
+
+addParameters({
+  docs: {
+    // `container`, `page`, etc. here
+    extractProps,
+  },
+});
+```
+
+The `extractProps`function receives a component as an argument, and returns an object of type [`PropsTableProps`](https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/PropsTable/PropsTable.tsx#L147), which can either be a array of `PropDef` rows (React), or a mapping of section name to an array of `PropDef` rows (e.g. `Props`/`Events`/`Slots` in Vue).
+
+```ts
+export interface PropDef {
+  name: string;
+  type: any;
+  required: boolean;
+  description?: string;
+  defaultValue?: any;
+}
+```
+
+So far, in React and Vue, the implementation of this extraction is as follows:
+
+- A webpack loader is added to the user's config via the preset
+- The loader annotates the component with a field, `__docgenInfo`, which contains some metadata
+- The view-layer specific `extractProps` function translates that metadata into `PropsTableProps`
+
+However, for your framework you may want to implement this in some other way. There is also an effort to load data from static JSON files for performance [#7942](https://github.com/storybookjs/storybook/issues/7942).
+
+## Component descriptions
+
+Component descriptions are enabled by the `docs.extractComponentDescription` parameter, which extract's a component description (usually from source code comments) into a markdown string.
+
+It follows the pattern of [Props tables](#props-tables) above, only it's even simpler because the function output is simply a string (or null if there no description).
+
+## Inline story rendering
+
+Inline story rendering is another framework specific optimization, made possible by the `docs.prepareForInline` parameter.
+
+Again let's look at Vue's framework-specific `config.js`:
+
+```js
+import toReact from '@egoist/vue-to-react';
+
+addParameters({
+  docs: {
+    // `container`, `page`, etc. here
+    prepareForInline: storyFn => {
+      const Story = toReact(storyFn());
+      return <Story />;
+    },
+  },
+});
+```
+
+The input is the story function, and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!
--- a/addons/docs/docs/recipes.md
+++ b/addons/docs/docs/recipes.md
@ -6,8 +6,11 @@
 - [Pure MDX Stories](#pure-mdx-stories)
 - [Mixed CSF / MDX Stories](#mixed-csf--mdx-stories)
 - [CSF Stories with MDX Docs](#csf-stories-with-mdx-docs)
+- [CSF Stories with arbitrary MDX](#csf-stories-with-arbitrary-mdx)
+- [Mixing storiesOf with CSF/MDX](#mixing-storiesof-with-csfmdx)
 - [Migrating from notes/info addons](#migrating-from-notesinfo-addons)
 - [Exporting documentation](#exporting-documentation)
+- [Disabling docs stories](#disabling-docs-stories)
 - [More resources](#more-resources)

 ## Component Story Format (CSF) with DocsPage
@ -18,11 +21,11 @@ If you want to intersperse longform documentation in your Storybook, for example

 ## Pure MDX Stories

-[MDX](mdx.md) is an alternative to syntax to CSF that allows you co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.
+[MDX](mdx.md) is an alternative syntax to CSF that allows you to co-locate your stories and your documentation. Everything you can do in CSF, you can do in MDX. And if you're consuming it in [Webpack](https://webpack.js.org/), it exposes an _identical_ interface, so the two files are interchangeable. Some teams will choose to write all of their Storybook in MDX and never look back.

 ## Mixed CSF / MDX Stories

-Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) make it easy.
+Can't decide between CSF and MDX? In transition? Or have did you find that each format has its own use? There's nothing stopping you from keeping some of your stories in CSF and some in MDX. And if you want to migrate one way or another, the [csf-to-mdx and mdx-to-csf codemod migrations](https://github.com/storybookjs/storybook/blob/next/lib/codemod/README.md) can help.

 The only limitation is that your exported titles (CSF: `default.title`, MDX `Meta.title`) should be unique across files. Loading will fail if there are duplicate titles.

@ -30,6 +33,55 @@ The only limitation is that your exported titles (CSF: `default.title`, MDX `Met

 Perhaps you want to write your stories in CSF, but document them in MDX? Here's how to do that:

+**Button.stories.js**
+
+```js
+import React from 'react';
+import { Button } from './Button';
+
+export default {
+  title: 'Demo/Button',
+  component: Button,
+  includeStories: [], // or don't load this file at all
+};
+
+export const basic = () => <Button>Basic</Button>;
+basic.story = {
+  parameters: { foo: 'bar' },
+};
+```
+
+**Button.stories.mdx**
+
+```md
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import * as stories from './Button.stories.js';
+import { SomeComponent } from 'path/to/SomeComponent';
+
+<Meta title="Demo/Button" component={Button} />
+
+# Button
+
+I can define a story with the function imported from CSF:
+
+<Story name="basic">{stories.basic}</Story>
+
+And I can also embed arbitrary markdown & JSX in this file.
+
+<SomeComponent prop1="val1" />
+```
+
+What's happening here:
+
+- Your stories are defined in CSF, but because of `includeStories: []`, they are not actually added to Storybook.
+- The MDX file is adding the stories to Storybook, and using the story function defined in CSF.
+- The MDX loader is using story metadata from CSF, such as name, decorators, parameters, but will give giving preference to anything defined in the MDX file.
+- The MDX file is using the Meta `default` defined in the CSF.
+
+## CSF Stories with Arbitrary MDX
+
+We recommend [MDX Docs](#csf-stories-with-mdx-docs) as the most ergonomic way to annotate CSF stories with MDX. There's also a second option if you want to annotate your CSF with arbitrary markdown:
+
 **Button.mdx**

 ```md
@ -42,7 +94,7 @@ I can embed a story (but not define one, since this file should not contain a `M

 <Story id="some--id" />

-And of course I can also embed arbitrary markdown & JSX in this file.
+And I can also embed arbitrary markdown & JSX in this file.

 <SomeComponent prop1="val1" />
 ```
@ -50,9 +102,9 @@ And of course I can also embed arbitrary markdown & JSX in this file.
 **Button.stories.js**

 ```js
+import React from 'react';
 import { Button } from './Button';
 import mdx from './Button.mdx';
-
 export default {
  title: 'Demo/Button',
  parameters: {
@ -60,17 +112,45 @@ export default {
      page: mdx,
    },
  },
+  component: Button,
 };
-
 export const basic = () => <Button>Basic</Button>;
 ```

 Note that in contrast to other examples, the MDX file suffix is `.mdx` rather than `.stories.mdx`. This key difference means that the file will be loaded with the default MDX loader rather than Storybook's CSF loader, which has several implications:

-1. You don't need to provide a `Meta` declaration.
+1. You shouldn't provide a `Meta` declaration.
 2. You can refer to existing stories (i.e. `<Story id="...">`) but cannot define new stories (i.e. `<Story name="...">`).
 3. The documentation gets exported as the default export (MDX default) rather than as a parameter hanging off the default export (CSF).

+## Mixing storiesOf with CSF/MDX
+
+You might have a collection of stories using the `storiesOf` API and want to add CSF/MDX piecemeal. Or you might have certain stories that are only possible with the `storiesOf` API (e.g. dynamically generated ones)
+
+So how do you mix these two types? The first argument to `configure` can be a `require.context "req"`, an array of `req's`, or a `loader function`. The loader function should either return null or an array of module exports that include the default export. The default export is used by `configure` to load CSF/MDX files.
+
+So here's a naive implementation of a loader function that assumes that none of your `storiesOf` files contains a default export, and filters out those exports:
+
+```js
+const loadFn = () => {
+  const req = require.context('../src', true, /\.stories\.js$/);
+  return req
+    .keys()
+    .map(fname => req(fname))
+    .filter(exp => !!exp.default);
+};
+
+configure(loadFn, module);
+```
+
+We could have baked this heuristic into Storybook, but we can't assume that your `storiesOf` files don't have default exports. If they do, you can filter them some other way (e.g. by file name).
+
+If you don't filter out those files, you'll see the following error:
+
+> "Loader function passed to 'configure' should return void or an array of module exports that all contain a 'default' export"
+
+We made this error explicit to make sure you know what you're doing when you mix `storiesOf` and CSF/MDX.
+
 ## Migrating from notes/info addons

 If you're currently using the notes/info addons, you can upgrade to DocsPage [using slots](./docspage.md#docspage-slots). There are different ways to use each addon, so you can adapt this recipe according to your use case.
@ -91,19 +171,43 @@ addParameters({

 > ⚠️ The `--docs` flag is an experimental feature in Storybook 5.2. The behavior may change in 5.3 outside of the normal semver rules. Be forewarned!

-The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to just export the docs to reduce clutter.
+The Storybook UI is a workshop for developing components in isolation. Storybook Docs is a showcase for documenting your components. During component/docs development, it’s useful to see both of these modes side by side. But when you export your static storybook, you might want to export the docs to reduce clutter.

-To address this, we’ve added a CLI flag to export just the docs. This flag is also available in dev mode:
+To address this, we’ve added a CLI flag to only export the docs. This flag is also available in dev mode:

 ```sh
 yarn build-storybook --docs
 ```

+## Disabling docs stories
+
+There are two cases where a user might wish to exclude stories from their documentation pages:
+
+### DocsPage
+
+User defines stories in CSF and renders docs using DocsPage, but wishes to exclude some fo the stories from the DocsPage to reduce noise on the page.
+
+```js
+export const foo = () => <Button>foo</Button>;
+foo.story = { parameters: { docs: { disable: true } } };
+```
+
+### MDX Stories
+
+User writes documentation & stories side-by-side in a single MDX file, and wants those stories to show up in the canvas but not in the docs themselves. They want something similar to the recipe "CSF stories with MDX docs" but want to do everything in MDX:
+
+```js
+<Story name="foo" parameters={{ docs: { disable: true }} >
+  <Button>foo</Button>
+</Story>
+```
+
 ## More resources

 Want to learn more? Here are some more articles on Storybook Docs:

- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md)
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.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/theming.md
+++ b/addons/docs/docs/theming.md
@ -0,0 +1,71 @@
+# Storybook Docs Theming
+
+[Storybook Docs](../README.md) is themable! There are three different levels of theming, just to keep things interesting:
+
+- [Storybook theming](#storybook-theming)
+- [CSS escape hatches](#css-escape-hatches)
+- [MDX component overrides](#mdx-component-overrides)
+
+## Storybook theming
+
+Storybook theming is the **recommended way** to theme your docs. If you update your storybook theme according to [the documentation](https://storybook.js.org/docs/configurations/theming/), Storybook Docs should adapt in reasonable ways.
+
+For example, here's how to change your docs (and Storybook) to the dark theme, by modifying `.storybook/config.js`:
+
+```js
+import { addParameters } from '@storybook/react';
+import { themes } from '@storybook/theming';
+
+addParameters({
+  options: {
+    theme: themes.dark,
+  },
+});
+```
+
+## CSS escape hatches
+
+The Storybook theme API is narrow by design. If you want to have fine-grained control over the CSS, all of the Docs components are tagged with class names to make this possible. This is advanced usage: use at your own risk.
+
+The classes correspond to markdown elements (e.g. `sbdocs-title`, `sbdocs-subtitle`, `sbdocs-p`, etc.) to UI elements on the page (e.g. `sbdocs-container`, `sbdocs-content`, etc.). To see the currently available classes, use "inspect element" in your browser.
+
+You can style these classes in `.storybook/preview-head.html`. For example, here's how to make the content wider for UHD displays:
+
+```html
+<style>
+  .sbdocs.sbdocs-content {
+    max-width: 1440px;
+  }
+</style>
+```
+
+> NOTE: All of these elements also have the `sbdocs` class, which is an idiomatic way of increasing the CSS specificity so you don't have to use `!important`.
+
+## MDX component overrides
+
+If you're using MDX, there's one more level of themability. MDX allows you to [completely override the components](https://mdxjs.com/advanced/components) that are rendered from markdown using a `components` parameter. This is an advanced usage that we don't officially support in Storybook, but it's a powerful mechanism if you need it.
+
+Here's how you might insert a custom code renderer for `code` blocks on the page, in `.storybook/config.js`:
+
+```js
+import { addParameters } from '@storybook/react';
+import { CodeBlock } from './CodeBlock';
+
+addParameters({
+  docs: {
+    components: {
+      code: CodeBlock,
+    },
+  },
+});
+```
+
+## More resources
+
+Want to learn more? Here are some more articles on Storybook Docs:
+
+- References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.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/html/config.js
+++ b/addons/docs/html/config.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/html/config');
--- a/addons/docs/jest-transform-mdx.js
+++ b/addons/docs/jest-transform-mdx.js
@ -0,0 +1,34 @@
+const path = require('path');
+const mdx = require('@mdx-js/mdx');
+const { ScriptTransformer } = require('@jest/transform');
+const { dedent } = require('ts-dedent');
+
+const createCompiler = require('./mdx-compiler-plugin');
+
+const compilers = [createCompiler({})];
+
+const getNextTransformer = (filename, config) => {
+  const extension = path.extname(filename);
+  const jsFileName = `${filename.slice(0, -extension.length)}.js`;
+  const self = config.transform.find(([pattern]) => new RegExp(pattern).test(filename));
+  const jsTransforms = config.transform.filter(([pattern]) => new RegExp(pattern).test(jsFileName));
+  return new ScriptTransformer({
+    ...config,
+    transform: [
+      ...config.transform.filter(entry => entry !== self),
+      ...jsTransforms.map(([pattern, ...rest]) => [self[0], ...rest]),
+    ],
+  });
+};
+
+module.exports = {
+  process(src, filename, config, { instrument }) {
+    const result = dedent`
+      /* @jsx mdx */
+      import React from 'react'
+      import { mdx } from '@mdx-js/react'
+      ${mdx.sync(src, { compilers, filepath: filename })}
+    `;
+    return getNextTransformer(filename, config).transformSource(filename, result, instrument);
+  },
+};
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "5.2.0-rc.0",
+  "version": "5.3.0-alpha.33",
  "description": "Superior documentation for your components",
  "keywords": [
    "addon",
@ -17,6 +17,19 @@
    "directory": "addons/docs"
  },
  "license": "MIT",
+  "files": [
+    "dist/**/*",
+    "docs/**/*",
+    "angular/**/*",
+    "common/**/*",
+    "html/**/*",
+    "react/**/*",
+    "vue/**/*",
+    "web-components/**/*",
+    "README.md",
+    "*.js",
+    "*.d.ts"
+  ],
  "main": "dist/public_api.js",
  "types": "dist/public_api.d.ts",
  "scripts": {
@ -26,29 +39,34 @@
    "@babel/generator": "^7.4.0",
    "@babel/parser": "^7.4.2",
    "@babel/plugin-transform-react-jsx": "^7.3.0",
+    "@egoist/vue-to-react": "^1.1.0",
+    "@jest/transform": "^24.9.0",
    "@mdx-js/loader": "^1.1.0",
    "@mdx-js/mdx": "^1.1.0",
    "@mdx-js/react": "^1.0.27",
-    "@storybook/addons": "5.2.0-rc.0",
-    "@storybook/api": "5.2.0-rc.0",
-    "@storybook/components": "5.2.0-rc.0",
-    "@storybook/router": "5.2.0-rc.0",
-    "@storybook/source-loader": "5.2.0-rc.0",
-    "@storybook/theming": "5.2.0-rc.0",
+    "@storybook/addons": "5.3.0-alpha.33",
+    "@storybook/api": "5.3.0-alpha.33",
+    "@storybook/components": "5.3.0-alpha.33",
+    "@storybook/router": "5.3.0-alpha.33",
+    "@storybook/source-loader": "5.3.0-alpha.33",
+    "@storybook/theming": "5.3.0-alpha.33",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "js-string-escape": "^1.0.1",
-    "lodash": "^4.17.11",
-    "prop-types": "^15.7.2"
+    "lodash": "^4.17.15",
+    "prop-types": "^15.7.2",
+    "storybook-addon-vue-info": "^1.2.1",
+    "ts-dedent": "^1.1.0"
  },
  "devDependencies": {
    "@types/prop-types": "^15.5.9",
    "@types/util-deprecate": "^1.0.0",
-    "@types/webpack-env": "^1.13.7"
+    "@types/webpack-env": "^1.14.0"
  },
  "peerDependencies": {
    "babel-loader": "^8.0.0",
-    "react": "^16.8.0"
+    "react": "^16.8.0",
+    "react-is": "^16.8.0"
  },
  "publishConfig": {
    "access": "public"
--- a/addons/docs/src/blocks/Anchor.tsx
+++ b/addons/docs/src/blocks/Anchor.tsx
@ -0,0 +1,11 @@
+import React, { FunctionComponent } from 'react';
+
+export const anchorBlockIdFromId = (storyId: string) => `anchor--${storyId}`;
+
+export interface AnchorProps {
+  storyId: string;
+}
+
+export const Anchor: FunctionComponent<AnchorProps> = ({ storyId, children }) => (
+  <div id={anchorBlockIdFromId(storyId)}>{children}</div>
+);
--- a/addons/docs/src/blocks/Description.tsx
+++ b/addons/docs/src/blocks/Description.tsx
@ -1,13 +1,14 @@
-/* eslint-disable no-underscore-dangle */
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './shared';
+import { str } from '../lib/docgenUtils';

 export enum DescriptionType {
  INFO = 'info',
  NOTES = 'notes',
  DOCGEN = 'docgen',
+  LEGACY_5_2 = 'legacy-5.2',
  AUTO = 'auto',
 }

@ -20,23 +21,12 @@ interface DescriptionProps {
  markdown?: string;
 }

-const str = (o: any) => {
-  if (!o) {
-    return '';
-  }
-  if (typeof o === 'string') {
-    return o as string;
-  }
-  throw new Error(`Description: expected string, got: ${JSON.stringify(o)}`);
-};
-
 export const getNotes = (notes?: Notes) =>
  notes && (typeof notes === 'string' ? notes : str(notes.markdown) || str(notes.text));

 export const getInfo = (info?: Info) => info && (typeof info === 'string' ? info : str(info.text));

-export const getDocgen = (component?: Component) =>
-  component && component.__docgenInfo && str(component.__docgenInfo.description);
+const noDescription = (component?: Component): string | null => null;

 export const getDescriptionProps = (
  { of, type, markdown }: DescriptionProps,
@ -45,28 +35,31 @@ export const getDescriptionProps = (
  if (markdown) {
    return { markdown };
  }
-  const { component, notes, info } = parameters;
+  const { component, notes, info, docs } = parameters;
+  const { extractComponentDescription = noDescription } = docs || {};
  const target = of === CURRENT_SELECTION ? component : of;
  switch (type) {
    case DescriptionType.INFO:
      return { markdown: getInfo(info) };
    case DescriptionType.NOTES:
      return { markdown: getNotes(notes) };
-    case DescriptionType.DOCGEN:
-      return { markdown: getDocgen(target) };
-    case DescriptionType.AUTO:
-    default:
+    // FIXME: remove in 6.0
+    case DescriptionType.LEGACY_5_2:
      return {
        markdown: `
 ${getNotes(notes) || getInfo(info) || ''}

-${getDocgen(target) || ''}
+${extractComponentDescription(target) || ''}
 `.trim(),
      };
+    case DescriptionType.DOCGEN:
+    case DescriptionType.AUTO:
+    default:
+      return { markdown: extractComponentDescription(target) };
  }
 };

-const DescriptionContainer: React.FunctionComponent<DescriptionProps> = props => (
+const DescriptionContainer: FunctionComponent<DescriptionProps> = props => (
  <DocsContext.Consumer>
    {context => {
      const { markdown } = getDescriptionProps(props, context);
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@ -1,11 +1,12 @@
-/* eslint-disable react/destructuring-assignment */
-
-import React from 'react';
+import React, { FunctionComponent, useEffect } from 'react';
+import { document } from 'global';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
 import { DocsWrapper, DocsContent, Source } from '@storybook/components';
 import { components as htmlComponents, Code } from '@storybook/components/html';
 import { DocsContextProps, DocsContext } from './DocsContext';
+import { anchorBlockIdFromId } from './Anchor';
+import { storyBlockIdFromId } from './Story';

 interface DocsContainerProps {
  context: DocsContextProps;
@ -14,7 +15,7 @@ interface DocsContainerProps {
 interface CodeOrSourceProps {
  className?: string;
 }
-export const CodeOrSource: React.FC<CodeOrSourceProps> = props => {
+export const CodeOrSource: FunctionComponent<CodeOrSourceProps> = props => {
  const { className, children, ...rest } = props;
  // markdown-to-jsx does not add className to inline code
  if (
@ -40,21 +41,32 @@ const defaultComponents = {
  code: CodeOrSource,
 };

-export const DocsContainer: React.FunctionComponent<DocsContainerProps> = ({
-  context,
-  children,
-}) => {
-  const parameters = (context && context.parameters) || {};
+export const DocsContainer: FunctionComponent<DocsContainerProps> = ({ context, children }) => {
+  const { id: storyId = null, parameters = {} } = context || {};
  const options = parameters.options || {};
  const theme = ensureTheme(options.theme);
  const { components: userComponents = null } = parameters.docs || {};
  const components = { ...defaultComponents, ...userComponents };
+
+  useEffect(() => {
+    let element = document.getElementById(anchorBlockIdFromId(storyId));
+    if (!element) {
+      element = document.getElementById(storyBlockIdFromId(storyId));
+    }
+    if (element) {
+      element.scrollIntoView({
+        behavior: 'smooth',
+        block: 'end',
+        inline: 'nearest',
+      });
+    }
+  }, [storyId]);
  return (
    <DocsContext.Provider value={context}>
      <ThemeProvider theme={theme}>
        <MDXProvider components={components}>
-          <DocsWrapper>
-            <DocsContent>{children}</DocsContent>
+          <DocsWrapper className="sbdocs sbdocs-wrapper">
+            <DocsContent className="sbdocs sbdocs-content">{children}</DocsContent>
          </DocsWrapper>
        </MDXProvider>
      </ThemeProvider>
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@ -1,4 +1,4 @@
-import React from 'react';
+import { Context, createContext } from 'react';

 export interface DocsContextProps {
  id?: string;
@ -16,4 +16,4 @@ export interface DocsContextProps {
  forceRender?: () => void;
 }

-export const DocsContext: React.Context<DocsContextProps> = React.createContext({});
+export const DocsContext: Context<DocsContextProps> = createContext({});
--- a/addons/docs/src/blocks/DocsPage.tsx
+++ b/addons/docs/src/blocks/DocsPage.tsx
@ -1,12 +1,13 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';

 import { parseKind } from '@storybook/router';
 import { DocsPage as PureDocsPage, PropsTable, PropsTableProps } from '@storybook/components';
 import { H2, H3 } from '@storybook/components/html';
 import { DocsContext } from './DocsContext';
-import { Description, getDocgen } from './Description';
+import { Description } from './Description';
 import { Story } from './Story';
 import { Preview } from './Preview';
+import { Anchor } from './Anchor';
 import { getPropsTableProps } from './Props';

 export interface SlotContext {
@ -34,7 +35,6 @@ export interface DocsPageProps {
 interface DocsStoryProps {
  id: string;
  name: string;
-  description?: string;
  expanded?: boolean;
  withToolbar?: boolean;
  parameters?: any;
@ -64,8 +64,13 @@ const defaultSubtitleSlot: StringSlot = ({ parameters }) =>

 const defaultPropsSlot: PropsSlot = context => getPropsTableProps({ of: '.' }, context);

-const defaultDescriptionSlot: StringSlot = ({ parameters }) =>
-  parameters && getDocgen(parameters.component);
+const defaultDescriptionSlot: StringSlot = ({ parameters: { component, docs } }) => {
+  if (!component) {
+    return null;
+  }
+  const { extractComponentDescription } = docs || {};
+  return extractComponentDescription && extractComponentDescription(component);
+};

 const defaultPrimarySlot: StorySlot = stories => stories && stories[0];
 const defaultStoriesSlot: StoriesSlot = stories => {
@ -79,24 +84,25 @@ const defaultStoriesSlot: StoriesSlot = stories => {
 const StoriesHeading = H2;
 const StoryHeading = H3;

-const DocsStory: React.FunctionComponent<DocsStoryProps> = ({
+const DocsStory: FunctionComponent<DocsStoryProps> = ({
  id,
  name,
-  description,
  expanded = true,
  withToolbar = false,
  parameters,
 }) => (
-  <>
+  <Anchor storyId={id}>
    {expanded && <StoryHeading>{(parameters && parameters.displayName) || name}</StoryHeading>}
-    {expanded && description && <Description markdown={description} />}
+    {expanded && parameters && parameters.docs && parameters.docs.storyDescription && (
+      <Description markdown={parameters.docs.storyDescription} />
+    )}
    <Preview withToolbar={withToolbar}>
      <Story id={id} />
    </Preview>
-  </>
+  </Anchor>
 );

-export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
+export const DocsPage: FunctionComponent<DocsPageProps> = ({
  titleSlot = defaultTitleSlot,
  subtitleSlot = defaultSubtitleSlot,
  descriptionSlot = defaultDescriptionSlot,
@ -112,7 +118,9 @@ export const DocsPage: React.FunctionComponent<DocsPageProps> = ({
      const propsTableProps = propsSlot(context);

      const { selectedKind, storyStore } = context;
-      const componentStories = storyStore.getStoriesForKind(selectedKind);
+      const componentStories = storyStore
+        .getStoriesForKind(selectedKind)
+        .filter((s: any) => !(s.parameters && s.parameters.docs && s.parameters.docs.disable));
      const primary = primarySlot(componentStories, context);
      const stories = storiesSlot(componentStories, context);

--- a/addons/docs/src/blocks/Meta.tsx
+++ b/addons/docs/src/blocks/Meta.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import { FunctionComponent } from 'react';

 type Decorator = (...args: any) => any;

@ -14,4 +14,4 @@ interface MetaProps {
 * and gets transformed into a default export underneath the hood.
 * It doesn't actually render anything.
 */
-export const Meta: React.FunctionComponent<MetaProps> = props => null;
+export const Meta: FunctionComponent<MetaProps> = props => null;
--- a/addons/docs/src/blocks/Preview.tsx
+++ b/addons/docs/src/blocks/Preview.tsx
@ -1,4 +1,4 @@
-import React, { ReactNodeArray } from 'react';
+import React, { FunctionComponent, ReactElement, ReactNode, ReactNodeArray } from 'react';
 import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
 import { getSourceProps } from './Source';
 import { DocsContext, DocsContextProps } from './DocsContext';
@ -11,23 +11,31 @@ export enum SourceState {

 type PreviewProps = PurePreviewProps & {
  withSource?: SourceState;
+  mdxSource?: string;
 };

 const getPreviewProps = (
  {
    withSource = SourceState.CLOSED,
+    mdxSource,
    children,
    ...props
-  }: PreviewProps & { children?: React.ReactNode },
+  }: PreviewProps & { children?: ReactNode },
  { mdxStoryNameToId, storyStore }: DocsContextProps
 ): PurePreviewProps => {
-  if (withSource === SourceState.NONE && !children) {
+  if (withSource === SourceState.NONE) {
    return props;
  }
+  if (mdxSource) {
+    return {
+      ...props,
+      withSource: getSourceProps({ code: decodeURI(mdxSource) }, { storyStore }),
+    };
+  }
  const childArray: ReactNodeArray = Array.isArray(children) ? children : [children];
  const stories = childArray.filter(
-    (c: React.ReactElement) => c.props && (c.props.id || c.props.name)
-  ) as React.ReactElement[];
+    (c: ReactElement) => c.props && (c.props.id || c.props.name)
+  ) as ReactElement[];
  const targetIds = stories.map(s => s.props.id || mdxStoryNameToId[s.props.name]);
  const sourceProps = getSourceProps({ ids: targetIds }, { storyStore });
  return {
@ -37,7 +45,7 @@ const getPreviewProps = (
  };
 };

-export const Preview: React.FunctionComponent<PreviewProps> = props => (
+export const Preview: FunctionComponent<PreviewProps> = props => (
  <DocsContext.Consumer>
    {context => {
      const previewProps = getPreviewProps(props, context);
--- a/addons/docs/src/blocks/Props.tsx
+++ b/addons/docs/src/blocks/Props.tsx
@ -1,19 +1,24 @@
-import React from 'react';
-import { PropsTable, PropsTableError, PropsTableProps, PropDef } from '@storybook/components';
+import React, { FunctionComponent } from 'react';
+import { PropsTable, PropsTableError, PropsTableProps } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './shared';
-import { getPropDefs as autoPropDefs, PropDefGetter } from '../lib/getPropDefs';
+
+import { PropsExtractor } from '../lib/docgenUtils';
+import { extractProps as reactExtractProps } from '../frameworks/react/extractProps';
+import { extractProps as vueExtractProps } from '../frameworks/vue/extractProps';

 interface PropsProps {
  exclude?: string[];
  of: '.' | Component;
 }

-const inferPropDefs = (framework: string): PropDefGetter | null => {
+// FIXME: remove in SB6.0 & require config
+const inferPropsExtractor = (framework: string): PropsExtractor | null => {
  switch (framework) {
    case 'react':
+      return reactExtractProps;
    case 'vue':
-      return autoPropDefs;
+      return vueExtractProps;
    default:
      return null;
  }
@ -32,19 +37,17 @@ export const getPropsTableProps = (
      throw new Error(PropsTableError.NO_COMPONENT);
    }

-    const { getPropDefs = inferPropDefs(framework) } = params.docs || {};
-    if (!getPropDefs) {
+    const { extractProps = inferPropsExtractor(framework) } = params.docs || {};
+    if (!extractProps) {
      throw new Error(PropsTableError.PROPS_UNSUPPORTED);
    }
-    const allRows = getPropDefs(target);
-    const rows = !exclude ? allRows : allRows.filter((row: PropDef) => !exclude.includes(row.name));
-    return { rows };
+    return extractProps(target, { exclude });
  } catch (err) {
    return { error: err.message };
  }
 };

-const PropsContainer: React.FunctionComponent<PropsProps> = props => (
+const PropsContainer: FunctionComponent<PropsProps> = props => (
  <DocsContext.Consumer>
    {context => {
      const propsTableProps = getPropsTableProps(props, context);
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@ -1,4 +1,4 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';
 import { Source, SourceProps as PureSourceProps, SourceError } from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { CURRENT_SELECTION } from './shared';
@ -85,7 +85,7 @@ export const getSourceProps = (
 * or the source for a story if `storyId` is provided, or
 * the source for the current story if nothing is provided.
 */
-const SourceContainer: React.FunctionComponent<SourceProps> = props => (
+const SourceContainer: FunctionComponent<SourceProps> = props => (
  <DocsContext.Consumer>
    {context => {
      const sourceProps = getSourceProps(props, context);
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@ -1,9 +1,18 @@
-import React from 'react';
+import React, { createElement, ElementType, FunctionComponent, ReactNode } from 'react';
+import { MDXProvider } from '@mdx-js/react';
+import { components as docsComponents } from '@storybook/components/html';
 import { Story, StoryProps as PureStoryProps } from '@storybook/components';
 import { CURRENT_SELECTION } from './shared';

 import { DocsContext, DocsContextProps } from './DocsContext';

+export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;
+
+const resetComponents: Record<string, ElementType> = {};
+Object.keys(docsComponents).forEach(key => {
+  resetComponents[key] = (props: any) => createElement(key, props);
+});
+
 interface CommonProps {
  height?: string;
  inline?: boolean;
@ -11,7 +20,7 @@ interface CommonProps {

 type StoryDefProps = {
  name: string;
-  children: React.ReactNode;
+  children: ReactNode;
 } & CommonProps;

 type StoryRefProps = {
@ -31,7 +40,7 @@ const inferInlineStories = (framework: string): boolean => {

 export const getStoryProps = (
  props: StoryProps,
-  { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps
+  { id: currentId, storyStore, parameters, mdxStoryNameToId }: DocsContextProps | null
 ): PureStoryProps => {
  const { id } = props as StoryRefProps;
  const { name } = props as StoryDefProps;
@ -40,25 +49,52 @@ export const getStoryProps = (

  const { height, inline } = props;
  const data = storyStore.fromId(previewId);
-  const { framework = null } = parameters || {};
+  const { framework = null } = (data && data.parameters) || {};
+
+  const docsParam = (data && data.parameters && data.parameters.docs) || {};
+
+  if (docsParam.disable) {
+    return null;
+  }

  // prefer props, then global options, then framework-inferred values
-  const { inlineStories = inferInlineStories(framework), iframeHeight = undefined } =
-    (parameters && parameters.docs) || {};
+  const {
+    inlineStories = inferInlineStories(framework),
+    iframeHeight = undefined,
+    prepareForInline = undefined,
+  } = docsParam;
+  const { storyFn = undefined, name: storyName = undefined } = data || {};
+
+  const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
+  if (storyIsInline && !prepareForInline && framework !== 'react') {
+    throw new Error(
+      `Story '${storyName}' is set to render inline, but no 'prepareForInline' function is implemented in your docs configuration!`
+    );
+  }
+
  return {
-    inline: typeof inline === 'boolean' ? inline : inlineStories,
+    inline: storyIsInline,
    id: previewId,
-    storyFn: data && data.storyFn,
-    height: height || iframeHeight,
-    title: data && data.name,
+    storyFn: prepareForInline && storyFn ? () => prepareForInline(storyFn) : storyFn,
+    height: height || (storyIsInline ? undefined : iframeHeight),
+    title: storyName,
  };
 };

-const StoryContainer: React.FunctionComponent<StoryProps> = props => (
+const StoryContainer: FunctionComponent<StoryProps> = props => (
  <DocsContext.Consumer>
    {context => {
      const storyProps = getStoryProps(props, context);
-      return <Story {...storyProps} />;
+      if (!storyProps) {
+        return null;
+      }
+      return (
+        <div id={storyBlockIdFromId(storyProps.id)}>
+          <MDXProvider components={resetComponents}>
+            <Story {...storyProps} />
+          </MDXProvider>
+        </div>
+      );
    }}
  </DocsContext.Consumer>
 );
--- a/addons/docs/src/blocks/Wrapper.tsx
+++ b/addons/docs/src/blocks/Wrapper.tsx
@ -1,9 +1,5 @@
-import React from 'react';
+import React, { FunctionComponent } from 'react';

-interface WrapperProps {
-  children: React.ReactNode;
-}
-
-export const Wrapper: React.FunctionComponent<WrapperProps> = ({ children }) => (
+export const Wrapper: FunctionComponent = ({ children }) => (
  <div style={{ fontFamily: 'sans-serif' }}>{children}</div>
 );
--- a/addons/docs/src/blocks/index.ts
+++ b/addons/docs/src/blocks/index.ts
@ -1,5 +1,6 @@
 export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';

+export * from './Anchor';
 export * from './Description';
 export * from './DocsContext';
 export * from './DocsPage';
@ -10,3 +11,6 @@ export * from './Props';
 export * from './Source';
 export * from './Story';
 export * from './Wrapper';
+
+// helper function for MDX
+export const makeStoryFn = (val: any) => (typeof val === 'function' ? val : () => val);
--- a/addons/docs/src/frameworks/angular/config.js
+++ b/addons/docs/src/frameworks/angular/config.js
@ -1,10 +0,0 @@
-/* eslint-disable import/no-extraneous-dependencies */
-import { addParameters } from '@storybook/angular';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
-
-addParameters({
-  docs: {
-    container: DocsContainer,
-    page: DocsPage,
-  },
-});
--- a/addons/docs/src/frameworks/common/config.js
+++ b/addons/docs/src/frameworks/common/config.js
@ -1,5 +1,5 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { addParameters } from '@storybook/vue';
+import { addParameters } from '@storybook/client-api';
 import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';

 addParameters({
--- a/addons/docs/src/frameworks/common/index.ts
+++ b/addons/docs/src/frameworks/common/index.ts
@ -1 +1 @@
-export * from '../../lib/getPropDefs';
+export * from '../../lib/docgenUtils';
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`module.exports = require('../dist/frameworks/html/config');`