Merge branch 'next' into pr/philsawicki/13411

2025-04-05 16:11:33 +08:00 · 2021-03-12 18:28:58 +01:00 · 2021-03-12 18:28:58 +01:00 · a26812aa81
commit a26812aa81
parent 47e2962e27 94a86bd22a
1625 changed files with 43356 additions and 15560 deletions
--- a/.babelrc.js
+++ b/.babelrc.js
@ -12,13 +12,24 @@ const withTests = {
  ],
 };

+const modules = process.env.BABEL_ESM === 'true' ? false : 'auto';
+
 module.exports = {
  ignore: [
    './lib/codemod/src/transforms/__testfixtures__',
    './lib/postinstall/src/__testfixtures__',
  ],
  presets: [
-    ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+    [
+      '@babel/preset-env',
+      {
+        shippedProposals: true,
+        useBuiltIns: 'usage',
+        corejs: '3',
+        targets: 'defaults',
+        modules,
+      },
+    ],
    '@babel/preset-typescript',
    '@babel/preset-react',
    '@babel/preset-flow',
@ -52,7 +63,16 @@ module.exports = {
    {
      test: './lib',
      presets: [
-        ['@babel/preset-env', { shippedProposals: true, useBuiltIns: 'usage', corejs: '3' }],
+        [
+          '@babel/preset-env',
+          {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            corejs: '3',
+            modules,
+            targets: 'defaults',
+          },
+        ],
        '@babel/preset-react',
      ],
      plugins: [
@ -71,6 +91,11 @@ module.exports = {
    {
      test: [
        './lib/node-logger',
+        './lib/core',
+        './lib/core-common',
+        './lib/core-server',
+        './lib/builder-webpack4',
+        './lib/builder-webpack5',
        './lib/codemod',
        './addons/storyshots',
        '**/src/server/**',
@ -83,8 +108,9 @@ module.exports = {
            shippedProposals: true,
            useBuiltIns: 'usage',
            targets: {
-              node: '8.11',
+              node: '10',
            },
+            modules,
            corejs: '3',
          },
        ],
@ -104,5 +130,22 @@ module.exports = {
        test: withTests,
      },
    },
+    {
+      test: ['**/virtualModuleEntry.template.js'],
+      presets: [
+        [
+          '@babel/preset-env',
+          {
+            shippedProposals: true,
+            useBuiltIns: 'usage',
+            targets: {
+              node: '10',
+            },
+            corejs: '3',
+            modules: false,
+          },
+        ],
+      ],
+    },
  ],
 };
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -1,7 +1,20 @@
 version: 2.1

 executors:
-  sb_node:
+  sb_node_10_classic:
+    parameters:
+      class:
+        description: The Resource class
+        type: enum
+        enum: [ 'small', 'medium', 'large', 'xlarge' ]
+        default: 'medium'
+    working_directory: /tmp/storybook
+    docker:
+      - image: circleci/node:10
+        environment:
+          NODE_OPTIONS: --max_old_space_size=3076
+    resource_class: <<parameters.class>>
+  sb_node_10_browsers:
    parameters:
      class:
        description: The Resource class
@ -12,9 +25,9 @@ executors:
    docker:
      - image: circleci/node:10-browsers
        environment:
-          NODE_OPTIONS: --max_old_space_size=4096
+          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>
-  sb_node_12:
+  sb_node_12_browsers:
    parameters:
      class:
        description: The Resource class
@ -25,24 +38,53 @@ executors:
    docker:
      - image: circleci/node:12-browsers
        environment:
-          NODE_OPTIONS: --max_old_space_size=4096
+          NODE_OPTIONS: --max_old_space_size=3076
    resource_class: <<parameters.class>>

+orbs:
+  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
+
+commands:
+  ensure-pr-is-labeled-with:
+    description: 'A command looking for the labels set on the PR associated to this workflow and checking it contains the label given as parameter'
+    parameters:
+      label:
+        type: string
+    steps:
+      - run:
+          name: Check if PR is labeled with "<< parameters.label >>"
+          command: |
+            sudo apt-get install jq
+
+            PR_NUMBER=$(echo "$CIRCLE_PULL_REQUEST" | sed "s/.*\/pull\///")
+            echo "PR_NUMBER: $PR_NUMBER"
+
+            API_GITHUB="https://api.github.com/repos/$CIRCLE_PROJECT_USERNAME/$CIRCLE_PROJECT_REPONAME"
+            PR_REQUEST_URL="$API_GITHUB/pulls/$PR_NUMBER"
+            PR_RESPONSE=$(curl -H "Authorization: token $GITHUB_TOKEN_STORYBOOK_BOT_READ_REPO" "$PR_REQUEST_URL")
+
+
+            if [ $(echo $PR_RESPONSE | jq '.labels | map(select(.name == "<< parameters.label >>")) | length') -ge 1 ] ||
+               ( [ $(echo $PR_RESPONSE | jq '.labels | length') -ge 1 ] && [ "<< parameters.label >>" == "*" ])
+            then
+              echo "🚀 The PR is labelled with '<< parameters.label >>', job will continue!"
+            else
+              echo "🏁 The PR isn't labelled with '<< parameters.label >>' so this job will end at the current step."
+              circleci-agent step halt
+            fi
+
 jobs:
  build:
    executor:
-      class: medium
-      name: sb_node
+      class: large
+      name: sb_node_10_classic
    steps:
-      - checkout
-      - run:
-          name: Remove examples
-          command: rm -rf examples/
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - restore_cache:
          name: Restore Yarn cache
          keys:
            - build-yarn-cache-v4--{{ checksum "yarn.lock" }}
-            - build-yarn-cache-v4--
      - run:
          name: Install dependencies
          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
@ -57,65 +99,17 @@ jobs:
      - persist_to_workspace:
          root: .
          paths:
+            - examples
+            - node_modules
            - addons
            - dev-kits
            - app
            - lib
-  install-examples-deps:
-    executor:
-      class: medium
-      name: sb_node
-    steps:
-      - checkout
-      - restore_cache:
-          name: Restore Yarn cache
-          keys:
-            - install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-            - install-examples-deps-yarn-cache-v4--
-      - run:
-          name: Install dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn cache
-          key: install-examples-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
-      - persist_to_workspace:
-          root: .
-          paths:
-            - examples
-            - node_modules
-  install-e2e-deps:
-    executor:
-      class: medium
-      name: sb_node
-    steps:
-      - checkout
-      - run:
-          name: Keep only root package
-          command: rm -rf examples/ && rm -rf addons/ && rm -rf app/ && rm -rf lib/
-      - restore_cache:
-          name: Restore Yarn cache
-          keys:
-            - install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-            - install-e2e-deps-yarn-cache-v4--
-      - run:
-          name: Install dependencies
-          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
-      - save_cache:
-          name: Save Yarn cache
-          key: install-e2e-deps-yarn-cache-v4--{{ checksum "yarn.lock" }}
-          paths:
-            - ~/.cache/yarn
-      - persist_to_workspace:
-          root: .
-          paths:
-            - examples
-            - node_modules
  chromatic:
-    executor: sb_node
+    executor: sb_node_10_browsers
    parallelism: 4
    steps:
+      # Keep using default checkout because Chromatic needs some git history to work properly
      - checkout
      - attach_workspace:
          at: .
@ -126,9 +120,10 @@ jobs:
  packtracker:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_browsers
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -139,10 +134,11 @@ jobs:
  examples:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_browsers
    parallelism: 4
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -156,9 +152,10 @@ jobs:
  publish:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_classic
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -168,14 +165,25 @@ jobs:
          root: .
          paths:
            - .verdaccio-cache
-  examples-v2:
+  e2e-tests-node-10:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_browsers
    working_directory: /tmp/storybook
    parallelism: 4
    steps:
-      - checkout
+      - when:
+          condition:
+            and:
+              - not:
+                  equal: [ master, << pipeline.git.branch >> ]
+              - not:
+                  equal: [ next, << pipeline.git.branch >> ]
+          steps:
+            - ensure-pr-is-labeled-with:
+                label: "run e2e extended test suite"
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -196,17 +204,60 @@ jobs:
          command: yarn cypress install
      - run:
          name: run e2e tests
-          command: yarn test:e2e-framework
+          command: yarn test:e2e-framework --skip preact
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-  examples-v2-cra-bench:
+  e2e-tests-node-12:
    executor:
      class: medium
-      name: sb_node_12
+      name: sb_node_12_browsers
    working_directory: /tmp/storybook
    steps:
-      - checkout
+      - when:
+          condition:
+            and:
+              - not:
+                  equal: [ master, << pipeline.git.branch >> ]
+              - not:
+                  equal: [ next, << pipeline.git.branch >> ]
+          steps:
+            - ensure-pr-is-labeled-with:
+                label: "run e2e extended test suite"
+      - 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: Set registry
+          command: yarn config set registry http://localhost:6000/
+      - run:
+          name: Test local registry
+          command: yarn info @storybook/core
+      - run:
+          name: Install Cypress binary
+          command: yarn cypress install
+      - run:
+          name: Run E2E tests
+          command: yarn test:e2e-framework preact
+      - store_artifacts:
+          path: /tmp/storybook/cypress
+          destination: cypress
+  e2e-tests-cra-bench:
+    executor:
+      class: medium
+      name: sb_node_12_browsers
+    working_directory: /tmp/storybook
+    steps:
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -231,13 +282,14 @@ jobs:
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-  examples-v2-yarn-2:
+  e2e-tests-yarn-2-pnp:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_browsers
    working_directory: /tmp/storybook
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -258,18 +310,19 @@ jobs:
          command: yarn cypress install
      - run:
          name: run e2e tests
-          command: yarn test:e2e-framework --use-yarn-2 sfcVue cra
+          command: yarn test:e2e-framework --use-yarn-2-pnp sfcVue cra
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-  e2e:
+  e2e-tests-examples:
    working_directory: /tmp/storybook
    docker:
-      - image: cypress/included:4.7.0
+      - image: cypress/included:4.12.1
        environment:
          TERM: xterm
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -281,17 +334,17 @@ jobs:
          command: yarn await-serve-storybooks
      - run:
          name: cypress run
-          command: yarn test:e2e
+          command: yarn test:e2e-examples
      - store_artifacts:
          path: /tmp/storybook/cypress
          destination: cypress
-
  smoke-tests:
    executor:
      class: medium
-      name: sb_node
+      name: sb_node_10_browsers
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -355,9 +408,10 @@ jobs:
            cd examples/cra-react15
            yarn storybook --smoke-test --quiet
  frontpage:
-    executor: sb_node
+    executor: sb_node_10_browsers
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - run:
          name: Install dependencies
          command: yarn bootstrap --install
@ -367,23 +421,25 @@ jobs:
  lint:
    executor:
      class: small
-      name: sb_node
+      name: sb_node_10_classic
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Lint
          command: yarn lint
-  test:
-    executor: sb_node
+  unit-tests:
+    executor: sb_node_10_browsers
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Test
-          command: yarn test --coverage --w2 --core
+          command: yarn test --coverage --runInBand --ci
      - persist_to_workspace:
          root: .
          paths:
@ -391,9 +447,10 @@ jobs:
  coverage:
    executor:
      class: small
-      name: sb_node
+      name: sb_node_10_browsers
    steps:
-      - checkout
+      - git-shallow-clone/checkout_advanced:
+          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
@ -404,49 +461,43 @@ workflows:
  test:
    jobs:
      - build
-      - install-e2e-deps
-      - install-examples-deps
      - lint:
          requires:
-            - install-examples-deps
            - build
      - examples:
          requires:
-            - install-examples-deps
            - build
-      - e2e:
+      - e2e-tests-examples:
          requires:
            - examples
      - smoke-tests:
          requires:
-            - install-examples-deps
            - build
      - packtracker:
          requires:
-            - install-examples-deps
            - build
-      - test:
+      - unit-tests:
          requires:
-            - install-examples-deps
            - build
      - coverage:
          requires:
-            - test
+            - unit-tests
      - chromatic:
          requires:
            - examples
      - publish:
          requires:
-            - install-e2e-deps
            - build
-      # too slow/expensive. disabling for now
-      # - examples-v2:
-      #     requires:
-      #       - publish
-      - examples-v2-yarn-2:
+      - e2e-tests-node-10:
          requires:
            - publish
-      - examples-v2-cra-bench:
+      - e2e-tests-node-12:
+          requires:
+            - publish
+      - e2e-tests-yarn-2-pnp:
+          requires:
+            - publish
+      - e2e-tests-cra-bench:
          requires:
            - publish
  deploy:
--- a/.eslintignore
+++ b/.eslintignore
@ -7,8 +7,9 @@ docs/public
 storybook-static
 built-storybooks
 lib/cli/test
-lib/core/prebuilt
+lib/core-server/prebuilt
 lib/codemod/src/transforms/__testfixtures__
+lib/components/src/controls/react-editable-json-tree
 scripts/storage
 *.bundle.js
 *.js.map
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,6 +1,9 @@
 module.exports = {
  root: true,
  extends: ['@storybook/eslint-config-storybook'],
+  rules: {
+    '@typescript-eslint/ban-ts-comment': 'warn',
+  },
  overrides: [
    {
      files: [
@ -10,8 +13,6 @@ module.exports = {
        '**/*.test.*',
        '**/*.stories.*',
        '**/storyshots/**/stories/**',
-        'docs/src/new-components/lib/StoryLinkWrapper.js',
-        'docs/src/stories/**',
      ],
      rules: {
        '@typescript-eslint/no-empty-function': 'off',
--- a/.github/renovate.json5
+++ b/.github/renovate.json5
@ -0,0 +1,113 @@
+{
+  "$schema": "https://docs.renovatebot.com/renovate-schema.json",
+  "extends": [
+    "config:base",
+    "group:allNonMajor"
+  ],
+  "prHourlyLimit": 1,
+  "prConcurrentLimit": 1,
+  // Custom ignore paths to include our `examples/` directory
+  "ignorePaths": [
+    "**/node_modules/**",
+    "**/bower_components/**",
+    "**/vendor/**",
+    "**/__tests__/**",
+    "**/test/**",
+    "**/tests/**",
+    "**/__fixtures__/**"
+  ],
+  "enabledManagers": [
+    "npm"
+  ],
+  // Ignore release notes for non-breaking changes
+  "fetchReleaseNotes": false,
+  // Always bump minor/patch to latest
+  "rangeStrategy": "bump",
+  "major": {
+    // Replace ranges when there is a major
+    "rangeStrategy": "replace",
+    // Get us the release notes for breaking changes
+    "fetchReleaseNotes": true
+  },
+  "packageRules": [
+    // Leave peerDependencies and engines alone
+    {
+      "depTypeList": [
+        "peerDependencies",
+        "engines"
+      ],
+      "enabled": false
+    },
+    // Handle patch updates under 0.1.0 as potentially breaking
+    // Workaround for https://github.com/renovatebot/renovate/issues/3588
+    {
+      "managers": [
+        "npm"
+      ],
+      "matchCurrentVersion": "<0.1.0",
+      "rangeStrategy": "replace",
+      "groupName": "maybe breaking patch updates",
+      "groupSlug": "maybe-breaking-patch",
+      // Get us the release notes for potentially breaking changes
+      "fetchReleaseNotes": true
+    },
+    // Handle minor updates under 1.0.0 as potentially breaking
+    // Workaround for https://github.com/renovatebot/renovate/issues/3588
+    {
+      "managers": [
+        "npm"
+      ],
+      "matchCurrentVersion": "<1.0.0 >=0.1.0",
+      "minor": {
+        "rangeStrategy": "replace",
+        "groupName": "maybe breaking minor updates",
+        "groupSlug": "maybe-breaking-minor",
+        // Get us the release notes for potentially breaking changes
+        "fetchReleaseNotes": true
+      }
+    },
+    // Group Storybook's linter configs together
+    {
+      "packageNames": [
+        "@storybook/eslint-config-storybook",
+        "@storybook/linter-config"
+      ],
+      "groupName": "storybook linting"
+    },
+    // Group Puppeteer packages together
+    {
+      "packagePatterns": [
+        "^puppeteer",
+        "^@types/puppeteer"
+      ],
+      "groupName": "puppeteer"
+    },
+    // Group Acorn packages together
+    {
+      "packagePatterns": [
+        "^acorn"
+      ],
+      "groupName": "acorn"
+    },
+    // Group React packages together
+    {
+      "packageNames": [
+        "react",
+        "@types/react",
+        "react-dom",
+        "@types/react-dom"
+      ],
+      "groupName": "react"
+    }
+  ],
+  // Simplifies the PR body
+  "prBodyTemplate": "{{{table}}}{{{notes}}}{{{changelogs}}}",
+  "prBodyColumns": [
+    "Package",
+    "Change"
+  ],
+  // https://docs.renovatebot.com/merge-confidence/#enabling-and-disabling
+  "ignorePresets": [
+    "github>whitesource/merge-confidence:beta"
+  ]
+}
--- a/.github/stale.yml
+++ b/.github/stale.yml
@ -11,7 +11,6 @@ exemptLabels:
  - 'needs review'
  - 'high priority'
  - 'good first issue'
-  - dependencies:update

 # Label to use when marking an issue as stale
 staleLabel: inactive
--- a/.github/workflows/label.yml
+++ b/.github/workflows/label.yml
@ -5,10 +5,10 @@ jobs:
    name: Danger JS
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@master
-    - name: Danger JS
-      uses: danger/danger-js@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        args: --dangerfile .ci/danger/dangerfile.ts
+      - uses: actions/checkout@master
+      - name: Danger JS
+        uses: danger/danger-js@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: --dangerfile .ci/danger/dangerfile.ts
--- a/.github/workflows/pull_request-dangerfile-js-pull.yml
+++ b/.github/workflows/pull_request-dangerfile-js-pull.yml
@ -5,10 +5,10 @@ jobs:
    name: Danger JS
    runs-on: ubuntu-latest
    steps:
-    - uses: actions/checkout@master
-    - name: Danger JS
-      uses: danger/danger-js@master
-      env:
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-      with:
-        args: --dangerfile .ci/danger/dangerfile.ts
+      - uses: actions/checkout@master
+      - name: Danger JS
+        uses: danger/danger-js@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          args: --dangerfile .ci/danger/dangerfile.ts
--- a/.github/workflows/tests-cli.yml
+++ b/.github/workflows/tests-cli.yml
@ -1,37 +0,0 @@
-name: CLI tests
-
-on:
-  push
-  # push:
-# disabled for now:
-# https://github.community/t5/GitHub-Actions/Preserve-status-from-previous-action-run/m-p/33821#M1661
-#     paths:
-#     - 'lib/**'
-#     - 'app/**'
-
-jobs:
-  cli:
-    name: CLI Fixtures
-    runs-on: ubuntu-latest
-    steps:
-    - uses: actions/setup-node@v1
-      with:
-        node-version: '10.x'
-    - name: increase filewatcher limit
-      run: |
-        echo fs.inotify.max_user_watches=524288 | sudo tee -a /etc/sysctl.conf && sudo sysctl -p
-    - uses: actions/checkout@v2
-    - name: Cache node modules
-      uses: actions/cache@v1
-      with:
-        path: node_modules
-        key: build-v2-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          build-v2-${{ env.cache-name }}-
-          build-v2-
-    - name: install, bootstrap
-      run: |
-        yarn bootstrap --core
-    - name: cli
-      run: |
-        yarn test --cli
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@ -12,16 +12,13 @@ jobs:
        node-version: '10.x'
    - uses: actions/checkout@v2
    - name: Cache node modules
-      uses: actions/cache@v1
+      uses: actions/cache@v2
      with:
        path: node_modules
        key: build-v2-${{ hashFiles('**/yarn.lock') }}
-        restore-keys: |
-          build-v2-${{ env.cache-name }}-
-          build-v2-
    - name: install, bootstrap
      run: |
        yarn bootstrap --core
    - name: test
      run: |
-        yarn test --core
+        yarn test --runInBand --ci
--- a/.github/workflows/trigger-circle-ci-workflow.yml
+++ b/.github/workflows/trigger-circle-ci-workflow.yml
@ -0,0 +1,21 @@
+name: Trigger CircleCI workflow
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  trigger:
+    if: github.event.label.name == 'run e2e extended test suite' && github.event.pull_request.head.repo.fork == false
+    name: Run workflow with all e2e tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Make request to CircleCI
+        run: >
+          curl --request POST
+          --url https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline
+          --header 'Circle-Token: '"$CIRCLE_CI_TOKEN"' '
+          --header 'content-type: application/json'
+          --data '{"branch":"${{ github.event.pull_request.head.ref }}"}'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -5,7 +5,6 @@ node_modules
 *.sw*
 npm-shrinkwrap.json
 dist
-ts3.4
 .tern-port
 *.DS_Store
 .cache
@ -24,7 +23,6 @@ integration/__image_snapshots__/__diff_output__
 /examples/cra-kitchen-sink/src/__image_snapshots__/__diff_output__/
 lib/*.jar
 lib/**/dll
-lib/core/prebuilt
 /false
 /addons/docs/common/config-*
 built-storybooks
@ -33,3 +31,5 @@ cypress/screenshots
 examples/ember-cli/ember-output
 .verdaccio-cache
 tsconfig.tsbuildinfo
+lib/core-server/prebuilt
+examples/angular-cli/addon-jest.testresults.json
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -0,0 +1,3 @@
+{
+  "deepscan.enable": true
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,652 @@
+## 6.2.0-beta.14 (March 11, 2021)
+
+### Bug Fixes
+
+- Addon-docs/Vue: Fix string docgen ([#14200](https://github.com/storybookjs/storybook/pull/14200))
+- Controls: Fix width of Select control ([#14154](https://github.com/storybookjs/storybook/pull/14154))
+- Source-loader: Revert sourcemaps ([#14199](https://github.com/storybookjs/storybook/pull/14199))
+- Core: Fix webpack stats ([#14198](https://github.com/storybookjs/storybook/pull/14198))
+
+## 6.2.0-beta.13 (March 11, 2021)
+
+### Features
+
+- CLI: Add a `--webpack-stats-json` flag ([#14186](https://github.com/storybookjs/storybook/pull/14186))
+
+### Bug Fixes
+
+- Core: Fix standalone and add tests ([#14196](https://github.com/storybookjs/storybook/pull/14196))
+- Core: Fix dotenv file loading and add `env` to main.js ([#14191](https://github.com/storybookjs/storybook/pull/14191))
+- Core: Fix main.ts/preview.ts ([#14184](https://github.com/storybookjs/storybook/pull/14184))
+
+## 6.2.0-beta.12 (March 10, 2021)
+
+### Features
+
+- Core: Hoist 'control.options', validate them in core and introduce 'control.labels' ([#14169](https://github.com/storybookjs/storybook/pull/14169))
+
+### Bug Fixes
+
+- UI: Fix React unique key warning when using renderLabel ([#14172](https://github.com/storybookjs/storybook/pull/14172))
+
+### Maintenance
+
+- Controls: Remove auto inference and add to CLI template ([#14182](https://github.com/storybookjs/storybook/pull/14182))
+
+## 6.2.0-beta.11 (March 9, 2021)
+
+### Bug Fixes
+
+- React: Fix fast refresh socket connection error ([#14165](https://github.com/storybookjs/storybook/pull/14165))
+
+### Dependency Upgrades
+
+- Update sveltedoc-parser to 4.1.0 ([#14164](https://github.com/storybookjs/storybook/pull/14164))
+
+## 6.2.0-beta.10 (March 5, 2021)
+
+### Bug Fixes
+
+- Angular: Keep story templates with an empty value ([#14113](https://github.com/storybookjs/storybook/pull/14113))
+- Core: Fix standalone API ... again ([#14140](https://github.com/storybookjs/storybook/pull/14140))
+
+## 6.2.0-beta.9 (March 4, 2021)
+
+### Bug Fixes
+
+- Core: Fix standalone API ([#14122](https://github.com/storybookjs/storybook/pull/14122))
+- Core: Fix main.ts/preview.ts handling ([#14123](https://github.com/storybookjs/storybook/pull/14123))
+
+## 6.2.0-beta.8 (March 4, 2021)
+
+### Features
+
+- Core: Add 'mapping' to support complex arg values ([#14100](https://github.com/storybookjs/storybook/pull/14100))
+
+## 6.2.0-beta.7 (March 4, 2021)
+
+Failed publish
+
+## 6.1.21 (March 3, 2021)
+
+### Bug Fixes
+
+- IE11: Transpile prettier down to ES5 ([#14047](https://github.com/storybookjs/storybook/pull/14047))
+- CLI: Add `--legacy-peer-deps` for NPM7 install ([#14106](https://github.com/storybookjs/storybook/pull/14106))
+- SyntaxHighlighter: Safely access clipboard on global.navigator ([#14035](https://github.com/storybookjs/storybook/pull/14035))
+
+## 6.2.0-beta.6 (March 3, 2021)
+
+### Features
+
+- Svelte: Fix async loaders in docs panel ([#14080](https://github.com/storybookjs/storybook/pull/14080))
+
+### Bug Fixes
+
+- CLI: Add `--legacy-peer-deps` for NPM7 install ([#14106](https://github.com/storybookjs/storybook/pull/14106))
+
+### Dependency Upgrades
+
+- [Security] Bump pug from 3.0.0 to 3.0.1 ([#14104](https://github.com/storybookjs/storybook/pull/14104))
+- [Security] Bump pug-code-gen from 3.0.1 to 3.0.2 ([#14105](https://github.com/storybookjs/storybook/pull/14105))
+
+## 6.2.0-beta.5 (March 1, 2021)
+
+### Features
+
+- Core: Add `renderLabel` to customize sidebar tree labels ([#13121](https://github.com/storybookjs/storybook/pull/13121))
+
+### Maintenance
+
+- Core: Namespace sidebar config options ([#14067](https://github.com/storybookjs/storybook/pull/14067))
+
+### Dependency Upgrades
+
+- Move back to the original react-sizeme package ([#14069](https://github.com/storybookjs/storybook/pull/14069))
+
+## 6.2.0-beta.4 (February 26, 2021)
+
+### Features
+
+- UI: Enable search for stories and fix `/` event listener ([#14062](https://github.com/storybookjs/storybook/pull/14062))
+- UI: Add collapse roots to sidebar navigation ([#13685](https://github.com/storybookjs/storybook/pull/13685))
+
+### Bug Fixes
+
+- Core: Support null and undefined in URL args ([#14049](https://github.com/storybookjs/storybook/pull/14049))
+- IE11: Transpile prettier down to ES5 ([#14047](https://github.com/storybookjs/storybook/pull/14047))
+- UI: Fix shortcut button focus border to support high contrast ([#13699](https://github.com/storybookjs/storybook/pull/13699))
+
+### Maintenance
+
+- Fix flaky color rendering ([#14054](https://github.com/storybookjs/storybook/pull/14054))
+
+## 6.2.0-beta.3 (February 25, 2021)
+
+### Features
+
+- CLI: Add builder option ([#14041](https://github.com/storybookjs/storybook/pull/14041))
+- CLI/Vue 2: install vue-loader upon init of vue 2 storybook ([#14018](https://github.com/storybookjs/storybook/pull/14018))
+
+### Bug Fixes
+
+- SyntaxHighlighter: Safely access clipboard on global.navigator ([#14035](https://github.com/storybookjs/storybook/pull/14035))
+
+## 6.2.0-beta.2 (February 24, 2021)
+
+### Features
+
+- Addon-controls: Add JSON tree editor for Object/Array Type args ([#12824](https://github.com/storybookjs/storybook/pull/12824))
+
+### Bug Fixes
+
+- CLI: Fix opening localhost in browser by default ([#14032](https://github.com/storybookjs/storybook/pull/14032))
+- Addon-Docs: Do not create extra Vue instance for Dynamic source rendering ([#14002](https://github.com/storybookjs/storybook/pull/14002))
+
+## 6.1.20 (February 24, 2021)
+
+- Deps: upgrade react-dev-utils to get newer immer ([#14015](https://github.com/storybookjs/storybook/pull/14015))
+
+## 6.2.0-beta.1 (February 23, 2021)
+
+### Bug Fixes
+
+- Core: Refactor ProgressPlugin handling ([#14016](https://github.com/storybookjs/storybook/pull/14016))
+
+### Dependency Upgrades
+
+- Deps: upgrade react-dev-utils to get newer immer ([#14015](https://github.com/storybookjs/storybook/pull/14015))
+
+## 6.1.19 (February 23, 2021)
+
+### Bug Fixes
+
+- Components: Add missing `regenerator-runtime` dependency ([#13991](https://github.com/storybookjs/storybook/pull/13991))
+
+## 6.2.0-beta.0 (February 22, 2021)
+
+Storybook 6.2 is in beta. 🎉🎉🎉
+
+Hundreds of improvements and fixes, including:
+
+- **Vue 3** - Official support for the latest version of Vue.
+- **Webpack 5** - Experimental support for the latest version of Webpack.
+- **Controls** - Controls improvements including URL sync, filtering, sorting, and more.
+- **Angular** - Overhauled Angular support.
+- **Svelte** - Overhauled Svelte support.
+
+Track the release in the Github: [Storybook 6.2 Release ⚡️](https://github.com/storybookjs/storybook/issues/13160)
+
+## 6.2.0-alpha.35 (February 22, 2021)
+
+### Bug Fixes
+
+- Webpack5: Fix progress plugin version conflict ([#14007](https://github.com/storybookjs/storybook/pull/14007))
+
+## 6.2.0-alpha.34 (February 22, 2021)
+
+### Maintenance
+
+- Core: Use webpack4 to build Manager UI instead of webpack5 ([#14001](https://github.com/storybookjs/storybook/pull/14001))
+- Yarn PnP: Add missing dependencies for Webpack 4/5 work ([#13992](https://github.com/storybookjs/storybook/pull/13992))
+
+### Dependency Upgrades
+
+- Core: Fix core/builder dependencies ([#13999](https://github.com/storybookjs/storybook/pull/13999))
+
+## 6.2.0-alpha.33 (February 22, 2021)
+
+### Features
+
+- Addon-docs: Support story.mdx, stories.mdx ([#13996](https://github.com/storybookjs/storybook/pull/13996))
+
+### Bug Fixes
+
+- Webpack5: Remove outdated html-webpack-plugin types ([#13986](https://github.com/storybookjs/storybook/pull/13986))
+
+### Dependency Upgrades
+
+- Move to a fork of react-sizeme with updated React peer dependency ([#13733](https://github.com/storybookjs/storybook/pull/13733))
+- Webpack4: Upgrade html-webpack-plugin and remove external types ([#13993](https://github.com/storybookjs/storybook/pull/13993))
+
+## 6.2.0-alpha.32 (February 21, 2021)
+
+### Breaking prerelease
+
+**NOTE:** this is a breaking change for users of `@storybook/vue3` which is currently in alpha prerelease:
+
+- Vue 3: Map args with setup hook & remove automatic props mapping ([#13981](https://github.com/storybookjs/storybook/pull/13981))
+
+### Bug Fixes
+
+- Webpack5: Fix compilation error display ([#13983](https://github.com/storybookjs/storybook/pull/13983))
+- Webpack5: Add semver to builder-webpack5 dependencies ([#13982](https://github.com/storybookjs/storybook/pull/13982))
+- CLI: Don't allow empty string as outputDir option ([#13969](https://github.com/storybookjs/storybook/pull/13969))
+
+## 6.2.0-alpha.31 (February 20, 2021)
+
+### Features
+
+- Angular: Support angular components without selector ([#13939](https://github.com/storybookjs/storybook/pull/13939))
+- Preact: Add CSF types ([#13963](https://github.com/storybookjs/storybook/pull/13963))
+
+### Bug Fixes
+
+- Addon-docs: Fix ArgsTable tab renamed to `Story` when using args ([#13845](https://github.com/storybookjs/storybook/pull/13845))
+- Angular: Correctly destroy angular application between each render ([#13956](https://github.com/storybookjs/storybook/pull/13956))
+- Webpack5: Fix warnings display in build-storybook ([#13975](https://github.com/storybookjs/storybook/pull/13975))
+
+## 6.2.0-alpha.30 (February 20, 2021)
+
+### Features
+
+- Core: Support webpack5 and webpack4 side by side ([#13808](https://github.com/storybookjs/storybook/pull/13808))
+
+### Bug Fixes
+
+- Args: Fix issues with string default values ([#13919](https://github.com/storybookjs/storybook/pull/13919))
+- Args: Prefer react runtime default values ([#13937](https://github.com/storybookjs/storybook/pull/13937))
+
+### Maintenance
+
+- Core: Improve preset handling test coverage ([#13951](https://github.com/storybookjs/storybook/pull/13951))
+
+## 6.2.0-alpha.29 (February 18, 2021)
+
+### Features
+
+- Core: Sync args state to URL ([#13803](https://github.com/storybookjs/storybook/pull/13803))
+- UI: Select search input value on / ([#13884](https://github.com/storybookjs/storybook/pull/13884))
+
+### Bug Fixes
+
+- Components: Add missing `regenerator-runtime` dependency ([#13916](https://github.com/storybookjs/storybook/pull/13916))
+
+### Maintenance
+
+- Core: Load middleware.cjs if it exists ([#13592](https://github.com/storybookjs/storybook/pull/13592))
+- Build: Ensure consistency of Chromatic snapshots of Zoom stories ([#13932](https://github.com/storybookjs/storybook/pull/13932))
+- Angular: Clean and improve angular-cli examples ([#13886](https://github.com/storybookjs/storybook/pull/13886))
+
+## 6.2.0-alpha.28 (February 15, 2021)
+
+### Bug Fixes
+
+- Addon-actions: Change to override default values ([#13912](https://github.com/storybookjs/storybook/pull/13912))
+- CLI: Add safe check for eslint overrides ([#13717](https://github.com/storybookjs/storybook/pull/13717))
+
+### Maintenance
+
+- CLI: Don't try to add packages that are already installed ([#13876](https://github.com/storybookjs/storybook/pull/13876))
+
+## 6.2.0-alpha.27 (February 15, 2021)
+
+### Features
+
+- Addon-controls: Infer color and date controls ([#13675](https://github.com/storybookjs/storybook/pull/13675))
+- Svelte: Support TypeScript and preprocessors ([#13900](https://github.com/storybookjs/storybook/pull/13900))
+- Addon-controls: Add include/exclude configuration options ([#13898](https://github.com/storybookjs/storybook/pull/13898))
+
+### Maintenance
+
+- Add catalog metadata to the addons ([#13666](https://github.com/storybookjs/storybook/pull/13666))
+- Misc: Clean TS config and bump `@storybook/preset-create-react-app` ([#13878](https://github.com/storybookjs/storybook/pull/13878))
+
+## 6.1.18 (February 15, 2021)
+
+### Bug Fixes
+
+- UI: Fix theming for focused search bar ([#13895](https://github.com/storybookjs/storybook/pull/13895))
+- Storyshots: Support main.js usage ([#13842](https://github.com/storybookjs/storybook/pull/13842))
+
+## 6.2.0-alpha.26 (February 13, 2021)
+
+### Features
+
+- Addon-controls: Files control ([#13544](https://github.com/storybookjs/storybook/pull/13544))
+- UI: Add a 'main' role to the Main component for a11y ([#13827](https://github.com/storybookjs/storybook/pull/13827))
+
+### Bug Fixes
+
+- Addon-docs/Vue3: Attach app context from preview to inline stories ([#13894](https://github.com/storybookjs/storybook/pull/13894))
+- UI: Fix theming for focused search bar ([#13895](https://github.com/storybookjs/storybook/pull/13895))
+
+### Maintenance
+
+- Build: Move all the `yarn install` in the `build` CI job ([#13872](https://github.com/storybookjs/storybook/pull/13872))
+- Build: Rework `test` NPM script ([#13871](https://github.com/storybookjs/storybook/pull/13871))
+
+## 6.2.0-alpha.25 (February 11, 2021)
+
+### Features
+
+- Addon-docs: Configure syntax highlighter language by story parameter ([#13869](https://github.com/storybookjs/storybook/pull/13869))
+- Svelte: Improved decorators ([#13785](https://github.com/storybookjs/storybook/pull/13785))
+- Addon-docs/Angular: Add dynamic source snippets ([#13740](https://github.com/storybookjs/storybook/pull/13740))
+
+### Bug Fixes
+
+- Vue 3: Fix decorators and add more examples ([#13855](https://github.com/storybookjs/storybook/pull/13855))
+- Storyshots: Support main.js usage ([#13842](https://github.com/storybookjs/storybook/pull/13842))
+
+### Maintenance
+
+- Core: Add tests for the preset behavior of core ([#13846](https://github.com/storybookjs/storybook/pull/13846))
+- Upgrade to danger-js@main ([#13857](https://github.com/storybookjs/storybook/pull/13857))
+
+## 6.2.0-alpha.24 (February 6, 2021)
+
+### Features
+
+- Addon-storyshots: Add support for Vue 3 ([#13828](https://github.com/storybookjs/storybook/pull/13828))
+
+### Maintenance
+
+- CLI: only kill other processes on fail ([#13822](https://github.com/storybookjs/storybook/pull/13822))
+
+## 6.2.0-alpha.23 (February 5, 2021)
+
+### Bug Fixes
+
+- Addon-docs/Vue3: Resolve vue3 package for addon-docs preset ([#13819](https://github.com/storybookjs/storybook/pull/13819))
+
+## 6.2.0-alpha.22 (February 5, 2021)
+
+### Bug Fixes
+
+- CLI: Fix opening localhost in browser by default ([#13812](https://github.com/storybookjs/storybook/pull/13812))
+
+## 6.1.17 (February 4, 2021)
+
+### Bug Fixes
+
+- CLI: Fix opening localhost in browser by default ([#13812](https://github.com/storybookjs/storybook/pull/13812))
+
+## 6.2.0-alpha.21 (February 4, 2021)
+
+### Features
+
+- Addon-docs: Add support for Vue 3 ([#13809](https://github.com/storybookjs/storybook/pull/13809))
+
+### Maintenance
+
+- Build: Exclude all test and story files from transpilation ([#13714](https://github.com/storybookjs/storybook/pull/13714))
+- Build: Generate version file with preval macro ([#13715](https://github.com/storybookjs/storybook/pull/13715))
+
+## 6.1.16 (February 2, 2021)
+
+### Bug Fixes
+
+- Addon-docs/Svelte: Fix component name in docgen-loader ([#13760](https://github.com/storybookjs/storybook/pull/13760))
+- UI: Fix copy to clipboard for insecure deployments ([#13777](https://github.com/storybookjs/storybook/pull/13777))
+
+## 6.2.0-alpha.20 (February 2, 2021)
+
+### Features
+
+- Vue: Add Vue 3 support ([#13775](https://github.com/storybookjs/storybook/pull/13775))
+- CLI: Add try/catch on readFileAsJson to improve error message ([#13730](https://github.com/storybookjs/storybook/pull/13730))
+- Core: Generate manager cache in smoke test, but don't use/clear any cache ([#13784](https://github.com/storybookjs/storybook/pull/13784))
+
+### Bug Fixes
+
+- Addon-docs/Svelte: Fix component name in docgen-loader ([#13760](https://github.com/storybookjs/storybook/pull/13760))
+- Addon-docs/Svelte: Fix component description ([#13659](https://github.com/storybookjs/storybook/pull/13659))
+- UI: Fix copy to clipboard for insecure deployments ([#13777](https://github.com/storybookjs/storybook/pull/13777))
+
+### Maintenance
+
+- CLI: Handle package versions in package strings for generators ([#13774](https://github.com/storybookjs/storybook/pull/13774))
+- Build: Do not recompile packages in publish step of the CI ([#13786](https://github.com/storybookjs/storybook/pull/13786))
+- CI: Remove generic cache key from Circle CI ([#13787](https://github.com/storybookjs/storybook/pull/13787))
+- CI: Upgrade cache GH Action & remove fallback caches ([#13752](https://github.com/storybookjs/storybook/pull/13752))
+
+## 6.2.0-alpha.19 (January 29, 2021)
+
+### Features
+
+- Addon-docs/Angular: Inline rendering support with angular-elements ([#13525](https://github.com/storybookjs/storybook/pull/13525))
+- CLI: Add version matcher functions for framework detection ([#13738](https://github.com/storybookjs/storybook/pull/13738))
+
+### Bug Fixes
+
+- CLI: Fix handling of version ranges in dependency checks ([#13759](https://github.com/storybookjs/storybook/pull/13759))
+
+### Maintenance
+
+- Build: Enable deepscan in workspace ([#13716](https://github.com/storybookjs/storybook/pull/13716))
+- Chore: Increase node version minimums to 10.13 ([#13725](https://github.com/storybookjs/storybook/pull/13725))
+- Fixes smoke-test on svelte-kitchen-sink ([#13705](https://github.com/storybookjs/storybook/pull/13705))
+
+## 6.1.15 (January 22, 2021)
+
+### Bug Fixes
+
+- Svelte: Fix duplicate story preview ([#13663](https://github.com/storybookjs/storybook/pull/13663))
+- Angular: Properly handle empty tsconfig compilerOptions ([#13596](https://github.com/storybookjs/storybook/pull/13596))
+
+### Maintenance
+
+- Angular: Use Nx function to read non-angularCli configs ([#13558](https://github.com/storybookjs/storybook/pull/13558))
+
+### Dependency Upgrades
+
+- Bump @types/reach\_\_router version ([#13703](https://github.com/storybookjs/storybook/pull/13703))
+
+## 6.2.0-alpha.18 (January 22, 2021)
+
+### Bug Fixes
+
+- Svelte: Fix duplicate story preview ([#13663](https://github.com/storybookjs/storybook/pull/13663))
+
+### Maintenance
+
+- Angular: Add Angular 11.1 support ([#13704](https://github.com/storybookjs/storybook/pull/13704))
+
+### Dependency Upgrades
+
+- Bump @types/reach\_\_router version ([#13703](https://github.com/storybookjs/storybook/pull/13703))
+
+## 6.2.0-alpha.17 (January 22, 2021)
+
+### Features
+
+- Addon-docs/Svelte: Add dynamic snippet support ([#13653](https://github.com/storybookjs/storybook/pull/13653))
+- Addon-docs/Svelte: Add Slots and Events to the generated ArgsTable ([#13660](https://github.com/storybookjs/storybook/pull/13660))
+
+### Bug Fixes
+
+- Angular: Force re-render if template change ([#13638](https://github.com/storybookjs/storybook/pull/13638))
+- Angular: Properly handle empty tsconfig compilerOptions ([#13596](https://github.com/storybookjs/storybook/pull/13596))
+
+### Maintenance
+
+- Core: Deprecate default postcss config, recommend addon-postcss ([#13669](https://github.com/storybookjs/storybook/pull/13669))
+- Core: Throw an error for invalid story format ([#13673](https://github.com/storybookjs/storybook/pull/13673))
+- Build: Ensure consistency of Chromatic snapshots of Zoom stories ([#13676](https://github.com/storybookjs/storybook/pull/13676))
+
+### Dependency Upgrades
+
+- Dependencies: Swap back to upstream postcss-loader ([#13698](https://github.com/storybookjs/storybook/pull/13698))
+
+## 6.2.0-alpha.16 (January 16, 2021)
+
+### Dependency Upgrades
+
+- Dependencies: Remove inquirer types ([#13651](https://github.com/storybookjs/storybook/pull/13651))
+- Dependencies: Swap postcss-loader for fork version ([#13655](https://github.com/storybookjs/storybook/pull/13655))
+
+## 6.2.0-alpha.15 (January 15, 2021)
+
+### Features
+
+- Addon-actions: Normalize args ([#13624](https://github.com/storybookjs/storybook/pull/13624))
+- Addon-viewport: Add viewports of the latest iPhones ([#13176](https://github.com/storybookjs/storybook/pull/13176))
+
+### Maintenance
+
+- Maintenance: Configure Renovate ([#13641](https://github.com/storybookjs/storybook/pull/13641))
+
+### Dependency Upgrades
+
+- Dependencies: 6.2 non-breaking package upgrades ([#13631](https://github.com/storybookjs/storybook/pull/13631))
+- Dependencies: Update postcss-loader to ^4.1.0 ([#13640](https://github.com/storybookjs/storybook/pull/13640))
+
+## 6.2.0-alpha.14 (January 14, 2021)
+
+### Bug Fixes
+
+- CLI: Fix sb init prompt when framework type is undetected ([#13520](https://github.com/storybookjs/storybook/pull/13520))
+
+### Maintenance
+
+- Rax: Migrate to TS ([#13450](https://github.com/storybookjs/storybook/pull/13450))
+- Riot: Migrate to TS ([#13447](https://github.com/storybookjs/storybook/pull/13447))
+- Marionette: Migrate to TS ([#13448](https://github.com/storybookjs/storybook/pull/13448))
+- Marko: Migrate to TS ([#13449](https://github.com/storybookjs/storybook/pull/13449))
+
+## 6.2.0-alpha.13 (January 13, 2021)
+
+### Features
+
+- Angular: Improve decorators ([#13507](https://github.com/storybookjs/storybook/pull/13507))
+
+### Maintenance
+
+- Angular: Fix flaky tests based on timezone ([#13609](https://github.com/storybookjs/storybook/pull/13609))
+- Angular: Use Nx function to read non-angularCli configs ([#13558](https://github.com/storybookjs/storybook/pull/13558))
+- Build: Move Preact E2E tests on a Node 12 executor ([#13582](https://github.com/storybookjs/storybook/pull/13582))
+- Addon-docs: Add missing types for Story doc block ([#13549](https://github.com/storybookjs/storybook/pull/13549))
+
+## 6.1.14 (January 12, 2021)
+
+### Bug Fixes
+
+- Core: Use fs-extra emptyDir so build works on docker volume ([#13474](https://github.com/storybookjs/storybook/pull/13474))
+- Addon-docs: Tighten preset webpack pattern for mdx stories ([#13476](https://github.com/storybookjs/storybook/pull/13476))
+- Typescript: Fix qs import in @storybook/client-api ([#13518](https://github.com/storybookjs/storybook/pull/13518))
+- CLI: Ensure --host option changes the network host ([#13521](https://github.com/storybookjs/storybook/pull/13521))
+- Svelte: Statically load docgen info for svelte components ([#13466](https://github.com/storybookjs/storybook/pull/13466))
+
+## 6.1.13 (January 12, 2021)
+
+NPM publish failed
+
+## 6.1.12 (January 12, 2021)
+
+### Bug Fixes
+
+- Addon-docs: Fix link not working cross origin ([#13022](https://github.com/storybookjs/storybook/pull/13022))
+- Addon-docs: Resolve babel-loader from storybook/core ([#13607](https://github.com/storybookjs/storybook/pull/13607))
+
+## 6.2.0-alpha.12 (January 12, 2021)
+
+### Bug Fixes
+
+- Addon-docs: Resolve babel-loader from storybook/core ([#13607](https://github.com/storybookjs/storybook/pull/13607))
+
+## 6.2.0-alpha.11 (January 11, 2021)
+
+### Features
+
+- HTML: Add CSF types ([#13519](https://github.com/storybookjs/storybook/pull/13519))
+- Addon-jest: Infer parameter from story filename if not provided ([#13535](https://github.com/storybookjs/storybook/pull/13535))
+- Server: Forward globals in fetchStoryHtml ([#13158](https://github.com/storybookjs/storybook/pull/13158))
+
+### Bug Fixes
+
+- Addon-docs: Fix link not working cross origin ([#13022](https://github.com/storybookjs/storybook/pull/13022))
+- Addon-docs: Use theme text color header anchors ([#13533](https://github.com/storybookjs/storybook/pull/13533))
+
+### Maintenance
+
+- Build: remove redundant checks for TS type declaration generation ([#13567](https://github.com/storybookjs/storybook/pull/13567))
+
+## 6.2.0-alpha.10 (December 28, 2020)
+
+### Bug Fixes
+
+- Typescript: Fix qs import in @storybook/client-api ([#13518](https://github.com/storybookjs/storybook/pull/13518))
+- CLI: Ensure --host option changes the network host ([#13521](https://github.com/storybookjs/storybook/pull/13521))
+
+### Maintenance
+
+- Perf: Reuse SVG icon paths by using symbols ([#13110](https://github.com/storybookjs/storybook/pull/13110))
+- Core: Fix typing of dev CLI options ([#13501](https://github.com/storybookjs/storybook/pull/13501))
+- Perf: Bundle only required syntax highlighter languages ([#13479](https://github.com/storybookjs/storybook/pull/13479))
+
+## 6.2.0-alpha.9 (December 20, 2020)
+
+### Features
+
+- Web-components: Add typescript types and CLI template ([#12395](https://github.com/storybookjs/storybook/pull/12395))
+
+### Bug Fixes
+
+- Addon-docs: Fix angular without compodoc ([#13487](https://github.com/storybookjs/storybook/pull/13487))
+- Core: Use fs-extra emptyDir so build works on docker volume ([#13474](https://github.com/storybookjs/storybook/pull/13474))
+- Addon-docs: Tighten preset webpack pattern for mdx stories ([#13476](https://github.com/storybookjs/storybook/pull/13476))
+- Svelte: Statically load docgen info for svelte components ([#13466](https://github.com/storybookjs/storybook/pull/13466))
+
+### Dependency Upgrades
+
+- Bump @ember/optional-features from 1.3.0 to 2.0.0 ([#12829](https://github.com/storybookjs/storybook/pull/12829))
+
+## 6.2.0-alpha.8 (December 16, 2020)
+
+### Bug Fixes
+
+- Angular: Fix `configFile: undefined` in ts-loader options ([#13382](https://github.com/storybookjs/storybook/pull/13382))
+
+### Maintenance
+
+- Angular: Deprecate the story component attribute ([#13383](https://github.com/storybookjs/storybook/pull/13383))
+
+## 6.2.0-alpha.7 (December 15, 2020)
+
+### Bug Fixes
+
+- CLI: Add overrides to CRA ESLint config ([#13452](https://github.com/storybookjs/storybook/pull/13452))
+
+### Maintenance
+
+- Perf: Lazy load OverlayScrollbars ([#13430](https://github.com/storybookjs/storybook/pull/13430))
+- Addon-docs: Remove unused titleFunction export ([#13457](https://github.com/storybookjs/storybook/pull/13457))
+- Perf: Distribute both ESM and CJS modules ([#13013](https://github.com/storybookjs/storybook/pull/13013))
+- Perf: Replace react-hotkeys with useEffect keybinding ([#13424](https://github.com/storybookjs/storybook/pull/13424))
+
+## 6.1.11 (December 12, 2020)
+
+### Bug Fixes
+
+- UI: Fix null ref in sidebar ([#13423](https://github.com/storybookjs/storybook/pull/13423))
+- Addon-docs: Handle svelte docgen failures gracefully ([#13386](https://github.com/storybookjs/storybook/pull/13386))
+
+### Dependency Upgrades
+
+- Update react-popper-tooltip and @popperjs/core for react17 ([#13434](https://github.com/storybookjs/storybook/pull/13434))
+
+## 6.2.0-alpha.6 (December 12, 2020)
+
+### Features
+
+- Main.js: Add previewHead, previewBody, managerHead presets ([#13432](https://github.com/storybookjs/storybook/pull/13432))
+
+### Bug Fixes
+
+- Core: Fix `modulesCount` cache storage and retrieval ([#13431](https://github.com/storybookjs/storybook/pull/13431))
+- UI: Fix null ref in sidebar ([#13423](https://github.com/storybookjs/storybook/pull/13423))
+
+### Maintenance
+
+- Components: Cleanup circular dependencies ([#13439](https://github.com/storybookjs/storybook/pull/13439))
+- Core: Generate bundle size report for prebuilt manager ([#13425](https://github.com/storybookjs/storybook/pull/13425))
+- CI: Speed up CircleCI workflows ([#13320](https://github.com/storybookjs/storybook/pull/13320))
+
+### Dependency Upgrades
+
+- Update react-popper-tooltip and @popperjs/core for react17 ([#13434](https://github.com/storybookjs/storybook/pull/13434))
+
 ## 6.2.0-alpha.5 (December 8, 2020)

 ### Bug Fixes
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -52,52 +52,20 @@ yarn test

 The options for running tests can be selected from the cli or be passed to `yarn test` with specific parameters. Available modes include `--watch`, `--coverage`, and `--runInBand`, which will respectively run tests in watch mode, output code coverage, and run selected test suites serially in the current process.

-You can use the `--update` flag to update snapshots or screenshots as needed.
+You can use the `--update` flag (or `jest -u`) to update snapshots or screenshots as needed.
+
+> NOTE: on Windows, remember to make sure git config `core.autocrlf` is set to false, in order to not override EOL in snapshots ( `git config --global core.autocrlf false` to set it globally). It is also recommended to run tests from WSL2 to avoid errors with unix-style paths.

 You can also pick suites from CLI. Suites available are listed below.

 ##### Core & Examples Tests

-`yarn test --core`
+`yarn test`

 This option executes tests from `<rootdir>/app/react`, `<rootdir>/app/vue`, and `<rootdir>/lib`.
 Before the tests are run, the project must be bootstrapped with core. You can accomplish this with `yarn bootstrap --core`

-##### CRA-kitchen-sink - Image snapshots using Storyshots
-
-`yarn test --image`
-
-This option executes tests from `<rootdir>/examples/official-storybook`
-In order for the image snapshots to be correctly generated, you must have a static build of the storybook up-to-date :
-
-```sh
-cd examples/official-storybook
-yarn build-storybook
-cd ../..
-yarn test --image
-```
-
-Puppeteer is used to launch and grab screenshots of example pages, while jest is used to assert matching images. (just like integration tests)
-
-#### 2b. Run e2e tests for CLI
-
-If you made any changes to the `lib/cli` package, the easiest way to verify that it doesn't break anything is to run e2e tests:
-
-```sh
-yarn test --cli
-```
-
-This will run a bash script located at `lib/cli/test/run_tests.sh`. It will copy the contents of `fixtures` into a temporary `run` directory, run `getstorybook` in each of the subdirectories, and check that storybook starts successfully using `yarn storybook --smoke-test`.
-
-After that, the `run` directory content will be compared with `snapshots`. You can update the snapshots by passing an `--update` flag:
-
-```sh
-yarn test --cli --update
-```
-
-In that case, please check the git diff before committing to make sure it only contains the intended changes.
-
-#### 2c. Run Linter
+#### 2b. Run Linter

 We use eslint as a linter for all code (including typescript code).

@ -126,7 +94,7 @@ It can be immensely helpful to get feedback in your editor, if you're using VsCo

 This should enable auto-fix for all source files, and give linting warnings and errors within your editor.

-### 2d. Run Cypress tests
+### 2c. Run Cypress tests

 First make sure the repo is bootstrapped.

@ -165,7 +133,7 @@ git commit -m "reproduction for issue #123"

 # fork the storybook repo to your account, then add the resulting remote
 git remote add <your-username> https://github.com/<your-username>/storybook.git
-git push -u <your-username> master
+git push -u <your-username> next
 ```

 If you follow that process, you can then link to the GitHub repository in the issue. See <https://github.com/storybookjs/storybook/issues/708#issuecomment-290589886> for an example.
@ -215,7 +183,7 @@ When creating new unit test files, the tests should adhere to a particular folde

 We welcome all contributions. There are many ways you can help us. This is few of those ways:

-Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, the best way is to [join the discord server and ask in the maintenance channel](https://discord.gg/sMFvFsG).
+Before you submit a new PR, make sure you run `yarn test`. Do not submit a PR if tests are failing. If you need any help, the best way is to [join the discord server and ask in the maintenance channel](https://discord.gg/storybook).

 ### Reviewing PRs

@ -280,7 +248,7 @@ If you run into trouble here, make sure your node, npm, and **_yarn_** are on th
 2.  `git clone https://github.com/storybookjs/storybook.git` _bonus_: use your own fork for this step
 3.  `cd storybook`
 4.  `yarn bootstrap --core`
-5.  `yarn test --core`
+5.  `yarn test`
 6.  `yarn dev` _You must have this running for your changes to show up_

 > NOTE: on windows you may need to run `yarn` before `yarn bootstrap` (between steps 3 and 4).
--- a/MAINTAINERS.md
+++ b/MAINTAINERS.md
@ -24,7 +24,6 @@ This document will document some of the processes that members of the documentat
 | components | |
 | core | |
 | decorators | |
-| dependencies:update | |
 | dependencies | |
 | discussion | |
 | do not merge | |
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -1,7 +1,16 @@
 <h1>Migration</h1>

 - [From version 6.1.x to 6.2.0](#from-version-61x-to-620)
-  - [New Angular renderer](#new-angular-renderer)
+  - [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)
+  - [6.2 Deprecations](#62-deprecations)
+    - [Deprecated implicit PostCSS loader](#deprecated-implicit-postcss-loader)
+    - [Deprecated default PostCSS plugins](#deprecated-default-postcss-plugins)
+    - [Deprecated showRoots config option](#deprecated-showroots-config-option)
+    - [Deprecated control.options](#deprecated-controloptions)
 - [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
  - [Addon-backgrounds preset](#addon-backgrounds-preset)
  - [Single story hoisting](#single-story-hoisting)
@ -143,9 +152,46 @@

 ## From version 6.1.x to 6.2.0

-### New Angular renderer
+### MDX pattern tweaked

-We've rewritten the Angular renderer in Storybook 6.1. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/react/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`:
+In 6.2 files ending in `stories.mdx` or `story.mdx` are now processed with Storybook's MDX compiler. Previously it only applied to files ending in `.stories.mdx` or `.story.mdx`. See more here: [#13996](https://github.com/storybookjs/storybook/pull/13996)
+
+### 6.2 Angular overhaul
+
+#### New Angular storyshots format
+
+We've updated the Angular storyshots format in 6.2, which is technically a breaking change. Apologies to semver purists: if you're using storyshots, you'll need to [update your snapshots](https://jestjs.io/docs/en/snapshot-testing#updating-snapshots).
+
+The new format hides the implementation details of `@storybook/angular` so that we can evolve its renderer without breaking your snapshots in the future.
+
+#### Deprecated Angular story component
+
+Storybook 6.2 for Angular uses `parameters.component` as the preferred way to specify your stories' components. The previous method, in which the component was a return value of the story, has been deprecated.
+
+Consider the existing story from 6.1 or earlier:
+
+```ts
+export default { title: 'Button' };
+export const Basic = () => ({
+  component: Button,
+  props: { label: 'Label' },
+});
+```
+
+From 6.2 this should be rewritten as:
+
+```ts
+export default { title: 'Button', component: Button };
+export const Basic = () => ({
+  props: { label: 'Label' },
+});
+```
+
+The new convention is consistent with how other frameworks and addons work in Storybook. The old way will be supported until 7.0. For a full discussion see https://github.com/storybookjs/storybook/issues/8673.
+
+#### New Angular renderer
+
+We've rewritten the Angular renderer in Storybook 6.2. It's meant to be entirely backwards compatible, but if you need to use the legacy renderer it's still available via a [parameter](https://storybook.js.org/docs/angular/writing-stories/parameters). To opt out of the new renderer, add the following to `.storybook/preview.ts`:

 ```ts
 export const parameters = {
@ -155,13 +201,87 @@ export const parameters = {

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

+### 6.2 Deprecations
+
+#### Deprecated implicit PostCSS loader
+
+Previously, `@storybook/core` would automatically add the `postcss-loader` to your preview. This caused issues for consumers when PostCSS upgraded to v8 and tools, like Autoprefixer and Tailwind, starting requiring the new version. Implictly adding `postcss-loader` will be removed in Storybook 7.0.
+
+Instead of continuing to include PostCSS inside the core library, it has been moved to [`@storybook/addon-postcss`](https://github.com/storybookjs/addon-postcss). This addon provides more fine-grained customization and will be upgraded more flexibly to track PostCSS upgrades.
+
+If you require PostCSS support, please install `@storybook/addon-postcss` in your project, add it to your list of addons inside `.storybook/main.js`, and configure a `postcss.config.js` file.
+
+Further information is available at https://github.com/storybookjs/storybook/issues/12668 and https://github.com/storybookjs/storybook/pull/13669.
+
+#### Deprecated default PostCSS plugins
+
+When relying on the [implicit PostCSS loader](#deprecated-implicit-postcss-loader), it would also add [autoprefixer v9](https://www.npmjs.com/package/autoprefixer/v/9.8.6) and [postcss-flexbugs-fixes v4](https://www.npmjs.com/package/postcss-flexbugs-fixes/v/4.2.1) plugins to the `postcss-loader` configuration when you didn't have a PostCSS config file (such as `postcss.config.js`) within your project.
+
+They will no longer be applied when switching to `@storybook/addon-postcss` and the implicit PostCSS features will be removed in Storybook 7.0.
+
+If you depend upon these plugins being applied, install them and create a `postcss.config.js` file within your project that contains:
+
+```js
+module.exports = {
+  plugins: [
+    require('postcss-flexbugs-fixes'),
+    require('autoprefixer')({
+      flexbox: 'no-2009',
+    }),
+  ],
+};
+```
+
+#### Deprecated showRoots config option
+
+Config options for the sidebar are now under the `sidebar` namespace. The `showRoots` option should be set as follows:
+
+```js
+addons.setConfig({
+  sidebar: {
+    showRoots: false,
+  },
+  // showRoots: false   <- this is deprecated
+});
+```
+
+The top-level `showRoots` option will be removed in Storybook 7.0.
+
+#### Deprecated control.options
+
+Possible `options` for a radio/check/select controls has been moved up to the argType level, and no longer accepts an object. Instead, you should specify `options` as an array. You can use `control.labels` to customize labels. Additionally, you can use a `mapping` to deal with complex values.
+
+```js
+argTypes: {
+  answer:
+    options: ['yes', 'no'],
+    mapping: {
+      yes: <Check />,
+      no: <Cross />,
+    },
+    control: {
+      type: 'radio',
+      labels: {
+        yes: 'да',
+        no: 'нет',
+      }
+    }
+  }
+}
+```
+
+Keys in `control.labels` as well as in `mapping` should match the values in `options`. Neither object has to be exhaustive, in case of a missing property, the option value will be used directly.
+
+If you are currently using an object as value for `control.options`, be aware that the key and value are reversed in `control.labels`.
+
 ## From version 6.0.x to 6.1.0

 ### Addon-backgrounds preset

 In 6.1 we introduced an unintentional breaking change to `addon-backgrounds`.

-The addon uses decorators which are set up automatically by a preset. The required preset is ignored if you register the addon in `main.js` withe the the `/register` entry point. This used to be valid in `v6.0.x` and earlier:
+The addon uses decorators which are set up automatically by a preset. The required preset is ignored if you register the addon in `main.js` with the `/register` entry point. This used to be valid in `v6.0.x` and earlier:
+
 ```js
 module.exports = {
  stories: ['../**/*.stories.js'],
@ -869,13 +989,13 @@ We've deprecated the following in 6.0: `addon-info`, `addon-notes`, `addon-conte

 The info/notes addons have been replaced by [addon-docs](https://github.com/storybookjs/storybook/tree/next/addons/docs). We've documented a migration in the [docs recipes](https://github.com/storybookjs/storybook/blob/next/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons).

-Both addons are still widely used, and their source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). We're looking for maintainers for both addons. If you're interested, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
+Both addons are still widely used, and their source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). We're looking for maintainers for both addons. If you're interested, please get in touch on [our Discord](https://discord.gg/storybook).

 #### Deprecated addon-contexts

 The contexts addon has been replaced by [addon-toolbars](https://github.com/storybookjs/storybook/blob/next/addons/toolbars), which is simpler, more ergonomic, and compatible with all Storybook frameworks.

-The addon's source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). If you're interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
+The addon's source code is still available in the [deprecated-addons repo](https://github.com/storybookjs/deprecated-addons). If you're interested in maintaining it, please get in touch on [our Discord](https://discord.gg/storybook).

 #### Removed addon-centered

@ -894,7 +1014,7 @@ Other possible values are: `padded` (default) and `fullscreen`.

 #### Deprecated polymer

-We've deprecated `@storybook/polymer` and are focusing on `@storybook/web-components`. If you use Polymer and are interested in maintaining it, please get in touch on [our Discord](https://discordapp.com/invite/UUt2PJb).
+We've deprecated `@storybook/polymer` and are focusing on `@storybook/web-components`. If you use Polymer and are interested in maintaining it, please get in touch on [our Discord](https://discord.gg/storybook).

 #### Deprecated immutable options parameters

--- a/README.md
+++ b/README.md
@ -25,7 +25,7 @@
    <img src="https://img.shields.io/github/license/storybookjs/storybook.svg" alt="License" />
  </a>
  <br/>
-  <a href="https://discord.gg/sMFvFsG">
+  <a href="https://discord.gg/storybook">
    <img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />
  </a>
  <a href="https://storybook.js.org/community/">
@ -86,7 +86,7 @@ Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/confi

 ### Community

-For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Slack (legacy)](https://now-examples-slackin-rrirkqohko.now.sh/).
+For additional help, join us [in our Discord](https://discord.gg/storybook) or [Slack (legacy)](https://now-examples-slackin-rrirkqohko.now.sh/).

 ## Projects

@ -95,17 +95,18 @@ For additional help, join us [in our Discord](https://discord.gg/sMFvFsG) or [Sl
 | Framework                                                   | Demo                                                                        |                                                                                                |
 | ----------------------------------------------------------- | --------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- |
 | [React](app/react)                                          | [v6.1.x](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react.svg)](app/react)                      |
-| [React Native](https://github.com/storybookjs/react-native) | -                                                                           | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native.svg)](app/react-native) |
 | [Vue](app/vue)                                              | [v6.1.x](https://storybookjs.netlify.com/vue-kitchen-sink/)                 | [![Vue](https://img.shields.io/npm/dm/@storybook/vue.svg)](app/vue)                            |
 | [Angular](app/angular)                                      | [v6.1.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.1.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.1.x](https://storybookjs.netlify.com/html-kitchen-sink/)                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                         |
+| [Ember](app/ember)                                          | [v6.1.x](https://storybookjs.netlify.com/ember-cli/)                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
+| [Svelte](app/svelte)                                        | [v6.1.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                   |
+| [Preact](app/preact)                                        | [v6.1.x](https://storybookjs.netlify.com/preact-kitchen-sink/)              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
 | [Marionette.js](app/marionette)                             | -                                                                           | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette.svg)](app/marionette)    |
 | [Mithril](app/mithril)                                      | [v6.1.x](https://storybookjs.netlify.com/mithril-kitchen-sink/)             | [![Mithril](https://img.shields.io/npm/dm/@storybook/mithril.svg)](app/mithril)                |
 | [Marko](app/marko)                                          | [v6.1.x](https://storybookjs.netlify.com/marko-cli/)                        | [![Marko](https://img.shields.io/npm/dm/@storybook/marko.svg)](app/marko)                      |
-| [HTML](app/html)                                            | [v6.1.x](https://storybookjs.netlify.com/html-kitchen-sink/)                | [![HTML](https://img.shields.io/npm/dm/@storybook/html.svg)](app/html)                         |
-| [Svelte](app/svelte)                                        | [v6.1.x](https://storybookjs.netlify.com/svelte-kitchen-sink/)              | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte.svg)](app/svelte)                   |
 | [Riot](app/riot)                                            | [v6.1.x](https://storybookjs.netlify.com/riot-kitchen-sink/)                | [![Riot](https://img.shields.io/npm/dm/@storybook/riot.svg)](app/riot)                         |
-| [Ember](app/ember)                                          | [v6.1.x](https://storybookjs.netlify.com/ember-cli/)                        | [![Ember](https://img.shields.io/npm/dm/@storybook/ember.svg)](app/ember)                      |
-| [Preact](app/preact)                                        | [v6.1.x](https://storybookjs.netlify.com/preact-kitchen-sink/)              | [![Preact](https://img.shields.io/npm/dm/@storybook/preact.svg)](app/preact)                   |
 | [Rax](app/rax)                                              | [v6.1.x](https://storybookjs.netlify.com/rax-kitchen-sink/)                 | [![Rax](https://img.shields.io/npm/dm/@storybook/rax.svg)](app/rax)                            |

 ### Sub Projects
@ -167,7 +168,7 @@ If you're looking for material to use in your presentation about storybook, like

 - Tweeting via [@storybookjs](https://twitter.com/storybookjs)
 - Blogging at [Medium](https://medium.com/storybookjs)
- Chatting on [Discord](https://discord.gg/sMFvFsG)
+- Chatting on [Discord](https://discord.gg/storybook)
 - Chatting (legacy) on [Slack](https://now-examples-slackin-rrirkqohko.now.sh/)
 - Streaming saved at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)

@ -177,12 +178,12 @@ We welcome contributions to Storybook!

 - 📥 Pull requests and 🌟 Stars are always welcome.
 - Read our [contributing guide](CONTRIBUTING.md) to get started,
-  or find us on [Discord](https://discord.gg/sMFvFsG), we will take the time to guide you
+  or find us on [Discord](https://discord.gg/storybook), we will take the time to guide you

 Looking for a first issue to tackle?

 - We tag issues with [![Good First Issue](https://img.shields.io/github/issues/storybookjs/storybook/good%20first%20issue.svg)](https://github.com/storybookjs/storybook/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22) when we think they are well suited for people who are new to the codebase or OSS in general.
- [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.
+- [Talk to us](https://discord.gg/storybook), we'll find something to suits your skills and learning interest.

 ### Development scripts

--- a/SECURITY.md
+++ b/SECURITY.md
@ -15,4 +15,4 @@ You can submit a vulnerability in a Storybook package at: https://www.npmjs.com/

 You can also 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.com/invite/UUt2PJb).
+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.js
+++ b/mocks/fs.js
@ -1,4 +1,4 @@
-const fs = jest.genMockFromModule('fs');
+const fs = jest.createMockFromModule('fs');

 // This is a custom function that our tests can use during setup to specify
 // what the files on the "mock" filesystem should look like when any of the
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,14 +1,15 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.2.0-alpha.5",
-  "description": "a11y addon for storybook",
+  "version": "6.2.0-beta.14",
+  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
    "accessibility",
    "addon",
    "storybook",
    "valid",
-    "verify"
+    "verify",
+    "test"
  ],
  "homepage": "https://github.com/storybookjs/storybook#readme",
  "bugs": {
@ -20,12 +21,13 @@
    "directory": "addons/a11y"
  },
  "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -33,33 +35,32 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts",
-    "ts3.4/**/*"
+    "*.d.ts"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/channels": "6.2.0-alpha.5",
-    "@storybook/client-api": "6.2.0-alpha.5",
-    "@storybook/client-logger": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "axe-core": "^4.0.1",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
-    "lodash": "^4.17.15",
-    "react-sizeme": "^2.5.2",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/channels": "6.2.0-beta.14",
+    "@storybook/client-api": "6.2.0-beta.14",
+    "@storybook/client-logger": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "axe-core": "^4.1.1",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
+    "lodash": "^4.17.20",
+    "react-sizeme": "^3.0.1",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@testing-library/react": "^10.0.4",
-    "@types/webpack-env": "^1.15.3"
+    "@testing-library/react": "^11.2.2",
+    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
@ -76,5 +77,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Accessibility",
+    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
 }
--- a/addons/a11y/preset.js
+++ b/addons/a11y/preset.js
@ -1 +1,13 @@
-module.exports = require('./dist/preset');
+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/register.js
+++ b/addons/a11y/register.js
@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');
--- a/addons/a11y/src/preset/addDecorator.ts
+++ b/addons/a11y/src/preset/addDecorator.ts
@ -1,3 +1,3 @@
-import { withA11y } from '../index';
+import { withA11y } from '.';

 export const decorators = [withA11y];
--- a/addons/a11y/src/preset/index.ts
+++ b/addons/a11y/src/preset/index.ts
@ -1,7 +0,0 @@
-export function managerEntries(entry: any[] = []) {
-  return [...entry, require.resolve('../register')];
-}
-
-export function config(entry: any[] = []) {
-  return [...entry, require.resolve('../a11yRunner'), require.resolve('../a11yHighlight')];
-}
--- a/addons/a11y/tsconfig.json
+++ b/addons/a11y/tsconfig.json
@ -11,5 +11,12 @@
    "noFallthroughCasesInSwitch": true
  },
  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*"]
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
 }
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,9 +1,11 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.2.0-alpha.5",
-  "description": "Action Logger addon for storybook",
+  "version": "6.2.0-beta.14",
+  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
-    "storybook"
+    "storybook",
+    "essentials",
+    "data-state"
  ],
  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/actions",
  "bugs": {
@ -15,12 +17,13 @@
    "directory": "addons/actions"
  },
  "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -28,34 +31,33 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts",
-    "ts3.4/**/*"
+    "*.d.ts"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/client-api": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "core-js": "^3.0.1",
-    "fast-deep-equal": "^3.1.1",
-    "global": "^4.3.2",
-    "lodash": "^4.17.15",
-    "polished": "^3.4.4",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/client-api": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "core-js": "^3.8.2",
+    "fast-deep-equal": "^3.1.3",
+    "global": "^4.4.0",
+    "lodash": "^4.17.20",
+    "polished": "^4.0.5",
    "prop-types": "^15.7.2",
-    "react-inspector": "^5.0.1",
+    "react-inspector": "^5.1.0",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2",
    "uuid-browser": "^3.1.0"
  },
  "devDependencies": {
-    "@types/lodash": "^4.14.150",
-    "@types/webpack-env": "^1.15.3"
+    "@types/lodash": "^4.14.167",
+    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
@ -72,5 +74,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Actions",
+    "unsupportedFrameworks": [
+      "react-native"
+    ],
+    "icon": "https://user-images.githubusercontent.com/263385/101991666-479cc600-3c7c-11eb-837b-be4e5ffa1bb8.png"
+  }
 }
--- a/addons/actions/preset.js
+++ b/addons/actions/preset.js
@ -1 +1,16 @@
-module.exports = require('./dist/preset');
+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/register.js
+++ b/addons/actions/register.js
@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');
--- a/addons/actions/src/preset/addArgs.test.ts
+++ b/addons/actions/src/preset/addArgs.test.ts
@ -17,18 +17,17 @@ describe('actions parameter enhancers', () => {
      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
    });

-    it('should prioritize pre-existing argTypes unless they are null', () => {
+    it('should override pre-existing argTypes', () => {
      const parameters = {
        ...baseParameters,
        argTypes: {
          onClick: { defaultValue: 'pre-existing value' },
-          onFocus: { defaultValue: null },
        },
      };
      const argTypes = inferActionsFromArgTypesRegex({ parameters } as StoryContext);
-      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onFocus']);
-      expect(argTypes.onClick.defaultValue).toEqual('pre-existing value');
-      expect(argTypes.onFocus.defaultValue).not.toBeNull();
+      expect(withDefaultValue(argTypes)).toEqual(['onClick']);
+      expect(argTypes.onClick.defaultValue).not.toBeNull();
+      expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
    });

    it('should do nothing if actions are disabled', () => {
@ -54,7 +53,7 @@ describe('actions parameter enhancers', () => {
      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
    });

-    it('should prioritize pre-existing args', () => {
+    it('should override pre-existing args', () => {
      const parameters = {
        ...baseParameters,
        argTypes: {
@ -64,7 +63,8 @@ describe('actions parameter enhancers', () => {
      };
      const argTypes = addActionsFromArgTypes({ parameters } as StoryContext);
      expect(withDefaultValue(argTypes)).toEqual(['onClick', 'onBlur']);
-      expect(argTypes.onClick.defaultValue).toEqual('pre-existing value');
+      expect(argTypes.onClick.defaultValue).not.toBeNull();
+      expect(argTypes.onClick.defaultValue).not.toEqual('pre-existing value');
    });

    it('should do nothing if actions are disabled', () => {
--- a/addons/actions/src/preset/addArgs.ts
+++ b/addons/actions/src/preset/addArgs.ts
@ -23,7 +23,7 @@ export const inferActionsFromArgTypesRegex: ArgTypesEnhancer = (context) => {
    if (!argTypesRegex.test(name)) {
      return argType;
    }
-    return { ...argType, defaultValue: argType.defaultValue || action(name) };
+    return { ...argType, defaultValue: action(name) };
  });
 };

@ -41,7 +41,7 @@ export const addActionsFromArgTypes: ArgTypesEnhancer = (context) => {
      return argType;
    }
    const message = typeof argType.action === 'string' ? argType.action : name;
-    return { ...argType, defaultValue: argType.defaultValue || action(message) };
+    return { ...argType, defaultValue: action(message) };
  });
 };

--- a/addons/actions/src/preset/index.ts
+++ b/addons/actions/src/preset/index.ts
@ -1,15 +0,0 @@
-interface ActionsOptions {
-  addDecorator?: boolean;
-}
-
-export function managerEntries(entry: any[] = [], options: any) {
-  return [...entry, require.resolve('../register')];
-}
-
-export function config(entry: any[] = [], { addDecorator = true }: ActionsOptions = {}) {
-  const actionConfig = [];
-  if (addDecorator) {
-    actionConfig.push(require.resolve('./addDecorator'));
-  }
-  return [...entry, ...actionConfig, require.resolve('./addArgs')];
-}
--- a/addons/actions/src/preview/tests/action.test.js
+++ b/addons/actions/src/preview/tests/action.test.js
@ -16,7 +16,7 @@ describe('Action', () => {

    action('test-action')('one');

-    expect(getChannelData(channel)[0]).toEqual('one');
+    expect(getChannelData(channel)).toEqual('one');
  });

  it('with multiple arguments', () => {
@ -46,7 +46,7 @@ describe('Depth config', () => {
      },
    });

-    expect(getChannelData(channel)[0]).toEqual({
+    expect(getChannelData(channel)).toEqual({
      root: {
        one: {
          two: 'foo',
@ -76,7 +76,7 @@ describe('Depth config', () => {
      },
    });

-    expect(getChannelData(channel)[0]).toEqual({
+    expect(getChannelData(channel)).toEqual({
      root: {
        one: {
          two: {
@ -111,7 +111,7 @@ describe('allowFunction config', () => {
      },
    });

-    expect(getChannelData(channel)[0]).toEqual({
+    expect(getChannelData(channel)).toEqual({
      root: {
        one: {
          a: 1,
@ -140,7 +140,7 @@ describe('allowFunction config', () => {
      },
    });

-    expect(getChannelData(channel)[0]).toEqual({
+    expect(getChannelData(channel)).toEqual({
      root: {
        one: {
          a: 1,
--- a/addons/actions/src/preview/tests/actions.test.js
+++ b/addons/actions/src/preview/tests/actions.test.js
@ -20,7 +20,7 @@ describe('Actions', () => {
    expect(Object.keys(actionsResult)).toEqual(['test-action']);
    actionsResult['test-action']('one');

-    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: 'one' });
  });

  it('with multiple arguments', () => {
@ -33,8 +33,8 @@ describe('Actions', () => {
    actionsResult['test-action']('one');
    actionsResult['test-action2']('two');

-    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
-    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: 'one' });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: 'two' });
  });

  it('with multiple arguments + config', () => {
@ -47,8 +47,8 @@ describe('Actions', () => {
    actionsResult['test-action']('one');
    actionsResult['test-action2']('two');

-    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
-    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: 'one' });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: 'two' });

    expect(getChannelOptions(channel, 0).some).toEqual('config');
    expect(getChannelOptions(channel, 1).some).toEqual('config');
@ -67,8 +67,8 @@ describe('Actions', () => {
    actionsResult['test-action']('one');
    actionsResult['test-action2']('two');

-    expect(getChannelData(channel, 0)).toEqual({ name: 'test action', args: ['one'] });
-    expect(getChannelData(channel, 1)).toEqual({ name: 'test action two', args: ['two'] });
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test action', args: 'one' });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test action two', args: 'two' });
  });

  it('with first argument as array of arguments + config', () => {
@ -81,8 +81,8 @@ describe('Actions', () => {
    actionsResult['test-action']('one');
    actionsResult['test-action2']('two');

-    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: ['one'] });
-    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: ['two'] });
+    expect(getChannelData(channel, 0)).toEqual({ name: 'test-action', args: 'one' });
+    expect(getChannelData(channel, 1)).toEqual({ name: 'test-action2', args: 'two' });

    expect(getChannelOptions(channel, 0).some).toEqual('config');
    expect(getChannelOptions(channel, 1).some).toEqual('config');
--- a/addons/actions/src/preview/action.ts
+++ b/addons/actions/src/preview/action.ts
@ -14,11 +14,12 @@ export function action(name: string, options: ActionOptions = {}): HandlerFuncti
    const channel = addons.getChannel();
    const id = uuidv4();
    const minDepth = 5; // anything less is really just storybook internals
+    const normalizedArgs = args.length > 1 ? args : args[0];

    const actionDisplayToEmit: ActionDisplay = {
      id,
      count: 0,
-      data: { name, args },
+      data: { name, args: normalizedArgs },
      options: {
        ...actionOptions,
        depth: minDepth + (actionOptions.depth || 3),
--- a/addons/actions/tsconfig.json
+++ b/addons/actions/tsconfig.json
@ -5,5 +5,12 @@
    "types": ["webpack-env", "jest"]
  },
  "include": ["src/**/*"],
-  "exclude": ["src/__tests__/**/*", "src/**/*.test.ts"]
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
 }
--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,12 +1,14 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.2.0-alpha.5",
-  "description": "A storybook addon to show different backgrounds for your preview",
+  "version": "6.2.0-beta.14",
+  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
    "background",
    "react",
-    "storybook"
+    "storybook",
+    "essentials",
+    "design"
  ],
  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/backgrounds",
  "bugs": {
@ -19,12 +21,13 @@
  },
  "license": "MIT",
  "author": "jbaxleyiii",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -32,28 +35,27 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts",
-    "ts3.4/**/*"
+    "*.d.ts"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/client-logger": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/client-logger": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@types/webpack-env": "^1.15.3"
+    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
@ -70,5 +72,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Backgrounds",
+    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
 }
--- a/addons/backgrounds/preset.js
+++ b/addons/backgrounds/preset.js
@ -1 +1,16 @@
-module.exports = require('./dist/preset');
+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/register.js
+++ b/addons/backgrounds/register.js
@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');
--- a/addons/backgrounds/src/preset/index.ts
+++ b/addons/backgrounds/src/preset/index.ts
@ -1,7 +0,0 @@
-export function config(entry: any[] = []) {
-  return [...entry, require.resolve('./addDecorator'), require.resolve('./addParameter')];
-}
-
-export function managerEntries(entry: any[] = [], options: any) {
-  return [...entry, require.resolve('../register')];
-}
--- a/addons/backgrounds/tsconfig.json
+++ b/addons/backgrounds/tsconfig.json
@ -8,6 +8,11 @@
    "src/**/*"
  ],
  "exclude": [
-    "src/__tests__/**/*"
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
  ]
 }
--- a/addons/controls/README.md
+++ b/addons/controls/README.md
@ -28,11 +28,15 @@ The usage is documented in the [documentation](https://storybook.js.org/docs/rea

 ## FAQs

- [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
- [How do I migrate from addon-knobs?](#how-do-i-migrate-from-addon-knobs)
- [My controls aren't being auto-generated. What should I do?](#my-controls-arent-being-auto-generated-what-should-i-do)
- [How can I disable controls for certain fields on a particular story?](#how-can-i-disable-controls-for-certain-fields-on-a-particular-story)
- [How do controls work with MDX?](#how-do-controls-work-with-mdx)
+- [Storybook Controls Addon](#storybook-controls-addon)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [FAQs](#faqs)
+    - [How will this replace addon-knobs?](#how-will-this-replace-addon-knobs)
+    - [How do I migrate from addon-knobs?](#how-do-i-migrate-from-addon-knobs)
+    - [My controls aren't being auto-generated. What should I do?](#my-controls-arent-being-auto-generated-what-should-i-do)
+    - [How can I disable controls for certain fields on a particular story?](#how-can-i-disable-controls-for-certain-fields-on-a-particular-story)
+    - [How do controls work with MDX?](#how-do-controls-work-with-mdx)

 ### How will this replace addon-knobs?

@ -40,7 +44,7 @@ Addon-knobs is one of Storybook's most popular addons with over 1M weekly downlo

 Therefore, rather than deprecating addon-knobs immediately, we will continue to release knobs with the Storybook core distribution until 7.0. This will give us time to improve Controls based on user feedback, and also give knobs users ample time to migrate.

-If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, hop on our [Discord](https://discord.gg/UUt2PJb).
+If you are somehow tied to knobs or prefer the knobs interface, we are happy to take on maintainers for the knobs project. If this interests you, hop on our [Discord](https://discord.gg/storybook).

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

@ -117,7 +121,7 @@ export default {
  title: 'Button',
  argTypes: {
    label: { control: 'text' },
-    borderWidth: { control: { type: 'number', min: 0, max: 10 }},
+    borderWidth: { control: { type: 'number', min: 0, max: 10 } },
  },
 };

--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,13 +1,15 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.2.0-alpha.5",
-  "description": "Controls for component properties",
+  "version": "6.2.0-beta.14",
+  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
    "storybook",
    "knobs",
    "controls",
-    "properties"
+    "properties",
+    "essentials",
+    "data-state"
  ],
  "homepage": "https://github.com/storybookjs/storybook/tree/next/addons/controls",
  "bugs": {
@ -19,7 +21,16 @@
    "directory": "addons/controls"
  },
  "license": "MIT",
-  "main": "dist/register.js",
+  "main": "dist/cjs/register.js",
+  "module": "dist/esm/register.js",
+  "types": "dist/ts3.9/index.d.ts",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "dist/ts3.4/*"
+      ]
+    }
+  },
  "files": [
    "dist/**/*",
    "README.md",
@ -30,13 +41,13 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/client-api": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/node-logger": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "core-js": "^3.0.1",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/client-api": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/node-logger": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "core-js": "^3.8.2",
    "ts-dedent": "^2.0.0"
  },
  "peerDependencies": {
@ -54,5 +65,16 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Controls",
+    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
+    "supportedFrameworks": [
+      "react",
+      "vue",
+      "angular",
+      "web-components",
+      "ember"
+    ]
+  }
 }
--- a/addons/controls/preset.js
+++ b/addons/controls/preset.js
@ -1 +1,8 @@
-module.exports = require('./dist/preset');
+const { ensureDocsBeforeControls } = require('./dist/cjs/preset/ensureDocsBeforeControls');
+
+function managerEntries(entry = [], options) {
+  ensureDocsBeforeControls(options.configDir);
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = { managerEntries };
--- a/addons/controls/register.js
+++ b/addons/controls/register.js
@ -1 +1 @@
-export * from './dist/register';
+import './dist/esm/register';
--- a/addons/controls/src/components/ControlsPanel.tsx
+++ b/addons/controls/src/components/ControlsPanel.tsx
@ -1,8 +1,8 @@
 import React, { FC } from 'react';
-import { ArgsTable, NoControlsWarning } from '@storybook/components';
 import { useArgs, useArgTypes, useParameter } from '@storybook/api';
+import { ArgsTable, NoControlsWarning } from '@storybook/components';

-import { PARAM_KEY } from '../constants';
+import { PARAM_KEY } from './constants';

 interface ControlsParameters {
  expanded?: boolean;
@ -17,10 +17,13 @@ export const ControlsPanel: FC = () => {
    PARAM_KEY,
    {}
  );
-  const hasControls = Object.values(rows).filter((argType) => !!argType?.control).length > 0;
+
+  const hasControls = Object.values(rows).some((arg) => arg?.control);
+  const showWarning = !(hasControls && isArgsStory) && !hideNoControlsWarning;
+
  return (
    <>
-      {(hasControls && isArgsStory) || hideNoControlsWarning ? null : <NoControlsWarning />}
+      {showWarning && <NoControlsWarning />}
      <ArgsTable
        {...{
          compact: !expanded && hasControls,
--- a/addons/controls/src/components/NoControlsWarning.tsx
+++ b/addons/controls/src/components/NoControlsWarning.tsx
@ -1,23 +0,0 @@
-import React from 'react';
-import { styled } from '@storybook/theming';
-import { Link } from '@storybook/components';
-
-const NoControlsWrapper = styled.div(({ theme }) => ({
-  background: theme.background.warning,
-  padding: '10px 15px',
-  lineHeight: '20px',
-  boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`,
-}));
-
-export const NoControlsWarning = () => (
-  <NoControlsWrapper>
-    This story is not configured to handle controls.&nbsp;
-    <Link
-      href="https://github.com/storybookjs/storybook/blob/next/addons/controls/README.md#writing-stories"
-      target="_blank"
-      cancel={false}
-    >
-      Learn how to add controls »
-    </Link>
-  </NoControlsWrapper>
-);
--- a/addons/controls/src/preset/index.ts
+++ b/addons/controls/src/preset/index.ts
@ -1,6 +0,0 @@
-import { ensureDocsBeforeControls } from './ensureDocsBeforeControls';
-
-export function managerEntries(entry: any[] = [], options: any) {
-  ensureDocsBeforeControls(options.configDir);
-  return [...entry, require.resolve('../register')];
-}
--- a/addons/controls/src/register.tsx
+++ b/addons/controls/src/register.tsx
@ -1,14 +1,18 @@
 import React from 'react';
 import addons, { types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
-import { API } from '@storybook/api';
-import { ControlsPanel } from './components/ControlsPanel';
-import { getTitle } from './title';
+import { API, useArgTypes } from '@storybook/api';
+import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';

 addons.register(ADDON_ID, (api: API) => {
  addons.addPanel(ADDON_ID, {
-    title: getTitle,
+    title() {
+      const rows = useArgTypes();
+      const controlsCount = Object.values(rows).filter((argType) => argType?.control).length;
+      const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
+      return `Controls${suffix}`;
+    },
    type: types.PANEL,
    paramKey: PARAM_KEY,
    render: ({ key, active }) => {
--- a/addons/controls/src/title.ts
+++ b/addons/controls/src/title.ts
@ -1,8 +0,0 @@
-import { useArgTypes } from '@storybook/api';
-
-export function getTitle(): string {
-  const rows = useArgTypes();
-  const controlsCount = Object.values(rows).filter((argType) => argType?.control).length;
-  const suffix = controlsCount === 0 ? '' : ` (${controlsCount})`;
-  return `Controls${suffix}`;
-}
--- a/addons/controls/tsconfig.json
+++ b/addons/controls/tsconfig.json
@ -5,5 +5,12 @@
    "types": ["webpack-env", "jest", "node"]
  },
  "include": ["src/**/*"],
-  "exclude": ["src/**.test.ts"]
+  "exclude": [
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
+  ]
 }
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,12 +1,13 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "6.2.0-alpha.5",
+  "version": "6.2.0-beta.14",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
    "cssresources",
    "react",
-    "storybook"
+    "storybook",
+    "style"
  ],
  "homepage": "https://storybook.js.org",
  "bugs": {
@ -19,12 +20,13 @@
  },
  "license": "MIT",
  "author": "nm123github",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -32,24 +34,23 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts",
-    "ts3.4/**/*"
+    "*.d.ts"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7"
  },
  "devDependencies": {
-    "@types/webpack-env": "^1.15.3"
+    "@types/webpack-env": "^1.16.0"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
@ -66,5 +67,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "CSS Resources",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
 }
--- a/addons/cssresources/preset.js
+++ b/addons/cssresources/preset.js
@ -0,0 +1,5 @@
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = { managerEntries };
--- a/addons/cssresources/register.js
+++ b/addons/cssresources/register.js
@ -1 +1 @@
-require('./dist/register.js');
+require('./dist/esm/register.js');
--- a/addons/cssresources/tsconfig.json
+++ b/addons/cssresources/tsconfig.json
@ -8,6 +8,11 @@
    "src/**/*"
  ],
  "exclude": [
-    "src/__tests__/**/*"
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
  ]
 }
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "6.2.0-alpha.5",
+  "version": "6.2.0-beta.14",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -21,12 +21,13 @@
    "directory": "addons/design-assets"
  },
  "license": "MIT",
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/ts3.9/index.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -34,24 +35,23 @@
    "dist/**/*",
    "README.md",
    "*.js",
-    "*.d.ts",
-    "ts3.4/**/*"
+    "*.d.ts"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/client-logger": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "core-js": "^3.0.1",
-    "global": "^4.3.2",
+    "@storybook/addons": "6.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/client-logger": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "core-js": "^3.8.2",
+    "global": "^4.4.0",
    "regenerator-runtime": "^0.13.7",
    "ts-dedent": "^2.0.0",
-    "use-image": "^1.0.3"
+    "use-image": "^1.0.7"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0",
@ -68,5 +68,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Design assets",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
 }
--- a/addons/design-assets/preset.js
+++ b/addons/design-assets/preset.js
@ -0,0 +1,5 @@
+function managerEntries(entry = [], options) {
+  return [...entry, require.resolve('./dist/esm/register')];
+}
+
+module.exports = { managerEntries };
--- a/addons/design-assets/register.js
+++ b/addons/design-assets/register.js
@ -1 +1 @@
-require('./dist/register');
+require('./dist/esm/register');
--- a/addons/design-assets/tsconfig.json
+++ b/addons/design-assets/tsconfig.json
@ -8,6 +8,11 @@
    "src/**/*"
  ],
  "exclude": [
-    "src/__tests__/**/*"
+    "src/**/*.test.*",
+    "src/**/tests/**/*",
+    "src/**/__tests__/**/*",
+    "src/**/*.stories.*",
+    "src/**/*.mockdata.*",
+    "src/**/__testfixtures__/**"
  ]
 }
--- a/addons/docs/README.md
+++ b/addons/docs/README.md
@ -37,7 +37,7 @@ Click on the `Docs` tab to see it:
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/docs-tab.png" width="100%" />
 </center>

-For more information on how it works, see the [`DocsPage` reference](./docs/docspage.md).
+For more information on how it works, see the [`DocsPage` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md).

 ## MDX

@ -73,7 +73,7 @@ And here's how that's rendered in Storybook:
  <img src="https://raw.githubusercontent.com/storybookjs/storybook/master/addons/docs/docs/media/mdx-simple.png" width="100%" />
 </center>

-For more information on `MDX`, see the [`MDX` reference](./docs/mdx.md).
+For more information on `MDX`, see the [`MDX` reference](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md).

 ## Framework support

@ -87,13 +87,13 @@ Storybook Docs supports all view layers that Storybook supports except for React
 | Source            |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
 | Notes / Info      |   +   |  +  |    +    |   +   |       +        |  +   |   +    |   +    |  +   |    +    |   +   |
 | Props table       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
-| Props controls    |   +   |  +  |         |       |                |      |        |        |      |         |       |
+| Props controls    |   +   |  +  |    +    |       |                |      |        |        |      |         |       |
 | Description       |   +   |  +  |    +    |   +   |       +        |      |        |        |      |         |       |
-| Inline stories    |   +   |  +  |         |       |       +        |  +   |        |        |      |         |       |
+| Inline stories    |   +   |  +  |    +    |       |       +        |  +   |        |        |      |         |       |

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

-Want to add enhanced features to your favorite framework? Check out this [dev guide](./docs/multiframework.md)
+Want to add enhanced features to your favorite framework? Check out this [dev guide](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/multiframework.md)

 ## Installation

@ -118,7 +118,7 @@ module.exports = {
 };
 ```

-If using in conjunction with the [storyshots add-on](../storyshots/storyshots-core/README.md), you will need to
+If using in conjunction with the [storyshots add-on](https://github.com/storybookjs/storybook/blob/next/addons/storyshots/storyshots-core/README.md), you will need to
 configure Jest to transform MDX stories into something Storyshots can understand:

 Add the following to your Jest configuration:
@ -134,12 +134,12 @@ Add the following to your Jest configuration:

 ### Be sure to check framework specific installation needs

- [React](./react) (covered here)
- [Vue](./vue)
- [Angular](./angular)
- [Ember](./ember)
- [Web Components](./web-components)
- [Common setup (all other frameworks)](./common)
+- [React](https://github.com/storybookjs/storybook/tree/next/addons/docs/react) (covered here)
+- [Vue](https://github.com/storybookjs/storybook/tree/next/addons/docs/vue)
+- [Angular](https://github.com/storybookjs/storybook/tree/next/addons/docs/angular)
+- [Ember](https://github.com/storybookjs/storybook/tree/next/addons/docs/ember)
+- [Web Components](https://github.com/storybookjs/storybook/tree/next/addons/docs/web-components)
+- [Common setup (all other frameworks)](https://github.com/storybookjs/storybook/tree/next/addons/docs/common)

 ## Preset options

@ -226,12 +226,12 @@ addParameters({

 ## TypeScript configuration

-As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](./docs/props-tables.md).
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/react/configure/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md).

 ## More resources

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

- References: [DocsPage](./docs/docspage.md) / [MDX](./docs/mdx.md) / [FAQ](./docs/faq.md) / [Recipes](./docs/recipes.md) / [Theming](./docs/theming.md) / [Props](./docs/props-tables.md)
+- References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/addons/docs/docs/props-tables.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
--- a/addons/docs/angular/README.md
+++ b/addons/docs/angular/README.md
@ -206,6 +206,30 @@ And for `MDX` you can modify it as an attribute on the `Story` element:
 <Story name='basic' height='400px'>{...}</Story>
 ```

+## Inline Stories
+
+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
+import { addParameters } from '@storybook/angular';
+import { prepareForInline } from '@storybook/addon-docs/angular/inline';
+
+addParameters({
+  docs: {
+    inlineStories: true,
+    prepareForInline,
+  },
+});
+```
+
 ## More resources

 Want to learn more? Here are some more articles on Storybook Docs:
--- a/addons/docs/angular/index.js
+++ b/addons/docs/angular/index.js
@ -1 +1 @@
-module.exports = require('../dist/frameworks/angular/index');
+module.exports = require('../dist/esm/frameworks/angular/index');
--- a/addons/docs/angular/inline.js
+++ b/addons/docs/angular/inline.js
@ -0,0 +1 @@
+module.exports = require('../dist/esm/frameworks/angular/prepareForInline');
--- a/addons/docs/aurelia/index.js
+++ b/addons/docs/aurelia/index.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/aurelia/index');
--- a/addons/docs/blocks.d.ts
+++ b/addons/docs/blocks.d.ts
@ -1,2 +1,2 @@
 export { ColorPalette, ColorItem, IconGallery, IconItem, Typeset } from '@storybook/components';
-export * from './dist/blocks/index.d';
+export * from './dist/ts3.9/blocks/index.d';
--- a/addons/docs/blocks.js
+++ b/addons/docs/blocks.js
@ -1 +1 @@
-module.exports = require('./dist/blocks');
+export * from './dist/esm/blocks';
--- a/addons/docs/common-preset.js
+++ b/addons/docs/common-preset.js
@ -0,0 +1,19 @@
+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/common/index.js
+++ b/addons/docs/common/index.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common');
--- a/addons/docs/common/preset.js
+++ b/addons/docs/common/preset.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/preset');
--- a/addons/docs/ember/index.js
+++ b/addons/docs/ember/index.js
@ -1 +1 @@
-module.exports = require('../dist/frameworks/ember');
+module.exports = require('../dist/esm/frameworks/ember');
--- a/addons/docs/html/index.js
+++ b/addons/docs/html/index.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/index');
--- a/addons/docs/mdx-compiler-plugin.js
+++ b/addons/docs/mdx-compiler-plugin.js
@ -1 +1 @@
-module.exports = require('./dist/mdx/mdx-compiler-plugin');
+module.exports = require('./dist/cjs/mdx/mdx-compiler-plugin');
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,11 +1,14 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.2.0-alpha.5",
-  "description": "Superior documentation for your components",
+  "version": "6.2.0-beta.14",
+  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
    "notes",
-    "storybook"
+    "documentation",
+    "storybook",
+    "essentials",
+    "organize"
  ],
  "homepage": "https://github.com/storybookjs/storybook/tree/master/addons/docs",
  "bugs": {
@ -17,12 +20,13 @@
    "directory": "addons/docs"
  },
  "license": "MIT",
-  "main": "dist/public_api.js",
-  "types": "dist/public_api.d.ts",
+  "main": "dist/cjs/public_api.js",
+  "module": "dist/esm/public_api.js",
+  "types": "dist/ts3.9/public_api.d.ts",
  "typesVersions": {
    "<3.8": {
      "*": [
-        "ts3.4/*"
+        "dist/ts3.4/*"
      ]
    }
  },
@ -39,108 +43,124 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.4/**/*",
    "!__testfixtures__"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@babel/core": "^7.12.1",
-    "@babel/generator": "^7.12.1",
-    "@babel/parser": "^7.12.3",
-    "@babel/plugin-transform-react-jsx": "^7.12.1",
-    "@babel/preset-env": "^7.12.1",
-    "@jest/transform": "^26.0.0",
-    "@mdx-js/loader": "^1.6.19",
-    "@mdx-js/mdx": "^1.6.19",
-    "@mdx-js/react": "^1.6.19",
-    "@storybook/addons": "6.2.0-alpha.5",
-    "@storybook/api": "6.2.0-alpha.5",
-    "@storybook/client-api": "6.2.0-alpha.5",
-    "@storybook/client-logger": "6.2.0-alpha.5",
-    "@storybook/components": "6.2.0-alpha.5",
-    "@storybook/core": "6.2.0-alpha.5",
-    "@storybook/core-events": "6.2.0-alpha.5",
+    "@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.2.0-beta.14",
+    "@storybook/api": "6.2.0-beta.14",
+    "@storybook/builder-webpack4": "6.2.0-beta.14",
+    "@storybook/client-api": "6.2.0-beta.14",
+    "@storybook/client-logger": "6.2.0-beta.14",
+    "@storybook/components": "6.2.0-beta.14",
+    "@storybook/core": "6.2.0-beta.14",
+    "@storybook/core-events": "6.2.0-beta.14",
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.2.0-alpha.5",
-    "@storybook/postinstall": "6.2.0-alpha.5",
-    "@storybook/source-loader": "6.2.0-alpha.5",
-    "@storybook/theming": "6.2.0-alpha.5",
-    "acorn": "^7.1.0",
-    "acorn-jsx": "^5.1.0",
-    "acorn-walk": "^7.0.0",
-    "core-js": "^3.0.1",
+    "@storybook/node-logger": "6.2.0-beta.14",
+    "@storybook/postinstall": "6.2.0-beta.14",
+    "@storybook/source-loader": "6.2.0-beta.14",
+    "@storybook/theming": "6.2.0-beta.14",
+    "acorn": "^7.4.1",
+    "acorn-jsx": "^5.3.1",
+    "acorn-walk": "^7.2.0",
+    "core-js": "^3.8.2",
    "doctrine": "^3.0.0",
-    "escodegen": "^1.12.0",
-    "fast-deep-equal": "^3.1.1",
-    "global": "^4.3.2",
+    "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",
-    "lodash": "^4.17.15",
-    "prettier": "~2.0.5",
+    "loader-utils": "^2.0.0",
+    "lodash": "^4.17.20",
+    "prettier": "~2.2.1",
    "prop-types": "^15.7.2",
-    "react-element-to-jsx-string": "^14.3.1",
+    "react-element-to-jsx-string": "^14.3.2",
    "regenerator-runtime": "^0.13.7",
-    "remark-external-links": "^6.0.0",
+    "remark-external-links": "^8.0.0",
    "remark-slug": "^6.0.0",
    "ts-dedent": "^2.0.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
-    "@angular/core": "^11.0.0",
-    "@babel/core": "^7.12.3",
+    "@angular/core": "^11.2.0",
+    "@babel/core": "^7.12.10",
    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.23",
-    "@storybook/react": "6.2.0-alpha.5",
-    "@storybook/vue": "6.2.0-alpha.5",
-    "@storybook/web-components": "6.2.0-alpha.5",
-    "@types/cross-spawn": "^6.0.1",
+    "@emotion/styled": "^10.0.27",
+    "@storybook/angular": "6.2.0-beta.14",
+    "@storybook/react": "6.2.0-beta.14",
+    "@storybook/vue": "6.2.0-beta.14",
+    "@storybook/web-components": "6.2.0-beta.14",
+    "@types/cross-spawn": "^6.0.2",
    "@types/doctrine": "^0.0.3",
-    "@types/enzyme": "^3.10.3",
+    "@types/enzyme": "^3.10.8",
    "@types/estree": "^0.0.44",
-    "@types/jest": "^25.1.1",
-    "@types/prop-types": "^15.5.9",
-    "@types/tmp": "^0.1.0",
+    "@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.6",
+    "babel-loader": "^8.2.2",
    "babel-plugin-react-docgen": "^4.2.1",
-    "cross-spawn": "^7.0.1",
-    "fs-extra": "^9.0.0",
-    "jest": "^26.0.0",
+    "cross-spawn": "^7.0.3",
+    "fs-extra": "^9.0.1",
+    "jest": "^26.6.3",
    "jest-specific-snapshot": "^4.0.0",
-    "lit-element": "^2.2.1",
-    "lit-html": "^1.0.0",
+    "lit-element": "^2.4.0",
+    "lit-html": "^1.3.0",
    "require-from-string": "^2.0.2",
-    "rxjs": "^6.5.4",
-    "styled-components": "^5.0.1",
-    "terser-webpack-plugin": "^3.0.0",
+    "rxjs": "^6.6.3",
+    "styled-components": "^5.2.1",
+    "terser-webpack-plugin": "^5.0.3",
    "tmp": "^0.2.1",
-    "tslib": "^2.0.0",
-    "web-component-analyzer": "^1.0.3",
-    "webpack": "^4.44.2",
+    "tslib": "^2.1.0",
+    "vue": "^2.6.10",
+    "web-component-analyzer": "^1.1.6",
+    "webpack": "4",
    "zone.js": "^0.11.3"
  },
  "peerDependencies": {
    "@babel/core": "^7.11.5",
-    "@storybook/vue": "6.2.0-alpha.5",
+    "@storybook/angular": "6.2.0-beta.14",
+    "@storybook/vue": "6.2.0-beta.14",
+    "@storybook/vue3": "6.2.0-beta.14",
    "babel-loader": "^8.0.0",
    "react": "^16.8.0 || ^17.0.0",
    "react-dom": "^16.8.0 || ^17.0.0",
-    "sveltedoc-parser": "^3.0.4",
-    "vue": "^2.6.10",
-    "webpack": ">=4"
+    "svelte": "^3.31.2",
+    "sveltedoc-parser": "^4.1.0",
+    "vue": "^2.6.10 || ^3.0.0",
+    "webpack": "*"
  },
  "peerDependenciesMeta": {
+    "@storybook/angular": {
+      "optional": true
+    },
    "@storybook/vue": {
      "optional": true
    },
+    "@storybook/vue3": {
+      "optional": true
+    },
    "react": {
      "optional": true
    },
    "react-dom": {
      "optional": true
    },
+    "svelte": {
+      "optional": true
+    },
    "sveltedoc-parser": {
      "optional": true
    },
@ -154,5 +174,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "850a0d8b98f2ddab1cd4d652e9beac11e21a369c"
+  "gitHead": "45957443c70b308214c9eb52cb048e7e488153c6",
+  "storybook": {
+    "displayName": "Docs",
+    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
+    "unsupportedFrameworks": [
+      "react-native"
+    ]
+  }
 }
--- a/addons/docs/preset.js
+++ b/addons/docs/preset.js
@ -1 +1,16 @@
-module.exports = require('./dist/preset');
+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),
+  ];
+};
--- a/addons/docs/react/index.js
+++ b/addons/docs/react/index.js
@ -1 +0,0 @@
-module.exports = require('../dist/frameworks/common/index');
--- a/addons/docs/register.js
+++ b/addons/docs/register.js
@ -1 +1 @@
-require('./dist/register.js');
+require('./dist/esm/register.js');
--- a/addons/docs/src/blocks/ArgsTable.tsx
+++ b/addons/docs/src/blocks/ArgsTable.tsx
@ -1,7 +1,6 @@
 /* eslint-disable no-underscore-dangle */
 import React, { FC, useContext, useEffect, useState, useCallback } from 'react';
 import mapValues from 'lodash/mapValues';
-import pickBy from 'lodash/pickBy';
 import {
  ArgsTable as PureArgsTable,
  ArgsTableProps as PureArgsTableProps,
@ -10,7 +9,8 @@ import {
  TabbedArgsTable,
 } from '@storybook/components';
 import { Args } from '@storybook/addons';
-import { StoryStore } from '@storybook/client-api';
+import { StoryStore, filterArgTypes } from '@storybook/client-api';
+import type { PropDescriptor } from '@storybook/client-api';
 import Events from '@storybook/core-events';

 import { DocsContext, DocsContextProps } from './DocsContext';
@ -19,8 +19,6 @@ import { getComponentName, getDocsStories } from './utils';
 import { ArgTypesExtractor } from '../lib/docgen/types';
 import { lookupStoryId } from './Story';

-type PropDescriptor = string[] | RegExp;
-
 interface BaseProps {
  include?: PropDescriptor;
  exclude?: PropDescriptor;
@ -73,22 +71,6 @@ const useArgs = (
  return [args, updateArgs, resetArgs];
 };

-const matches = (name: string, descriptor: PropDescriptor) =>
-  Array.isArray(descriptor) ? descriptor.includes(name) : name.match(descriptor);
-
-const filterArgTypes = (argTypes: ArgTypes, include?: PropDescriptor, exclude?: PropDescriptor) => {
-  if (!include && !exclude) {
-    return argTypes;
-  }
-  return (
-    argTypes &&
-    pickBy(argTypes, (argType, key) => {
-      const name = argType.name || key;
-      return (!include || matches(name, include)) && (!exclude || !matches(name, exclude));
-    })
-  );
-};
-
 export const extractComponentArgTypes = (
  component: Component,
  { parameters }: DocsContextProps,
@ -170,9 +152,11 @@ export const StoryTable: FC<
    }
    storyArgTypes = filterArgTypes(storyArgTypes, include, exclude);

+    const mainLabel = getComponentName(component) || 'Story';
+
    // eslint-disable-next-line prefer-const
    let [args, updateArgs, resetArgs] = useArgs(storyId, storyStore);
-    let tabs = { Story: { rows: storyArgTypes, args, updateArgs, resetArgs } } as Record<
+    let tabs = { [mainLabel]: { rows: storyArgTypes, args, updateArgs, resetArgs } } as Record<
      string,
      PureArgsTableProps
    >;
@ -188,7 +172,6 @@ export const StoryTable: FC<
    }

    if (component && (!storyHasArgsWithControls || showComponent)) {
-      const mainLabel = getComponentName(component);
      tabs = addComponentTabs(tabs, { [mainLabel]: component }, context, include, exclude);
    }

--- a/addons/docs/src/blocks/Canvas.tsx
+++ b/addons/docs/src/blocks/Canvas.tsx
@ -1,8 +1,11 @@
 import React, { FC, ReactElement, ReactNode, ReactNodeArray, useContext } from 'react';
 import { MDXProvider } from '@mdx-js/react';
 import { toId, storyNameFromExport } from '@storybook/csf';
-import { resetComponents } from '@storybook/components/html';
-import { Preview as PurePreview, PreviewProps as PurePreviewProps } from '@storybook/components';
+import {
+  resetComponents,
+  Preview as PurePreview,
+  PreviewProps as PurePreviewProps,
+} from '@storybook/components';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { SourceContext, SourceContextProps } from './SourceContainer';
 import { getSourceProps } from './Source';
--- a/addons/docs/src/blocks/DocsContainer.tsx
+++ b/addons/docs/src/blocks/DocsContainer.tsx
@ -4,8 +4,7 @@ import deprecate from 'util-deprecate';
 import dedent from 'ts-dedent';
 import { MDXProvider } from '@mdx-js/react';
 import { ThemeProvider, ensure as ensureTheme } from '@storybook/theming';
-import { DocsWrapper, DocsContent } from '@storybook/components';
-import { components as htmlComponents } from '@storybook/components/html';
+import { DocsWrapper, DocsContent, components as htmlComponents } from '@storybook/components';
 import { DocsContextProps, DocsContext } from './DocsContext';
 import { anchorBlockIdFromId } from './Anchor';
 import { storyBlockIdFromId } from './Story';
--- a/addons/docs/src/blocks/Heading.tsx
+++ b/addons/docs/src/blocks/Heading.tsx
@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { H2 } from '@storybook/components/html';
+import { H2 } from '@storybook/components';
 import { HeaderMdx } from './mdx';

 export interface HeadingProps {
--- a/addons/docs/src/blocks/Meta.tsx
+++ b/addons/docs/src/blocks/Meta.tsx
@ -1,22 +1,12 @@
 import React, { FC, useContext } from 'react';
 import { document } from 'global';
-import { Args, ArgTypes, Parameters } from '@storybook/addons';
+import { Args, BaseAnnotations, BaseMeta } from '@storybook/addons';
 import { Anchor } from './Anchor';
 import { DocsContext, DocsContextProps } from './DocsContext';
 import { getDocsStories } from './utils';
 import { Component } from './types';

-type Decorator = (...args: any) => any;
-
-interface MetaProps {
-  title: string;
-  component?: Component;
-  subcomponents?: Record<string, Component>;
-  decorators?: [Decorator];
-  parameters?: Parameters;
-  args?: Args;
-  argTypes?: ArgTypes;
-}
+type MetaProps = BaseMeta<Component> & BaseAnnotations<Args, any>;

 function getFirstStoryId(docsContext: DocsContextProps): string {
  const stories = getDocsStories(docsContext);
--- a/addons/docs/src/blocks/Source.tsx
+++ b/addons/docs/src/blocks/Source.tsx
@ -93,7 +93,7 @@ export const getSourceProps = (
  docsContext: DocsContextProps,
  sourceContext: SourceContextProps
 ): PureSourceProps => {
-  const { id: currentId } = docsContext;
+  const { id: currentId, parameters = {} } = docsContext;

  const codeProps = props as CodeProps;
  const singleProps = props as SingleSourceProps;
@ -112,8 +112,13 @@ export const getSourceProps = (
      })
      .join('\n\n');
  }
+
+  const { docs: docsParameters = {} } = parameters;
+  const { source: sourceParameters = {} } = docsParameters;
+  const { language: docsLanguage = null } = sourceParameters;
+
  return source
-    ? { code: source, language: props.language || 'jsx', dark: props.dark || false }
+    ? { code: source, language: props.language || docsLanguage || 'jsx', dark: props.dark || false }
    : { error: SourceError.SOURCE_UNAVAILABLE };
 };

--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@ -1,8 +1,8 @@
 import React, { FunctionComponent, ReactNode, ElementType, ComponentProps } from 'react';
 import { MDXProvider } from '@mdx-js/react';
-import { resetComponents } from '@storybook/components/html';
-import { Story as PureStory } from '@storybook/components';
+import { resetComponents, Story as PureStory } from '@storybook/components';
 import { toId, storyNameFromExport } from '@storybook/csf';
+import { Args, BaseAnnotations } from '@storybook/addons';
 import { CURRENT_SELECTION } from './types';

 import { DocsContext, DocsContextProps } from './DocsContext';
@ -11,26 +11,26 @@ export const storyBlockIdFromId = (storyId: string) => `story--${storyId}`;

 type PureStoryProps = ComponentProps<typeof PureStory>;

-interface CommonProps {
+type CommonProps = BaseAnnotations<Args, any> & {
  height?: string;
  inline?: boolean;
-}
+};

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

 type StoryRefProps = {
  id?: string;
-} & CommonProps;
+};

 type StoryImportProps = {
  name: string;
  story: ElementType;
-} & CommonProps;
+};

-export type StoryProps = StoryDefProps | StoryRefProps;
+export type StoryProps = (StoryDefProps | StoryRefProps | StoryImportProps) & CommonProps;

 export const lookupStoryId = (
  storyName: string,
--- a/addons/docs/src/blocks/Subheading.tsx
+++ b/addons/docs/src/blocks/Subheading.tsx
@ -1,5 +1,5 @@
 import React, { FunctionComponent } from 'react';
-import { H3 } from '@storybook/components/html';
+import { H3 } from '@storybook/components';
 import { HeaderMdx } from './mdx';
 import { HeadingProps } from './Heading';

--- a/addons/docs/src/blocks/enhanceSource.ts
+++ b/addons/docs/src/blocks/enhanceSource.ts
@ -20,6 +20,9 @@ const extract = (targetId: string, { source, locationsMap }: StorySource) => {

  const sanitizedStoryName = storyIdToSanitizedStoryName(targetId);
  const location = locationsMap[sanitizedStoryName];
+  if (!location) {
+    return source;
+  }
  const lines = source.split('\n');

  return extractSource(location, lines);
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@ -1,8 +1,7 @@
 import React, { FC, SyntheticEvent } from 'react';
 import addons from '@storybook/addons';
-import { Source } from '@storybook/components';
 import { NAVIGATE_URL } from '@storybook/core-events';
-import { Code, components } from '@storybook/components/html';
+import { Source, Code, components } from '@storybook/components';
 import { document } from 'global';
 import { styled } from '@storybook/theming';
 import { DocsContext, DocsContextProps } from './DocsContext';
@ -133,6 +132,8 @@ const OcticonAnchor = styled.a(() => ({
  float: 'left',
  paddingRight: '4px',
  marginLeft: '-20px',
+  // Allow the theme's text color to override the default link color.
+  color: 'inherit',
 }));

 interface HeaderWithOcticonAnchorProps {
@ -165,7 +166,14 @@ const HeaderWithOcticonAnchor: FC<HeaderWithOcticonAnchorProps> = ({
          }
        }}
      >
-        <svg viewBox="0 0 16 16" version="1.1" width="16" height="16" aria-hidden="true">
+        <svg
+          viewBox="0 0 16 16"
+          version="1.1"
+          width="16"
+          height="16"
+          aria-hidden="true"
+          fill="currentColor"
+        >
          <path
            fillRule="evenodd"
            d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/argtypes.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/argtypes.snapshot
@ -33,6 +33,22 @@ Object {
      "name": "void",
    },
  },
+  "accent": Object {
+    "defaultValue": undefined,
+    "description": "<p>Specify the accent-type of the button </p>
+",
+    "name": "accent",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "ButtonAccent",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
  "appearance": Object {
    "defaultValue": "secondary",
    "description": "<p>Appearance style of the button. </p>
@ -274,6 +290,22 @@ Object {
      "name": "object",
    },
  },
+  "someDataObject": Object {
+    "defaultValue": undefined,
+    "description": "<p>Specifies some arbitrary object </p>
+",
+    "name": "someDataObject",
+    "table": Object {
+      "category": "inputs",
+      "type": Object {
+        "required": true,
+        "summary": "ISomeInterface",
+      },
+    },
+    "type": Object {
+      "name": "object",
+    },
+  },
  "somethingYouShouldNotUse": Object {
    "defaultValue": false,
    "description": "<p>Some input you shouldn&#39;t use.</p>
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
@ -10,7 +10,7 @@ Object {
          "getSignature": Object {
            "description": "<p>Getter for <code>inputValue</code>. </p>
 ",
-            "line": 102,
+            "line": 115,
            "name": "inputValue",
            "returnType": "",
            "type": "",
@ -34,7 +34,7 @@ Object {
                "type": "string",
              },
            ],
-            "line": 97,
+            "line": 110,
            "name": "inputValue",
            "returnType": "void",
            "type": "void",
@ -58,7 +58,7 @@ Object {
                "type": "[]",
              },
            ],
-            "line": 182,
+            "line": 195,
            "name": "item",
            "returnType": "void",
            "type": "void",
@ -68,7 +68,7 @@ Object {
          "getSignature": Object {
            "description": "<p>Get the private value. </p>
 ",
-            "line": 141,
+            "line": 154,
            "name": "value",
            "returnType": "string | number",
            "type": "",
@ -92,7 +92,7 @@ Object {
                "type": "",
              },
            ],
-            "line": 136,
+            "line": 149,
            "name": "value",
            "returnType": "void",
            "type": "void",
@ -113,7 +113,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
      "hostBindings": Array [
        Object {
          "defaultValue": "false",
-          "line": 111,
+          "line": 124,
          "name": "class.focused",
        },
      ],
@ -128,25 +128,32 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "argsDecorator": Array [
            "$event.target",
          ],
-          "line": 107,
+          "line": 120,
          "name": "click",
        },
      ],
-      "id": "component-InputComponent-14bbde487c28642f97f1f6c94b65ab31",
+      "id": "component-InputComponent-568feeafa68e593b062061c27c4625a9",
      "inputs": Array [],
      "inputsClass": Array [
+        Object {
+          "description": "<p>Specify the accent-type of the button </p>
+",
+          "line": 56,
+          "name": "accent",
+          "type": "ButtonAccent",
+        },
        Object {
          "defaultValue": "'secondary'",
          "description": "<p>Appearance style of the button. </p>
 ",
-          "line": 46,
+          "line": 52,
          "name": "appearance",
          "type": "\\"primary\\" | \\"secondary\\"",
        },
        Object {
          "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>. </p>
 ",
-          "line": 97,
+          "line": 110,
          "name": "inputValue",
          "type": "string",
        },
@ -154,23 +161,23 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "defaultValue": "false",
          "description": "<p>Sets the button to a disabled state. </p>
 ",
-          "line": 50,
+          "line": 60,
          "name": "isDisabled",
        },
        Object {
-          "line": 182,
+          "line": 195,
          "name": "item",
          "type": "[]",
        },
        Object {
          "description": "<p>The inner text of the button.</p>
 ",
-          "line": 58,
+          "line": 68,
          "name": "label",
          "type": "string",
        },
        Object {
-          "line": 179,
+          "line": 192,
          "name": "showKeyAlias",
          "type": "",
        },
@ -178,93 +185,100 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "defaultValue": "'medium'",
          "description": "<p>Size of the button. </p>
 ",
-          "line": 62,
+          "line": 72,
          "name": "size",
          "type": "ButtonSize",
        },
+        Object {
+          "description": "<p>Specifies some arbitrary object </p>
+",
+          "line": 75,
+          "name": "someDataObject",
+          "type": "ISomeInterface",
+        },
        Object {
          "defaultValue": "false",
          "description": "<p>Some input you shouldn&#39;t use.</p>
 ",
-          "line": 70,
+          "line": 83,
          "name": "somethingYouShouldNotUse",
        },
      ],
      "jsdoctags": Array [
        Object {
          "atToken": Object {
-            "end": 787,
+            "end": 859,
            "flags": 0,
            "kind": 57,
-            "pos": 786,
+            "pos": 858,
          },
          "comment": "Hello world",
-          "end": 794,
+          "end": 866,
          "flags": 0,
          "kind": 288,
-          "pos": 786,
+          "pos": 858,
          "tagName": Object {
-            "end": 793,
+            "end": 865,
            "escapedText": "string",
            "flags": 0,
-            "pos": 787,
+            "pos": 859,
          },
        },
        Object {
          "atToken": Object {
-            "end": 810,
+            "end": 882,
            "flags": 0,
            "kind": 57,
-            "pos": 809,
+            "pos": 881,
          },
          "comment": "[Example](http://example.com)",
-          "end": 815,
+          "end": 887,
          "flags": 0,
          "kind": 288,
-          "pos": 809,
+          "pos": 881,
          "tagName": Object {
-            "end": 814,
+            "end": 886,
            "escapedText": "link",
            "flags": 0,
-            "pos": 810,
+            "pos": 882,
          },
        },
        Object {
          "atToken": Object {
-            "end": 849,
+            "end": 921,
            "flags": 0,
            "kind": 57,
-            "pos": 848,
+            "pos": 920,
          },
          "comment": "\`ThingThing\`",
-          "end": 854,
+          "end": 926,
          "flags": 0,
          "kind": 288,
-          "pos": 848,
+          "pos": 920,
          "tagName": Object {
-            "end": 853,
+            "end": 925,
            "escapedText": "code",
            "flags": 0,
-            "pos": 849,
+            "pos": 921,
          },
        },
        Object {
          "atToken": Object {
-            "end": 871,
+            "end": 943,
            "flags": 0,
            "kind": 57,
-            "pos": 870,
+            "pos": 942,
          },
          "comment": "<span class=\\"badge\\">aaa</span>",
-          "end": 876,
+          "end": 948,
          "flags": 0,
          "kind": 288,
-          "pos": 870,
+          "pos": 942,
          "tagName": Object {
-            "end": 875,
+            "end": 947,
            "escapedText": "html",
            "flags": 0,
-            "pos": 871,
+            "pos": 943,
          },
        },
      ],
@ -287,16 +301,16 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some number you&#39;d like to use.</p>
 ",
              "name": Object {
-                "end": 3220,
+                "end": 3518,
                "escapedText": "x",
                "flags": 0,
-                "pos": 3219,
+                "pos": 3517,
              },
              "tagName": Object {
-                "end": 3218,
+                "end": 3516,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3213,
+                "pos": 3511,
              },
              "type": "number",
            },
@ -304,21 +318,21 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some other number or string you&#39;d like to use, will have <code>parseInt()</code> applied before calculation.</p>
 ",
              "name": Object {
-                "end": 3265,
+                "end": 3563,
                "escapedText": "y",
                "flags": 0,
-                "pos": 3264,
+                "pos": 3562,
              },
              "tagName": Object {
-                "end": 3263,
+                "end": 3561,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3258,
+                "pos": 3556,
              },
              "type": "string | number",
            },
          ],
-          "line": 151,
+          "line": 164,
          "modifierKind": Array [
            114,
          ],
@ -341,21 +355,21 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some <code>password</code>.</p>
 ",
              "name": Object {
-                "end": 3781,
+                "end": 4079,
                "escapedText": "password",
                "flags": 0,
-                "pos": 3773,
+                "pos": 4071,
              },
              "tagName": Object {
-                "end": 3772,
+                "end": 4070,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3767,
+                "pos": 4065,
              },
              "type": "string",
            },
          ],
-          "line": 174,
+          "line": 187,
          "modifierKind": Array [
            112,
          ],
@ -379,22 +393,22 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some <code>id</code>.</p>
 ",
              "name": Object {
-                "end": 3640,
+                "end": 3938,
                "escapedText": "id",
                "flags": 0,
-                "pos": 3638,
+                "pos": 3936,
              },
              "optional": true,
              "tagName": Object {
-                "end": 3637,
+                "end": 3935,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3632,
+                "pos": 3930,
              },
              "type": "number",
            },
          ],
-          "line": 165,
+          "line": 178,
          "modifierKind": Array [
            113,
          ],
@ -421,7 +435,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "type": "ISomeInterface",
            },
          ],
-          "line": 156,
+          "line": 169,
          "modifierKind": Array [
            114,
          ],
@ -439,7 +453,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
 ",
-          "line": 78,
+          "line": 91,
          "name": "onClick",
          "type": "EventEmitter",
        },
@ -448,7 +462,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
        Object {
          "defaultValue": "'some value'",
          "description": "",
-          "line": 93,
+          "line": 106,
          "modifierKind": Array [
            112,
          ],
@ -460,7 +474,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "defaultValue": "'Private hello'",
          "description": "<p>Private value. </p>
 ",
-          "line": 133,
+          "line": 146,
          "modifierKind": Array [
            112,
          ],
@ -476,7 +490,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
            },
          ],
          "description": "",
-          "line": 42,
+          "line": 48,
          "name": "buttonRef",
          "optional": false,
          "type": "ElementRef",
@ -485,7 +499,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "defaultValue": "'Public hello'",
          "description": "<p>Public value. </p>
 ",
-          "line": 130,
+          "line": 143,
          "modifierKind": Array [
            114,
          ],
@ -495,7 +509,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
        },
        Object {
          "description": "",
-          "line": 186,
+          "line": 199,
          "modifierKind": Array [
            114,
          ],
@ -514,19 +528,24 @@ like **bold**, _italic_, and \`inline code\`.
      "selector": "doc-button",
      "sourceCode": "import {
  Component,
+  ElementRef,
  EventEmitter,
+  HostBinding,
+  HostListener,
  Input,
  Output,
  ViewChild,
-  HostListener,
-  HostBinding,
-  ElementRef,
 } from '@angular/core';

 export const exportedConstant = 'An exported constant';

 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';

+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
 export interface ISomeInterface {
  one: string;
  two: boolean;
@ -548,6 +567,7 @@ export interface ISomeInterface {
 */
@Component({
  selector: 'doc-button',
+  template: '<button>{{ label }}</button>',
 })
 export class InputComponent<T> {
  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
@ -556,6 +576,10 @@ export class InputComponent<T> {
  @Input()
  public appearance: 'primary' | 'secondary' = 'secondary';

+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent;
+
  /** Sets the button to a disabled state. */
  @Input()
  public isDisabled = false;
@ -572,6 +596,9 @@ export class InputComponent<T> {
  @Input()
  public size?: ButtonSize = 'medium';

+  /** Specifies some arbitrary object */
+  @Input() public someDataObject: ISomeInterface;
+
  /**
   * Some input you shouldn't use.
   *
@ -701,17 +728,18 @@ export class InputComponent<T> {
      "styleUrlsData": "",
      "styles": Array [],
      "stylesData": "",
+      "template": "<button>{{ label }}</button>",
      "templateUrl": Array [],
      "type": "component",
      "viewProviders": Array [],
    },
  ],
  "coverage": Object {
-    "count": 22,
+    "count": 23,
    "files": Array [
      Object {
-        "coverageCount": "14/21",
-        "coveragePercent": 66,
+        "coverageCount": "16/23",
+        "coveragePercent": 69,
        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
        "linktype": "component",
        "name": "InputComponent",
@ -745,7 +773,7 @@ export class InputComponent<T> {
  "interfaces": Array [
    Object {
      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
-      "id": "interface-ISomeInterface-14bbde487c28642f97f1f6c94b65ab31",
+      "id": "interface-ISomeInterface-568feeafa68e593b062061c27c4625a9",
      "indexSignatures": Array [],
      "kind": 150,
      "methods": Array [],
@ -753,21 +781,21 @@ export class InputComponent<T> {
      "properties": Array [
        Object {
          "description": "",
-          "line": 20,
+          "line": 25,
          "name": "one",
          "optional": false,
          "type": "string",
        },
        Object {
          "description": "",
-          "line": 22,
+          "line": 27,
          "name": "three",
          "optional": false,
          "type": "any[]",
        },
        Object {
          "description": "",
-          "line": 21,
+          "line": 26,
          "name": "two",
          "optional": false,
          "type": "boolean",
@ -775,19 +803,24 @@ export class InputComponent<T> {
      ],
      "sourceCode": "import {
  Component,
+  ElementRef,
  EventEmitter,
+  HostBinding,
+  HostListener,
  Input,
  Output,
  ViewChild,
-  HostListener,
-  HostBinding,
-  ElementRef,
 } from '@angular/core';

 export const exportedConstant = 'An exported constant';

 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';

+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
 export interface ISomeInterface {
  one: string;
  two: boolean;
@ -809,6 +842,7 @@ export interface ISomeInterface {
 */
@Component({
  selector: 'doc-button',
+  template: '<button>{{ label }}</button>',
 })
 export class InputComponent<T> {
  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
@ -817,6 +851,10 @@ export class InputComponent<T> {
  @Input()
  public appearance: 'primary' | 'secondary' = 'secondary';

+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent;
+
  /** Sets the button to a disabled state. */
  @Input()
  public isDisabled = false;
@ -833,6 +871,9 @@ export class InputComponent<T> {
  @Input()
  public size?: ButtonSize = 'medium';

+  /** Specifies some arbitrary object */
+  @Input() public someDataObject: ISomeInterface;
+
  /**
   * Some input you shouldn't use.
   *
@ -962,9 +1003,47 @@ export class InputComponent<T> {
    },
  ],
  "miscellaneous": Object {
-    "enumerations": Array [],
+    "enumerations": Array [
+      Object {
+        "childs": Array [
+          Object {
+            "name": "Normal",
+            "value": "Normal",
+          },
+          Object {
+            "name": "High",
+            "value": "High",
+          },
+        ],
+        "ctype": "miscellaneous",
+        "description": "",
+        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "name": "ButtonAccent",
+        "subtype": "enum",
+      },
+    ],
    "functions": Array [],
-    "groupedEnumerations": Object {},
+    "groupedEnumerations": Object {
+      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+        Object {
+          "childs": Array [
+            Object {
+              "name": "Normal",
+              "value": "Normal",
+            },
+            Object {
+              "name": "High",
+              "value": "High",
+            },
+          ],
+          "ctype": "miscellaneous",
+          "description": "",
+          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "name": "ButtonAccent",
+          "subtype": "enum",
+        },
+      ],
+    },
    "groupedFunctions": Object {},
    "groupedTypeAliases": Object {
      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
@ -3,19 +3,24 @@
 /* eslint-disable no-underscore-dangle */
 import {
  Component,
+  ElementRef,
  EventEmitter,
+  HostBinding,
+  HostListener,
  Input,
  Output,
  ViewChild,
-  HostListener,
-  HostBinding,
-  ElementRef,
 } from '@angular/core';

 export const exportedConstant = 'An exported constant';

 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge';

+export enum ButtonAccent {
+  'Normal' = 'Normal',
+  'High' = 'High',
+}
+
 export interface ISomeInterface {
  one: string;
  two: boolean;
@ -37,6 +42,7 @@ export interface ISomeInterface {
 */
@Component({
  selector: 'doc-button',
+  template: '<button>{{ label }}</button>',
 })
 export class InputComponent<T> {
  @ViewChild('buttonRef', { static: false }) buttonRef: ElementRef;
@ -45,6 +51,10 @@ export class InputComponent<T> {
  @Input()
  public appearance: 'primary' | 'secondary' = 'secondary';

+  /** Specify the accent-type of the button */
+  @Input()
+  public accent: ButtonAccent;
+
  /** Sets the button to a disabled state. */
  @Input()
  public isDisabled = false;
@ -61,6 +71,9 @@ export class InputComponent<T> {
  @Input()
  public size?: ButtonSize = 'medium';

+  /** Specifies some arbitrary object */
+  @Input() public someDataObject: ISomeInterface;
+
  /**
   * Some input you shouldn't use.
   *
--- a/addons/docs/src/frameworks/angular/angular-properties.test.ts
+++ b/addons/docs/src/frameworks/angular/angular-properties.test.ts
@ -35,6 +35,7 @@ describe('angular component properties', () => {
      const testDir = path.join(fixturesDir, testEntry.name);
      const testFile = fs.readdirSync(testDir).find((fileName) => inputRegExp.test(fileName));
      if (testFile) {
+        // eslint-disable-next-line jest/valid-title
        it(testEntry.name, () => {
          const inputPath = path.join(testDir, testFile);

--- a/addons/docs/src/frameworks/angular/compodoc.ts
+++ b/addons/docs/src/frameworks/angular/compodoc.ts
@ -91,6 +91,9 @@ const getComponentData = (component: Component | Directive) => {
  }
  checkValidComponentOrDirective(component);
  const compodocJson = getCompodocJson();
+  if (!compodocJson) {
+    return null;
+  }
  checkValidCompodocJson(compodocJson);
  const { name } = component;
  const metadata = findComponentByName(name, compodocJson);
--- a/addons/docs/src/frameworks/angular/config.ts
+++ b/addons/docs/src/frameworks/angular/config.ts
@ -1,8 +1,16 @@
+import { SourceType } from '../../shared';
 import { extractArgTypes, extractComponentDescription } from './compodoc';
+import { sourceDecorator } from './sourceDecorator';

 export const parameters = {
  docs: {
    extractArgTypes,
    extractComponentDescription,
+    source: {
+      type: SourceType.DYNAMIC,
+      language: 'html',
+    },
  },
 };
+
+export const decorators = [sourceDecorator];
--- a/addons/docs/src/frameworks/angular/prepareForInline.ts
+++ b/addons/docs/src/frameworks/angular/prepareForInline.ts
@ -0,0 +1,47 @@
+import React from 'react';
+import { IStory, StoryContext } from '@storybook/angular';
+import { ElementRendererService } from '@storybook/angular/element-renderer';
+import { StoryFn } from '@storybook/addons';
+
+const customElementsVersions: Record<string, number> = {};
+
+/**
+ * Uses angular element to generate on-the-fly web components and reference it with `customElements`
+ * then it is added into react
+ */
+export const prepareForInline = (storyFn: StoryFn<IStory>, { id, parameters }: StoryContext) => {
+  // Upgrade story version in order that the next defined component has a unique key
+  customElementsVersions[id] =
+    customElementsVersions[id] !== undefined ? customElementsVersions[id] + 1 : 0;
+
+  const customElementsName = `${id}_${customElementsVersions[id]}`;
+
+  const Story = class Story extends React.Component {
+    wrapperRef: React.RefObject<unknown>;
+
+    elementName: string;
+
+    constructor(props: any) {
+      super(props);
+      this.wrapperRef = React.createRef();
+    }
+
+    async componentDidMount() {
+      // eslint-disable-next-line no-undef
+      customElements.define(
+        customElementsName,
+        await new ElementRendererService().renderAngularElement({
+          storyFnAngular: storyFn(),
+          parameters,
+        })
+      );
+    }
+
+    render() {
+      return React.createElement(customElementsName, {
+        ref: this.wrapperRef,
+      });
+    }
+  };
+  return React.createElement(Story);
+};
--- a/addons/docs/src/frameworks/angular/sourceDecorator.ts
+++ b/addons/docs/src/frameworks/angular/sourceDecorator.ts
@ -0,0 +1,62 @@
+import { addons, StoryContext, StoryFn } from '@storybook/addons';
+import { IStory } from '@storybook/angular';
+import { computesTemplateSourceFromComponent } from '@storybook/angular/renderer';
+import prettierHtml from 'prettier/parser-html';
+import prettier from 'prettier/standalone';
+import { SNIPPET_RENDERED, SourceType } from '../../shared';
+
+export const skipSourceRender = (context: StoryContext) => {
+  const sourceParams = context?.parameters.docs?.source;
+
+  // always render if the user forces it
+  if (sourceParams?.type === SourceType.DYNAMIC) {
+    return false;
+  }
+  // never render if the user is forcing the block to render code, or
+  // if the user provides code
+  return sourceParams?.code || sourceParams?.type === SourceType.CODE;
+};
+
+const prettyUp = (source: string) => {
+  return prettier.format(source, {
+    parser: 'angular',
+    plugins: [prettierHtml],
+    htmlWhitespaceSensitivity: 'ignore',
+  });
+};
+
+/**
+ * Svelte source decorator.
+ * @param storyFn Fn
+ * @param context  StoryContext
+ */
+export const sourceDecorator = (storyFn: StoryFn<IStory>, context: StoryContext) => {
+  const story = storyFn();
+  if (skipSourceRender(context)) {
+    return story;
+  }
+  const channel = addons.getChannel();
+  const { props, template } = story;
+
+  const {
+    parameters: { component, argTypes },
+  } = context;
+
+  if (component) {
+    const source = computesTemplateSourceFromComponent(component, props, argTypes);
+
+    // We might have a story with a Directive or Service defined as the component
+    // In these cases there might exist a template, even if we aren't able to create source from component
+    if (source || template) {
+      channel.emit(SNIPPET_RENDERED, context.id, prettyUp(source || template));
+    }
+    return story;
+  }
+
+  if (template) {
+    channel.emit(SNIPPET_RENDERED, context.id, prettyUp(template));
+    return story;
+  }
+
+  return story;
+};
--- a/addons/docs/src/frameworks/common/preset.ts
+++ b/addons/docs/src/frameworks/common/preset.ts
@ -5,6 +5,10 @@ import remarkExternalLinks from 'remark-external-links';
 // @ts-ignore
 import createCompiler from '../../mdx/mdx-compiler-plugin';

+const resolvedBabelLoader = require.resolve('babel-loader', {
+  paths: [require.resolve('@storybook/builder-webpack4')], // FIXME!!!
+});
+
 // for frameworks that are not working with react, we need to configure
 // the jsx to transpile mdx, for now there will be a flag for that
 // for more complex solutions we can find alone that we need to add '@babel/plugin-transform-react-jsx'
@ -66,7 +70,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
        test: /\.md$/,
        use: [
          {
-            loader: require.resolve('babel-loader'),
+            loader: resolvedBabelLoader,
            options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
          },
          {
@ -89,7 +93,7 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
          include: new RegExp(`node_modules\\${path.sep}acorn-jsx`),
          use: [
            {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
              options: {
                presets: [[require.resolve('@babel/preset-env'), { modules: 'commonjs' }]],
              },
@ -97,10 +101,10 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
          ],
        },
        {
-          test: /\.(stories|story).mdx$/,
+          test: /(stories|story)\.mdx$/,
          use: [
            {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
            },
            {
@ -114,10 +118,10 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {
        },
        {
          test: /\.mdx$/,
-          exclude: /\.(stories|story).mdx$/,
+          exclude: /(stories|story)\.mdx$/,
          use: [
            {
-              loader: require.resolve('babel-loader'),
+              loader: resolvedBabelLoader,
              options: createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }),
            },
            {
@ -133,18 +137,3 @@ export function webpack(webpackConfig: any = {}, options: any = {}) {

  return result;
 }
-
-export function managerEntries(entry: any[] = [], options: any) {
-  return [...entry, require.resolve('../../register')];
-}
-
-export function config(entry: any[] = [], options: any = {}) {
-  const { framework } = options;
-  const docsConfig = [require.resolve('./config')];
-  try {
-    docsConfig.push(require.resolve(`../${framework}/config`));
-  } catch (err) {
-    // there is no custom config for the user's framework, do nothing
-  }
-  return [...docsConfig, ...entry];
-}
--- a/addons/docs/src/frameworks/html/config.tsx
+++ b/addons/docs/src/frameworks/html/config.tsx
@ -10,7 +10,11 @@ export const parameters = {
        // eslint-disable-next-line react/no-danger
        return <div dangerouslySetInnerHTML={{ __html: html }} />;
      }
-      return <div ref={(node) => (node ? node.appendChild(html) : null)} />;
+      return (
+        <div
+          ref={(node?: HTMLDivElement): never | null => (node ? node.appendChild(html) : null)}
+        />
+      );
    },
  },
 };
--- a/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/docgen.snapshot
@ -1,7 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`react component properties 9626-js-default-values 1`] = `
-"import React from 'react';
+"import React from 'react'; // eslint-disable-next-line react/prop-types
+
 export const Tag = ({
  title = 'Beta'
 }) => /*#__PURE__*/React.createElement(\\"div\\", null, title);
--- a/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/input.js
+++ b/addons/docs/src/frameworks/react/testfixtures/9626-js-default-values/input.js
@ -1,4 +1,5 @@
 import React from 'react';

+// eslint-disable-next-line react/prop-types
 export const Tag = ({ title = 'Beta' }) => <div>{title}</div>;
 export const component = Tag;
--- a/addons/docs/src/frameworks/react/testfixtures/imported.js
+++ b/addons/docs/src/frameworks/react/testfixtures/imported.js
@ -0,0 +1 @@
+module.exports = { imported: 'imported-value' };
--- a/addons/docs/src/frameworks/react/testfixtures/js-class-component/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/js-class-component/docgen.snapshot
@ -1,45 +1,243 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`react component properties js-class-component 1`] = `
-"/* eslint-disable react/prefer-stateless-function */
-import React from 'react';
+"import React from 'react';
 import PropTypes from 'prop-types';
+import { imported } from '../imported';
+const local = 'local-value';
 /**
- * Component description
+ * A component that renders its props
 */
+// eslint-disable-next-line react/prefer-stateless-function

-class ErrorBox extends React.Component {
+class PropsWriter extends React.Component {
  render() {
-    const {
-      children
-    } = this.props;
-    return /*#__PURE__*/React.createElement(\\"div\\", {
-      className: \\"error-box\\"
-    }, children);
+    return /*#__PURE__*/React.createElement(\\"pre\\", null, JSON.stringify(this.props));
  }

 }

-ErrorBox.propTypes = {
-  /**
-   * PropTypes description
-   */
-  children: PropTypes.node.isRequired
+PropsWriter.propTypes = {
+  numberRequired: PropTypes.number.isRequired,
+  numberOptional: PropTypes.number,
+  stringRequired: PropTypes.string.isRequired,
+  stringOptional: PropTypes.string,
+  booleanRequired: PropTypes.bool.isRequired,
+  booleanOptional: PropTypes.bool,
+  arrayRequired: PropTypes.arrayOf(PropTypes.string.isRequired).isRequired,
+  arrayOptional: PropTypes.arrayOf(PropTypes.string.isRequired),
+  objectRequired: PropTypes.shape({}).isRequired,
+  objectOptional: PropTypes.shape({}),
+  functionRequired: PropTypes.func.isRequired,
+  functionOptional: PropTypes.func,
+  dateRequired: PropTypes.instanceOf(Date).isRequired,
+  dateOptional: PropTypes.instanceOf(Date),
+  localReference: PropTypes.string,
+  importedReference: PropTypes.string,
+  globalReference: PropTypes.any,
+  stringGlobalName: PropTypes.string
 };
-ErrorBox.__docgenInfo = {
-  \\"description\\": \\"Component description\\",
+PropsWriter.defaultProps = {
+  numberOptional: 1,
+  stringOptional: 'stringOptional',
+  booleanOptional: false,
+  arrayOptional: ['array', 'optional'],
+  objectOptional: {
+    object: 'optional'
+  },
+  functionOptional: () => 'foo',
+  dateOptional: new Date('20 Jan 1983'),
+  localReference: local,
+  importedReference: imported,
+  globalReference: Date,
+  stringGlobalName: 'top'
+};
+export const component = PropsWriter;
+PropsWriter.__docgenInfo = {
+  \\"description\\": \\"A component that renders its props\\",
  \\"methods\\": [],
-  \\"displayName\\": \\"ErrorBox\\",
+  \\"displayName\\": \\"PropsWriter\\",
  \\"props\\": {
-    \\"children\\": {
+    \\"numberOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"1\\",
+        \\"computed\\": false
+      },
      \\"type\\": {
-        \\"name\\": \\"node\\"
+        \\"name\\": \\"number\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"stringOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'stringOptional'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"booleanOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"false\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"arrayOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"['array', 'optional']\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"arrayOf\\",
+        \\"value\\": {
+          \\"name\\": \\"string\\"
+        }
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"objectOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"{ object: 'optional' }\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"shape\\",
+        \\"value\\": {}
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"functionOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"() => 'foo'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"dateOptional\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"new Date('20 Jan 1983')\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"instanceOf\\",
+        \\"value\\": \\"Date\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"localReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'local-value'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"importedReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"imported\\",
+        \\"computed\\": true
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"globalReference\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"Date\\",
+        \\"computed\\": true
+      },
+      \\"type\\": {
+        \\"name\\": \\"any\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"stringGlobalName\\": {
+      \\"defaultValue\\": {
+        \\"value\\": \\"'top'\\",
+        \\"computed\\": false
+      },
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": false,
+      \\"description\\": \\"\\"
+    },
+    \\"numberRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"number\\"
      },
      \\"required\\": true,
-      \\"description\\": \\"PropTypes description\\"
+      \\"description\\": \\"\\"
+    },
+    \\"stringRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"string\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"booleanRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"bool\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"arrayRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"arrayOf\\",
+        \\"value\\": {
+          \\"name\\": \\"string\\"
+        }
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"objectRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"shape\\",
+        \\"value\\": {}
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"functionRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"func\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
+    },
+    \\"dateRequired\\": {
+      \\"type\\": {
+        \\"name\\": \\"instanceOf\\",
+        \\"value\\": \\"Date\\"
+      },
+      \\"required\\": true,
+      \\"description\\": \\"\\"
    }
  }
-};
-export default ErrorBox;
-export const component = ErrorBox;"
+};"
 `;
--- a/Show More
+++ b/Show More
				`@ -0,0 +1 @@`
				`module.exports = require('../dist/esm/frameworks/angular/prepareForInline');`
				`@ -1 +0,0 @@`
				`module.exports = require('../dist/frameworks/aurelia/index');`
				`@ -0,0 +1 @@`
				`module.exports = { imported: 'imported-value' };`