Merge branch 'next' into feat/react-component-story

2025-03-28 05:10:17 +08:00 · 2021-05-07 15:48:43 +08:00 · 2021-05-07 15:48:43 +08:00 · 2d715c725d
commit 2d715c725d
parent 43ab07465a 7e2035166f
596 changed files with 2351 additions and 11699 deletions
--- a/.bettercodehub.yml
+++ b/.bettercodehub.yml
@ -1,16 +0,0 @@
-component_depth: 2
-languages:
- javascript
-
- name: javascript
-  production:
-    exclude:
-      - .*\.test\.js
-      - .*\/__test__\/.*\.js
-      - .*\/__mock__\/.*\.js
-      - .*\.stories\.js
-  test:
-    include:
-      - .*\.test\.js
-      - .*\/__test__\/.*\.js
-      - .*\.storyshot
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -6,7 +6,7 @@ executors:
      class:
        description: The Resource class
        type: enum
-        enum: [ 'small', 'medium', 'large', 'xlarge' ]
+        enum: ['small', 'medium', 'large', 'xlarge']
        default: 'medium'
    working_directory: /tmp/storybook
    docker:
@ -104,7 +104,6 @@ jobs:
            - examples
            - node_modules
            - addons
-            - dev-kits
            - app
            - lib
  chromatic:
@ -177,12 +176,12 @@ jobs:
          condition:
            and:
              - not:
-                  equal: [ master, << pipeline.git.branch >> ]
+                  equal: [master, << pipeline.git.branch >>]
              - not:
-                  equal: [ next, << pipeline.git.branch >> ]
+                  equal: [next, << pipeline.git.branch >>]
          steps:
            - ensure-pr-is-labeled-with:
-                label: "run e2e extended test suite"
+                label: 'run e2e extended test suite'
      - git-shallow-clone/checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
@ -347,33 +346,18 @@ jobs:
          command: |
            cd examples/ember-cli
            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run marko-cli (smoke test)
-          command: |
-            cd examples/marko-cli
-            yarn storybook --smoke-test --quiet
      - run:
          name: Run official-storybook (smoke test)
          command: |
            cd examples/official-storybook
            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run mithril kitchen-sink (smoke test)
-          command: |
-            cd examples/mithril-kitchen-sink
-            yarn storybook --smoke-test --quiet
-      - run:
-          name: Run riot kitchen-sink (smoke test)
-          command: |
-            cd examples/riot-kitchen-sink
-            yarn storybook --smoke-test --quiet
      - run:
          name: Run preact kitchen-sink (smoke test)
          command: |
            cd examples/preact-kitchen-sink
            yarn storybook --smoke-test --quiet
      - run:
-          name: Run cra reac15 (smoke test)
+          name: Run cra react15 (smoke test)
          command: |
            cd examples/cra-react15
            yarn storybook --smoke-test --quiet
--- a/.eslintignore
+++ b/.eslintignore
@ -20,7 +20,6 @@ examples/cra-ts-kitchen-sink/*.json
 examples/cra-ts-kitchen-sink/public/*
 examples/cra-ts-essentials/*.json
 examples/cra-ts-essentials/public/*
-examples/rax-kitchen-sink/src/document/*
 ember-output
 .yarn
 !.remarkrc.js
--- a/.teamcity/settings.kts
+++ b/.teamcity/settings.kts
@ -388,18 +388,9 @@ object SmokeTests : BuildType({
                cd ../ember-cli
                yarn storybook --smoke-test --quiet
                
-                cd ../marko-cli
-                yarn storybook --smoke-test --quiet
-                
                cd ../official-storybook
                yarn storybook --smoke-test --quiet
                
-                cd ../mithril-kitchen-sink
-                yarn storybook --smoke-test --quiet
-                
-                cd ../riot-kitchen-sink
-                yarn storybook --smoke-test --quiet
-                
                cd ../preact-kitchen-sink
                yarn storybook --smoke-test --quiet
                
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,51 @@
+## 6.3.0-alpha.21 (May 7, 2021)
+
+### Maintenance
+
+- Addon-docs: Fix doc blocks imports to import from ESM/CJS ([#14841](https://github.com/storybookjs/storybook/pull/14841))
+- Refactor aurelia into its own repo ([#14801](https://github.com/storybookjs/storybook/pull/14801))
+- Delete unmaintained dev-kits ([#14832](https://github.com/storybookjs/storybook/pull/14832))
+
+### Dependency Upgrades
+
+- Storyshots: Make `vue-jest` and `svelte` optional peer dependencies ([#14835](https://github.com/storybookjs/storybook/pull/14835))
+
+## 6.3.0-alpha.20 (May 6, 2021)
+
+### Bug Fixes
+
+- Vue3: Fix components in decorators ([#14809](https://github.com/storybookjs/storybook/pull/14809))
+- Accessibility: Adds title to close button on settings page ([#14808](https://github.com/storybookjs/storybook/pull/14808))
+
+### Maintenance
+
+- Refactor marionette into its own repo ([#14802](https://github.com/storybookjs/storybook/pull/14802))
+- Refactor rax to its own repo ([#14799](https://github.com/storybookjs/storybook/pull/14799))
+- Refactor marko into its own repo ([#14803](https://github.com/storybookjs/storybook/pull/14803))
+- Refactor mithril into its own repo ([#14804](https://github.com/storybookjs/storybook/pull/14804))
+- Refactor riot to its own repo ([#14800](https://github.com/storybookjs/storybook/pull/14800))
+- UI: Styling updates ([#14820](https://github.com/storybookjs/storybook/pull/14820))
+
+## 6.3.0-alpha.19 (May 3, 2021)
+
+### Features
+
+- Addon-toolbars: Add optional label for toolbar items ([#14776](https://github.com/storybookjs/storybook/pull/14776))
+
+### Maintenance
+
+- Core: Remove spurious package.json warning ([#14785](https://github.com/storybookjs/storybook/pull/14785))
+
+## 6.3.0-alpha.18 (May 2, 2021)
+
+### Features
+
+- Angular: Filter out args whose argType are missing a control or action ([#14779](https://github.com/storybookjs/storybook/pull/14779))
+
+### Maintenance
+
+- Addon-docs: Allow doc blocks to CJS imported ([#14769](https://github.com/storybookjs/storybook/pull/14769))
+
 ## 6.3.0-alpha.17 (April 30, 2021)

 ### Features
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,11 +1,15 @@
 <h1>Migration</h1>

+- [From version 6.2.x to 6.3.0](#from-version-62x-to-630)
+  - [6.3 deprecations](#63-deprecations)
+    - [Deprecated scoped blocks imports](#deprecated-scoped-blocks-imports)
 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
  - [MDX pattern tweaked](#mdx-pattern-tweaked)
  - [6.2 Angular overhaul](#62-angular-overhaul)
    - [New Angular storyshots format](#new-angular-storyshots-format)
    - [Deprecated Angular story component](#deprecated-angular-story-component)
    - [New Angular renderer](#new-angular-renderer)
+  - [Packages now available as ESModules](#packages-now-available-as-esmodules)
  - [6.2 Deprecations](#62-deprecations)
    - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
    - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
@ -151,6 +155,24 @@
  - [Packages renaming](#packages-renaming)
  - [Deprecated embedded addons](#deprecated-embedded-addons)

+## From version 6.2.x to 6.3.0
+
+### 6.3 deprecations
+
+#### Deprecated scoped blocks imports
+
+In 6.3, we changed doc block imports from `@storybook/addon-docs/blocks` to `@storybook/addon-docs`. This makes it possible for bundlers to automatically choose the ESM or CJS version of the library depending on the context.
+
+To update your code, you should be able to global replace `@storybook/addon-docs/blocks` with `@storybook/addon-docs`. Example:
+
+```js
+// before
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+
+// after
+import { Meta, Story } from '@storybook/addon-docs';
+```
+
 ## From version 6.1.x to 6.2.0

 ### MDX pattern tweaked
@ -202,6 +224,15 @@ export const parameters = {

 Please also file an issue if you need to opt out. We plan to remove the legacy renderer in 7.0.

+### Packages now available as ESModules
+
+Many Storybook packages are now available as ESModules in addition to CommonJS. If your jest tests stop working, this is likely why. One common culprit is doc blocks, which [is fixed in 6.3](#deprecated-scoped-blocks-imports). In 6.2, you can configure jest to transform the packages like so ([more info](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)):
+
+```json
+// In your jest config
+transformIgnorePatterns: ['/node_modules/(?!@storybook)']
+```
+
 ### 6.2 Deprecations

 #### Deprecated implicit PostCSS loader
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -45,14 +45,14 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/channels": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/channels": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "axe-core": "^4.2.0",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -81,7 +81,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/addons/a11y/src/components/Report/Elements.tsx
+++ b/addons/a11y/src/components/Report/Elements.tsx
@ -24,7 +24,10 @@ const HighlightToggleElement = styled.span({
  fontWeight: 'normal',
  alignSelf: 'center',
  paddingRight: 15,
-  input: { margin: 0 },
+  input: {
+    margin: 0,
+    display: 'block',
+  },
 });

 interface ElementProps {
--- a/addons/a11y/src/components/Report/Item.tsx
+++ b/addons/a11y/src/components/Report/Item.tsx
@ -33,6 +33,7 @@ const Icon = styled<any, any>(Icons)(({ theme }) => ({
 const HeaderBar = styled.div<{}>(({ theme }) => ({
  padding: theme.layoutMargin,
  paddingLeft: theme.layoutMargin - 3,
+  lineHeight: '20px',
  background: 'none',
  color: 'inherit',
  textAlign: 'left',
@ -51,7 +52,10 @@ const HighlightToggleElement = styled.span({
  float: 'right',
  marginRight: 15,
  alignSelf: 'center',
-  input: { margin: 0 },
+  input: {
+    margin: 0,
+    display: 'block',
+  },
 });

 interface ItemProps {
--- a/addons/a11y/src/components/Tabs.tsx
+++ b/addons/a11y/src/components/Tabs.tsx
@ -18,30 +18,29 @@ const Container = styled.div({
 const HighlightToggleLabel = styled.label<{}>(({ theme }) => ({
  cursor: 'pointer',
  userSelect: 'none',
-  marginBottom: 3,
-  marginRight: 3,
  color: theme.color.dark,
 }));

-const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth }) => {
+const GlobalToggle = styled.div<{ elementWidth: number }>(({ elementWidth, theme }) => {
  const maxWidthBeforeBreak = 450;
  return {
    cursor: 'pointer',
-    fontSize: '14px',
-    padding: elementWidth > maxWidthBeforeBreak ? '12px 15px 10px 0' : '12px 0px 3px 12px',
+    fontSize: 13,
+    lineHeight: '20px',
+    padding: elementWidth > maxWidthBeforeBreak ? '10px 15px 10px 0' : '10px 0px 10px 15px',
    height: '40px',
    border: 'none',
    marginTop: elementWidth > maxWidthBeforeBreak ? -40 : 0,
    float: elementWidth > maxWidthBeforeBreak ? 'right' : 'left',
-    display: elementWidth > maxWidthBeforeBreak ? 'flex' : 'block',
+    display: 'flex',
    alignItems: 'center',
    width: elementWidth > maxWidthBeforeBreak ? 'auto' : '100%',
-    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : '1px solid rgba(0,0,0,.1)',
+    borderBottom: elementWidth > maxWidthBeforeBreak ? 'none' : `1px solid ${theme.appBorderColor}`,

    input: {
      marginLeft: 10,
      marginRight: 0,
-      marginTop: 0,
+      marginTop: -1,
      marginBottom: 0,
    },
  };
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -41,12 +41,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "fast-deep-equal": "^3.1.3",
    "global": "^4.4.0",
@ -78,7 +78,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -45,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -76,7 +76,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/addons/controls/README.md
+++ b/addons/controls/README.md
@ -182,7 +182,7 @@ Basic.args = { label: 'hello', background: '#ff0' };
 Here's the MDX equivalent:

 ```jsx
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';
 import { Button } from './Button';

 <Meta title="Button" component={Button} argTypes={{ background: { control: 'color' } }} />
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -45,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/node-logger": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/node-logger": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "ts-dedent": "^2.0.0"
  },
@ -69,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -44,11 +44,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7"
@ -71,7 +71,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "CSS Resources",
    "unsupportedFrameworks": [
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -45,12 +45,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Design assets",
    "unsupportedFrameworks": [
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -46,7 +46,7 @@ For more information on how it works, see the [`DocsPage` reference](https://git
 Here's an example file:

 ```md
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { Checkbox } from './Checkbox';

 <Meta title="MDX/Checkbox" component={Checkbox} />
@ -166,8 +166,9 @@ The `configureJSX` option is useful when you're writing your docs in MDX and you
 `sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.

 The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.
+
 ```mdx
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';
 import Changelog from '../CHANGELOG.md';

 <Meta title="Changelog" />
@ -226,7 +227,7 @@ You'll also need to set up the docs parameter in `.storybook/preview.js`. This i

 ```js
 import { addParameters } from '@storybook/react';
-import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
+import { DocsPage, DocsContainer } from '@storybook/addon-docs';

 addParameters({
  docs: {
--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@ -113,7 +113,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { AppComponent } from './app.component';

 <Meta title='App Component' component={AppComponent} />
@ -139,7 +139,7 @@ Also, to use the `Props` doc block, you need to set up Compodoc, [as described a
 When you are using `template`, `moduleMetadata` and/or `addDecorators` with `storiesOf` then you can easily translate your story to MDX, too:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { CheckboxComponent, RadioButtonComponent } from './my-components';
 import { moduleMetadata } from '@storybook/angular';

--- a/addons/docs/blocks.js
+++ b/addons/docs/blocks.js
@ -1 +1,14 @@
+import deprecate from 'util-deprecate';
+import dedent from 'ts-dedent';
+
+const warnBlocksImport = deprecate(
+  () => {},
+  dedent`
+    Importing from '@storybook/addon-docs/blocks' is deprecated, import directly from '@storybook/addon-docs' instead:
+    
+    https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-scoped-blocks-imports
+`
+);
+warnBlocksImport();
+
 export * from './dist/esm/blocks';
--- a/addons/docs/common/README.md
+++ b/addons/docs/common/README.md
@ -51,7 +51,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';

 <Meta title='App Component' />

--- a/addons/docs/docs/docspage.md
+++ b/addons/docs/docs/docspage.md
@ -122,14 +122,7 @@ Here's an example of rebuilding `DocsPage` out of doc blocks:

 ```js
 import React from 'react';
-import {
-  Title,
-  Subtitle,
-  Description,
-  Primary,
-  ArgsTable,
-  Stories,
-} from '@storybook/addon-docs/blocks';
+import { Title, Subtitle, Description, Primary, ArgsTable, Stories } from '@storybook/addon-docs';
 import { DocgenButton } from '../../components/DocgenButton';

 export default {
--- a/addons/docs/docs/mdx.md
+++ b/addons/docs/docs/mdx.md
@ -20,7 +20,7 @@
 Let's get started with an example that combines markdown with a single story:

 ```md
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';
 import { Checkbox } from './Checkbox';

 <Meta title="MDX/Checkbox" component={Checkbox} />
@ -79,7 +79,7 @@ There's a one-to-one mapping from the code in `MDX` to `CSF`, which in turn dire
 Now let's look at a more realistic example to see a few more things we can do:

 ```md
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, Canvas } from '@storybook/addon-docs';

 import { Badge } from './Badge';
 import { Icon } from './Icon';
@ -136,7 +136,7 @@ And here's how that gets rendered in Storybook:
 Suppose you have an existing story and want to embed it into your docs. Here's how to show a story with ID `some--id` (check the browser URL in Storybook v5+ to see a story's ID):

 ```md
-import { Story } from "@storybook/addon-docs/blocks";
+import { Story } from "@storybook/addon-docs";

 # Some header

--- a/addons/docs/docs/props-tables.md
+++ b/addons/docs/docs/props-tables.md
@ -42,7 +42,7 @@ To use the props table in [MDX](./mdx.md), use the `ArgsTable` block:

 ```js
 // MyComponent.stories.mdx
-import { ArgsTable } from '@storybook/addon-docs/blocks';
+import { ArgsTable } from '@storybook/addon-docs';
 import { MyComponent } from './MyComponent';

 # My Component!
--- a/addons/docs/docs/recipes.md
+++ b/addons/docs/docs/recipes.md
@ -61,8 +61,8 @@ basic.parameters = {
 **Button.stories.mdx**

 ```md
-import { Meta, Story } from '@storybook/addon-docs/blocks';
-import * as stories from './Button.stories.js';
+import { Meta, Story } from '@storybook/addon-docs';
+import \* as stories from './Button.stories.js';
 import { SomeComponent } from 'path/to/SomeComponent';

 <Meta title="Demo/Button" component={Button} />
@ -91,7 +91,7 @@ We recommend [MDX Docs](#csf-stories-with-mdx-docs) as the most ergonomic way to
 **Button.mdx**

 ```md
-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';
 import { SomeComponent } from 'somewhere';

 # Button
@ -289,7 +289,7 @@ When you're writing stories you can do this by adding a [decorator](https://stor
 The closest Docs equivalent of a decorator is the `container`, a wrapper element that is rendered around the page that is being rendered. Here's an example of adding a solid red border around the page. It uses Storybook's default page container (that sets up various contexts and other magic) and then inserts its own logic between that container and the contents of the page:

 ```js
-import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
+import { Meta, DocsContainer } from '@storybook/addon-docs';

 <Meta
  title="Addons/Docs/container-override"
@ -312,7 +312,7 @@ Rest of your file...
 This is especially useful if you are using `styled-components` and need to wrap your JSX with a `ThemeProvider` to have access to your theme:

 ```js
-import { Meta, DocsContainer } from '@storybook/addon-docs/blocks';
+import { Meta, DocsContainer } from '@storybook/addon-docs';
 import { ThemeProvider } from 'styled-components'
 import { theme } from '../path/to/theme'

--- a/addons/docs/ember/README.md
+++ b/addons/docs/ember/README.md
@ -95,7 +95,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { hbs } from 'ember-cli-htmlbars';

 <Meta title='App Component' component='AppComponent' />
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -24,9 +24,9 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/public_api.js",
-  "module": "dist/esm/public_api.js",
-  "types": "dist/ts3.9/public_api.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
@ -62,19 +62,19 @@
    "@mdx-js/loader": "^1.6.22",
    "@mdx-js/mdx": "^1.6.22",
    "@mdx-js/react": "^1.6.22",
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/builder-webpack4": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/builder-webpack4": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.3.0-alpha.17",
-    "@storybook/postinstall": "6.3.0-alpha.17",
-    "@storybook/source-loader": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/node-logger": "6.3.0-alpha.21",
+    "@storybook/postinstall": "6.3.0-alpha.21",
+    "@storybook/source-loader": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "acorn": "^7.4.1",
    "acorn-jsx": "^5.3.1",
    "acorn-walk": "^7.2.0",
@ -101,10 +101,10 @@
    "@babel/core": "^7.12.10",
    "@emotion/core": "^10.1.1",
    "@emotion/styled": "^10.0.27",
-    "@storybook/angular": "6.3.0-alpha.17",
-    "@storybook/react": "6.3.0-alpha.17",
-    "@storybook/vue": "6.3.0-alpha.17",
-    "@storybook/web-components": "6.3.0-alpha.17",
+    "@storybook/angular": "6.3.0-alpha.21",
+    "@storybook/react": "6.3.0-alpha.21",
+    "@storybook/vue": "6.3.0-alpha.21",
+    "@storybook/web-components": "6.3.0-alpha.21",
    "@types/cross-spawn": "^6.0.2",
    "@types/doctrine": "^0.0.3",
    "@types/enzyme": "^3.10.8",
@ -134,10 +134,10 @@
    "zone.js": "^0.11.3"
  },
  "peerDependencies": {
-    "@storybook/angular": "6.3.0-alpha.17",
-    "@storybook/vue": "6.3.0-alpha.17",
-    "@storybook/vue3": "6.3.0-alpha.17",
-    "@storybook/web-components": "6.3.0-alpha.17",
+    "@storybook/angular": "6.3.0-alpha.21",
+    "@storybook/vue": "6.3.0-alpha.21",
+    "@storybook/vue3": "6.3.0-alpha.21",
+    "@storybook/web-components": "6.3.0-alpha.21",
    "lit-html": "^1.0.0",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0",
@ -184,7 +184,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/addons/docs/react/README.md
+++ b/addons/docs/react/README.md
@ -78,7 +78,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { Button } from './Button';

 <Meta title='Button' component={Button} />
--- a/addons/docs/src/index.ts
+++ b/addons/docs/src/index.ts
@ -0,0 +1 @@
+export * from './blocks';
--- a/addons/docs/src/mdx/testfixtures/component-args.mdx
+++ b/addons/docs/src/mdx/testfixtures/component-args.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" args={{ a: 1, b: 2 }} argTypes={{ a: { name: 'A' }, b: { name: 'B' } }} />

--- a/addons/docs/src/mdx/testfixtures/component-args.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/component-args.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin component-args.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/component-id.mdx
+++ b/addons/docs/src/mdx/testfixtures/component-id.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" component={Button} id="button-id" />

--- a/addons/docs/src/mdx/testfixtures/component-id.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/component-id.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin component-id.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/csf-imports.mdx
+++ b/addons/docs/src/mdx/testfixtures/csf-imports.mdx
@ -1,4 +1,4 @@
-import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import { Welcome, Button } from '@storybook/angular/demo';
 import * as MyStories from './My.stories';
 import { Other } from './Other.stories';
--- a/addons/docs/src/mdx/testfixtures/csf-imports.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/csf-imports.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin csf-imports.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story, Meta, Canvas } from '@storybook/addon-docs/blocks';
+import { Story, Meta, Canvas } from '@storybook/addon-docs';
 import { Welcome, Button } from '@storybook/angular/demo';
 import * as MyStories from './My.stories';
 import { Other } from './Other.stories';
--- a/addons/docs/src/mdx/testfixtures/decorators.mdx
+++ b/addons/docs/src/mdx/testfixtures/decorators.mdx
@ -1,13 +1,13 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta
  title="Button"
-  decorators={[storyFn => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
+  decorators={[(storyFn) => <div style={{ backgroundColor: 'yellow' }}>{storyFn()}</div>]}
 />

 # Decorated story

-<Story name="one" decorators={[storyFn => <div className="local">{storyFn()}</div>]}>
+<Story name="one" decorators={[(storyFn) => <div className="local">{storyFn()}</div>]}>
  <Button>One</Button>
 </Story>
--- a/addons/docs/src/mdx/testfixtures/decorators.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/decorators.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin decorators.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/docs-only.mdx
+++ b/addons/docs/src/mdx/testfixtures/docs-only.mdx
@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';

 <Meta title="docs-only" />

--- a/addons/docs/src/mdx/testfixtures/docs-only.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/docs-only.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin docs-only.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/loaders.mdx
+++ b/addons/docs/src/mdx/testfixtures/loaders.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" loaders={[async () => ({ foo: 1 })]} />

--- a/addons/docs/src/mdx/testfixtures/loaders.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/loaders.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin loaders.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.mdx
+++ b/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.mdx
@ -1,5 +1,3 @@
-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';

-<Meta
-  title="Addons/Docs/what's in a title?"
-/>
+<Meta title="Addons/Docs/what's in a title?" />
--- a/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/meta-quotes-in-title.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin meta-quotes-in-title.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Meta } from '@storybook/addon-docs/blocks';
+import { Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/non-story-exports.mdx
+++ b/addons/docs/src/mdx/testfixtures/non-story-exports.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" />

--- a/addons/docs/src/mdx/testfixtures/non-story-exports.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/non-story-exports.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin non-story-exports.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';
 export const two = 2;

 const layoutProps = {
--- a/addons/docs/src/mdx/testfixtures/parameters.mdx
+++ b/addons/docs/src/mdx/testfixtures/parameters.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />

--- a/addons/docs/src/mdx/testfixtures/parameters.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/parameters.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin parameters.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/previews.mdx
+++ b/addons/docs/src/mdx/testfixtures/previews.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" component={Button} parameters={{ notes: 'component notes' }} />

--- a/addons/docs/src/mdx/testfixtures/previews.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/previews.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin previews.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Canvas, Story, Meta } from '@storybook/addon-docs/blocks';
+import { Canvas, Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/story-args.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-args.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" />

--- a/addons/docs/src/mdx/testfixtures/story-args.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-args.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin story-args.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';
 export const Template = (args) => <Button mdxType=\\"Button\\">Component notes</Button>;

 const layoutProps = {
--- a/addons/docs/src/mdx/testfixtures/story-current.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-current.mdx
@ -1,4 +1,4 @@
-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';

 # Current story

--- a/addons/docs/src/mdx/testfixtures/story-current.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-current.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-current.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/story-def-text-only.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-def-text-only.mdx
@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Text" />

--- a/addons/docs/src/mdx/testfixtures/story-def-text-only.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-def-text-only.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-def-text-only.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/story-definitions.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-definitions.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" />

--- a/addons/docs/src/mdx/testfixtures/story-definitions.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-definitions.output.snapshot
@ -3,10 +3,10 @@
 exports[`docs-mdx-compiler-plugin story-definitions.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/story-function-var.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-function-var.mdx
@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';

 <Meta title="story-function-var" />

--- a/addons/docs/src/mdx/testfixtures/story-function-var.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-function-var.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-function-var.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';
 export const basicFn = () => <Button mdxType=\\"Button\\" />;
 const makeShortcode = (name) =>
  function MDXDefaultShortcode(props) {
--- a/addons/docs/src/mdx/testfixtures/story-function.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-function.output.snapshot
@ -3,7 +3,7 @@
 exports[`docs-mdx-compiler-plugin story-function.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 const makeShortcode = (name) =>
  function MDXDefaultShortcode(props) {
--- a/addons/docs/src/mdx/testfixtures/story-missing-props.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-missing-props.mdx
@ -1,5 +1,5 @@
 import { Button } from '@storybook/react/demo';
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Button" />

--- a/addons/docs/src/mdx/testfixtures/story-multiple-children.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-multiple-children.mdx
@ -1,10 +1,10 @@
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 <Meta title="Multiple" />

 # Multiple children

-<Story  name="multiple children">
-   <p>Hello Child #1</p>
-   <p>Hello Child #2</p>
+<Story name="multiple children">
+  <p>Hello Child #1</p>
+  <p>Hello Child #2</p>
 </Story>
--- a/addons/docs/src/mdx/testfixtures/story-multiple-children.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-multiple-children.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-multiple-children.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/story-object.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-object.mdx
@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';
 import { Welcome, Button } from '@storybook/angular/demo';
 import { linkTo } from '@storybook/addon-links';

--- a/addons/docs/src/mdx/testfixtures/story-object.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-object.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-object.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story, Meta } from '@storybook/addon-docs/blocks';
+import { Story, Meta } from '@storybook/addon-docs';
 import { Welcome, Button } from '@storybook/angular/demo';
 import { linkTo } from '@storybook/addon-links';

--- a/addons/docs/src/mdx/testfixtures/story-references.mdx
+++ b/addons/docs/src/mdx/testfixtures/story-references.mdx
@ -1,4 +1,4 @@
-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';

 # Story reference

--- a/addons/docs/src/mdx/testfixtures/story-references.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/story-references.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin story-references.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Story } from '@storybook/addon-docs/blocks';
+import { Story } from '@storybook/addon-docs';

 const layoutProps = {};
 const MDXLayout = 'wrapper';
--- a/addons/docs/src/mdx/testfixtures/title-template-string.mdx
+++ b/addons/docs/src/mdx/testfixtures/title-template-string.mdx
@ -1,4 +1,4 @@
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';
 import { titleFunction } from '../title-generators';

-<Meta title={`${titleFunction('template')}`} />
+<Meta title={`${titleFunction('template')}`} />
--- a/addons/docs/src/mdx/testfixtures/title-template-string.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/title-template-string.output.snapshot
@ -3,9 +3,9 @@
 exports[`docs-mdx-compiler-plugin title-template-string.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';
 import { titleFunction } from '../title-generators';

 const layoutProps = {};
--- a/addons/docs/src/mdx/testfixtures/vanilla.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/vanilla.output.snapshot
@ -3,7 +3,7 @@
 exports[`docs-mdx-compiler-plugin vanilla.mdx 1`] = `
 "/* @jsxRuntime classic */
 /* @jsx mdx */
-import { assertIsFn, AddContext } from '@storybook/addon-docs/blocks';
+import { assertIsFn, AddContext } from '@storybook/addon-docs';

 import { Button } from '@storybook/react/demo';

--- a/addons/docs/src/mdx/mdx-compiler-plugin.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.js
@ -459,7 +459,7 @@ function extractExports(root, options) {

  const defaultJsx = mdxToJsx.toJSX(root, {}, { ...options, skipExport: true });
  const fullJsx = [
-    'import { assertIsFn, AddContext } from "@storybook/addon-docs/blocks";',
+    'import { assertIsFn, AddContext } from "@storybook/addon-docs";',
    defaultJsx,
    ...storyExports,
    `const componentMeta = ${stringifyMeta(metaExport)};`,
--- a/addons/docs/src/public_api.ts
+++ b/addons/docs/src/public_api.ts
@ -1,2 +0,0 @@
-// make it work with --isolatedModules
-export default {};
--- a/addons/docs/vue/README.md
+++ b/addons/docs/vue/README.md
@ -110,7 +110,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { InfoButton } from './InfoButton.vue';

 <Meta title='InfoButton' component={InfoButton} />
--- a/addons/docs/vue3/README.md
+++ b/addons/docs/vue3/README.md
@ -110,7 +110,7 @@ module.exports = {
 Finally, you can create MDX files like this:

 ```md
-import { Meta, Story, ArgsTable } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable } from '@storybook/addon-docs';
 import { InfoButton } from './InfoButton.vue';

 <Meta title='InfoButton' component={InfoButton} />
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -39,29 +39,29 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "6.3.0-alpha.17",
-    "@storybook/addon-backgrounds": "6.3.0-alpha.17",
-    "@storybook/addon-controls": "6.3.0-alpha.17",
-    "@storybook/addon-docs": "6.3.0-alpha.17",
-    "@storybook/addon-toolbars": "6.3.0-alpha.17",
-    "@storybook/addon-viewport": "6.3.0-alpha.17",
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/node-logger": "6.3.0-alpha.17",
+    "@storybook/addon-actions": "6.3.0-alpha.21",
+    "@storybook/addon-backgrounds": "6.3.0-alpha.21",
+    "@storybook/addon-controls": "6.3.0-alpha.21",
+    "@storybook/addon-docs": "6.3.0-alpha.21",
+    "@storybook/addon-toolbars": "6.3.0-alpha.21",
+    "@storybook/addon-viewport": "6.3.0-alpha.21",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/node-logger": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "6.3.0-alpha.17",
+    "@storybook/vue": "6.3.0-alpha.21",
    "@types/jest": "^26.0.16",
    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.3.0-alpha.17",
-    "@storybook/web-components": "6.3.0-alpha.17",
+    "@storybook/vue": "6.3.0-alpha.21",
+    "@storybook/web-components": "6.3.0-alpha.21",
    "babel-loader": "^8.0.0",
    "lit-html": "^1.0.0",
    "react": "^16.8.0 || ^17.0.0",
@ -91,5 +91,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf"
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a"
 }
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -43,11 +43,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "format-json": "^1.0.3",
    "lodash": "^4.17.20",
@ -74,7 +74,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Events",
    "unsupportedFrameworks": [
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-google-analytics",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Storybook addon for google analytics",
  "keywords": [
    "addon",
@ -35,8 +35,8 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-ga": "^2.7.0",
@ -57,7 +57,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Google Analytics",
    "icon": "https://pbs.twimg.com/profile_images/1021848775885651968/cU74ahCn_400x400.jpg",
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "addon",
@ -43,8 +43,8 @@
  "dependencies": {
    "@babel/core": "^7.12.10",
    "@babel/plugin-transform-classes": "^7.12.1",
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
    "babel-loader": "^8.2.2",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -69,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "GraphiQL IDE",
    "icon": "https://pbs.twimg.com/profile_images/618131103509909504/VQLBJ0TR_400x400.png",
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -47,11 +47,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
@ -76,7 +76,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Storybook addon prop editor component",
  "keywords": [
    "addon",
@ -41,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/channels": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/channels": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "copy-to-clipboard": "^3.3.1",
    "core-js": "^3.8.2",
    "escape-html": "^1.0.3",
@ -84,7 +84,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Knobs",
    "unsupportedFrameworks": [
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -41,11 +41,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
    "@storybook/csf": "0.0.1",
-    "@storybook/router": "6.3.0-alpha.17",
+    "@storybook/router": "6.3.0-alpha.21",
    "@types/qs": "^6.9.5",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-queryparams",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "parameter addon for storybook",
  "keywords": [
    "addon",
@ -42,12 +42,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "qs": "^6.10.0",
@ -72,7 +72,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Query params",
    "unsupportedFrameworks": [
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -45,10 +45,10 @@
  },
  "dependencies": {
    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/core": "6.3.0-alpha.17",
-    "@storybook/core-common": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/core": "6.3.0-alpha.21",
+    "@storybook/core-common": "6.3.0-alpha.21",
    "@types/glob": "^7.1.3",
    "@types/jest": "^26.0.16",
    "@types/jest-specific-snapshot": "^0.5.3",
@ -67,11 +67,11 @@
  "devDependencies": {
    "@angular/core": "^11.2.0",
    "@angular/platform-browser-dynamic": "^11.2.0",
-    "@storybook/addon-docs": "6.3.0-alpha.17",
-    "@storybook/angular": "6.3.0-alpha.17",
-    "@storybook/react": "6.3.0-alpha.17",
-    "@storybook/vue": "6.3.0-alpha.17",
-    "@storybook/vue3": "6.3.0-alpha.17",
+    "@storybook/addon-docs": "6.3.0-alpha.21",
+    "@storybook/angular": "6.3.0-alpha.21",
+    "@storybook/react": "6.3.0-alpha.21",
+    "@storybook/vue": "6.3.0-alpha.21",
+    "@storybook/vue3": "6.3.0-alpha.21",
    "babel-loader": "^8.2.2",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
@ -132,14 +132,20 @@
    "rxjs": {
      "optional": true
    },
+    "svelte": {
+      "optional": true
+    },
    "vue": {
      "optional": true
+    },
+    "vue-jest": {
+      "optional": true
    }
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
+++ b/addons/storyshots/storyshots-core/stories/required_with_context/Welcome.stories.mdx
@ -1,12 +1,14 @@
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from '@storybook/react/demo';
-import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { Meta, Story } from '@storybook/addon-docs';

 <Meta
-  title='Welcome MDX'
+  title="Welcome MDX"
  parameters={{
    component: Welcome,
  }}
 />

-<Story name='to Storybook'><Welcome showApp={linkTo('Button')} /></Story>
+<Story name="to Storybook">
+  <Welcome showApp={linkTo('Button')} />
+</Story>
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -41,7 +41,7 @@
  },
  "dependencies": {
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.3.0-alpha.17",
+    "@storybook/node-logger": "6.3.0-alpha.21",
    "@types/jest-image-snapshot": "^4.1.3",
    "@wordpress/jest-puppeteer-axe": "^3.0.3",
    "core-js": "^3.8.2",
@ -53,7 +53,7 @@
    "@types/puppeteer": "^5.4.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "6.3.0-alpha.17",
+    "@storybook/addon-storyshots": "6.3.0-alpha.21",
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependenciesMeta": {
@ -64,5 +64,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf"
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a"
 }
--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -41,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/router": "6.3.0-alpha.17",
-    "@storybook/source-loader": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/router": "6.3.0-alpha.21",
+    "@storybook/source-loader": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "estraverse": "^5.2.0",
    "loader-utils": "^2.0.0",
@ -75,7 +75,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -45,10 +45,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-api": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-api": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
    "core-js": "^3.8.2"
  },
  "peerDependencies": {
@ -66,7 +66,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/addons/toolbars/src/components/MenuToolbar.tsx
+++ b/addons/toolbars/src/components/MenuToolbar.tsx
@ -9,7 +9,7 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
  id,
  name,
  description,
-  toolbar: { icon, items },
+  toolbar: { icon, items, showName },
 }) => {
  const [globals, updateGlobals] = useGlobals();
  const selectedValue = globals[id];
@ -43,6 +43,7 @@ export const MenuToolbar: FC<MenuToolbarProps> = ({
      {selectedIcon ? (
        <IconButton key={name} active={active} title={description}>
          <Icons icon={selectedIcon} />
+          {showName ? `\xa0${name}` : null}
        </IconButton>
      ) : (
        <TabButton active={active}>{name}</TabButton>
--- a/addons/toolbars/src/types.ts
+++ b/addons/toolbars/src/types.ts
@ -12,6 +12,7 @@ export interface ToolbarItem {
 export interface NormalizedToolbarConfig {
  icon?: IconsProps['icon'];
  items: ToolbarItem[];
+  showName?: boolean;
 }

 export type NormalizedToolbarArgType = ArgType & {
--- a/addons/viewport/package.json
+++ b/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -42,12 +42,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/client-logger": "6.3.0-alpha.17",
-    "@storybook/components": "6.3.0-alpha.17",
-    "@storybook/core-events": "6.3.0-alpha.17",
-    "@storybook/theming": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/client-logger": "6.3.0-alpha.21",
+    "@storybook/components": "6.3.0-alpha.21",
+    "@storybook/core-events": "6.3.0-alpha.21",
+    "@storybook/theming": "6.3.0-alpha.21",
    "core-js": "^3.8.2",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
@ -69,7 +69,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf",
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/app/angular/README.md
+++ b/app/angular/README.md
@ -12,7 +12,7 @@ So you can develop UI components in isolation without worrying about app specifi

 ```sh
 cd my-angular-app
-npx -p @storybook/cli sb init
+npx sb init
 ```

 For more information visit: [storybook.js.org](https://storybook.js.org)
--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "6.3.0-alpha.17",
+  "version": "6.3.0-alpha.21",
  "description": "Storybook for Angular: Develop Angular Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -45,11 +45,11 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/api": "6.3.0-alpha.17",
-    "@storybook/core": "6.3.0-alpha.17",
-    "@storybook/core-common": "6.3.0-alpha.17",
-    "@storybook/node-logger": "6.3.0-alpha.17",
+    "@storybook/addons": "6.3.0-alpha.21",
+    "@storybook/api": "6.3.0-alpha.21",
+    "@storybook/core": "6.3.0-alpha.21",
+    "@storybook/core-common": "6.3.0-alpha.21",
+    "@storybook/node-logger": "6.3.0-alpha.21",
    "@types/webpack-env": "^1.16.0",
    "autoprefixer": "^9.8.6",
    "core-js": "^3.8.2",
@ -124,5 +124,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf"
+  "gitHead": "c3ffd75d5ae104f678f2f0bea2042b017373aa4a"
 }
--- a/app/angular/src/client/preview/decorateStory.test.ts
+++ b/app/angular/src/client/preview/decorateStory.test.ts
@ -231,6 +231,35 @@ describe('decorateStory', () => {
        template: '<parent></parent>',
      });
    });
+
+    it('should only keeps args with a control or an action in argTypes', () => {
+      const decorated = decorateStory(
+        (context: StoryContext) => ({
+          template: `Args available in the story : ${Object.keys(context.args).join()}`,
+        }),
+        []
+      );
+
+      expect(
+        decorated(
+          makeContext({
+            parameters: { component: FooComponent },
+            argTypes: {
+              withControl: { control: { type: 'object' }, name: 'withControl' },
+              withAction: { action: 'onClick', name: 'withAction' },
+              toRemove: { name: 'toRemove' },
+            },
+            args: {
+              withControl: 'withControl',
+              withAction: () => ({}),
+              toRemove: 'toRemove',
+            },
+          })
+        )
+      ).toEqual({
+        template: 'Args available in the story : withControl,withAction',
+      });
+    });
  });

  describe('default behavior', () => {
--- a/app/angular/src/client/preview/decorateStory.ts
+++ b/app/angular/src/client/preview/decorateStory.ts
@ -17,7 +17,7 @@ export default function decorateStory(
  mainStoryFn: StoryFn<StoryFnAngularReturnType>,
  decorators: DecoratorFunction<StoryFnAngularReturnType>[]
 ): StoryFn<StoryFnAngularReturnType> {
-  const returnDecorators = decorators.reduce(
+  const returnDecorators = [cleanArgsDecorator, ...decorators].reduce(
    (previousStoryFn: StoryFn<StoryFnAngularReturnType>, decorator) => (
      context: StoryContext = defaultContext
    ) => {
@ -56,3 +56,23 @@ const prepareMain = (
 function hasNoTemplate(template: string | null | undefined): template is undefined {
  return template === null || template === undefined;
 }
+
+const cleanArgsDecorator: DecoratorFunction<StoryFnAngularReturnType> = (storyFn, context) => {
+  if (!context.argTypes || !context.args) {
+    return storyFn();
+  }
+
+  const argsToClean = context.args;
+
+  context.args = Object.entries(argsToClean).reduce((obj, [key, arg]) => {
+    const argType = context.argTypes[key];
+
+    // Only keeps args with a control or an action in argTypes
+    if (argType.action || argType.control) {
+      return { ...obj, [key]: arg };
+    }
+    return obj;
+  }, {});
+
+  return storyFn();
+};
--- a/app/aurelia/README.md
+++ b/app/aurelia/README.md
@ -1,23 +0,0 @@
-# Storybook for Aurelia
-
-Storybook for Aurelia is a UI development environment for your Aurelia components.
-With it, you can visualize different states of your UI components and develop them interactively.
-
-![Storybook Screenshot](https://github.com/storybookjs/storybook/blob/master/media/storybook-intro.gif)
-
-Storybook runs outside of your app.
-So you can develop UI components in isolation without worrying about app specific dependencies and requirements.
-
-## Getting Started
-
-```sh
-cd my-aurelia-app
-npx -p @storybook/cli sb init
-```
-
-For more information visit: [storybook.js.org](https://storybook.js.org)
-
---
-
-Storybook also comes with a lot of [addons](https://storybook.js.org/docs/aurelia/configure/storybook-addons) and a great API to customize as you wish.
-You can also build a [static version](https://storybook.js.org/docs/aurelia/workflows/publish-storybook) of your storybook and deploy it anywhere you want.
--- a/app/aurelia/bin/build.js
+++ b/app/aurelia/bin/build.js
@ -1,4 +0,0 @@
-#!/usr/bin/env node
-
-process.env.NODE_ENV = process.env.NODE_ENV || 'production';
-require('../dist/cjs/server/build');
--- a/app/aurelia/bin/index.js
+++ b/app/aurelia/bin/index.js
@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-require('../dist/cjs/server');
--- a/app/aurelia/package.json
+++ b/app/aurelia/package.json
@ -1,78 +0,0 @@
-{
-  "name": "@storybook/aurelia",
-  "version": "6.3.0-alpha.17",
-  "description": "Storybook for Aurelia: Develop Aurelia Components in isolation with Hot Reloading.",
-  "keywords": [
-    "storybook"
-  ],
-  "homepage": "https://github.com/storybookjs/storybook/tree/master/app/aurelia",
-  "bugs": {
-    "url": "https://github.com/storybookjs/storybook/issues"
-  },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storybookjs/storybook.git",
-    "directory": "app/aurelia"
-  },
-  "funding": {
-    "type": "opencollective",
-    "url": "https://opencollective.com/storybook"
-  },
-  "license": "MIT",
-  "main": "dist/cjs/client/index.js",
-  "module": "dist/esm/client/index.js",
-  "types": "dist/ts3.9/client/index.d.ts",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "dist/ts3.4/*"
-      ]
-    }
-  },
-  "bin": {
-    "build-storybook": "./bin/build.js",
-    "start-storybook": "./bin/index.js",
-    "storybook-server": "./bin/index.js"
-  },
-  "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
-  },
-  "dependencies": {
-    "@aurelia/webpack-loader": "^0.7.0",
-    "@storybook/addon-knobs": "6.3.0-alpha.17",
-    "@storybook/addons": "6.3.0-alpha.17",
-    "@storybook/core": "6.3.0-alpha.17",
-    "@storybook/core-common": "6.3.0-alpha.17",
-    "@storybook/node-logger": "6.3.0-alpha.17",
-    "fork-ts-checker-webpack-plugin": "^4.1.6",
-    "global": "^4.4.0",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "read-pkg-up": "^7.0.1",
-    "ts-loader": "^6.2.2",
-    "url-loader": "^4.1.1",
-    "webpack": "^4.46.0"
-  },
-  "devDependencies": {
-    "@types/node": "^14.14.20",
-    "@types/webpack-env": "^1.16.0",
-    "aurelia": "^0.7.0",
-    "css-loader": "^3.6.0",
-    "file-loader": "^4.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "htmlhint": "^0.11.0",
-    "node-sass": "^4.14.1",
-    "rimraf": "^3.0.2",
-    "sass-loader": "^8.0.2",
-    "style-loader": "^0.23.0",
-    "typescript": "^3.9.7",
-    "webpack": "^4.46.0"
-  },
-  "peerDependencies": {
-    "aurelia": "*"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "gitHead": "36d878614dcdea5f06e9ecae10da69fe36358ebf"
-}
--- a/app/aurelia/src/client/index.ts
+++ b/app/aurelia/src/client/index.ts
@ -1,6 +0,0 @@
-export * from './preview';
-
-declare const module: any;
-if (module && module.hot && module.hot.decline) {
-  module.hot.decline();
-}
--- a/app/aurelia/src/client/preview/decorators.ts
+++ b/app/aurelia/src/client/preview/decorators.ts
@ -1,45 +0,0 @@
-import { StoryFn } from '@storybook/addons';
-import { IRegistry, IContainer } from 'aurelia';
-import { StoryFnAureliaReturnType } from './types';
-
-export const addRegistries = (...items: IRegistry[]) => (
-  storyFn: StoryFn<StoryFnAureliaReturnType>
-) => {
-  const story = storyFn();
-  story.items = story.items || [];
-  story.items.push(...items);
-
-  return {
-    ...story,
-    items,
-  };
-};
-
-export interface Component {
-  item?: unknown;
-  aliases?: string[];
-}
-
-export const addComponents = (...components: Component[] | unknown[]) => (
-  storyFn: StoryFn<StoryFnAureliaReturnType>
-) => {
-  const story = storyFn();
-  story.components = story.components || [];
-  story.components.push(...components);
-
-  return {
-    ...story,
-    components,
-  };
-};
-
-export const addContainer = (container: IContainer) => (
-  storyFn: StoryFn<StoryFnAureliaReturnType>
-) => {
-  const story = storyFn();
-
-  return {
-    ...story,
-    container,
-  };
-};
--- a/app/aurelia/src/client/preview/globals.ts
+++ b/app/aurelia/src/client/preview/globals.ts
@ -1,3 +0,0 @@
-import { window as globalWindow } from 'global';
-
-globalWindow.STORYBOOK_ENV = 'aurelia';
--- a/Show More
+++ b/Show More