Merge branch 'next' into pr/17034

2025-04-08 11:11:53 +08:00 · 2022-06-27 23:24:29 +08:00 · 2022-06-27 23:24:29 +08:00 · fef94179a0
commit fef94179a0
parent 7fab765088 ad3e6f0829
1868 changed files with 47115 additions and 29205 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -24,6 +24,7 @@ module.exports = {
  ignore: [
    './lib/codemod/src/transforms/__testfixtures__',
    './lib/postinstall/src/__testfixtures__',
+    '**/typings.d.ts',
  ],
  presets: [
    [
@ -49,11 +50,12 @@ module.exports = {
    ],
    ['@babel/plugin-proposal-class-properties', { loose: true }],
    ['@babel/plugin-proposal-private-methods', { loose: true }],
+    ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
    '@babel/plugin-proposal-export-default-from',
    '@babel/plugin-syntax-dynamic-import',
    ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
    'babel-plugin-macros',
-    ['emotion', { sourceMap: true, autoLabel: true }],
+    ['@emotion', { sourceMap: true, autoLabel: 'always' }],
  ],
  env: {
    test: withTests,
@ -85,9 +87,10 @@ module.exports = {
        ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }],
        '@babel/plugin-proposal-export-default-from',
        '@babel/plugin-syntax-dynamic-import',
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
        'babel-plugin-add-react-displayname',
      ],
      env: {
@ -122,12 +125,13 @@ module.exports = {
        ],
      ],
      plugins: [
-        'emotion',
+        '@emotion',
        'babel-plugin-macros',
        '@babel/plugin-transform-arrow-functions',
        '@babel/plugin-transform-shorthand-properties',
        '@babel/plugin-transform-block-scoping',
        '@babel/plugin-transform-destructuring',
+        ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
        ['@babel/plugin-proposal-class-properties', { loose: true }],
        '@babel/plugin-proposal-object-rest-spread',
        '@babel/plugin-proposal-export-default-from',
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -1,29 +1,29 @@
 version: 2.1

 executors:
-  sb_node_12_classic:
+  sb_node_14_classic:
    parameters:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
-      - image: circleci/node:12
+      - image: circleci/node:14
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
-  sb_node_12_browsers:
+  sb_node_14_browsers:
    parameters:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
-      - image: circleci/node:12-browsers
+      - image: circleci/node:14-browsers
        environment:
          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
@ -32,7 +32,7 @@ executors:
      class:
        description: The Resource class
        type: enum
-        enum: ['small', 'medium', 'large', 'xlarge']
+        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
@ -79,23 +79,23 @@ jobs:
  build:
    executor:
      class: xlarge
-      name: sb_node_12_classic
+      name: sb_node_14_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - restore_cache:
          name: Restore Yarn cache
          keys:
-            - build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+            - build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
      - run:
          name: Install dependencies
          command: yarn install --immutable
      - run:
          name: Bootstrap
-          command: yarn bootstrap --core
+          command: yarn bootstrap --build --manager
      - save_cache:
          name: Save Yarn cache
-          key: build-yarn-2-cache-v1--{{ checksum "yarn.lock" }}
+          key: build-yarn-2-cache-v3--{{ checksum "yarn.lock" }}
          paths:
            - ~/.yarn/berry/cache
      - persist_to_workspace:
@ -107,7 +107,7 @@ jobs:
            - app
            - lib
  chromatic:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
    parallelism: 4
    steps:
      # Keep using default checkout because Chromatic needs some git history to work properly
@ -118,25 +118,11 @@ jobs:
          name: examples
          command: |
            yarn run-chromatics
-  packtracker:
-    executor:
-      class: medium
-      name: sb_node_12_browsers
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: Report webpack stats for manager of official storybook
-          command: |
-            cd examples/official-storybook
-            yarn packtracker
  examples:
    executor:
-      class: medium
-      name: sb_node_12_browsers
-    parallelism: 4
+      class: medium+
+      name: sb_node_14_browsers
+    parallelism: 17
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -153,7 +139,7 @@ jobs:
  publish:
    executor:
      class: medium
-      name: sb_node_12_classic
+      name: sb_node_14_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -194,13 +180,39 @@ jobs:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: Run E2E tests
-          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra
+          name: Run E2E (extended) tests
+          command: yarn test:e2e-framework --clean --all --skip angular11 --skip angular --skip angular12 --skip vue3 --skip web_components_typescript --skip cra --skip react
          no_output_timeout: 5m
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
  e2e-tests-core:
+    executor:
+      class: large
+      name: sb_cypress_8_node_14
+    parallelism: 8
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running local registry
+          command: yarn local-registry --port 6000 --open
+          background: true
+      - run:
+          name: Wait for registry
+          command: yarn wait-on http://localhost:6000
+      - run:
+          name: Run E2E (core) tests
+          # Do not test CRA here because it's done in PnP part
+          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
+          command: yarn test:e2e-framework vue3 angular130 angular13 angular12 angular11 web_components_typescript web_components_lit2 react react_legacy_root_api vite_react
+          no_output_timeout: 5m
+      - store_artifacts:
+          path: /tmp/cypress-record
+          destination: cypress
+  e2e-tests-sb-docs:
    executor:
      class: large
      name: sb_cypress_8_node_14
@ -218,15 +230,9 @@ jobs:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: Run E2E tests
-          # Do not test CRA here because it's done in PnP part
-          # TODO: Remove `web_components_typescript` as soon as Lit 2 stable is released
-          # TODO: Add `angular` as soon as Storybook is compatible with Angular 13
-          command: yarn test:e2e-framework vue3 angular12 angular11 web_components_typescript web_components_lit2
+          name: Run smoke tests
+          command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
          no_output_timeout: 5m
-      - store_artifacts:
-          path: /tmp/cypress-record
-          destination: cypress
  cra-bench:
    executor:
      class: medium
@ -269,11 +275,21 @@ jobs:
          name: Wait for registry
          command: yarn wait-on http://localhost:6000
      - run:
-          name: run e2e tests
-          command: yarn test:e2e-framework --pnp sfcVue cra
+          name: run e2e tests cra
+          command: yarn test:e2e-framework --pnp cra
+      # - run:
+      #     name: run e2e tests vue
+      #     command: yarn test:e2e-framework --pnp sfcVue
+      - run:
+          name: prep artifacts
+          when: always
+          command: zip -r /tmp/storybook-e2e-testing-out.zip /tmp/storybook-e2e-testing
      - store_artifacts:
          path: /tmp/cypress-record
          destination: cypress
+      - store_artifacts:
+          path: /tmp/storybook-e2e-testing-out.zip
+          destination: e2e
  e2e-tests-examples:
    executor:
      class: small
@ -299,7 +315,7 @@ jobs:
  smoke-tests:
    executor:
      class: medium
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
    environment:
      # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
      # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
@ -357,7 +373,7 @@ jobs:
  lint:
    executor:
      class: small
-      name: sb_node_12_classic
+      name: sb_node_14_classic
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -367,7 +383,7 @@ jobs:
          name: Lint
          command: yarn lint
  unit-tests:
-    executor: sb_node_12_browsers
+    executor: sb_node_14_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -376,6 +392,8 @@ jobs:
      - run:
          name: Test
          command: yarn test --coverage --runInBand --ci
+      - store_test_results:
+          path: junit.xml
      - persist_to_workspace:
          root: .
          paths:
@ -383,7 +401,7 @@ jobs:
  coverage:
    executor:
      class: small
-      name: sb_node_12_browsers
+      name: sb_node_14_browsers
    steps:
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
@ -409,9 +427,6 @@ workflows:
      - smoke-tests:
          requires:
            - build
-      - packtracker:
-          requires:
-            - build
      - unit-tests:
          requires:
            - build
@ -430,6 +445,9 @@ workflows:
      - e2e-tests-core:
          requires:
            - publish
+      - e2e-tests-sb-docs:
+          requires:
+            - publish
      - e2e-tests-pnp:
          requires:
            - publish
--- a/.eslintignore
+++ b/.eslintignore
@ -11,7 +11,6 @@ lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
-lib/components/src/controls/react-editable-json-tree
 scripts/storage
 scripts/repros-generator
 *.bundle.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -9,6 +9,25 @@ module.exports = {
    ],
  },
  overrides: [
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/addons/docs/**/*'],
+      rules: {
+        'import/no-extraneous-dependencies': 'off',
+      },
+    },
+    {
+      // this package uses pre-bundling, dependencies will be bundled, and will be in devDepenencies
+      files: [
+        '**/lib/theming/**/*',
+        '**/lib/router/**/*',
+        '**/lib/ui/**/*',
+        '**/lib/components/**/*',
+      ],
+      rules: {
+        'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
+      },
+    },
    {
      files: [
        '**/__tests__/**',
@ -46,6 +65,16 @@ module.exports = {
        'react/prop-types': 'off', // we should use types
        'react/forbid-prop-types': 'off', // we should use types
        'no-dupe-class-members': 'off', // this is called overloads in typescript
+        'react/no-unused-prop-types': 'off', // we should use types
+        'react/default-props-match-prop-types': 'off', // we should use types
+        'import/no-named-as-default': 'warn',
+        'import/no-named-as-default-member': 'warn',
+        'react/destructuring-assignment': 'warn',
+
+        // This warns about importing interfaces and types in a normal import, it's arguably better to import with the `type` prefix separate from the runtime imports,
+        // I leave this as a warning right now because we haven't really decided yet, and the codebase is riddled with errors if I set to 'error'.
+        // It IS set to 'error' for JS files.
+        'import/named': 'warn',
      },
    },
    {
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR

 <!--

-Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
+Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this. For additional guidance: https://storybook.js.org/docs/react/contribute/how-to-contribute

 Maintainers: Please tag your pull request with at least one of the following:
 `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -4,6 +4,7 @@ daysUntilStale: 21
 daysUntilClose: 30
 # Issues with these labels will never be considered stale
 exemptLabels:
+  - linear
  - todo
  - ready
  - 'in progress'
--- a/.github/workflows/cron-weekly.yml
+++ b/.github/workflows/cron-weekly.yml
@ -0,0 +1,19 @@
+name: Markdown Links Check
+# runs every monday at 9 am
+on:
+  schedule:
+    - cron: "0 9 * * 1"
+
+jobs:
+  check-links:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: gaurav-nelson/github-action-markdown-link-check@v1
+        # checks all markdown files from important folders including all subfolders
+        with:
+          # only show errors that occur instead of successful links + errors
+          use-quiet-mode: 'yes'
+          # output full HTTP info for broken links
+          use-verbose-mode: 'yes'
+          config-file: '.github/workflows/markdown-link-check-config.json'
--- a/.github/workflows/danger-js.yml
+++ b/.github/workflows/danger-js.yml
@ -8,9 +8,12 @@ jobs:
    name: Danger JS
    runs-on: ubuntu-latest
    steps:
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '14'
      - uses: actions/checkout@master
      - name: Danger JS
-        uses: danger/danger-js@main
+        uses: danger/danger-js@10.9.0
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
--- a/.github/workflows/linear-export.yml
+++ b/.github/workflows/linear-export.yml
@ -23,5 +23,5 @@ jobs:
          linearIssuePrefix: SB
          linearLabel: Storybook
          linearPRLabel: PR
-          linearTeam: CH
+          linearTeam: SB
          linearApiKey: ${{ secrets.LINEAR_API_KEY }}
--- a/.github/workflows/markdown-link-check-config.json
+++ b/.github/workflows/markdown-link-check-config.json
@ -0,0 +1,38 @@
+{
+  "replacementPatterns": [
+    {
+      "pattern": "^/",
+      "replacement": "./"
+    }
+  ],
+  "ignorePatterns": [
+    {
+      "pattern": "localhost"
+    },
+    {
+      "pattern": "https://github.com/storybookjs/storybook/pull/*"
+    },
+    {
+      "pattern": "https://stackblitz.com/*"
+    },
+    {
+      "pattern": "https://*.chromatic.com"
+    },
+    {
+      "pattern": "https://www.chromatic.com/build?*"
+    },
+    {
+      "pattern": "http://*.nodeca.com"
+    },
+    {
+      "pattern": "http://definitelytyped.org/*"
+    },
+    {
+      "pattern": "https://yoursite.com/*"
+    },
+    {
+      "pattern": "https://my-specific-domain.com"
+    }
+  ],
+  "aliveStatusCodes": [429, 200]
+}
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@ -10,10 +10,7 @@ on:
 jobs:
  build:
    name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
-    if: |
-      ${{ github.event.label.name == 'ci:matrix' || 
-      contains(github.event.pull_request.labels.*.name, 'ci:matrix') ||
-      github.event.type == 'push'}}
+    if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:matrix')
    strategy:
      fail-fast: false
      matrix:
--- a/.gitignore
+++ b/.gitignore
@ -35,6 +35,7 @@ tsconfig.tsbuildinfo
 lib/manager-webpack4/prebuilt
 lib/manager-webpack5/prebuilt
 examples/angular-cli/addon-jest.testresults.json
+junit.xml

 # Yarn stuff
 /**/.yarn/*
--- a/.gitpod.yml
+++ b/.gitpod.yml
@ -0,0 +1,9 @@
+# This configuration file was automatically generated by Gitpod.
+# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
+# and commit this file to your remote git repository to share the goodness with others.
+
+tasks:
+  - init: yarn
+    command: yarn bootstrap --core
+
+
--- a/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+++ b/.yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
--- a/.yarn/releases/yarn-3.1.1.cjs
+++ b/.yarn/releases/yarn-3.1.1.cjs
--- a/.yarn/releases/yarn-sources.cjs
+++ b/.yarn/releases/yarn-sources.cjs
--- a/.yarnrc.yml
+++ b/.yarnrc.yml
@ -9,8 +9,10 @@ npmRegistryServer: "https://registry.yarnpkg.com"
 plugins:
  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
    spec: "@yarnpkg/plugin-typescript"
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"

 unsafeHttpWhitelist:
  - localhost

-yarnPath: .yarn/releases/yarn-sources.cjs
+yarnPath: .yarn/releases/yarn-3.1.1.cjs
--- a/ADDONS_SUPPORT.md
+++ b/ADDONS_SUPPORT.md
@ -1,32 +0,0 @@
-## Addon / Framework Support Table
-
-|                                             | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Web Components](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
-| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :------------------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
-| [a11y](addons/a11y)                         |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [actions](addons/actions)                   |         +          |               +\*                |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [backgrounds](addons/backgrounds)           |         +          |                \*                |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [cssresources](addons/cssresources)         |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [design assets](addons/design-assets)       |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [docs](addons/docs)                         |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [events](addons/events)                     |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |                      |                  |         +          |          +           | +              |
-| [google-analytics](addons/google-analytics) |         +          |                +                 |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [graphql](addons/graphql)                   |         +          |                                  |                |                        |                        |                  |                            |                    |                      |                  |                    |                      |                |
-| [jest](addons/jest)                         |         +          |                +                 |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [knobs](addons/knobs)                       |         +          |               +\*                |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [links](addons/links)                       |         +          |                +                 |       +        |           +            |           +            |        +         |             +              |                    |          +           |        +         |         +          |          +           | +              |
-| [options](addons/options)                   |         +          |                +                 |       +        |           +            |           +            |        +         |             +              |                    |          +           |        +         |         +          |          +           | +              |
-| [query params](addons/queryparams)          |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [storyshots](addons/storyshots)             |         +          |                +                 |       +        |           +            |                        |        +         |             +              |                    |          +           |        +         |                    |          +           | +              |
-| [storysource](addons/storysource)           |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-| [viewport](addons/viewport)                 |         +          |                                  |       +        |           +            |           +            |        +         |             +              |         +          |          +           |        +         |         +          |          +           | +              |
-
-`*`  - React Native on device addon (addons/onDevice-\<name>)
-
-## Deprecated Addons
-
-|                                             | [React](app/react) | [React Native](app/react-native) | [Vue](app/vue) | [Angular](app/angular) | [Mithril](app/mithril) | [HTML](app/html) | [Marko](app/marko) | [Svelte](app/svelte) | [Riot](app/riot) | [Ember](app/ember) | [Preact](app/preact) | [Rax](app/rax) |
-| ------------------------------------------- | :----------------: | :------------------------------: | :------------: | :--------------------: | :--------------------: | :--------------: | :----------------: | :------------------: | :--------------: | :----------------: | :------------------: | -------------- |
-| [info](https://github.com/storybookjs/deprecated-addons/tree/master/addons/info)                     |         +          |                                  |                |                        |                        |                  |                    |                      |                  |                    |                      |                |
-| [notes](https://github.com/storybookjs/deprecated-addons/tree/master/addons/notes)                   |         +          |               +\*                |       +        |           +            |           +            |        +         |                    |          +           |        +         |         +          |          +           | +              |
-
-`*`  - React Native on device addon (addons/onDevice-\<name>)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,8 +1,963 @@
+## 6.5.0-rc.1 (May 18, 2022)
+
+### Bug Fixes
+
+- CLI: Improve webpack version and add detection of nextjs ([#18220](https://github.com/storybookjs/storybook/pull/18220))
+- ArgsTable: Gracefully handle conditional args failures ([#18248](https://github.com/storybookjs/storybook/pull/18248))
+- Controls: Fix reset button broken for !undefined URL values ([#18231](https://github.com/storybookjs/storybook/pull/18231))
+- Vue3: Add support for TSX in single file components ([#18038](https://github.com/storybookjs/storybook/pull/18038))
+
+## 6.5.0-rc.0 (May 17, 2022)
+
+### Features
+
+- Addon-a11y: Show % of users in toolbar menu ([#18003](https://github.com/storybookjs/storybook/pull/18003))
+
+### Bug Fixes
+
+- Web-components: Clean Lit Expression comments in story source ([#18108](https://github.com/storybookjs/storybook/pull/18108))
+- Vue: Map args correctly in CSF3 implicit render function ([#18209](https://github.com/storybookjs/storybook/pull/18209))
+- Vue3: Fix CSF3 implicit render function when storyStoreV7 is enabled ([#18208](https://github.com/storybookjs/storybook/pull/182)
+
+### Maintenance
+
+- CLI: Don't throw is Ctrl + C was pressed when selecting a package in the build command ([#18195](https://github.com/storybookjs/storybook/pull/18195))
+- Build: Cleanup noise from unit tests ([#18196](https://github.com/storybookjs/storybook/pull/18196))
+
+### Dependency Upgrades
+
+- Fixed PnP compatibility for bundled components package ([#18015](https://github.com/storybookjs/storybook/pull/18015))
+
+## 6.5.0-beta.8 (May 11, 2022)
+
+### Bug Fixes
+
+- Composition: Fix metadata.json incorrectly overriding main.js refs versions ([#18185](https://github.com/storybookjs/storybook/pull/18185))
+
+### Maintenance
+
+- Examples: Set channelOptions to disallow function serialization ([#18071](https://github.com/storybookjs/storybook/pull/18071))
+
+### Dependency Upgrades
+
+- Upgrade to telejson 6 ([#18164](https://github.com/storybookjs/storybook/pull/18164))
+
+## 6.5.0-beta.7 (May 9, 2022)
+
+### Features
+
+- CSF3: Add title prefix support for stories with custom titles ([#17724](https://github.com/storybookjs/storybook/pull/17724))
+
+### Bug Fixes
+
+- Components: Fix race conditions in SyntaxHighlighter ([#18158](https://github.com/storybookjs/storybook/pull/18158))
+
+### Maintenance
+
+- API: Deprecate isToolshown, rename to showToolbar ([#18131](https://github.com/storybookjs/storybook/pull/18131))
+
+## 6.5.0-beta.6 (May 6, 2022)
+
+### Bug Fixes
+
+- Controls: Fix undefined args handling ([#18135](https://github.com/storybookjs/storybook/pull/18135))
+
+### Maintenance
+
+- CLI: Update Introduction.stories.mdx template to be MDX2-friendly ([#18141](https://github.com/storybookjs/storybook/pull/18141))
+
+### Dependency Upgrades
+
+- Remove jest from cli peerDependencies ([#18149](https://github.com/storybookjs/storybook/pull/18149))
+
+## 6.5.0-beta.5 (May 4, 2022)
+
+### Bug Fixes
+
+- Core: Fix anonymous ID generation ([#18133](https://github.com/storybookjs/storybook/pull/18133))
+
+## 6.5.0-beta.4 (May 4, 2022)
+
+### Features
+
+- UI: Add a parent level toolbar exclusion key for tabs ([#18106](https://github.com/storybookjs/storybook/pull/18106))
+- Addon-a11y: Display a11y issues number in addon tab title ([#17983](https://github.com/storybookjs/storybook/pull/17983))
+
+### Bug Fixes
+
+- Addon-docs: Fix Canvas block CURRENT_SELECTION handling ([#18130](https://github.com/storybookjs/storybook/pull/18130))
+- Telemetry: Add safecheck for crash reports ([#18129](https://github.com/storybookjs/storybook/pull/18129))
+- Addon-a11y: Fix a11y params > element use ([#17989](https://github.com/storybookjs/storybook/pull/17989))
+
+## 6.5.0-beta.3 (May 4, 2022)
+
+### Bug Fixes
+
+- UI: Externalize `react-syntax-highlighter` from components ([#18127](https://github.com/storybookjs/storybook/pull/18127))
+
+## 6.5.0-beta.2 (May 2, 2022)
+
+### Features
+
+- Core: Add optional telemetry and crash reporting ([#18046](https://github.com/storybookjs/storybook/pull/18046))
+
+### Bug Fixes
+
+- Controls: Fix URL deserialization for argTypes with mapping ([#18124](https://github.com/storybookjs/storybook/pull/18124))
+- Core: Fix telemetry project root detection ([#18125](https://github.com/storybookjs/storybook/pull/18125))
+- React: Fix version detection for older versions of `react-dom` ([#18105](https://github.com/storybookjs/storybook/pull/18105))
+- CLI: Add non-monorepo testing tools to exclude lists ([#18092](https://github.com/storybookjs/storybook/pull/18092))
+
+### Maintenance
+
+- Examples: Update example to restore 6.4 auto-title behavior in UI ([#18109](https://github.com/storybookjs/storybook/pull/18109))
+- CLI: Remove git.io URL ([#18070](https://github.com/storybookjs/storybook/pull/18070))
+- UI: Make panel position a persistent preference ([#18036](https://github.com/storybookjs/storybook/pull/18036))
+
+### Dependency Upgrades
+
+- React: Fix jest-specific-snapshot dev dependency ([#18095](https://github.com/storybookjs/storybook/pull/18095))
+
+## 6.5.0-beta.1 (April 28, 2022)
+
+### Features
+
+- Toolbars: Add dynamicTitle option ([#17789](https://github.com/storybookjs/storybook/pull/17789))
+- Angular: Add webpackStatsJson to angular-builder ([#18001](https://github.com/storybookjs/storybook/pull/18001))
+- CLI/Vue: add interactions to vue cli template ([#18021](https://github.com/storybookjs/storybook/pull/18021))
+- CLI/HTML: Add interactions to cli template ([#18014](https://github.com/storybookjs/storybook/pull/18014))
+
+### Bug Fixes
+
+- CSF: Re-apply TArgs to render type ([#18075](https://github.com/storybookjs/storybook/pull/18075))
+- CLI: await generators for proper install ([#18053](https://github.com/storybookjs/storybook/pull/18053))
+- Core: Fix story index for CSF default exports as TS vars ([#18054](https://github.com/storybookjs/storybook/pull/18054))
+- Core: Fix single-story hoisting regression for auto-title changes ([#18052](https://github.com/storybookjs/storybook/pull/18052))
+
+## 6.5.0-beta.0 (April 24, 2022)
+
+### Features
+
+- CLI/Vue3: add interactions to vue3 cli template ([#18031](https://github.com/storybookjs/storybook/pull/18031))
+- CLI/Svelte: add interactions to cli template ([#17993](https://github.com/storybookjs/storybook/pull/17993))
+- UI: Move the "Rerun interactions" button to Subnav ([#17647](https://github.com/storybookjs/storybook/pull/17647))
+
+## 6.5.0-alpha.64 (April 18, 2022)
+
+### Features
+
+- CLI/Preact: add interactions to cli template ([#17984](https://github.com/storybookjs/storybook/pull/17984))
+
+### Bug Fixes
+
+- Interactions: Fix show length of object value on MethodCall ([#17649](https://github.com/storybookjs/storybook/pull/17649))
+- React: Fix React 18 react-dom/client dynamic import syntax ([#17987](https://github.com/storybookjs/storybook/pull/17987))
+- Svelte: Fix webpack5/babelModeV7 ([#17939](https://github.com/storybookjs/storybook/pull/17939))
+
+### Maintenance
+
+- Examples: Remove stories from deprecated `options`/`queryparams` addons ([#17977](https://github.com/storybookjs/storybook/pull/17977))
+- Chore: Format versions.ts file using repo config ([#17963](https://github.com/storybookjs/storybook/pull/17963))
+
+## 6.5.0-alpha.63 (April 14, 2022)
+
+### Bug Fixes
+
+- Theming: Re-export correct bundled file ([#17956](https://github.com/storybookjs/storybook/pull/17956))
+- Core: Support react-dom/client dom hack on Windows machines ([#17946](https://github.com/storybookjs/storybook/pull/17946))
+
+### Maintenance
+
+- CI: set parallelism of nx to 2 ([#17878](https://github.com/storybookjs/storybook/pull/17878))
+
+### Dependency Upgrades
+
+- Run `prebundle` script without `browser: true` in Rollup config ([#17947](https://github.com/storybookjs/storybook/pull/17947))
+
+## 6.4.22 (April 14, 2022)
+
+### Maintenance
+
+- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875))
+
+## 6.5.0-alpha.62 (April 13, 2022)
+
+Test publish with npm 2FA enabled for addon-jest
+
+## 6.5.0-alpha.61 (April 11, 2022)
+
+### Features
+
+- UI: Add URL parameters to SB to tweak visible UI ([#17891](https://github.com/storybookjs/storybook/pull/17891))
+
+### Maintenance
+
+- Core: Followup changing CJS entrypoints to ESM ([#17927](https://github.com/storybookjs/storybook/pull/17927))
+
+### Dependency Upgrades
+
+- Export `createCache` from `@storybook/theming` ([#17929](https://github.com/storybookjs/storybook/pull/17929))
+
+## 6.4.21 (April 9, 2022)
+
+### Bug Fixes
+
+- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
+- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
+- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
+- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
+
+## 6.5.0-alpha.60 (April 9, 2022)
+
+### Features
+
+- Core: Add story preloading to optimize lazy compilation ([#17903](https://github.com/storybookjs/storybook/pull/17903))
+
+### Bug Fixes
+
+- UI: Fix pseudo class potential unsafe warning ([#17911](https://github.com/storybookjs/storybook/pull/17911))
+- Core: Fix user-supplied project-level `render` in v6 store ([#17885](https://github.com/storybookjs/storybook/pull/17885))
+
+### Dependency Upgrades
+
+- Upgrade polished to 4.2.2 ([#17913](https://github.com/storybookjs/storybook/pull/17913))
+- Bump min vue-loader dependency version ([#17912](https://github.com/storybookjs/storybook/pull/17912))
+
+## 6.5.0-alpha.59 (April 7, 2022)
+
+### Maintenance
+
+- CLI: Update the exclude list for upgrade warnings ([#17909](https://github.com/storybookjs/storybook/pull/17909))
+- Examples: Added an external-docs example to show the basic use case ([#17807](https://github.com/storybookjs/storybook/pull/17807))
+
+### Dependency Upgrades
+
+- Migration to Emotion 11 ([#17640](https://github.com/storybookjs/storybook/pull/17640))
+
+## 6.5.0-alpha.58 (April 7, 2022)
+
+### Features
+
+- CLI: Add webpack4/5 auto-detection ([#17908](https://github.com/storybookjs/storybook/pull/17908))
+- React: Add support for react18's new root API ([#17215](https://github.com/storybookjs/storybook/pull/17215))
+
+### Bug Fixes
+
+- UI: Fix canvas as initialActive for fullscreen mode in mobile ([#17906](https://github.com/storybookjs/storybook/pull/17906))
+- UI: Fix mobile fullscreen UI ([#17873](https://github.com/storybookjs/storybook/pull/17873))
+
+### Maintenance
+
+- Core: Avoid framework imports from core/client ([#17875](https://github.com/storybookjs/storybook/pull/17875))
+- Webpack: Make manager and preview build processes cancelable ([#17809](https://github.com/storybookjs/storybook/pull/17809))
+- Build: Add vite-react to e2e tests ([#17871](https://github.com/storybookjs/storybook/pull/17871))
+- CLI: Upgrade vue3 template to use webpack5 builder ([#17896](https://github.com/storybookjs/storybook/pull/17896))
+- Build: Exclude @storybook/builder-vite from verdaccio ([#17897](https://github.com/storybookjs/storybook/pull/17897))
+
+## 6.5.0-alpha.57 (April 6, 2022)
+
+### Bug Fixes
+
+- Svelte: Fix dynamic source snippets ([#17866](https://github.com/storybookjs/storybook/pull/17866))
+- Angular: Do not use default for includePaths ([#17876](https://github.com/storybookjs/storybook/pull/17876))
+
+### Maintenance
+
+- Addon-docs: assume links starting with "https://" are external ([#17819](https://github.com/storybookjs/storybook/pull/17819))
+
+### Dependency Upgrades
+
+- Unify CSF version ([#17895](https://github.com/storybookjs/storybook/pull/17895))
+
+## 6.5.0-alpha.56 (April 5, 2022)
+
+### Features
+
+- Controls: Rework conditional controls with globals, queries ([#17883](https://github.com/storybookjs/storybook/pull/17883))
+- UI: Add Brand target config option ([#17814](https://github.com/storybookjs/storybook/pull/17814))
+
+### Bug Fixes
+
+- Controls: Fix date control width in addons panel ([#17780](https://github.com/storybookjs/storybook/pull/17780))
+
+### Maintenance
+
+- Core: Update some references to use ESM rather than CJS ([#17868](https://github.com/storybookjs/storybook/pull/17868))
+- Build: Upgrade from deprecated circleci docker img ([#17832](https://github.com/storybookjs/storybook/pull/17832))
+- Build: Parallel e2e (this might be expensive) ([#17842](https://github.com/storybookjs/storybook/pull/17842))
+- Build: Add junit summary for CircleCI ([#17867](https://github.com/storybookjs/storybook/pull/17867))
+
+## 6.5.0-alpha.55 (April 3, 2022)
+
+### Features
+
+- CLI: Detect vite project, use vite builder automatically ([#17860](https://github.com/storybookjs/storybook/pull/17860))
+- CLI: Default new vite projects to storyStoreV7 ([#17859](https://github.com/storybookjs/storybook/pull/17859))
+
+### Bug Fixes
+
+- Core: Restore preview-web composeConfigs export ([#17861](https://github.com/storybookjs/storybook/pull/17861))
+- CLI: Preserve quote style in automigrate ([#17858](https://github.com/storybookjs/storybook/pull/17858))
+
+## 6.4.20 (April 1, 2022)
+
+### Bug Fixes
+
+- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
+- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
+- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
+- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679))
+- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
+- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
+
+### Maintenance
+
+- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
+
+## 6.5.0-alpha.54 (April 1, 2022)
+
+### Dependency Upgrades
+
+- React: Update react and react-dom peerDeps for React18 ([#17853](https://github.com/storybookjs/storybook/pull/17853))
+
+## 6.5.0-alpha.53 (April 1, 2022)
+
+### Features
+
+- Core: Add simplified manager.js/preview.js API for addons ([#17755](https://github.com/storybookjs/storybook/pull/17755))
+- Core/React: Add testing utilities ([#17282](https://github.com/storybookjs/storybook/pull/17282))
+
+### Bug Fixes
+
+- Addon-docs: Fix dependencies for yarn pnp ([#17705](https://github.com/storybookjs/storybook/pull/17705))
+- Webpack: Expand version ranges of webpack in the apps ([#17834](https://github.com/storybookjs/storybook/pull/17834))
+- CLI: Fix vite/jest issue with mocked global ([#17830](https://github.com/storybookjs/storybook/pull/17830))
+
+### Maintenance
+
+- Build: Remove packtracker ([#17841](https://github.com/storybookjs/storybook/pull/17841))
+- Build: Swap order of e2e tests around ([#17840](https://github.com/storybookjs/storybook/pull/17840))
+- Build: Add weekly check for broken markdown links ([#17799](https://github.com/storybookjs/storybook/pull/17799))
+- Build: Switch to use medium+ ([#17837](https://github.com/storybookjs/storybook/pull/17837))
+
+## 6.5.0-alpha.52 (March 31, 2022)
+
+### Bug Fixes
+
+- UI: Add back CacheProvider from emotion to lib/theming ([#17820](https://github.com/storybookjs/storybook/pull/17820))
+- Core: Add a feature flag for enabling crossOriginIsolated ([#17815](https://github.com/storybookjs/storybook/pull/17815))
+- Angular: Fix multiple calls of Input setter ([#17633](https://github.com/storybookjs/storybook/pull/17633))
+- UI: Wait 100ms before showing spinner and fix story overlaying it ([#17753](https://github.com/storybookjs/storybook/pull/17753))
+
+### Maintenance
+
+- CLI: Add automigration to `@storybook/builder-vite` ([#17829](https://github.com/storybookjs/storybook/pull/17829))
+- Build: Add setup-node version for danger ([#17826](https://github.com/storybookjs/storybook/pull/17826))
+- Add contributing instructions to PULL_REQUEST_TEMPLATE ([#17713](https://github.com/storybookjs/storybook/pull/17713))
+
+## 6.5.0-alpha.51 (March 25, 2022)
+
+### Features
+
+- SyntaxHighlighter: Add prettier for code formatting ([#17746](https://github.com/storybookjs/storybook/pull/17746))
+
+### Maintenance
+
+- Build: Add main overrides to e2e config and possibility to run test runner ([#17778](https://github.com/storybookjs/storybook/pull/17778))
+
+## 6.5.0-alpha.50 (March 23, 2022)
+
+### Features
+
+- Controls: Add conditional controls ([#17536](https://github.com/storybookjs/storybook/pull/17536))
+- Core: Add headers to enable SharedArrayBuffer in stories ([#16970](https://github.com/storybookjs/storybook/pull/16970))
+- UI: Button for toggling addons panel ([#17714](https://github.com/storybookjs/storybook/pull/17714))
+
+### Bug Fixes
+
+- Core: Ensure simultaneous first access to stories.json waits ([#17785](https://github.com/storybookjs/storybook/pull/17785))
+- Reload iframe when the url changes ([#17644](https://github.com/storybookjs/storybook/pull/17644))
+- UI: Fix brand logo layout shift ([#16467](https://github.com/storybookjs/storybook/pull/16467))
+- UI: Fix nesting issue for refs in sidebar component ([#17726](https://github.com/storybookjs/storybook/pull/17726))
+- Core: Fix filesystem cache missing return ([#17748](https://github.com/storybookjs/storybook/pull/17748))
+- Addon-docs: Fix binding of the `renderStoryToElement` passed to `DocsRender` ([#17742](https://github.com/storybookjs/storybook/pull/17742))
+
+### Maintenance
+
+- Addon-docs/Vue: Add tests for sourceDecorator vnodeToString ([#17764](https://github.com/storybookjs/storybook/pull/17764))
+- Controls: Date control tests ([#17765](https://github.com/storybookjs/storybook/pull/17765))
+- Remove mock directories from Jest test coverage ([#17771](https://github.com/storybookjs/storybook/pull/17771))
+- fix dts-localize script ([#17747](https://github.com/storybookjs/storybook/pull/17747))
+
+## 6.5.0-alpha.49 (March 17, 2022)
+
+### Bug Fixes
+
+- Addon-docs/Svelte: Fix `HOC.svelte` reference ([#17731](https://github.com/storybookjs/storybook/pull/17731))
+- UI: Fix composition support in safari ([#17679](https://github.com/storybookjs/storybook/pull/17679))
+
+## 6.5.0-alpha.48 (March 14, 2022)
+
+### Features
+
+- Addon-docs: Auto-disable docs presets if docs/controls unused ([#17697](https://github.com/storybookjs/storybook/pull/17697))
+
+### Bug Fixes
+
+- Web-components: Fix CSS class usage in CLI template ([#17702](https://github.com/storybookjs/storybook/pull/17702))
+
+### Maintenance
+
+- Addon-docs: Refactor docs support into individual framework packages ([#17695](https://github.com/storybookjs/storybook/pull/17695))
+
+## 6.5.0-alpha.47 (March 10, 2022)
+
+### Bug Fixes
+
+- Webpack4: Fix useExports for angular-cli ([#17674](https://github.com/storybookjs/storybook/pull/17674))
+- Core: Ensure that we do not render a story twice if re-rendered during preparing ([#17599](https://github.com/storybookjs/storybook/pull/17599))
+- Addon-docs: DocsPage story order should match the index ([#17669](https://github.com/storybookjs/storybook/pull/17669))
+- Core: Fix staticDirs path issue on Windows ([#17641](https://github.com/storybookjs/storybook/pull/17641))
+- Angular: Set ForkTsCheckerWebpackPlugin to async ([#17389](https://github.com/storybookjs/storybook/pull/17389))
+- Core: Fix core.builder check ([#17606](https://github.com/storybookjs/storybook/pull/17606))
+
+### Maintenance
+
+- Examples: Build stories.json for examples that support it ([#17670](https://github.com/storybookjs/storybook/pull/17670))
+- Core: Refactor preview rendering out of `PreviewWeb` ([#17598](https://github.com/storybookjs/storybook/pull/17598))
+- Prevent lint hook from running on all files ([#17662](https://github.com/storybookjs/storybook/pull/17662))
+- TypeScript: Change imports of types to be prefixed ([#17627](https://github.com/storybookjs/storybook/pull/17627))
+- Build: Give linting sub-commands a directory to run against ([#17545](https://github.com/storybookjs/storybook/pull/17545))
+- TypeScript: remove unnecessary 'as any' ([#17595](https://github.com/storybookjs/storybook/pull/17595))
+
+### Dependency Upgrades
+
+- Update shelljs dependency version ([#17602](https://github.com/storybookjs/storybook/pull/17602))
+- Remove unused `uuid` that's also deprecated ([#17615](https://github.com/storybookjs/storybook/pull/17615))
+
+## 6.5.0-alpha.46 (March 5, 2022)
+
+### Bug Fixes
+
+- Addon-interactions: Use 'global' package instead of `global` ([#17614](https://github.com/storybookjs/storybook/pull/17614))
+
+## 6.5.0-alpha.45 (March 2, 2022)
+
+### Bug Fixes
+
+- CSF3: Fix Auto-title to respect file system capitalization ([#17574](https://github.com/storybookjs/storybook/pull/17574))
+
+### Maintenance
+
+- Core: Remove unused babel dependencies ([#17425](https://github.com/storybookjs/storybook/pull/17425))
+
+## 6.5.0-alpha.44 (February 28, 2022)
+
+### Dependency Upgrades
+
+- Fix mdx-csf dependencies to canary dist-tag ([#17592](https://github.com/storybookjs/storybook/pull/17592))
+
+## 6.5.0-alpha.43 (February 28, 2022)
+
+### Features
+
+- Addon-docs: MDX2 support ([#17515](https://github.com/storybookjs/storybook/pull/17515))
+
+### Bug Fixes
+
+- Core: Fix global render fn ([#17577](https://github.com/storybookjs/storybook/pull/17577))
+- Addon-interactions: Mock window in browser environments ([#17535](https://github.com/storybookjs/storybook/pull/17535))
+
+## 6.5.0-alpha.42 (February 25, 2022)
+
+### Bug Fixes
+
+- Controls/Essentials/Interactions: Add support for main.cjs/mjs/tsx files ([#17524](https://github.com/storybookjs/storybook/pull/17524))
+- Addon-docs: Fix preset handling for builder with options ([#17544](https://github.com/storybookjs/storybook/pull/17544))
+
+## 6.5.0-alpha.41 (February 22, 2022)
+
+### Features
+
+- Addon-Outline: add 'o' keyboard shortcut to toggle the outline addon ([#17530](https://github.com/storybookjs/storybook/pull/17530))
+
+### Bug Fixes
+
+- Addon-docs: Ensure that **DOCS_CONTEXT** cannot be undefined ([#17251](https://github.com/storybookjs/storybook/pull/17251))
+- Addon-docs: Account for non-string types when converting enums ([#15822](https://github.com/storybookjs/storybook/pull/15822))
+- Addon-actions: Don't override undefined args ([#17505](https://github.com/storybookjs/storybook/pull/17505))
+
+## 6.5.0-alpha.40 (February 19, 2022)
+
+### Features
+
+- Webpack5: Add lazy compilation ([#17501](https://github.com/storybookjs/storybook/pull/17501))
+
+### Maintenance
+
+- Build: Fix CRA repro generator and e2e test in PnP mode ([#17375](https://github.com/storybookjs/storybook/pull/17375))
+- UI: Add a custom title story for heading component ([#17487](https://github.com/storybookjs/storybook/pull/17487))
+
+## 6.4.19 (February 12, 2022)
+
+### Features
+
+- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345))
+- CLI/Angular: Add interactions to cli template ([#17437](https://github.com/storybookjs/storybook/pull/17437))
+
+### Bug Fixes
+
+- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))
+- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435))
+- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327))
+- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434))
+- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404))
+
+## 6.5.0-alpha.39 (February 11, 2022)
+
+### Features
+
+- CLI: Add addon-interactions to angular template ([#17437](https://github.com/storybookjs/storybook/pull/17437))
+
+### Bug Fixes
+
+- Core: Rename `generated-stories-entry` to `cjs` extension so require works ([#17486](https://github.com/storybookjs/storybook/pull/17486))
+- Core/CLI: Add `extract` function to `PreviewWeb` and use it in `sb extract` if available ([#17447](https://github.com/storybookjs/storybook/pull/17447))
+- Controls: Fix Boolean control parsing ([#17456](https://github.com/storybookjs/storybook/pull/17456))
+
+### Maintenance
+
+- Fix `ci:matrix` label in CI ([#17457](https://github.com/storybookjs/storybook/pull/17457))
+
+### Dependency Upgrades
+
+- Bump vue-docgen-api to 4.44.15 ([#17465](https://github.com/storybookjs/storybook/pull/17465))
+
+## 6.5.0-alpha.38 (February 8, 2022)
+
+### Bug Fixes
+
+- Addon-links: Fix export statement in react.d.ts ([#17434](https://github.com/storybookjs/storybook/pull/17434))
+- Core: Fix `useParameter` with nullish coalescing ([#17327](https://github.com/storybookjs/storybook/pull/17327))
+- Core: Ensure we show an error when `configure()` throws ([#17435](https://github.com/storybookjs/storybook/pull/17435))
+
+### Maintenance
+
+- Web-components: Upgrade kitchen sink lockfile ([#17424](https://github.com/storybookjs/storybook/pull/17424))
+
+## 6.5.0-alpha.37 (February 8, 2022)
+
+Failed publish
+
+## 6.5.0-alpha.36 (February 4, 2022)
+
+### Maintenance
+
+- UI: Prebundle `@storybook/components` ([#17304](https://github.com/storybookjs/storybook/pull/17304))
+
+## 6.5.0-alpha.35 (February 4, 2022)
+
+### Features
+
+- CLI/React: Add interactions to cli template ([#17345](https://github.com/storybookjs/storybook/pull/17345))
+- CSF3: Handle auto-title redundant filename ([#17421](https://github.com/storybookjs/storybook/pull/17421))
+
+### Bug Fixes
+
+- Addon-docs: Fix typo in ArgsTable tooltip ([#17404](https://github.com/storybookjs/storybook/pull/17404))
+- Core: Apply Docs mode to composed storybooks ([#17292](https://github.com/storybookjs/storybook/pull/17292))
+
+### Maintenance
+
+- Core: Move CSF-related logic to its own folder ([#17381](https://github.com/storybookjs/storybook/pull/17381))
+- Improve style handling in angular example in monorepo ([#17343](https://github.com/storybookjs/storybook/pull/17343))
+
+## 6.4.18 (February 2, 2022)
+
+### Bug Fixes
+
+- CLI: Pin version of `@mdx-js/react` to 1.x.x until we are compatible ([#17395](https://github.com/storybookjs/storybook/pull/17395))
+
+## 6.5.0-alpha.34 (February 2, 2022)
+
+### Features
+
+- Core: Mock channel if not present ([#17382](https://github.com/storybookjs/storybook/pull/17382))
+
+### Bug Fixes
+
+- CLI: Pin version of `@mdx-js/react` to 1.x.x until we are compatible ([#17395](https://github.com/storybookjs/storybook/pull/17395))
+
+## 6.5.0-alpha.33 (February 1, 2022)
+
+### Maintenance
+
+- UI: Prebundle `@storybook/ui` ([#17301](https://github.com/storybookjs/storybook/pull/17301))
+
+## 6.5.0-alpha.32 (February 1, 2022)
+
+### Maintenance
+
+- Core: Pre-bundle `@storybook/router` to avoid react-router conflict ([#17294](https://github.com/storybookjs/storybook/pull/17294))
+
+## 6.5.0-alpha.31 (February 1, 2022)
+
+### Maintenance
+
+- Web components: add addon-interactions example story ([#17303](https://github.com/storybookjs/storybook/pull/17303))
+- Core: Pre-bundle theming to avoid emotion11 conflicts ([#17000](https://github.com/storybookjs/storybook/pull/17000))
+
+## 6.5.0-alpha.30 (January 31, 2022)
+
+### Maintenance
+
+- Build: Enforce stricter types ([#17368](https://github.com/storybookjs/storybook/pull/17368))
+
+## 6.5.0-alpha.29 (January 31, 2022)
+
+### Bug Fixes
+
+- Revert "Angular: Retrieve version from core package" ([#17372](https://github.com/storybookjs/storybook/pull/17372))
+
+## 6.4.17 (January 31, 2022)
+
+### Bug Fixes
+
+- Revert "Angular: Retrieve version from core package" ([#17372](https://github.com/storybookjs/storybook/pull/17372))
+
+## 6.5.0-alpha.28 (January 29, 2022)
+
+### Bug Fixes
+
+- Svelte: Fix missing templates dir in package.json publish files ([#17367](https://github.com/storybookjs/storybook/pull/17367))
+
+## 6.4.16 (January 29, 2022)
+
+### Bug Fixes
+
+- Angular: Workaround for compodoc on windows machines ([#17334](https://github.com/storybookjs/storybook/pull/17334))
+- Angular: Use ɵReflectionCapabilities to find component & module metadata ([#17156](https://github.com/storybookjs/storybook/pull/17156))
+- Angular: Retrieve version from core package ([#17363](https://github.com/storybookjs/storybook/pull/17363))
+
+## 6.5.0-alpha.27 (January 29, 2022)
+
+### Bug Fixes
+
+- Angular: Workaround for compodoc on windows machines ([#17334](https://github.com/storybookjs/storybook/pull/17334))
+- Angular: Retrieve version from core package ([#17363](https://github.com/storybookjs/storybook/pull/17363))
+
+## 6.5.0-alpha.26 (January 28, 2022)
+
+### Bug Fixes
+
+- Revert "Core: Rename `generated-stories-entry` to `cjs` extension so require works" ([#17361](https://github.com/storybookjs/storybook/pull/17361))
+
+## 6.5.0-alpha.25 (January 28, 2022)
+
+### Maintenance
+
+- Build: Overhaul dev script & compile-babel & compile-tsc ([#17338](https://github.com/storybookjs/storybook/pull/17338))
+
+## 6.4.15 (January 28, 2022)
+
+### Bug Fixes
+
+- Angular: Fix runCompodoc for Windows, local Compodoc, and user specified tsconfig ([#16728](https://github.com/storybookjs/storybook/pull/16728))
+- Core: Fix negated glob support ([#17328](https://github.com/storybookjs/storybook/pull/17328))
+
+### Maintenance
+
+- Build: Upgrade main yarn ([#17323](https://github.com/storybookjs/storybook/pull/17323))
+- CLI: Add version update argument to generate-sb-packages-versions utility ([#17356](https://github.com/storybookjs/storybook/pull/17356))
+
+## 6.5.0-alpha.24 (January 28, 2022)
+
+### Bug Fixes
+
+- Core: Fix negated glob support ([#17328](https://github.com/storybookjs/storybook/pull/17328))
+
+### Maintenance
+
+- CLI/Svelte: Revert template stories from svelte-native to CSF ([#17340](https://github.com/storybookjs/storybook/pull/17340))
+- CLI: Add version update argument to generate-sb-packages-versions utility ([#17356](https://github.com/storybookjs/storybook/pull/17356))
+
+## 6.5.0-alpha.23 (January 25, 2022)
+
+### Features
+
+- Vue: Add CSF3 default render function ([#17279](https://github.com/storybookjs/storybook/pull/17279))
+
+### Bug Fixes
+
+- Core: Rename `generated-stories-entry` to `cjs` extension so require works ([#16727](https://github.com/storybookjs/storybook/pull/16727))
+- Addon-docs: Fix `BuilderConfig` can be an object ([#17320](https://github.com/storybookjs/storybook/pull/17320))
+
+### Maintenance
+
+- Core: Remove useless unfetch ([#17306](https://github.com/storybookjs/storybook/pull/17306))
+- Build: Regen lockfile ([#17283](https://github.com/storybookjs/storybook/pull/17283))
+
+### Dependency Upgrades
+
+- Upgrade node-fetch to latest version ([#17317](https://github.com/storybookjs/storybook/pull/17317))
+
+## 6.4.14 (January 21, 2022)
+
+### Bug Fixes
+
+- CLI: Add `--no-manager-cache` to build-storybook ([#17300](https://github.com/storybookjs/storybook/pull/17300))
+- CSF3: Remove `path` from autoTitle browser code ([#17185](https://github.com/storybookjs/storybook/pull/17185))
+- Addon-docs: Fix `docs.disable` parameter on DocsPage ([#17256](https://github.com/storybookjs/storybook/pull/17256))
+- Core: Fix issue with recursive glob with prior special chars ([#17252](https://github.com/storybookjs/storybook/pull/17252))
+- Webpack: Fix for `process` fallback using `require.resolve` ([#17249](https://github.com/storybookjs/storybook/pull/17249))
+
+### Dependency Upgrades
+
+- Upgrade compodoc for colors.js bug ([#17266](https://github.com/storybookjs/storybook/pull/17266))
+- Upgrade jscodeshift dependency for colors.js bug ([#17265](https://github.com/storybookjs/storybook/pull/17265))
+- Restore prettier >= 2.2.1 to satisfy previous constraints ([#17257](https://github.com/storybookjs/storybook/pull/17257))
+
+## 6.5.0-alpha.22 (January 20, 2022)
+
+### Features
+
+- Svelte: Add CSF3 default render function ([#17276](https://github.com/storybookjs/storybook/pull/17276))
+- CLI: Add `--no-manager-cache` to build-storybook ([#17300](https://github.com/storybookjs/storybook/pull/17300))
+
+### Maintenance
+
+- Build: Upgrade yarn to 3.1.1 ([#17281](https://github.com/storybookjs/storybook/pull/17281))
+
+## 6.5.0-alpha.21 (January 18, 2022)
+
+### Features
+
+- Webpack5: Switch to using `import.meta.webpackHot.accept` ([#17270](https://github.com/storybookjs/storybook/pull/17270))
+
+## 6.5.0-alpha.20 (January 18, 2022)
+
+### Dependency Upgrades
+
+- Upgrade compodoc for colors.js bug ([#17266](https://github.com/storybookjs/storybook/pull/17266))
+- Upgrade jscodeshift dependency for colors.js bug ([#17265](https://github.com/storybookjs/storybook/pull/17265))
+- Restore prettier >= 2.2.1 to satisfy previous constraints ([#17257](https://github.com/storybookjs/storybook/pull/17257))
+
+## 6.5.0-alpha.19 (January 17, 2022)
+
+### Features
+
+- Core: Add IS_STORYBOOK global variable ([#16676](https://github.com/storybookjs/storybook/pull/16676))
+
+### Bug Fixes
+
+- Addon-docs: Fix `docs.disable` parameter on DocsPage ([#17256](https://github.com/storybookjs/storybook/pull/17256))
+- Controls: Fix number control update when using useArgs hook ([#17247](https://github.com/storybookjs/storybook/pull/17247))
+- Core: Fix issue with recursive glob with prior special chars ([#17252](https://github.com/storybookjs/storybook/pull/17252))
+
+## 6.5.0-alpha.18 (January 16, 2022)
+
+### Bug Fixes
+
+- Webpack: Fix for `process` fallback using `require.resolve` ([#17249](https://github.com/storybookjs/storybook/pull/17249))
+
+### Maintenance
+
+- Official-storybook: Fix ForwardRefButtonInnerPropTypes warning ([#12733](https://github.com/storybookjs/storybook/pull/12733))
+- Fix prettier 2.3 formatting across the codebase ([#17242](https://github.com/storybookjs/storybook/pull/17242))
+
+## 6.4.13 (January 15, 2022)
+
+### Bug Fixes
+
+- Core: Fix `staticDirs` favicon handling by refactor ([#17241](https://github.com/storybookjs/storybook/pull/17241))
+- Angular: Fix 13.1 and add CI test cases ([#17206](https://github.com/storybookjs/storybook/pull/17206))
+- Core: Fix `__namedExportsOrder` warning from preview.js ([#17240](https://github.com/storybookjs/storybook/pull/17240))
+- Webpack5: Fix manager.js `process` references ([#17213](https://github.com/storybookjs/storybook/pull/17213))
+
+### Dependency Upgrades
+
+- React: Remove react-dev-utils ([#17022](https://github.com/storybookjs/storybook/pull/17022))
+- Fix prettier transpile problems ([#17239](https://github.com/storybookjs/storybook/pull/17239))
+
+## 6.5.0-alpha.17 (January 14, 2022)
+
+### Bug Fixes
+
+- Core: Fix `staticDirs` favicon handling by refactor ([#17241](https://github.com/storybookjs/storybook/pull/17241))
+- Core: Fix `__namedExportsOrder` warning from preview.js ([#17240](https://github.com/storybookjs/storybook/pull/17240))
+
+### Dependency Upgrades
+
+- Fix prettier transpile problems ([#17239](https://github.com/storybookjs/storybook/pull/17239))
+
+## 6.5.0-alpha.16 (January 13, 2022)
+
+### Bug Fixes
+
+- Webpack5: Fix named exports order in production mode ([#17229](https://github.com/storybookjs/storybook/pull/17229))
+
+## 6.5.0-alpha.15 (January 12, 2022)
+
+### Bug Fixes
+
+- Angular: Fix 13.1 and add CI test cases ([#17206](https://github.com/storybookjs/storybook/pull/17206))
+- Webpack5: Fix manager.js process references ([#17213](https://github.com/storybookjs/storybook/pull/17213))
+
+### Dependency Upgrades
+
+- React: Restore webpack as a dependency, updated webpack 5 docs ([#17207](https://github.com/storybookjs/storybook/pull/17207))
+
+## 6.5.0-alpha.14 (January 11, 2022)
+
+### Bug Fixes
+
+- Angular: Fix void element selectors ([#15495](https://github.com/storybookjs/storybook/pull/15495))
+
+### Dependency Upgrades
+
+- React: Remove webpack from dependencies, types as devDependencies ([#17192](https://github.com/storybookjs/storybook/pull/17192))
+
+## 6.5.0-alpha.13 (January 11, 2022)
+
+### Features
+
+- UI: Set the current story name in the title ([#17177](https://github.com/storybookjs/storybook/pull/17177))
+
+### Bug Fixes
+
+- Core: Retain iframe.html query parameters ([#17136](https://github.com/storybookjs/storybook/pull/17136))
+- CSF3: Remove `path` from autoTitle browser code ([#17185](https://github.com/storybookjs/storybook/pull/17185))
+
+### Maintenance
+
+- Build: Fix package.json warnings in JetBrains IDEs ([#17184](https://github.com/storybookjs/storybook/pull/17184))
+- Fix github workflow syntax to run unit-tests on push ([#17148](https://github.com/storybookjs/storybook/pull/17148))
+
+## 5.3.22 (January 10, 2022)
+
+### Dependency Upgrades
+
+- Bump cli-table3 to fix colors.js bug in 5.3 ([#17182](https://github.com/storybookjs/storybook/pull/17182))
+
+## 6.3.13 (January 10, 2022)
+
+### Dependency Upgrades
+
+- Bump cli-table3 to fix colors bug ([#17180](https://github.com/storybookjs/storybook/pull/17180))
+
+## 6.4.10 (January 10, 2022)
+
+### Bug Fixes
+
+- Core: Fix process.env assignment ([#17174](https://github.com/storybookjs/storybook/pull/17174))
+- Angular: Fix angular 13.1 JIT error and HMR reload ([#17131](https://github.com/storybookjs/storybook/pull/17131))
+- Router: Fix navigating to hash links ([#17134](https://github.com/storybookjs/storybook/pull/17134))
+- Source-loader: Fix node.declaration edge case ([#17027](https://github.com/storybookjs/storybook/pull/17027))
+- Core: Fix debug output on webpack failures ([#16988](https://github.com/storybookjs/storybook/pull/16988))
+
+### Dependency Upgrades
+
+- Bump cli-table3 to fix colors bug ([#17180](https://github.com/storybookjs/storybook/pull/17180))
+
+## 6.5.0-alpha.12 (January 10, 2022)
+
+### Bug Fixes
+
+- Core: Fix process.env assignment ([#17174](https://github.com/storybookjs/storybook/pull/17174))
+
+### Dependency Upgrades
+
+- Bump cli-table3 to fix colors bug ([#17180](https://github.com/storybookjs/storybook/pull/17180))
+
+## 6.5.0-alpha.11 (January 7, 2022)
+
+### Bug Fixes
+
+- Addon-docs: Fix babel-loader resolution based on builder ([#16752](https://github.com/storybookjs/storybook/pull/16752))
+- Angular: Use ɵReflectionCapabilities to find component & module metadata ([#17156](https://github.com/storybookjs/storybook/pull/17156))
+
+### Dependency Upgrades
+
+- Update react-syntax-highlighter to fix transitive vulnerability ([#17127](https://github.com/storybookjs/storybook/pull/17127))
+
+## 6.5.0-alpha.10 (January 6, 2022)
+
+### Bug Fixes
+
+- Angular: Fix angular 13.1 JIT error and HMR reload ([#17131](https://github.com/storybookjs/storybook/pull/17131))
+- Core: Fix IE support by transpiling more libs to es5 ([#17141](https://github.com/storybookjs/storybook/pull/17141))
+
+## 6.5.0-alpha.9 (January 6, 2022)
+
+### Features
+
+- Allow setting project args/argTypes for v6 store ([#17043](https://github.com/storybookjs/storybook/pull/17043))
+
+### Bug Fixes
+
+- Router: Fix navigating to hash links ([#17134](https://github.com/storybookjs/storybook/pull/17134))
+
+## 6.5.0-alpha.8 (January 6, 2022)
+
+Publish failed
+
+## 6.5.0-alpha.7 (January 4, 2022)
+
+### Bug Fixes
+
+- Addon-measure: Update z-index to fit with libraries with also high z-index ([#15860](https://github.com/storybookjs/storybook/pull/15860))
+
+### Maintenance
+
+- Vue: Fix VueLoaderPlugin import to support vue-loader@16.x ([#14624](https://github.com/storybookjs/storybook/pull/14624))
+
+### Dependency Upgrades
+
+- Upgrade react-syntax-highlighter to pick up security patch upstream in highlight.js ([#17100](https://github.com/storybookjs/storybook/pull/17100))
+
+## 6.5.0-alpha.6 (January 3, 2022)
+
+### Features
+
+- Vue3: Add default render function CSF3 ([#17068](https://github.com/storybookjs/storybook/pull/17068))
+- Addon-docs/Vue: Include methods in ArgsTable ([#16975](https://github.com/storybookjs/storybook/pull/16975))
+
+### Bug Fixes
+
+- CLI: Install `lit-html` in new web components project ([#17106](https://github.com/storybookjs/storybook/pull/17106))
+- Angular: Fix runCompodoc for Windows, local Compodoc, and user specified tsconfig ([#16728](https://github.com/storybookjs/storybook/pull/16728))
+
+### Dependency Upgrades
+
+- React: Remove react-dev-utils ([#17022](https://github.com/storybookjs/storybook/pull/17022))
+
+## 6.5.0-alpha.5 (December 23, 2021)
+
+### Dependency Upgrades
+
+- Update react-refresh@0.11.0 & react-refresh-webpack-plugin@0.5.3 same as cra5 ([#17056](https://github.com/storybookjs/storybook/pull/17056))
+
+## 6.5.0-alpha.4 (December 18, 2021)
+
+### Bug Fixes
+
+- Angular: Fix for renamed method in angular 13.1 ([#17032](https://github.com/storybookjs/storybook/pull/17032))
+- Source-loader: Fix node.declaration edge case ([#17027](https://github.com/storybookjs/storybook/pull/17027))
+- Core: Fix debug output on webpack failures ([#16988](https://github.com/storybookjs/storybook/pull/16988))
+
+### Maintenance
+
+- Build: Run unit tests on more node versions, mac, and windows ([#16744](https://github.com/storybookjs/storybook/pull/16744))
+
+### Dependency Upgrades
+
+- Avoid referencing internal Emotion packages in built types ([#16905](https://github.com/storybookjs/storybook/pull/16905))
+
 ## 6.5.0-alpha.3 (December 9, 2021)

 ### Bug Fixes

-* Core: Support custom PREVIEW URL for block story iframe ([#16773](https://github.com/storybookjs/storybook/pull/16773))
+- Core: Support custom PREVIEW URL for block story iframe ([#16773](https://github.com/storybookjs/storybook/pull/16773))

 ## 6.5.0-alpha.2 (December 9, 2021)

--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@ -15,7 +15,7 @@ This document outlines some of the processes that the maintainers should adhere
 | api:(name)                     | Issue, bug, or pull request related to Storybook's API (e.g.,[makeDecorator](/docs/addons/addons-api.md#makeDecorator-API))                         |
 | args                           | Issue, bug, or pull request related to Storybook's [args](/docs/writing-stories/args.md)                                                            |
 | babel/webpack                  | Issue, bug, or pull request related to Storybook's build system (e.g., Webpack or Babel), for Webpack 5 issues see below                            |
-| block:(name)                   | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-blocks.md#argstable))                              |
+| block:(name)                   | Issue or bug within a certain surface are of Storybook (e.g., [argsTable](/docs/writing-docs/doc-block-argstable.md))                              |
 | BREAKING CHANGE                | Issue or pull request that introduces a breaking change within Storybook's ecosystem.                                                               |
 | BREAKING PRERELASE             | Breaking, but only for prerelease users (not relative to the stable release)                                                                        |
 | build-storybook                | Issue, bug, or pull request related to Storybook's production build                                                                                 |
@ -24,7 +24,7 @@ This document outlines some of the processes that the maintainers should adhere
 | cli                            | Issue, bug, or pull request that affects the Storybook's CLI                                                                                        |
 | compatibility with other tools | Issue, bug, or pull request between Storybook and other tools (e.g., [Nuxt](https://nuxtjs.org/))                                                   |
 | components                     | Issue, bug, or pull request related to Storybook's internal components                                                                              |
-| composition                    | Issue, bug, or pull request related to Storybook [Composition](/docs/workflows/storybook-composition.md)                                            |
+| composition                    | Issue, bug, or pull request related to Storybook [Composition](/docs/sharing/storybook-composition.md)                                            |
 | configuration                  | Issue, bug, or pull request related to Storybook [configuration](/docs/configure/overview.md)                                                       |
 | core                           | Issue, bug, or pull request related to Storybook's Core                                                                                             |
 | cra                            | Issue, bug, or pull request that affects Storybook's compatibility with Create React APP ([CRA](https://create-react-app.dev/docs/getting-started/))|
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,5 +1,18 @@
 <h1>Migration</h1>

+- [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
+  - [Vue 3 upgrade](#vue-3-upgrade)
+  - [React18 new root API](#react18-new-root-api)
+  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
+  - [Deprecated register.js](#deprecated-registerjs)
+  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
+  - [Vite builder renamed](#vite-builder-renamed)
+  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
+  - [Opt-in MDX2 support](#opt-in-mdx2-support)
+  - [CSF3 auto-title improvements](#csf3-auto-title-improvements)
+    - [Auto-title filename case](#auto-title-filename-case)
+    - [Auto-title redundant filename](#auto-title-redundant-filename)
+    - [Auto-title always prefixes](#auto-title-always-prefixes)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
  - [Automigrate](#automigrate)
  - [CRA5 upgrade](#cra5-upgrade)
@ -188,6 +201,171 @@
  - [Packages renaming](#packages-renaming)
  - [Deprecated embedded addons](#deprecated-embedded-addons)

+## From version 6.4.x to 6.5.0
+
+### Vue 3 upgrade
+
+Storybook 6.5 supports Vue 3 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
+
+### React18 new root API
+
+React 18 introduces a [new root API](https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis). Starting in 6.5, Storybook for React will auto-detect your react version and use the new root API automatically if you're on React18.
+
+If you wish to opt out of the new root API, set the `reactOptions.legacyRootApi` flag in your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  reactOptions: { legacyRootApi: true },
+};
+```
+
+### Renamed isToolshown to showToolbar
+
+Storybook's [manager API](docs/addons/addons-api.md) has deprecated the `isToolshown` option (to show/hide the toolbar) and renamed it to `showToolbar` for consistency with other similar UI options.
+
+Example:
+
+```js
+// .storybook/manager.js
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  showToolbar: false,
+});
+```
+
+### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before:
+
+```js
+module.exports = { addons: ['my-addon/register.js'] };
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] };
+```
+
+### Dropped support for addon-actions addDecorators
+
+Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
+
+### Vite builder renamed
+
+SB6.5 renames Storybook's [Vite builder](https://github.com/storybookjs/builder-vite) from `storybook-builder-vite` to `@storybook/builder-vite`. This move is part of a larger effort to improve Vite support in Storybook.
+
+Storybook's `automigrate` command can migrate for you. To manually migrate:
+
+1. Remove `storybook-builder-vite` from your `package.json` dependencies
+2. Install `@storybook/builder-vite`
+3. Update your `core.builder` setting in `.storybook/main.js` to `@storybook/builder-vite`.
+
+### Docs framework refactor for React
+
+SB6.5 moves framework specializations (e.g. ArgType inference, dynamic snippet rendering) out of `@storybook/addon-docs` and into the specific framework packages to which they apply (e.g. `@storybook/react`).
+
+This change should not require any specific migrations on your part if you are using the docs addon as described in the documentation. However, if you are using `react-docgen` or `react-docgen-typescript` information in some custom way outside of `addon-docs`, you should be aware of this change.
+
+In SB6.4, `@storybook/react` added `react-docgen` to its babel settings and `react-docgen-typescript` to its webpack settings. In SB6.5, this only happens if you are using `addon-docs` or `addon-controls`, either directly or indirectly through `addon-essentials`. If you're not using either of those addons, but require that information for some other addon, please configure that manually in your `.storybook/main.js` configuration. You can see the docs configuration here: https://github.com/storybookjs/storybook/blob/next/app/react/src/server/framework-preset-react-docs.ts
+
+### Opt-in MDX2 support
+
+SB6.5 adds experimental opt-in support for MDXv2. To install:
+
+```sh
+yarn add @storybook/mdx2-csf -D
+```
+
+Then add the `previewMdx2` feature flag to your `.storybook/main.js` config:
+
+```js
+module.exports = {
+  features: {
+    previewMdx2: true,
+  },
+};
+```
+
+### CSF3 auto-title improvements
+
+SB 6.4 introduced experimental "auto-title", in which a story's location in the sidebar (aka `title`) can be automatically inferred from its location on disk. For example, the file `atoms/Button.stories.js` might result in the title `Atoms/Button`.
+
+We've made two improvements to Auto-title based on user feedback:
+
+- Auto-title preserves filename case
+- Auto-title removes redundant filenames from the path
+
+#### Auto-title filename case
+
+SB 6.4's implementation of auto-title ran `startCase` on each path component. For example, the file `atoms/MyButton` would be transformed to `Atoms/My Button`.
+
+We've changed this in SB 6.5 to preserve the filename case, so that instead it the same file would result in the title `atoms/MyButton`. The rationale is that this gives more control to users about what their auto-title will be.
+
+This might be considered a breaking change. However, we feel justified to release this in 6.5 because:
+
+1. We consider it a bug in the initial auto-title implementation
+2. CSF3 and the auto-title feature are experimental, and we reserve the right to make breaking changes outside of semver (tho we try to avoid it)
+
+If you want to restore the old titles in the UI, you can customize your sidebar with the following code snippet in `.storybook/manager.js`:
+
+```js
+import { addons } from '@storybook/addons';
+import startCase from 'lodash/startCase';
+
+addons.setConfig({
+  sidebar: {
+    renderLabel: ({ name, type }) => (type === 'story' ? name : startCase(name)),
+  },
+});
+```
+
+#### Auto-title redundant filename
+
+The heuristic failed in the common scenario in which each component gets its own directory, e.g. `atoms/Button/Button.stories.js`, which would result in the redundant title `Atoms/Button/Button`. Alternatively, `atoms/Button/index.stories.js` would result in `Atoms/Button/Index`.
+
+To address this problem, 6.5 introduces a new heuristic to removes the filename if it matches the directory name or `index`. So `atoms/Button/Button.stories.js` and `atoms/Button/index.stories.js` would both result in the title `Atoms/Button` (or `atoms/Button` if `autoTitleFilenameCase` is set, see above).
+
+Since CSF3 is experimental, we are introducing this technically breaking change in a minor release. If you desire the old structure, you can manually specify the title in file. For example:
+
+```js
+// atoms/Button/Button.stories.js
+export default { title: 'Atoms/Button/Button' };
+```
+
+#### Auto-title always prefixes
+
+When the user provides a `prefix` in their `main.js` `stories` field, it now prefixes all titles to matching stories, whereas in 6.4 and earlier it only prefixed auto-titles.
+
+Consider the following example:
+
+```js
+// main.js
+module.exports = {
+  stories: [{ directory: '../src', titlePrefix: 'Custom' }]
+}
+
+// ../src/NoTitle.stories.js
+export default { component: Foo };
+
+// ../src/Title.stories.js
+export default { component: Bar, title: 'Bar' }
+```
+
+In 6.4, the final titles would be:
+
+- `NoTitle.stories.js` => `Custom/NoTitle`
+- `Title.stories.js` => `Bar`
+
+In 6.5, the final titles would be:
+
+- `NoTitle.stories.js` => `Custom/NoTitle`
+- `Title.stories.js` => `Custom/Bar`
+
+<!-- markdown-link-check-disable -->
 ## From version 6.3.x to 6.4.0

 ### Automigrate
@ -201,7 +379,9 @@ For example, if you're in a webpack5 project but still use Storybook's default w
 You can run the existing suite of automigrations to see which ones apply to your project. This won't update any files unless you accept the changes:

 ```
+
 npx sb@next automigrate
+
 ```

 The automigration suite also runs when you create a new project (`sb init`) or when you update storybook (`sb upgrade`).
@ -211,7 +391,9 @@ The automigration suite also runs when you create a new project (`sb init`) or w
 Storybook 6.3 supports CRA5 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to upgrade the configuration. You can do this automatically by running:

 ```
+
 npx sb@next automigrate
+
 ```

 Or you can do the following steps manually to force Storybook to use webpack 5 for building your project:
@ -270,7 +452,7 @@ export default {
  title: 'Components/Atoms/Button',
 };

-// ✅ undefined 6.3 KO / 7.0 OK
+// ✅ undefined 6.3 OK / 7.0 OK
 export default {
  component: Button,
 };
@ -479,8 +661,8 @@ In 6.4 the behavior of loaders when arg changes occurred was tweaked so loaders

 Since SB6.3, Storybook for Angular supports a builder configuration in your project's `angular.json`. This provides an Angular-style configuration for running and building your Storybook. The full builder documentation will be shown in the [main documentation page](https://storybook.js.org/docs/angular) soon, but for now you can check out an example here:

- `start-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78
- `build-storybook`: https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86
+- `start-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L78) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/start-storybook/schema.json)
+- `build-storybook`: [example](https://github.com/storybookjs/storybook/blob/next/examples/angular-cli/angular.json#L86) [schema](https://github.com/storybookjs/storybook/blob/next/app/angular/src/builders/build-storybook/schema.json)

 #### Angular13

@ -519,6 +701,13 @@ If you need storybook-specific styles separate from your app, you can configure
      }
 ```

+Then, once you've set this up, you should run Storybook through the builder:
+
+```sh
+ng run my-default-project:storybook
+ng run my-default-project:build-storybook
+```
+
 #### Angular component parameter removed

 In SB6.3 and earlier, the `default.component` metadata was implemented as a parameter, meaning that stories could set `parameters.component` to override the default export. This was an internal implementation that was never documented, but it was mistakenly used in some Angular examples.
@ -565,7 +754,29 @@ The `--static-dir` flag has been deprecated and will be removed in Storybook 7.0

 ### Webpack 5

-Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so:
+Storybook 6.3 brings opt-in support for building both your project and the manager UI with webpack 5. To do so, there are two ways:
+
+1 - Upgrade command
+
+If you're upgrading your Storybook version, run this command, which will both upgrade your dependencies but also detect whether you should migrate to webpack5 builders and apply the changes automatically:
+
+```shell
+npx sb upgrade
+```
+
+2 - Automigrate command
+
+If you don't want to change your Storybook version but want Storybook to detect whether you should migrate to webpack5 builders and apply the changes automatically:
+
+```shell
+npx sb automigrate
+```
+
+3 - Manually
+
+If either methods did not work or you just want to proceed manually, do the following steps:
+
+Install the dependencies:

 ```shell
 yarn add @storybook/builder-webpack5 @storybook/manager-webpack5 --dev
@ -583,6 +794,8 @@ module.exports = {
 };
 ```

+> NOTE: If you're using `@storybook/preset-create-react-app` make sure to update it to version 4.0.0 as well.
+
 #### Fixing hoisting issues

 ##### Webpack 5 manager build
@ -607,6 +820,17 @@ yarn add webpack@5 --dev
 npm install webpack@5 --save-dev
 ```

+Alternatively or additionally you might need to add a resolution to your package.json to ensure that a consistent webpack version is provided across all of storybook packages. Replacing the {app} with the app (react, vue, etc.) that you're using:
+
+```js
+// package.json
+...
+resolutions: {
+  "@storybook/{app}/webpack": "^5"
+}
+...
+```
+
 ### Angular 12 upgrade

 Storybook 6.3 supports Angular 12 out of the box when you install it fresh. However, if you're upgrading your project from a previous version, you'll need to [follow the steps for opting-in to webpack 5](#webpack-5).
@ -2020,7 +2244,7 @@ Theming has been rewritten in v5. If you used theming in v4, please consult the

 ### Story hierarchy defaults

-Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](./addons/options/README.md).
+Storybook's UI contains a hierarchical tree of stories that can be configured by `hierarchySeparator` and `hierarchyRootSeparator` [options](https://github.com/storybookjs/deprecated-addons/blob/master/MIGRATION.md#options-addon-deprecated).

 In Storybook 4.x the values defaulted to `null` for both of these options, so that there would be no hierarchy by default.

@ -2685,3 +2909,4 @@ If you **are** using these addons, it takes two steps to migrate:
  import { action } from '@storybook/addon-actions';
  import { linkTo } from '@storybook/addon-links';
  ```
+<!-- markdown-link-check-enable -->
--- a/README.md
+++ b/README.md
@ -51,8 +51,8 @@ It allows you to browse a component library, view the different states of each c

 <p align="center">
  View README for:<br/>
-  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest.svg" /></a>
-  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next.svg" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/main/README.md" title="latest"><img alt="latest" src="https://img.shields.io/npm/v/@storybook/core/latest?style=for-the-badge&logo=storybook&logoColor=ffffff&color=ff4785" /></a>
+  <a href="https://github.com/storybookjs/storybook/blob/next/README.md" title="next"><img alt="next" src="https://img.shields.io/npm/v/@storybook/core/next?style=for-the-badge&logo=storybook&logoColor=ffffff&color=purple" /></a>
 </p>

 ## Table of contents
@ -80,7 +80,7 @@ Documentation can be found [Storybook's docs site](https://storybook.js.org/docs

 ### Examples

-Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/docs/react/get-started/examples>
+Here are some featured examples that you can reference to see how Storybook works: <https://storybook.js.org/showcase>

 Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) 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, Android, iOS, and Flutter development for mobile.

@ -92,23 +92,19 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story

 ### Supported Frameworks

-| Framework                                                      | Demo                                                                                        |                                                                                                      |
-| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------- |
-| [React](app/react)                                             | [v6.4.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                 | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                            |
-| [Vue](app/vue)                                                 | [v6.4.x](https://storybookjs.netlify.com/vue-kitchen-sink/)                                 | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                                  |
-| [Angular](app/angular)                                         | [v6.4.x](https://storybookjs.netlify.com/angular-cli/)                                      | [![Angular](https://img.shields.io/npm/dm/@storybook/angular.svg)](app/angular)                      |
-| [Web components](app/web-components)                           | [v6.4.x](https://storybookjs.netlify.com/web-components-kitchen-sink/)                      | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components.svg)](app/web-components)         |
-| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                           | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native)       |
-| [HTML](app/html)                                               | [v6.4.x](https://storybookjs.netlify.com/html-kitchen-sink/)                                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                               |
-| [Ember](app/ember)                                             | [v6.4.x](https://storybookjs.netlify.com/ember-cli/)                                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                            |
-| [Svelte](app/svelte)                                           | [v6.4.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                         |
-| [Preact](app/preact)                                           | [v6.4.x](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                         |
-| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)          |
-| [Mithril](https://github.com/storybookjs/mithril)              | [v6.4.x](https://storybookjs.netlify.com/mithril-kitchen-sink/)                             | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                      |
-| [Marko](https://github.com/storybookjs/marko)                  | [v6.4.x](https://storybookjs.netlify.com/marko-cli/)                                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                            |
-| [Riot](https://github.com/storybookjs/riot)                    | [v6.4.x](https://storybookjs.netlify.com/riot-kitchen-sink/)                                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                               |
-| [Rax](https://github.com/storybookjs/rax)                      | [v6.4.x](https://storybookjs.netlify.com/rax-kitchen-sink/)                                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                                  |
-| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [v6.4.x](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Rax](https://img.shields.io/npm/dm/@storybook/native.svg)](https://github.com/storybookjs/native) |
+| Framework                                                      | Demo                                                                                                                                                                                               |                                                                                                                                                      |
+| -------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [React](app/react)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*)                  | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](app/react)                                                    |
+| [Vue](app/vue)                                                 | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/)                                    | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](app/vue)                                                        |
+| [Angular](app/angular)                                         | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/)                                     | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](app/angular)                                            |
+| [Web components](app/web-components)                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](app/web-components)                               |
+| [React Native](https://github.com/storybookjs/react-native)    | -                                                                                                                                                                                                  | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native)  |
+| [HTML](app/html)                                               | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/)                                  | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](app/html)                                                     |
+| [Ember](app/ember)                                             | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/)                                         | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](app/ember)                                                  |
+| [Svelte](app/svelte)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/)                              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](app/svelte)                                               |
+| [Preact](app/preact)                                           | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/)                              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](app/preact)                                               |
+| [Marionette.js](https://github.com/storybookjs/marionette)     | -                                                                                                                                                                                                  | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette)     |
+| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                    |

 ### Sub Projects

--- a/RELEASES.md
+++ b/RELEASES.md
@ -81,12 +81,11 @@ there gathering upvotes and "me too" comments. We need a way to make sure that
 these bugs get addressed.

 For every non-PATCH release, we nominate a small number of bugs that must be
-addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 3.2 milestone](https://github.com/storybookjs/storybook/milestone/3).
+addressed before a release can go out by adding them to the milestone. For example, here's a list of blocking bugs [for the 6.5 milestone](https://github.com/storybookjs/storybook/milestone/75).

 Adding bugs to the milestone helps people looking for good ways to contribute,
 or to understand what is blocking the release so they can actually do something
-about it. Discussion about which bugs are critical happens in the `#maintenance`
-channel [in our Slack](https://now-examples-slackin-rrirkqohko.now.sh/) [![Storybook Slack](https://now-examples-slackin-rrirkqohko.now.sh/badge.svg)](https://now-examples-slackin-rrirkqohko.now.sh/)
+about it. Discussion about which bugs are critical happens in the [`#maintenance` channel](https://discord.com/channels/486522875931656193/490070912448724992) in our Discord Server

 If you're experiencing a bug, the best way to make sure that it gets attention
 is to upvote it by adding a "thumbs-up" reaction in Github. This way important
@ -114,5 +113,5 @@ in a patch release.
 #### How does my PR get merged?

 - For PATCH PR's, any maintainer can review, test, approve, and merge it.
- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, s/he should clear it with the other maintainers before merging it into the release branch.
+- For MINOR/MAJOR PR's, once a maintainer reviews, tests, and approves it, they should clear it with the other maintainers before merging it into the release branch.
 - Once a release date has been set and we cut off merging, we'll create a temporary branch to hold that release so that it doesn't block merging to `next`.
--- a/SECURITY.md
+++ b/SECURITY.md
@ -2,17 +2,12 @@

 ## Supported Versions

-| Version | Supported          |
-| ------- | ------------------ |
-| 6.x     | :white_check_mark: |
-| 5.3.x   | :white_check_mark: |
+| Version         | Supported          |
+| --------------- | ------------------ |
+| 6.3, 6.4, 6.5   | :white_check_mark: |

 ## Reporting a Vulnerability

-We rely on NPM's security advisory process for reporting vulnerabilities.
-
-You can submit a vulnerability in a Storybook package at: https://www.npmjs.com/advisories/report
-
-You can also reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs
+To report a vulnerability, you can reach out to the maintainers directly on Twitter: https://twitter.com/storybookjs

 When we fix a security issue, we will post a security advisory on Github/NPM, describe the change in the [release notes](https://github.com/storybookjs/storybook/releases), and also announce notify the community on [our Discord](https://discord.gg/storybook).
--- a/mocks/fs-extra.js
+++ b/mocks/fs-extra.js
@ -15,6 +15,7 @@ function __setMockFiles(newMockFiles) {
 const readFile = async (filePath) => mockFiles[filePath];
 const readFileSync = (filePath = '') => mockFiles[filePath];
 const existsSync = (filePath) => !!mockFiles[filePath];
+const readJsonSync = (filePath = '') => JSON.parse(mockFiles[filePath]);
 const lstatSync = (filePath) => ({
  isFile: () => !!mockFiles[filePath],
 });
@ -23,6 +24,7 @@ const lstatSync = (filePath) => ({
 fs.__setMockFiles = __setMockFiles;
 fs.readFile = readFile;
 fs.readFileSync = readFileSync;
+fs.readJsonSync = readJsonSync;
 fs.existsSync = existsSync;
 fs.lstatSync = lstatSync;

--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@ -2,7 +2,7 @@

 This Storybook addon can be helpful to make your UI components more accessible.

-[Framework Support](https://github.com/storybookjs/storybook/blob/main/ADDONS_SUPPORT.md)
+[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)

 ![Screenshot](https://raw.githubusercontent.com/storybookjs/storybook/next/addons/a11y/docs/screenshot.png)

@ -47,7 +47,7 @@ When Axe reports accessibility violations in stories, there are multiple ways to
 At the Story level, override rules using `parameters.a11y.config.rules`.

 ```js
-export const InputWithoutAutofill = () => <input type="text" autofill="nope" />;
+export const InputWithoutAutofill = () => <input type="text" autocomplete="nope" />;

 InputWithoutAutofill.parameters = {
  a11y: {
--- a/addons/a11y/manager.js
+++ b/addons/a11y/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-rc.1",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -45,14 +45,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/channels": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/channels": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "axe-core": "^4.2.0",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -67,8 +67,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -81,7 +81,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Accessibility",
--- a/addons/a11y/preset.js
+++ b/addons/a11y/preset.js
@ -1,13 +0,0 @@
-function managerEntries(entry = []) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('./dist/esm/a11yRunner'),
-    require.resolve('./dist/esm/a11yHighlight'),
-  ];
-}
-
-module.exports = { managerEntries, config };
--- a/addons/a11y/preview.js
+++ b/addons/a11y/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/a11y/register.js
+++ b/addons/a11y/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/a11y/src/a11yRunner.ts
+++ b/addons/a11y/src/a11yRunner.ts
@ -15,11 +15,6 @@ let active = false;
 // Holds latest story we requested a run
 let activeStoryId: string | undefined;

-const getElement = () => {
-  const storyRoot = document.getElementById('story-root');
-  return storyRoot ? storyRoot.childNodes : document.getElementById('root');
-};
-
 /**
 * Handle A11yContext events.
 * Because the event are sent without manual check, we split calls
@ -39,15 +34,16 @@ const run = async (storyId: string) => {
    if (!active) {
      active = true;
      channel.emit(EVENTS.RUNNING);
-      const axe = await import('axe-core');
+      const axe = (await import('axe-core')).default;

-      const { element = getElement(), config, options = {} } = input;
+      const { element = '#root', config, options = {} } = input;
+      const htmlElement = document.querySelector(element);
      axe.reset();
      if (config) {
        axe.configure(config);
      }

-      const result = await axe.run(element, options);
+      const result = await axe.run(htmlElement, options);
      // It's possible that we requested a new run on a different story.
      // Unfortunately, axe doesn't support a cancel method to abort current run.
      // We check if the story we run against is still the current one,
--- a/addons/a11y/src/addDecorator.ts
+++ b/addons/a11y/src/addDecorator.ts
@ -1,3 +0,0 @@
-import { withA11y } from '.';
-
-export const decorators = [withA11y];
--- a/addons/a11y/src/components/A11YPanel.test.tsx
+++ b/addons/a11y/src/components/A11YPanel.test.tsx
@ -63,6 +63,7 @@ describe('A11YPanel', () => {
    mockedApi.useStorybookState.mockReset();
    mockedApi.useAddonState.mockReset();

+    mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
    mockedApi.useChannel.mockReturnValue(jest.fn());
    mockedApi.useParameter.mockReturnValue({ manual: false });
    const state: Partial<api.State> = { storyId: 'jest' };
--- a/addons/a11y/src/components/A11YPanel.tsx
+++ b/addons/a11y/src/components/A11YPanel.tsx
@ -94,9 +94,10 @@ export const A11YPanel: React.FC = () => {
    emit(EVENTS.MANUAL, storyId);
  }, [storyId]);

-  const manualActionItems = useMemo(() => [{ title: 'Run test', onClick: handleManual }], [
-    handleManual,
-  ]);
+  const manualActionItems = useMemo(
+    () => [{ title: 'Run test', onClick: handleManual }],
+    [handleManual]
+  );
  const readyActionItems = useMemo(
    () => [
      {
--- a/addons/a11y/src/components/A11yContext.test.tsx
+++ b/addons/a11y/src/components/A11yContext.test.tsx
@ -53,11 +53,13 @@ describe('A11YPanel', () => {
  beforeEach(() => {
    mockedApi.useChannel.mockReset();
    mockedApi.useStorybookState.mockReset();
+    mockedApi.useAddonState.mockReset();

+    mockedApi.useAddonState.mockImplementation((_, defaultState) => React.useState(defaultState));
    mockedApi.useChannel.mockReturnValue(jest.fn());
-    const state: Partial<api.State> = { storyId };
+    const storyState: Partial<api.State> = { storyId };
    // Lazy to mock entire state
-    mockedApi.useStorybookState.mockReturnValue(state as any);
+    mockedApi.useStorybookState.mockReturnValue(storyState as any);
  });

  it('should render children', () => {
--- a/addons/a11y/src/components/A11yContext.tsx
+++ b/addons/a11y/src/components/A11yContext.tsx
@ -1,11 +1,11 @@
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
 import { Result } from 'axe-core';
-import { useChannel, useStorybookState } from '@storybook/api';
+import { useChannel, useStorybookState, useAddonState } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
-import { EVENTS } from '../constants';
+import { ADDON_ID, EVENTS } from '../constants';

-interface Results {
+export interface Results {
  passes: Result[];
  violations: Result[];
  incomplete: Result[];
@ -52,7 +52,7 @@ const defaultResult = {
 };

 export const A11yContextProvider: React.FC<A11yContextProviderProps> = ({ active, ...props }) => {
-  const [results, setResults] = React.useState<Results>(defaultResult);
+  const [results, setResults] = useAddonState<Results>(ADDON_ID, defaultResult);
  const [tab, setTab] = React.useState(0);
  const [highlighted, setHighlighted] = React.useState<string[]>([]);
  const { storyId } = useStorybookState();
--- a/addons/a11y/src/components/Report/Rules.tsx
+++ b/addons/a11y/src/components/Report/Rules.tsx
@ -10,8 +10,8 @@ const List = styled.div({
  paddingBottom: 4,
  paddingRight: 4,
  paddingTop: 4,
-  fontWeight: '400',
-} as any);
+  fontWeight: 400,
+});

 const Item = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
  const maxWidthBeforeBreak = 407;
--- a/addons/a11y/src/components/VisionSimulator.test.tsx
+++ b/addons/a11y/src/components/VisionSimulator.test.tsx
@ -0,0 +1,69 @@
+import React from 'react';
+import { render, fireEvent, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider, themes, convert } from '@storybook/theming';
+import { VisionSimulator, baseList } from './VisionSimulator';
+
+const getOptionByNameAndPercentage = (option: string, percentage: number) =>
+  screen.getByText(
+    (content, element) =>
+      content !== '' &&
+      element.textContent === option &&
+      (percentage === undefined || element.nextSibling.textContent === `${percentage}% of users`)
+  );
+
+function ThemedVisionSimulator() {
+  return (
+    <ThemeProvider theme={convert(themes.light)}>
+      <VisionSimulator />
+    </ThemeProvider>
+  );
+}
+
+describe('Vision Simulator', () => {
+  it('should render tool button', async () => {
+    // when
+    render(<ThemedVisionSimulator />);
+
+    // then
+    // waitFor because WithTooltip is a lazy component
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+  });
+
+  it.skip('should display tooltip on click', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+
+    // when
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+
+    // then
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+    baseList.forEach(({ name, percentage }) =>
+      expect(getOptionByNameAndPercentage(name, percentage)).toBeInTheDocument()
+    );
+  });
+
+  it.skip('should set filter', async () => {
+    // given
+    render(<ThemedVisionSimulator />);
+    await waitFor(() => expect(screen.getByTitle('Vision simulator')).toBeInTheDocument());
+    userEvent.click(screen.getByRole('button', { name: 'Vision simulator' }));
+    await waitFor(() => expect(screen.getByText('blurred vision')).toBeInTheDocument());
+
+    // when
+    fireEvent.click(screen.getByText('blurred vision'));
+
+    // then
+    // eslint-disable-next-line no-undef
+    const rule = Object.values(document.styleSheets)
+      .filter(({ cssRules }) => cssRules)
+      .map(({ cssRules }) => Object.values(cssRules))
+      .flat()
+      .find((cssRule: CSSRule) => cssRule.selectorText === '#storybook-preview-iframe');
+
+    expect(rule).toBeDefined();
+    expect(rule.style.filter).toBe('blur(2px)');
+  });
+});
--- a/addons/a11y/src/components/VisionSimulator.tsx
+++ b/addons/a11y/src/components/VisionSimulator.tsx
@ -1,4 +1,4 @@
-import React, { FunctionComponent, ReactNode, useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

@ -6,32 +6,37 @@ import { Filters } from './ColorFilters';

 const iframeId = 'storybook-preview-iframe';

-const baseList = [
-  'blurred vision',
-  'deuteranomaly',
-  'deuteranopia',
-  'protanomaly',
-  'protanopia',
-  'tritanomaly',
-  'tritanopia',
-  'achromatomaly',
-  'achromatopsia',
-  'grayscale',
-] as const;
+interface Option {
+  name: string;
+  percentage?: number;
+}

-type Filter = typeof baseList[number] | null;
+export const baseList = [
+  { name: 'blurred vision', percentage: 22.9 },
+  { name: 'deuteranomaly', percentage: 2.7 },
+  { name: 'deuteranopia', percentage: 0.56 },
+  { name: 'protanomaly', percentage: 0.66 },
+  { name: 'protanopia', percentage: 0.59 },
+  { name: 'tritanomaly', percentage: 0.01 },
+  { name: 'tritanopia', percentage: 0.016 },
+  { name: 'achromatomaly', percentage: 0.00001 },
+  { name: 'achromatopsia', percentage: 0.0001 },
+  { name: 'grayscale' },
+] as Option[];

-const getFilter = (filter: Filter) => {
-  if (!filter) {
+type Filter = Option | null;
+
+const getFilter = (filterName: string) => {
+  if (!filterName) {
    return 'none';
  }
-  if (filter === 'blurred vision') {
+  if (filterName === 'blurred vision') {
    return 'blur(2px)';
  }
-  if (filter === 'grayscale') {
+  if (filterName === 'grayscale') {
    return 'grayscale(100%)';
  }
-  return `url('#${filter}')`;
+  return `url('#${filterName}')`;
 };

 const Hidden = styled.div(() => ({
@ -42,7 +47,7 @@ const Hidden = styled.div(() => ({
  },
 }));

-const ColorIcon = styled.span<{ filter: Filter }>(
+const ColorIcon = styled.span<{ filter: string }>(
  {
    background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
    borderRadius: '1rem',
@ -66,6 +71,20 @@ export interface Link {
  onClick: () => void;
 }

+const Column = styled.span({
+  display: 'flex',
+  flexDirection: 'column',
+});
+
+const Title = styled.span({
+  textTransform: 'capitalize',
+});
+
+const Description = styled.span(({ theme }) => ({
+  fontSize: 11,
+  color: theme.textMutedColor,
+}));
+
 const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
  ...(active !== null
    ? [
@ -80,27 +99,34 @@ const getColorList = (active: Filter, set: (i: Filter) => void): Link[] => [
        },
      ]
    : []),
-  ...baseList.map((i) => ({
-    id: i,
-    title: i.charAt(0).toUpperCase() + i.slice(1),
-    onClick: () => {
-      set(i);
-    },
-    right: <ColorIcon filter={i} />,
-    active: active === i,
-  })),
+  ...baseList.map((i) => {
+    const description = i.percentage !== undefined ? `${i.percentage}% of users` : undefined;
+    return {
+      id: i.name,
+      title: (
+        <Column>
+          <Title>{i.name}</Title>
+          {description && <Description>{description}</Description>}
+        </Column>
+      ),
+      onClick: () => {
+        set(i);
+      },
+      right: <ColorIcon filter={i.name} />,
+      active: active === i,
+    };
+  }),
 ];

-export const VisionSimulator: FunctionComponent = () => {
+export const VisionSimulator = () => {
  const [filter, setFilter] = useState<Filter>(null);
-
  return (
    <>
      {filter && (
        <Global
          styles={{
            [`#${iframeId}`]: {
-              filter: getFilter(filter),
+              filter: getFilter(filter.name),
            },
          }}
        />
--- a/addons/a11y/src/index.ts
+++ b/addons/a11y/src/index.ts
@ -1,4 +1,4 @@
-import { AnyFramework, DecoratorFunction } from '@storybook/csf';
+import type { AnyFramework, DecoratorFunction } from '@storybook/csf';
 import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';

--- a/addons/a11y/src/manager.test.tsx
+++ b/addons/a11y/src/manager.test.tsx
@ -0,0 +1,55 @@
+import { addons } from '@storybook/addons';
+import * as api from '@storybook/api';
+import { PANEL_ID } from './constants';
+import './manager';
+
+jest.mock('@storybook/api');
+jest.mock('@storybook/addons');
+const mockedApi = api as unknown as jest.Mocked<api.API>;
+mockedApi.getAddonState = jest.fn();
+const mockedAddons = addons as jest.Mocked<typeof addons>;
+const registrationImpl = mockedAddons.register.mock.calls[0][1];
+
+describe('A11yManager', () => {
+  it('should register the panels', () => {
+    // when
+    registrationImpl(mockedApi);
+
+    // then
+    expect(mockedAddons.add.mock.calls).toHaveLength(2);
+    expect(mockedAddons.add).toHaveBeenCalledWith(PANEL_ID, expect.anything());
+
+    const panel = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel');
+    const tool = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'tool');
+    expect(panel).toBeDefined();
+    expect(tool).toBeDefined();
+  });
+
+  it('should compute title with no issues', () => {
+    // given
+    mockedApi.getAddonState.mockImplementation(() => undefined);
+    registrationImpl(api as unknown as api.API);
+    const title = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel').title as Function;
+
+    // when / then
+    expect(title()).toBe('Accessibility');
+  });
+
+  it('should compute title with issues', () => {
+    // given
+    mockedApi.getAddonState.mockImplementation(() => ({ violations: [{}], incomplete: [{}, {}] }));
+    registrationImpl(mockedApi);
+    const title = mockedAddons.add.mock.calls
+      .map(([_, def]) => def)
+      .find(({ type }) => type === 'panel').title as Function;
+
+    // when / then
+    expect(title()).toBe('Accessibility (3)');
+  });
+});
--- a/addons/a11y/src/register.tsx
+++ b/addons/a11y/src/register.tsx
@ -3,9 +3,9 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
-import { A11yContextProvider } from './components/A11yContext';
+import { A11yContextProvider, Results } from './components/A11yContext';

-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
    title: '',
    type: types.TOOL,
@ -14,7 +14,13 @@ addons.register(ADDON_ID, () => {
  });

  addons.add(PANEL_ID, {
-    title: 'Accessibility',
+    title() {
+      const addonState: Results = api?.getAddonState(ADDON_ID);
+      const violationsNb = addonState?.violations?.length || 0;
+      const incompleteNb = addonState?.incomplete?.length || 0;
+      const totalNb = violationsNb + incompleteNb;
+      return totalNb !== 0 ? `Accessibility (${totalNb})` : 'Accessibility';
+    },
    type: types.PANEL,
    render: ({ active = true, key }) => (
      <A11yContextProvider key={key} active={active}>
--- a/addons/a11y/src/preview.tsx
+++ b/addons/a11y/src/preview.tsx
@ -0,0 +1,2 @@
+import './a11yRunner';
+import './a11yHighlight';
--- a/addons/a11y/tsconfig.json
+++ b/addons/a11y/tsconfig.json
@ -2,7 +2,10 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
-    "types": ["webpack-env", "jest"],
+    "types": [
+      "webpack-env",
+      "jest"
+    ],
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noUnusedLocals": true,
@ -10,7 +13,9 @@
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true
  },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
  "exclude": [
    "src/**/*.test.*",
    "src/**/tests/**/*",
@ -19,4 +24,4 @@
    "src/**/*.mockdata.*",
    "src/**/__testfixtures__/**"
  ]
-}
+}
--- a/addons/actions/manager.js
+++ b/addons/actions/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-rc.1",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -41,21 +41,22 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
-    "polished": "^4.0.5",
+    "polished": "^4.2.2",
    "prop-types": "^15.7.2",
    "react-inspector": "^5.1.0",
    "regenerator-runtime": "^0.13.7",
-    "telejson": "^5.3.3",
+    "telejson": "^6.0.8",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2",
    "uuid-browser": "^3.1.0"
@ -65,8 +66,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -79,7 +80,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Actions",
--- a/addons/actions/preset.js
+++ b/addons/actions/preset.js
@ -1,16 +0,0 @@
-function managerEntries(entry, options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], { addDecorator = true } = {}) {
-  const actionConfig = [];
-  if (addDecorator) {
-    actionConfig.push(require.resolve('./dist/esm/preset/addDecorator'));
-  }
-  return [...entry, ...actionConfig, require.resolve('./dist/esm/preset/addArgs')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/actions/preview.js
+++ b/addons/actions/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preset/preview';
--- a/addons/actions/register.js
+++ b/addons/actions/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/actions/src/components/ActionLogger/index.tsx
+++ b/addons/actions/src/components/ActionLogger/index.tsx
@ -1,5 +1,6 @@
 import React, { Fragment } from 'react';
-import { styled, withTheme, Theme } from '@storybook/theming';
+import { styled, withTheme } from '@storybook/theming';
+import type { Theme } from '@storybook/theming';

 import Inspector from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';
--- a/addons/actions/src/register.tsx
+++ b/addons/actions/src/register.tsx
--- a/addons/actions/src/preset/addArgsHelpers.test.ts
+++ b/addons/actions/src/preset/addArgsHelpers.test.ts
@ -1,4 +1,4 @@
-import { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/addons';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';

 describe('actions parameter enhancers', () => {
@ -7,11 +7,11 @@ describe('actions parameter enhancers', () => {
    const argTypes = { onClick: {}, onFocus: {}, somethingElse: {} };

    it('should add actions that match a pattern', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
        initialArgs: {},
        argTypes,
        parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
      expect(args).toEqual({
        onClick: expect.any(Function),
        onFocus: expect.any(Function),
@ -19,41 +19,50 @@ describe('actions parameter enhancers', () => {
    });

    it('should NOT override pre-existing args', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
        initialArgs: { onClick: 'pre-existing value' },
        argTypes,
        parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
      expect(args).toEqual({ onFocus: expect.any(Function) });
    });

    it('should NOT override pre-existing args, if null', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
        initialArgs: { onClick: null },
        argTypes,
        parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
      expect(args).toEqual({ onFocus: expect.any(Function) });
    });

    it('should override pre-existing args, if undefined', () => {
-      const args = inferActionsFromArgTypesRegex(({
-        initialArgs: { onClick: undefined },
+      const args = inferActionsFromArgTypesRegex({
+        initialArgs: {},
        argTypes,
        parameters,
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
      expect(args).toEqual({ onClick: expect.any(Function), onFocus: expect.any(Function) });
    });

+    it('should NOT override pre-existing args, if set undefined on purpose', () => {
+      const args = inferActionsFromArgTypesRegex({
+        initialArgs: { onClick: undefined },
+        argTypes,
+        parameters,
+      } as unknown as StoryContext);
+      expect(args).toEqual({ onClick: undefined, onFocus: expect.any(Function) });
+    });
+
    it('should do nothing if actions are disabled', () => {
-      const args = inferActionsFromArgTypesRegex(({
+      const args = inferActionsFromArgTypesRegex({
        initialArgs: {},
        argTypes,
        parameters: {
          ...parameters,
          actions: { ...parameters.actions, disable: true },
        },
-      } as unknown) as StoryContext);
+      } as unknown as StoryContext);
      expect(args).toEqual({});
    });
  });
@ -65,11 +74,11 @@ describe('actions parameter enhancers', () => {
    };
    it('should add actions based on action.args', () => {
      expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
          initialArgs: {},
          argTypes,
          parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
      ).toEqual({
        onClick: expect.any(Function),
        onBlur: expect.any(Function),
@ -78,41 +87,51 @@ describe('actions parameter enhancers', () => {

    it('should NOT override pre-existing args', () => {
      expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
          argTypes: { onClick: { action: 'clicked!' } },
          initialArgs: { onClick: 'pre-existing value' },
          parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
      ).toEqual({});
    });

    it('should NOT override pre-existing args, if null', () => {
      expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
          argTypes: { onClick: { action: 'clicked!' } },
          initialArgs: { onClick: null },
          parameters: {},
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
      ).toEqual({});
    });

    it('should override pre-existing args, if undefined', () => {
      expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
+          argTypes: { onClick: { action: 'clicked!' } },
+          initialArgs: {},
+          parameters: {},
+        } as unknown as StoryContext)
+      ).toEqual({ onClick: expect.any(Function) });
+    });
+
+    it('should NOT override pre-existing args, if set undefined on purpose', () => {
+      expect(
+        addActionsFromArgTypes({
          argTypes: { onClick: { action: 'clicked!' } },
          initialArgs: { onClick: undefined },
          parameters: {},
-        } as unknown) as StoryContext)
-      ).toEqual({ onClick: expect.any(Function) });
+        } as unknown as StoryContext)
+      ).toEqual({ onClick: undefined });
    });

    it('should do nothing if actions are disabled', () => {
      expect(
-        addActionsFromArgTypes(({
+        addActionsFromArgTypes({
          initialArgs: {},
          argTypes,
          parameters: { actions: { disable: true } },
-        } as unknown) as StoryContext)
+        } as unknown as StoryContext)
      ).toEqual({});
    });
  });
--- a/addons/actions/src/preset/addArgsHelpers.ts
+++ b/addons/actions/src/preset/addArgsHelpers.ts
@ -1,5 +1,4 @@
-import { Args } from '@storybook/addons';
-import { AnyFramework, ArgsEnhancer } from '@storybook/csf';
+import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/csf';
 import { action } from '../index';

 // interface ActionsParameter {
@ -7,6 +6,9 @@ import { action } from '../index';
 //   argTypesRegex?: RegExp;
 // }

+const isInInitialArgs = (name: string, initialArgs: Args) =>
+  typeof initialArgs[name] === 'undefined' && !(name in initialArgs);
+
 /**
 * Automatically add action args for argTypes whose name
 * matches a regex, such as `^on.*` for react-style `onClick` etc.
@ -28,7 +30,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (contex
  );

  return argTypesMatchingRegex.reduce((acc, [name, argType]) => {
-    if (typeof initialArgs[name] === 'undefined') {
+    if (isInInitialArgs(name, initialArgs)) {
      acc[name] = action(name);
    }
    return acc;
@ -51,7 +53,7 @@ export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
  const argTypesWithAction = Object.entries(argTypes).filter(([name, argType]) => !!argType.action);

  return argTypesWithAction.reduce((acc, [name, argType]) => {
-    if (typeof initialArgs[name] === 'undefined') {
+    if (isInInitialArgs(name, initialArgs)) {
      acc[name] = action(typeof argType.action === 'string' ? argType.action : name);
    }
    return acc;
--- a/addons/actions/src/preset/preview.tsx
+++ b/addons/actions/src/preset/preview.tsx
@ -0,0 +1,2 @@
+export * from './addDecorator';
+export * from './addArgs';
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@ -25,7 +25,7 @@ const serializeArg = <T>(a: T) => {
    );
    e.persist();
    const viewDescriptor = Object.getOwnPropertyDescriptor(e, 'view');
-    // dont send the entire window object over.
+    // don't send the entire window object over.
    const view: unknown = viewDescriptor?.value;
    if (typeof view === 'object' && view?.constructor.name === 'Window') {
      Object.defineProperty(e, 'view', {
--- a/addons/actions/tsconfig.json
+++ b/addons/actions/tsconfig.json
@ -2,9 +2,14 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
-    "types": ["webpack-env", "jest"]
+    "types": [
+      "webpack-env",
+      "jest"
+    ]
  },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
  "exclude": [
    "src/**/*.test.*",
    "src/**/tests/**/*",
@ -13,4 +18,4 @@
    "src/**/*.mockdata.*",
    "src/**/__testfixtures__/**"
  ]
-}
+}
--- a/addons/backgrounds/manager.js
+++ b/addons/backgrounds/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-rc.1",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -45,13 +45,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -63,8 +63,8 @@
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -77,7 +77,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Backgrounds",
--- a/addons/backgrounds/preset.js
+++ b/addons/backgrounds/preset.js
@ -1,16 +0,0 @@
-function config(entry = []) {
-  return [
-    ...entry,
-    require.resolve('./dist/esm/preset/addDecorator'),
-    require.resolve('./dist/esm/preset/addParameter'),
-  ];
-}
-
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/backgrounds/preview.js
+++ b/addons/backgrounds/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/backgrounds/register.js
+++ b/addons/backgrounds/register.js
@ -1 +1,6 @@
-require('./dist/esm/register');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/backgrounds/src/decorators/index.ts
+++ b/addons/backgrounds/src/decorators/index.ts
@ -1,2 +0,0 @@
-export * from './withBackground';
-export * from './withGrid';
--- a/addons/backgrounds/src/decorators/withBackground.ts
+++ b/addons/backgrounds/src/decorators/withBackground.ts
@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';

 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
--- a/addons/backgrounds/src/decorators/withGrid.ts
+++ b/addons/backgrounds/src/decorators/withGrid.ts
@ -1,7 +1,7 @@
 import dedent from 'ts-dedent';
 import deprecate from 'util-deprecate';
 import { useMemo, useEffect } from '@storybook/addons';
-import { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';

 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
--- a/addons/backgrounds/src/preset/addDecorator.tsx
+++ b/addons/backgrounds/src/preset/addDecorator.tsx
@ -1,3 +0,0 @@
-import { withGrid, withBackground } from '../decorators';
-
-export const decorators = [withGrid, withBackground];
--- a/addons/backgrounds/src/preset/addParameter.tsx
+++ b/addons/backgrounds/src/preset/addParameter.tsx
@ -1,3 +1,7 @@
+import { withBackground } from './decorators/withBackground';
+import { withGrid } from './decorators/withGrid';
+
+export const decorators = [withGrid, withBackground];
 export const parameters = {
  backgrounds: {
    grid: {
--- a/addons/backgrounds/tsconfig.json
+++ b/addons/backgrounds/tsconfig.json
@ -2,7 +2,9 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
-    "types": ["webpack-env"]
+    "types": [
+      "webpack-env"
+    ]
  },
  "include": [
    "src/**/*"
@ -15,4 +17,4 @@
    "src/**/*.mockdata.*",
    "src/**/__testfixtures__/**"
  ]
-}
+}
--- a/addons/controls/README.md
+++ b/addons/controls/README.md
@ -48,7 +48,7 @@ If you are somehow tied to knobs or prefer the knobs interface, we are happy to

 ### How do I migrate from addon-knobs?

-If you're already using [Storybook Knobs](https://github.com/storybookjs/storybook/tree/main/addons/knobs) you should consider migrating to Controls.
+If you're already using [Storybook Knobs](https://github.com/storybookjs/addon-knobs) you should consider migrating to Controls.

 You're probably using it for something that can be satisfied by one of the cases [described above](#writing-stories).

--- a/addons/controls/manager.js
+++ b/addons/controls/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-rc.1",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -25,8 +25,8 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/register.js",
-  "module": "dist/esm/register.js",
+  "main": "dist/cjs/manager.js",
+  "module": "dist/esm/manager.js",
  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
@ -45,22 +45,22 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.5.0-alpha.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core-common": "6.5.0-alpha.3",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/node-logger": "6.5.0-alpha.3",
-    "@storybook/store": "6.5.0-alpha.3",
-    "@storybook/theming": "6.5.0-alpha.3",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/client-logger": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
    "core-js": "^3.8.2",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
  "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
    "react": {
@ -73,8 +73,8 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
-  "sbmodern": "dist/modern/register.js",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
+  "sbmodern": "dist/modern/manager.js",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/addons/controls/preset.js
+++ b/addons/controls/preset.js
@ -1,8 +0,0 @@
-function managerEntries(entry = [], options) {
-  // eslint-disable-next-line global-require
-  const { checkDocsLoaded } = require('./dist/cjs/preset/checkDocsLoaded');
-  checkDocsLoaded(options.configDir);
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-module.exports = { managerEntries };
--- a/addons/controls/register.js
+++ b/addons/controls/register.js
@ -1 +1,6 @@
-import './dist/esm/register';
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/controls/src/ControlsPanel.tsx
+++ b/addons/controls/src/ControlsPanel.tsx
@ -1,5 +1,12 @@
 import React, { FC } from 'react';
-import { ArgTypes, useArgs, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
+import {
+  ArgTypes,
+  useArgs,
+  useGlobals,
+  useArgTypes,
+  useParameter,
+  useStorybookState,
+} from '@storybook/api';
 import { ArgsTable, NoControlsWarning, PresetColor, SortType } from '@storybook/components';

 import { PARAM_KEY } from './constants';
@ -13,6 +20,7 @@ interface ControlsParameters {

 export const ControlsPanel: FC = () => {
  const [args, updateArgs, resetArgs] = useArgs();
+  const [globals] = useGlobals();
  const rows = useArgTypes();
  const isArgsStory = useParameter<boolean>('__isArgsStory', false);
  const {
@ -41,6 +49,7 @@ export const ControlsPanel: FC = () => {
          compact: !expanded && hasControls,
          rows: withPresetColors,
          args,
+          globals,
          updateArgs,
          resetArgs,
          inAddonPanel: true,
--- a/addons/controls/src/register.tsx
+++ b/addons/controls/src/register.tsx
--- a/addons/controls/src/preset/checkDocsLoaded.ts
+++ b/addons/controls/src/preset/checkDocsLoaded.ts
@ -1,4 +1,4 @@
-import { checkAddonOrder } from '@storybook/core-common';
+import { checkAddonOrder, serverRequire } from '@storybook/core-common';
 import path from 'path';

 export const checkDocsLoaded = (configDir: string) => {
@ -14,6 +14,6 @@ export const checkDocsLoaded = (configDir: string) => {
    configFile: path.isAbsolute(configDir)
      ? path.join(configDir, 'main')
      : path.join(process.cwd(), configDir, 'main'),
-    getConfig: (configFile) => import(configFile),
+    getConfig: (configFile) => serverRequire(configFile),
  });
 };
--- a/addons/controls/tsconfig.json
+++ b/addons/controls/tsconfig.json
@ -2,9 +2,15 @@
  "extends": "../../tsconfig.json",
  "compilerOptions": {
    "rootDir": "./src",
-    "types": ["webpack-env", "jest", "node"]
+    "types": [
+      "webpack-env",
+      "jest",
+      "node"
+    ]
  },
-  "include": ["src/**/*"],
+  "include": [
+    "src/**/*"
+  ],
  "exclude": [
    "src/**/*.test.*",
    "src/**/tests/**/*",
@ -13,4 +19,4 @@
    "src/**/*.mockdata.*",
    "src/**/__testfixtures__/**"
  ]
-}
+}
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -77,19 +77,10 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor

 ## Framework 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:
+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. The following page captures the current state of support:
+
+[Framework Support](https://storybook.js.org/docs/react/api/frameworks-feature-support)

-|                   | React | Vue | Angular | Ember | Web Components | Marko | HTML | Svelte | Preact | Riot | Mithril | Marko |
-| ----------------- | :---: | :-: | :-----: | :---: | :------------: | :---: | :--: | :----: | :----: | :--: | :-----: | :---: |
-| MDX stories       |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
-| CSF stories       |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
-| StoriesOf stories |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
-| Source            |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
-| Notes / Info      |   +   |  +  |    +    |   +   |       +        |  WIP  |  +   |   +    |   +    |  +   |    +    |   +   |
-| Props table       |   +   |  +  |    +    |   +   |       +        |  WIP  |      |        |        |      |         |       |
-| Props controls    |   +   |  +  |    +    |       |                |  WIP  |      |        |        |      |         |       |
-| Description       |   +   |  +  |    +    |   +   |       +        |  WIP  |      |        |        |      |         |       |
-| Inline stories    |   +   |  +  |    +    |       |       +        |  WIP  |  +   |        |        |      |         |       |

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

--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@ -210,12 +210,6 @@ And for `MDX` you can modify it as an attribute on the `Story` element:

 Storybook Docs renders all Angular stories inside IFrames by default. But it is possible to use an inline rendering:

-To get this, you'll first need to install Angular elements:
-
-```sh
-yarn add -D @angular/elements @webcomponents/custom-elements
-```
-
 Then update `.storybook/preview.js`:

 ```js
--- a/addons/docs/angular/index.d.ts
+++ b/addons/docs/angular/index.d.ts
@ -1 +1 @@
-export * from '../dist/ts3.9/frameworks/angular/index.d';
+export declare const setCompodocJson: (compodocJson: any) => void;
--- a/addons/docs/angular/index.js
+++ b/addons/docs/angular/index.js
@ -1 +1,7 @@
-module.exports = require('../dist/esm/frameworks/angular/index');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setCompodocJson = (compodocJson) => {
+  // @ts-ignore
+  window.__STORYBOOK_COMPODOC_JSON__ = compodocJson;
+};
--- a/addons/docs/common-preset.js
+++ b/addons/docs/common-preset.js
@ -1,19 +0,0 @@
-function managerEntries(entry = [], options) {
-  return [...entry, require.resolve('./dist/esm/register')];
-}
-
-function config(entry = [], options = {}) {
-  const { framework } = options;
-  const docsConfig = [require.resolve('./dist/esm/frameworks/common/config')];
-  try {
-    docsConfig.push(require.resolve(`./dist/esm/frameworks/${framework}/config`));
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-  }
-  return [...docsConfig, ...entry];
-}
-
-module.exports = {
-  managerEntries,
-  config,
-};
--- a/addons/docs/docs/faq.md
+++ b/addons/docs/docs/faq.md
@ -9,7 +9,7 @@ You've read the [Storybook Docs README](../README.md). You're already familiar w

 ## Does Docs support framework X?

-Docs does not currently support [React Native](https://github.com/storybooks/storybook/tree/next/app/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.
+Docs does not currently support [React Native](https://github.com/storybookjs/react-native). Otherwise, [it supports all frameworks that Storybook supports](../README.md#framework-support), including React, Vue, Angular, Ember, Svelte, and others.

 ## How does Docs interact with existing addons?

--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@ -106,7 +106,7 @@ The input is the story function and the story context (id, parameters, args, etc

 ## Dynamic source rendering

-With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function. 
+With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function.

 This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.

@ -151,7 +151,7 @@ import { jsxDecorator } from './jsxDecorator';
 export const decorators = [jsxDecorator];
 ```

-This configures the `jsxDecorator` to be run on every story. 
+This configures the `jsxDecorator` to be run on every story.

 <div class="aside">
 To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .
--- a/addons/docs/ember/index.js
+++ b/addons/docs/ember/index.js
@ -1 +1,6 @@
-module.exports = require('../dist/esm/frameworks/ember');
+/* eslint-disable no-underscore-dangle */
+/* global window */
+
+export const setJSONDoc = (jsondoc) => {
+  window.__EMBER_GENERATED_DOC_JSON__ = jsondoc;
+};
--- a/addons/docs/jest-transform-mdx.js
+++ b/addons/docs/jest-transform-mdx.js
@ -1,11 +1,8 @@
 const path = require('path');
-const mdx = require('@mdx-js/mdx');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');

-const { createCompiler } = require('@storybook/csf-tools/mdx');
-
-const compilers = [createCompiler({})];
+const { compileSync } = require('@storybook/mdx1-csf');

 module.exports = {
  process(src, filename, config, { instrument }) {
@ -13,7 +10,7 @@ module.exports = {
      /* @jsx mdx */
      import React from 'react'
      import { mdx } from '@mdx-js/react'
-      ${mdx.sync(src, { compilers, filepath: filename })}
+      ${compileSync(src, { filepath: filename })}
    `;

    const extension = path.extname(filename);
--- a/addons/docs/manager.js
+++ b/addons/docs/manager.js
@ -0,0 +1 @@
+import './dist/esm/manager';
--- a/addons/docs/mdx-compiler-plugin.js
+++ b/addons/docs/mdx-compiler-plugin.js
@ -1 +1 @@
-module.exports = require('@storybook/csf-tools/mdx').createCompiler;
+module.exports = require('@storybook/mdx1-csf').createCompiler;
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.5.0-alpha.3",
+  "version": "6.5.0-rc.1",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -40,6 +40,7 @@
    "common/**/*",
    "ember/**/*",
    "html/**/*",
+    "svelte/**/*",
    "postinstall/**/*",
    "react/**/*",
    "vue/**/*",
@ -54,47 +55,29 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@babel/core": "^7.12.10",
-    "@babel/generator": "^7.12.11",
-    "@babel/parser": "^7.12.11",
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "@babel/preset-env": "^7.12.11",
    "@jest/transform": "^26.6.2",
-    "@mdx-js/loader": "^1.6.22",
-    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.5.0-alpha.3",
-    "@storybook/api": "6.5.0-alpha.3",
-    "@storybook/builder-webpack4": "6.5.0-alpha.3",
-    "@storybook/client-logger": "6.5.0-alpha.3",
-    "@storybook/components": "6.5.0-alpha.3",
-    "@storybook/core": "6.5.0-alpha.3",
-    "@storybook/core-events": "6.5.0-alpha.3",
-    "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/csf-tools": "6.5.0-alpha.3",
-    "@storybook/node-logger": "6.5.0-alpha.3",
-    "@storybook/postinstall": "6.5.0-alpha.3",
-    "@storybook/preview-web": "6.5.0-alpha.3",
-    "@storybook/source-loader": "6.5.0-alpha.3",
-    "@storybook/store": "6.5.0-alpha.3",
-    "@storybook/theming": "6.5.0-alpha.3",
-    "acorn": "^7.4.1",
-    "acorn-jsx": "^5.3.1",
-    "acorn-walk": "^7.2.0",
+    "@storybook/addons": "6.5.0-rc.1",
+    "@storybook/api": "6.5.0-rc.1",
+    "@storybook/components": "6.5.0-rc.1",
+    "@storybook/core-common": "6.5.0-rc.1",
+    "@storybook/core-events": "6.5.0-rc.1",
+    "@storybook/csf": "0.0.2--canary.4566f4d.1",
+    "@storybook/docs-tools": "6.5.0-rc.1",
+    "@storybook/mdx1-csf": "^0.0.1",
+    "@storybook/node-logger": "6.5.0-rc.1",
+    "@storybook/postinstall": "6.5.0-rc.1",
+    "@storybook/preview-web": "6.5.0-rc.1",
+    "@storybook/source-loader": "6.5.0-rc.1",
+    "@storybook/store": "6.5.0-rc.1",
+    "@storybook/theming": "6.5.0-rc.1",
+    "babel-loader": "^8.0.0",
    "core-js": "^3.8.2",
-    "doctrine": "^3.0.0",
-    "escodegen": "^2.0.0",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
-    "html-tags": "^3.1.0",
-    "js-string-escape": "^1.0.1",
-    "loader-utils": "^2.0.0",
    "lodash": "^4.17.21",
-    "nanoid": "^3.1.23",
-    "p-limit": "^3.1.0",
-    "prettier": "^2.2.1",
-    "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.4",
    "regenerator-runtime": "^0.13.7",
    "remark-external-links": "^8.0.0",
    "remark-slug": "^6.0.0",
@ -102,82 +85,17 @@
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@angular/core": "^11.2.14",
    "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.3.1",
-    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.5.0-alpha.3",
-    "@storybook/html": "6.5.0-alpha.3",
-    "@storybook/react": "6.5.0-alpha.3",
-    "@storybook/vue": "6.5.0-alpha.3",
-    "@storybook/web-components": "6.5.0-alpha.3",
-    "@types/cross-spawn": "^6.0.2",
-    "@types/doctrine": "^0.0.3",
-    "@types/enzyme": "^3.10.8",
-    "@types/estree": "^0.0.44",
-    "@types/jest": "^26.0.16",
-    "@types/loader-utils": "^2.0.0",
-    "@types/prop-types": "^15.7.3",
-    "@types/tmp": "^0.2.0",
-    "@types/util-deprecate": "^1.0.0",
-    "babel-loader": "^8.0.0",
-    "babel-plugin-react-docgen": "^4.2.1",
-    "cross-spawn": "^7.0.3",
-    "fs-extra": "^9.0.1",
-    "jest": "^26.6.3",
-    "jest-specific-snapshot": "^4.0.0",
-    "lit-element": "^3.0.2",
-    "lit-html": "^2.0.2",
-    "require-from-string": "^2.0.2",
-    "rxjs": "^6.6.3",
-    "styled-components": "^5.2.1",
-    "terser-webpack-plugin": "^5.0.3",
-    "tmp": "^0.2.1",
-    "tslib": "^2.1.0",
-    "vue": "^2.6.10",
-    "web-component-analyzer": "^1.1.6",
-    "webpack": "4",
-    "zone.js": "^0.11.3"
+    "@storybook/mdx2-csf": "^0.0.3",
+    "@types/util-deprecate": "^1.0.0"
  },
  "peerDependencies": {
-    "@storybook/angular": "6.5.0-alpha.3",
-    "@storybook/html": "6.5.0-alpha.3",
-    "@storybook/react": "6.5.0-alpha.3",
-    "@storybook/vue": "6.5.0-alpha.3",
-    "@storybook/vue3": "6.5.0-alpha.3",
-    "@storybook/web-components": "6.5.0-alpha.3",
-    "lit": "^2.0.0",
-    "lit-html": "^1.4.1 || ^2.0.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0",
-    "svelte": "^3.31.2",
-    "sveltedoc-parser": "^4.1.0",
-    "vue": "^2.6.10 || ^3.0.0",
-    "webpack": "*"
+    "@storybook/mdx2-csf": "^0.0.3",
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
  },
  "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/react": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
-      "optional": true
-    },
-    "@storybook/web-components": {
-      "optional": true
-    },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
+    "@storybook/mdx2-csf": {
      "optional": true
    },
    "react": {
@ -185,24 +103,12 @@
    },
    "react-dom": {
      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    },
-    "webpack": {
-      "optional": true
    }
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4d971f7d493ecb388017a150a9943e87c7770d98",
+  "gitHead": "3f09d4e6b0c655a092dc812488ef2c7ed3808401",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Docs",
--- a/addons/docs/preset.js
+++ b/addons/docs/preset.js
@ -1,16 +1 @@
-const getFrameworkPresets = (framework) => {
-  try {
-    return [require.resolve(`./dist/cjs/frameworks/${framework}/preset`)];
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-    return [];
-  }
-};
-
-module.exports = (storybookOptions, presetOptions) => {
-  return [
-    { name: require.resolve('./common-preset'), options: presetOptions },
-    { name: require.resolve('./dist/cjs/frameworks/common/preset'), options: presetOptions },
-    ...getFrameworkPresets(storybookOptions.framework),
-  ];
-};
+module.exports = require('./dist/cjs/preset');
--- a/addons/docs/preview.js
+++ b/addons/docs/preview.js
@ -0,0 +1 @@
+export * from './dist/esm/preview';
--- a/addons/docs/register.js
+++ b/addons/docs/register.js
@ -1 +1,6 @@
-require('./dist/esm/register.js');
+import { once } from '@storybook/client-logger';
+import './manager';
+
+once.warn(
+  'register.js is deprecated see https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-registerjs'
+);
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/addons/docs/src/blocks/ArgsTable.tsx
@ -7,15 +7,15 @@ import {
  SortType,
  TabbedArgsTable,
 } from '@storybook/components';
+import { ArgTypesExtractor } from '@storybook/docs-tools';
 import { addons } from '@storybook/addons';
 import { filterArgTypes, PropDescriptor } from '@storybook/store';
 import Events from '@storybook/core-events';
-import { StrictArgTypes, Args } from '@storybook/csf';
+import { StrictArgTypes, Args, Globals } from '@storybook/csf';

 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION, PRIMARY_STORY } from './types';
 import { getComponentName } from './utils';
-import { ArgTypesExtractor } from '../lib/docgen/types';
 import { lookupStoryId } from './Story';
 import { useStory } from './useStory';

@ -42,18 +42,20 @@ type StoryProps = BaseProps & {

 type ArgsTableProps = BaseProps | OfProps | ComponentsProps | StoryProps;

+const getContext = (storyId: string, context: DocsContextProps) => {
+  const story = context.storyById(storyId);
+  if (!story) {
+    throw new Error(`Unknown story: ${storyId}`);
+  }
+  return context.getStoryContext(story);
+};
+
 const useArgs = (
  storyId: string,
  context: DocsContextProps
 ): [Args, (args: Args) => void, (argNames?: string[]) => void] => {
  const channel = addons.getChannel();
-
-  const story = context.storyById(storyId);
-  if (!story) {
-    throw new Error(`Unknown story: ${storyId}`);
-  }
-
-  const storyContext = context.getStoryContext(story);
+  const storyContext = getContext(storyId, context);

  const [args, setArgs] = useState(storyContext.args);
  useEffect(() => {
@ -76,6 +78,22 @@ const useArgs = (
  return [args, updateArgs, resetArgs];
 };

+const useGlobals = (storyId: string, context: DocsContextProps): [Globals] => {
+  const channel = addons.getChannel();
+  const storyContext = getContext(storyId, context);
+  const [globals, setGlobals] = useState(storyContext.globals);
+
+  useEffect(() => {
+    const cb = (changed: { globals: Globals }) => {
+      setGlobals(changed.globals);
+    };
+    channel.on(Events.GLOBALS_UPDATED, cb);
+    return () => channel.off(Events.GLOBALS_UPDATED, cb);
+  }, []);
+
+  return [globals];
+};
+
 export const extractComponentArgTypes = (
  component: Component,
  { id, storyById }: DocsContextProps,
@ -162,13 +180,14 @@ export const StoryTable: FC<
    const story = useStory(storyId, context);
    // eslint-disable-next-line prefer-const
    let [args, updateArgs, resetArgs] = useArgs(storyId, context);
+    const [globals] = useGlobals(storyId, context);
    if (!story) return <PureArgsTable isLoading updateArgs={updateArgs} resetArgs={resetArgs} />;

    const argTypes = filterArgTypes(story.argTypes, include, exclude);

    const mainLabel = getComponentName(component) || 'Story';

-    let tabs = { [mainLabel]: { rows: argTypes, args, updateArgs, resetArgs } } as Record<
+    let tabs = { [mainLabel]: { rows: argTypes, args, globals, updateArgs, resetArgs } } as Record<
      string,
      PureArgsTableProps
    >;
--- a/addons/docs/src/blocks/Canvas.tsx
+++ b/addons/docs/src/blocks/Canvas.tsx
@ -11,6 +11,7 @@ import { DocsContext, DocsContextProps } from './DocsContext';
 import { SourceContext, SourceContextProps } from './SourceContainer';
 import { getSourceProps, SourceState } from './Source';
 import { useStories } from './useStory';
+import { CURRENT_SELECTION } from './types';

 export { SourceState };

@ -53,7 +54,10 @@ const getPreviewProps = (
  );
  const sourceProps = getSourceProps({ ids: targetIds }, docsContext, sourceContext);
  if (!sourceState) sourceState = sourceProps.state;
-  const stories = useStories(targetIds, docsContext);
+  const storyIds = targetIds.map((targetId) =>
+    targetId === CURRENT_SELECTION ? docsContext.id : targetId
+  );
+  const stories = useStories(storyIds, docsContext);
  isLoading = stories.some((s) => !s);

  return {
--- a/addons/docs/src/blocks/Description.tsx
+++ b/addons/docs/src/blocks/Description.tsx
@ -1,8 +1,9 @@
 import React, { FunctionComponent, useContext } from 'react';
 import { Description, DescriptionProps as PureDescriptionProps } from '@storybook/components';
+import { str } from '@storybook/docs-tools';
+
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { Component, CURRENT_SELECTION } from './types';
-import { str } from '../lib/docgen';

 export enum DescriptionType {
  INFO = 'info',
--- a/addons/docs/src/blocks/DocsContext.ts
+++ b/addons/docs/src/blocks/DocsContext.ts
@ -1,8 +1,8 @@
 import { Context, createContext } from 'react';
 import { window as globalWindow } from 'global';

-import { DocsContextProps } from '@storybook/preview-web';
-import { AnyFramework } from '@storybook/csf';
+import type { DocsContextProps } from '@storybook/preview-web';
+import type { AnyFramework } from '@storybook/csf';

 export type { DocsContextProps };

@ -12,9 +12,11 @@ export type { DocsContextProps };
 // the React component tree.
 // This was specifically a problem with the Vite builder.
 /* eslint-disable no-underscore-dangle */
-if (globalWindow.__DOCS_CONTEXT__ === undefined) {
+if (globalWindow && globalWindow.__DOCS_CONTEXT__ === undefined) {
  globalWindow.__DOCS_CONTEXT__ = createContext({});
  globalWindow.__DOCS_CONTEXT__.displayName = 'DocsContext';
 }

-export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow.__DOCS_CONTEXT__;
+export const DocsContext: Context<DocsContextProps<AnyFramework>> = globalWindow
+  ? globalWindow.__DOCS_CONTEXT__
+  : createContext({});
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@ -1,14 +1,10 @@
-import React, { FC, useContext } from 'react';
-import {
-  Source as PureSource,
-  SourceError,
-  SourceProps as PureSourceProps,
-} from '@storybook/components';
-import { StoryId } from '@storybook/api';
-import { Story } from '@storybook/store';
+import React, { ComponentProps, FC, useContext } from 'react';
+import { Source as PureSource, SourceError } from '@storybook/components';
+import type { StoryId } from '@storybook/api';
+import type { Story } from '@storybook/store';

 import { DocsContext, DocsContextProps } from './DocsContext';
-import { SourceContext, SourceContextProps } from './SourceContainer';
+import { SourceContext, SourceContextProps, SourceItem } from './SourceContainer';
 import { CURRENT_SELECTION } from './types';
 import { SourceType } from '../shared';

@ -24,6 +20,7 @@ export enum SourceState {
 interface CommonProps {
  language?: string;
  dark?: boolean;
+  format?: PureSourceProps['format'];
  code?: string;
 }

@ -50,11 +47,11 @@ const getSourceState = (stories: Story[]) => {
  return states[0];
 };

-const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): string => {
+const getStorySource = (storyId: StoryId, sourceContext: SourceContextProps): SourceItem => {
  const { sources } = sourceContext;
  // source rendering is async so source is unavailable at the start of the render cycle,
  // so we fail gracefully here without warning
-  return sources?.[storyId] || '';
+  return sources?.[storyId] || { code: '', format: false };
 };

 const getSnippet = (snippet: string, story?: Story<any>): string => {
@ -89,6 +86,7 @@ const getSnippet = (snippet: string, story?: Story<any>): string => {
 };

 type SourceStateProps = { state: SourceState };
+type PureSourceProps = ComponentProps<typeof PureSource>;

 export const getSourceProps = (
  props: SourceProps,
@ -103,6 +101,7 @@ export const getSourceProps = (
  const multiProps = props as MultiSourceProps;

  let source = codeProps.code; // prefer user-specified code
+  let { format } = codeProps; // prefer user-specified code

  const targetIds = multiProps.ids || [singleProps.id || currentId];
  const storyIds = targetIds.map((targetId) =>
@ -115,9 +114,12 @@ export const getSourceProps = (
  }

  if (!source) {
+    // just take the format from the first story, given how they're all concatinated together...
+    // TODO: we should consider sending an event with all the sources separately, instead of concatenating them here
+    ({ format } = getStorySource(storyIds[0], sourceContext));
    source = storyIds
      .map((storyId, idx) => {
-        const storySource = getStorySource(storyId, sourceContext);
+        const { code: storySource } = getStorySource(storyId, sourceContext);
        const storyObj = stories[idx] as Story;
        return getSnippet(storySource, storyObj);
      })
@ -134,6 +136,7 @@ export const getSourceProps = (
    ? {
        code: source,
        state,
+        format,
        language: props.language || docsLanguage || 'jsx',
        dark: props.dark || false,
      }
@ -145,7 +148,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.
 */
-export const Source: FC<SourceProps> = (props) => {
+export const Source: FC<PureSourceProps> = (props) => {
  const sourceContext = useContext(SourceContext);
  const docsContext = useContext(DocsContext);
  const sourceProps = getSourceProps(props, docsContext, sourceContext);
--- a/addons/docs/src/blocks/SourceContainer.tsx
+++ b/addons/docs/src/blocks/SourceContainer.tsx
@ -1,10 +1,14 @@
 import React, { FC, Context, createContext, useEffect, useState } from 'react';
 import deepEqual from 'fast-deep-equal';
 import { addons } from '@storybook/addons';
-import { StoryId } from '@storybook/api';
+import type { SyntaxHighlighterFormatTypes } from '@storybook/components';
+import type { StoryId } from '@storybook/api';
 import { SNIPPET_RENDERED } from '../shared';

-export type SourceItem = string;
+export interface SourceItem {
+  code: string;
+  format: SyntaxHighlighterFormatTypes;
+}
 export type StorySources = Record<StoryId, SourceItem>;

 export interface SourceContextProps {
@ -19,23 +23,33 @@ export const SourceContainer: FC<{}> = ({ children }) => {
  const channel = addons.getChannel();

  useEffect(() => {
-    const handleSnippetRendered = (id: StoryId, newItem: SourceItem) => {
-      if (newItem !== sources[id]) {
-        setSources((current) => {
-          const newSources = { ...current, [id]: newItem };
-
-          if (!deepEqual(current, newSources)) {
-            return newSources;
-          }
-          return current;
-        });
+    const handleSnippetRendered = (
+      id: StoryId,
+      newSource: string,
+      format: SyntaxHighlighterFormatTypes = false
+    ) => {
+      // optimization: if the source is the same, ignore the incoming event
+      if (sources[id] && sources[id].code === newSource) {
+        return;
      }
+
+      setSources((current) => {
+        const newSources = {
+          ...current,
+          [id]: { code: newSource, format },
+        };
+
+        if (!deepEqual(current, newSources)) {
+          return newSources;
+        }
+        return current;
+      });
    };

    channel.on(SNIPPET_RENDERED, handleSnippetRendered);

    return () => channel.off(SNIPPET_RENDERED, handleSnippetRendered);
-  });
+  }, []);

  return <SourceContext.Provider value={{ sources }}>{children}</SourceContext.Provider>;
 };
--- a/addons/docs/src/blocks/Stories.tsx
+++ b/addons/docs/src/blocks/Stories.tsx
@ -13,6 +13,7 @@ export const Stories: FunctionComponent<StoriesProps> = ({ title, includePrimary
  const { componentStories } = useContext(DocsContext);

  let stories: DocsStoryProps[] = componentStories();
+  stories = stories.filter((story) => !story.parameters?.docs?.disable);
  if (!includePrimary) stories = stories.slice(1);

  if (!stories || stories.length === 0) {
--- a/Show More
+++ b/Show More