chore: resolved conflict

2025-03-19 05:02:40 +08:00 · 2022-11-14 10:43:53 +00:00 · 2022-11-14 10:43:53 +00:00 · f7b641e4ae
commit f7b641e4ae
parent 78c4bb6978 bd23a5abff
1570 changed files with 137636 additions and 20890 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -1,5 +1,12 @@
 version: 2.1

+parameters:
+  workflow:
+    description: Which workflow to run
+    type: enum
+    enum: ['ci', 'pr', 'merged', 'daily']
+    default: 'ci'
+
 executors:
  sb_node_16_classic:
    parameters:
@ -7,7 +14,7 @@ executors:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'medium'
+        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: cimg/node:16.17.1
@ -20,7 +27,7 @@ executors:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'medium'
+        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: cimg/node:16.17.1-browsers
@ -33,7 +40,7 @@ executors:
        description: The Resource class
        type: enum
        enum: ['small', 'medium', 'medium+', 'large', 'xlarge']
-        default: 'medium'
+        default: 'small'
    working_directory: /tmp/storybook
    docker:
      - image: mcr.microsoft.com/playwright:v1.27.0-focal
@ -42,61 +49,139 @@ executors:
    resource_class: <<parameters.class>>

 orbs:
-  git-shallow-clone: guitarrapc/git-shallow-clone@2.0.3
+  git-shallow-clone: guitarrapc/git-shallow-clone@2.4.0
  browser-tools: circleci/browser-tools@1.4.0

 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'
+  # Forked off from https://github.com/guitarrapc/git-shallow-clone-orb
+  # See issue: https://github.com/guitarrapc/git-shallow-clone-orb/issues/34
+  checkout_advanced:
+    description: |
+      checkout by git shallow clone with git options. Support Alpine, Ubuntu, Debian and others.
+      eval is used in step, Fish shell is not supported.
    parameters:
-      label:
+      clone_options:
+        default: --depth 1
+        description: |
+          git clone options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"'
+        type: string
+      fetch_options:
+        default: --depth 10
+        description: |
+          git fetch options you want to add such as '--depth 1 --verbose' and '--depth 1 --shallow-since "5 days ago"' you don't need set '--force' option as it already set by default. in case of tag, add '--no-tags' on this option and tag_fetch_options.
+        type: string
+      keyscan_bitbucket:
+        default: false
+        description: |
+          Pass `true` to dynamically get ssh-rsa from `bitbucket.org`.
+        type: boolean
+      keyscan_github:
+        default: false
+        description: |
+          Pass `true` to dynamically get ssh-rsa from `github.com`.
+        type: boolean
+      path:
+        default: .
+        description: |
+          Checkout directory (default: job’s working_directory)
+        type: string
+      tag_fetch_options:
+        default: --tags
+        description: |
+          This option apply when git operation is tag. Use 'fetch_options' instead if pr and other git operation. Additional git fetch options you want to add specifically for tags such as '--tags' or '--no-tags'. Default value is '--tags'
        type: string
    steps:
      - run:
-          name: Check if PR is labeled with "<< parameters.label >>"
          command: |
-            apt-get -y 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 >>" == "*" ])
+            #!/bin/sh
+            set -ex
+            # Workaround old docker images with incorrect $HOME
+            # check https://github.com/docker/docker/issues/2968 for details
+            if [ "${HOME}" = "/" ]
            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
+              export HOME=$(getent passwd $(id -un) | cut -d: -f6)
            fi
-
-jobs:
-  check:
-    executor:
-      class: xlarge
-      name: sb_node_16_classic
+            
+            # known_hosts
+            mkdir -p ~/.ssh
+            if [ -x "$(command -v ssh-keyscan)" ] && ([ "<< parameters.keyscan_github >>" == "true" ] || [ "<< parameters.keyscan_bitbucket >>" == "true" ])
+            then
+              if [ "<< parameters.keyscan_github >>" == "true" ]
+              then
+                ssh-keyscan -H github.com >> ~/.ssh/known_hosts
+              fi
+              if [ "<< parameters.keyscan_bitbucket >>" == "true" ]
+              then
+                ssh-keyscan -H bitbucket.org >> ~/.ssh/known_hosts
+              fi
+            fi
+            if [ "<< parameters.keyscan_github >>" != "true" ]
+            then
+              echo 'github.com ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAq2A7hRGmdnm9tUDbO9IDSwBK6TbQa+PXYPCPy6rbTrTtw7PHkccKrpp0yVhp5HdEIcKr6pLlVDBfOLX9QUsyCOV0wzfjIJNlGEYsdlLJizHhbn2mUjvSAHQqZETYP81eFzLQNnPHt4EVVUh7VfDESU84KezmD5QlWpXLmvU31/yMf+Se8xhHTvKSCZIFImWwoG6mbUoWf9nzpIoaSjB+weqqUUmpaaasXVal72J+UX2B+2RPW3RcT0eOzQgqlJL3RKrTJvdsjE3JEAvGq3lGHSZXy28G3skua2SmVi/w4yCE6gbODqnTWlg7+wC604ydGXA8VJiS5ap43JXiUFFAaQ==
+            ' >> ~/.ssh/known_hosts
+            fi
+            if [ "<< parameters.keyscan_bitbucket >>" != "true" ]
+            then
+              echo 'bitbucket.org ssh-rsa AAAAB3NzaC1yc2EAAAABIwAAAQEAubiN81eDcafrgMeLzaFPsw2kNvEcqTKl/VqLat/MaB33pZy0y3rJZtnqwR2qOOvbwKZYKiEO1O6VqNEBxKvJJelCq0dTXWT5pbO2gDXC6h6QDXCaHo6pOHGPUy+YBaGQRGuSusMEASYiWunYN0vCAI8QaXnWMXNMdFP3jHAJH0eDsoiGnLPBlBp4TNm6rYI74nMzgz3B9IikW4WVK+dc8KZJZWYjAuORU3jc1c/NPskD2ASinf8v3xnfXeukU0sJ5N6m5E8VLjObPEO+mN2t/FZTMZLiFqPWc/ALSqnMnnhwrNi2rbfg/rd/IpL8Le3pSBne8+seeFVBoGqzHM9yXw==
+            ' >> ~/.ssh/known_hosts
+            fi
+            
+            (umask 077; touch ~/.ssh/id_rsa)
+            chmod 0600 ~/.ssh/id_rsa
+            (echo $CHECKOUT_KEY > ~/.ssh/id_rsa)
+            
+            # use git+ssh instead of https
+            git config --global url."ssh://git@github.com".insteadOf "https://github.com" || true
+            git config --global gc.auto 0 || true
+            
+            # checkout
+            git clone << parameters.clone_options >> $CIRCLE_REPOSITORY_URL "<< parameters.path >>"
+            cd "<< parameters.path >>"
+            
+            # Fetch remote and check the commit ID of the checked out code
+            if [ -n "$CIRCLE_TAG" ]
+            then
+              # tag
+              git fetch << parameters.tag_fetch_options >> << parameters.fetch_options >> --force origin "+refs/tags/${CIRCLE_TAG}:refs/tags/${CIRCLE_TAG}"
+            elif [[ $(echo $CIRCLE_BRANCH | grep -e ^pull\/*) ]] # sh version of bash `elif [[ "$CIRCLE_BRANCH" =~ ^pull\/* ]]`
+            then
+              # pull request
+              git fetch << parameters.fetch_options >> --force origin "${CIRCLE_BRANCH}:remotes/origin/${CIRCLE_BRANCH}"
+            else
+              # others
+              git fetch << parameters.fetch_options >> --force origin "$CIRCLE_BRANCH:remotes/origin/$CIRCLE_BRANCH"
+            fi
+            
+            # Check the commit ID of the checked out code
+            if [ -n "$CIRCLE_TAG" ]
+            then
+              git reset --hard "$CIRCLE_SHA1"
+              git checkout -q "$CIRCLE_TAG"
+            elif [ -n "$CIRCLE_BRANCH" ] && [ "$CIRCLE_BRANCH" != 'HEAD' ]
+            then
+              git reset --hard "$CIRCLE_SHA1"
+              git checkout -q -B "$CIRCLE_BRANCH"
+            fi
+            
+            git reset --hard "$CIRCLE_SHA1"
+          name: Checkout code shallow
+  cancel-workflow-on-failure:
+    description: 'Cancels the entire workflow in case the previous step has failed'
    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - restore_cache:
-          name: Restore Yarn cache
-          keys:
-            - build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
      - run:
-          name: Check
+          name: Cancel current workflow
+          when: on_fail
          command: |
-            yarn task --task check --start-from=auto --no-link --debug
-            git diff --exit-code
+            echo "Canceling workflow as previous step resulted in failure."
+            echo "To execute all checks locally, please run yarn ci-tests"
+            curl -X POST --header "Content-Type: application/json" "https://circleci.com/api/v2/workflow/${CIRCLE_WORKFLOW_ID}/cancel?circle-token=${WORKFLOW_CANCELER}"
+jobs:
  build:
    executor:
-      class: xlarge
+      class: large
      name: sb_node_16_classic
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - restore_cache:
          name: Restore Yarn cache
@ -107,6 +192,11 @@ jobs:
          command: |
            yarn task --task compile --start-from=auto --no-link --debug
            git diff --exit-code
+      - run:
+          name: Publish to Verdaccio
+          command: |
+            cd code
+            yarn local-registry --publish
      - save_cache:
          name: Save Yarn cache
          key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@ -125,87 +215,14 @@ jobs:
            - code/ui
            - code/renderers
            - code/presets
-  chromatic:
-    executor: sb_node_16_browsers
-    parallelism: 15
-    steps:
-      # Keep using default checkout because Chromatic needs some git history to work properly
-      - checkout
-      - attach_workspace:
-          at: .
-      - run:
-          name: chromatic
-          command: |
-            cd code
-            yarn run-chromatics
-  examples:
-    executor:
-      class: medium+
-      name: sb_node_16_browsers
-    parallelism: 3
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: examples
-          command: |
-            cd code
-            yarn build-storybooks --all
-      - persist_to_workspace:
-          root: .
-          paths:
-            - code/built-storybooks
-  publish:
-    executor:
-      class: medium
-      name: sb_node_16_classic
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: running local registry
-          command: |
-            cd code
-            yarn local-registry --publish
-      - persist_to_workspace:
-          root: .
-          paths:
            - .verdaccio-cache
-  # NOTE: this currently tests each story in docs mode, which doesn't make sense any more as stories
-  #   can no longer run in docs mode. Instead we should probably change the test runner to test each
-  #   docs entry if you run it in `VIEW_MODE=docs`
-  # e2e-tests-sb-docs:
-  #   executor:
-  #     class: large
-  #     name: sb_cypress_8_node_14
-  #   parallelism: 8
-  #   steps:
-  #     - git-shallow-clone/checkout_advanced:
-  #         clone_options: '--depth 1 --verbose'
-  #     - attach_workspace:
-  #         at: .
-  #     - run:
-  #         name: Running local registry
-  #         command: yarn local-registry --port 6001 --open
-  #         background: true
-  #     - run:
-  #         name: Wait for registry
-  #         command: yarn wait-on http://localhost:6001
-  #     - run:
-  #         name: Run smoke tests
-  #         command: yarn test:e2e-framework angular_modern_inline_rendering --test-runner --docs-mode
-  #         no_output_timeout: 5m
  cra-bench:
    executor:
-      class: medium+
+      class: medium
      name: sb_playwright
    working_directory: /tmp/storybook
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -231,7 +248,7 @@ jobs:
            cd ../cra-bench
            rm -rf node_modules
            mkdir node_modules
-            npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label cra
+            npx -p @storybook/bench@next sb-bench 'yarn install' --label cra
      - run:
          name: prep artifacts
          when: always
@ -241,11 +258,11 @@ jobs:
          destination: sb-bench.tar.gz
  react-vite-bench:
    executor:
-      class: medium+
+      class: large
      name: sb_playwright
    working_directory: /tmp/storybook
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -271,7 +288,7 @@ jobs:
            cd ../react-vite-bench
            rm -rf node_modules
            mkdir node_modules
-            npx -p @storybook/bench@0.7.6--canary.14.6702e4f.0 sb-bench 'yarn install' --label react-vite
+            npx -p @storybook/bench@next sb-bench 'yarn install' --label react-vite
      - run:
          name: prep artifacts
          when: always
@ -279,31 +296,12 @@ jobs:
      - store_artifacts:
          path: /tmp/sb-bench.tar.gz
          destination: sb-bench.tar.gz
-  smoke-tests:
-    executor:
-      class: medium+
-      name: sb_node_16_browsers
-    environment:
-      # Disable ESLint when running smoke tests to improve perf + As of CRA 4.0.3, CRA kitchen sinks are throwing
-      # because of some ESLint warnings, related to: https://github.com/facebook/create-react-app/pull/10590
-      DISABLE_ESLINT_PLUGIN: 'true'
-    parallelism: 4
-    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
-      - attach_workspace:
-          at: .
-      - run:
-          name: smoke tests
-          command: |
-            cd code
-            yarn smoketest-storybooks --all
  lint:
    executor:
      class: medium
      name: sb_node_16_classic
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -312,10 +310,26 @@ jobs:
          command: |
            cd code
            yarn lint
+      - cancel-workflow-on-failure
+  check:
+    executor:
+      class: xlarge
+      name: sb_node_16_classic
+    steps:
+      - checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - attach_workspace:
+          at: .
+      - run:
+          name: Check
+          command: |
+            yarn task --task check --start-from=auto --no-link --debug
+            git diff --exit-code
+      - cancel-workflow-on-failure
  script-unit-tests:
    executor: sb_node_16_browsers
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -323,13 +337,16 @@ jobs:
          name: Test
          command: |
            cd scripts
-            yarn test --coverage --runInBand --ci
+            yarn test --coverage --ci
      - store_test_results:
          path: scripts/junit.xml
+      - cancel-workflow-on-failure
  unit-tests:
-    executor: sb_node_16_browsers
+    executor:
+      class: xlarge
+      name: sb_node_16_browsers
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -337,19 +354,20 @@ jobs:
          name: Test
          command: |
            cd code
-            yarn test --coverage --runInBand --ci
+            yarn test --coverage --ci
      - store_test_results:
          path: code/junit.xml
      - persist_to_workspace:
          root: .
          paths:
            - code/coverage
+      - cancel-workflow-on-failure
  coverage:
    executor:
      class: small
      name: sb_node_16_browsers
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
@ -358,21 +376,41 @@ jobs:
          command: |
            cd code
            yarn coverage
-
+  chromatic-internal-storybooks:
+    executor:
+      class: medium
+      name: sb_node_16_browsers
+    steps:
+      # switched this to the CircleCI helper to get the full git history for TurboSnap
+      - checkout
+      - attach_workspace:
+          at: .
+      - run:
+          name: Running Chromatic
+          command: |
+            cd code
+            yarn storybook:ui:chromatic
+            yarn storybook:blocks:chromatic
+      - store_test_results:
+          path: test-results
  ## new workflow
  create-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
-      class: medium+
+      class: medium
      name: sb_node_16_browsers
-    parallelism: 24
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Creating Sandboxes
-          command: yarn task --task sandbox --template $(yarn get-template ci create) --no-link --start-from=never --junit
+          command: yarn task --task sandbox --template $(yarn get-template << pipeline.parameters.workflow >> create) --no-link --start-from=never --junit
      - persist_to_workspace:
          root: .
          paths:
@ -380,33 +418,41 @@ jobs:
      - store_test_results:
          path: test-results
  smoke-test-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
-      class: medium+
+      class: medium
      name: sb_node_16_browsers
-    parallelism: 24
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Smoke Testing Sandboxes
-          command: yarn task --task smoke-test --template $(yarn get-template ci smoke-test) --no-link --start-from=never --junit
+          command: yarn task --task smoke-test --template $(yarn get-template << pipeline.parameters.workflow >> smoke-test) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  build-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
      class: medium+
      name: sb_node_16_browsers
-    parallelism: 24
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Building Sandboxes
-          command: yarn task --task build --template $(yarn get-template ci build) --no-link --start-from=never --junit
+          command: yarn task --task build --template $(yarn get-template << pipeline.parameters.workflow >> build) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
      - persist_to_workspace:
@ -414,48 +460,59 @@ jobs:
          paths:
            - sandbox/*/storybook-static
  test-runner-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
-      class: medium+
+      class: medium
      name: sb_playwright
-    parallelism: 22
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running Test Runner
-          command: yarn task --task test-runner --template $(yarn get-template ci test-runner) --no-link --start-from=never --junit
+          command: yarn task --task test-runner --template $(yarn get-template << pipeline.parameters.workflow >> test-runner) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  chromatic-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
-      class: medium+
+      class: medium
      name: sb_node_16_browsers
-    parallelism: 24
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
-          clone_options: '--depth 1 --verbose'
+      - checkout
      - attach_workspace:
          at: .
      - run:
          name: Running Chromatic
-          command: yarn task --task chromatic --template $(yarn get-template ci chromatic) --no-link --start-from=never --junit
+          command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
  e2e-sandboxes:
+    parameters:
+      parallelism:
+        type: integer
+        default: 2
    executor:
-      class: medium+
+      class: medium
      name: sb_playwright
-    parallelism: 24
+    parallelism: << parameters.parallelism >>
    steps:
-      - git-shallow-clone/checkout_advanced:
+      - checkout_advanced:
          clone_options: '--depth 1 --verbose'
      - attach_workspace:
          at: .
      - run:
          name: Running E2E Tests
-          command: yarn task --task e2e-tests --template $(yarn get-template ci e2e-tests) --no-link --start-from=never --junit
+          command: yarn task --task e2e-tests --template $(yarn get-template << pipeline.parameters.workflow >> e2e-tests) --no-link --start-from=never --junit
      - store_test_results:
          path: test-results
      - store_artifacts: # this is where playwright puts more complex stuff
@ -463,7 +520,11 @@ jobs:
          destination: playwright

 workflows:
-  test:
+  ci:
+    when:
+      and:
+        - equal: [ api, << pipeline.trigger_source >> ]
+        - equal:  [ ci, << pipeline.parameters.workflow >> ]
    jobs:
      - build
      - lint:
@ -472,40 +533,15 @@ workflows:
      - check:
          requires:
            - build
-      - examples:
-          requires:
-            - build
-      - smoke-tests:
-          requires:
-            - build
      - unit-tests:
          requires:
            - build
      - script-unit-tests:
          requires:
            - build
-      - coverage:
-          requires:
-            - unit-tests
-      - chromatic:
-          requires:
-            - examples
-      - publish:
-          requires:
-            - build
-      - cra-bench:
-          requires:
-            - publish
-      - react-vite-bench:
-          requires:
-            - publish
-      ## new workflow
      - create-sandboxes:
          requires:
-            - publish
-      # - smoke-test-sandboxes: # disabled for now
-      #     requires:
-      #       - create-sandboxes
+            - build
      - build-sandboxes:
          requires:
            - create-sandboxes
@ -518,3 +554,129 @@ workflows:
      - e2e-sandboxes:
          requires:
            - build-sandboxes
+  pr:
+    when:
+      equal: [ pr, << pipeline.parameters.workflow >> ]
+    jobs:
+      - build
+      - lint:
+          requires:
+            - build
+      - check:
+          requires:
+            - build
+      - unit-tests:
+          requires:
+            - build
+      - script-unit-tests:
+          requires:
+            - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
+      - coverage:
+          requires:
+            - unit-tests
+      - cra-bench:
+          requires:
+            - build
+      - react-vite-bench:
+          requires:
+            - build
+      - create-sandboxes:
+          parallelism: 9
+          requires:
+            - build
+      - build-sandboxes:
+          parallelism: 9
+          requires:
+            - create-sandboxes
+      - test-runner-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+      - chromatic-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+      - e2e-sandboxes:
+          parallelism: 9
+          requires:
+            - build-sandboxes
+  merged:
+    when:
+      equal: [ merged, << pipeline.parameters.workflow >> ]
+    jobs:
+      - build
+      - lint:
+          requires:
+            - build
+      - check:
+          requires:
+            - build
+      - unit-tests:
+          requires:
+            - build
+      - script-unit-tests:
+          requires:
+            - build
+      - chromatic-internal-storybooks:
+          requires:
+            - build
+      - coverage:
+          requires:
+            - unit-tests
+      - cra-bench:
+          requires:
+            - build
+      - react-vite-bench:
+          requires:
+            - build
+      - create-sandboxes:
+          parallelism: 14
+          requires:
+            - build
+      - build-sandboxes:
+          parallelism: 14
+          requires:
+            - create-sandboxes
+      - test-runner-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+      - chromatic-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+      - e2e-sandboxes:
+          parallelism: 14
+          requires:
+            - build-sandboxes
+  daily:
+    when:
+      equal: [ daily, << pipeline.parameters.workflow >> ]
+    jobs:
+      - build
+      - create-sandboxes:
+          parallelism: 24
+          requires:
+            - build
+      # - smoke-test-sandboxes: # disabled for now
+      #     requires:
+      #       - create-sandboxes
+      - build-sandboxes:
+          parallelism: 24
+          requires:
+            - create-sandboxes
+      - test-runner-sandboxes:
+          parallelism: 24
+          requires:
+            - build-sandboxes
+      - chromatic-sandboxes:
+          parallelism: 24
+          requires:
+            - build-sandboxes
+      - e2e-sandboxes:
+          parallelism: 24
+          requires:
+            - build-sandboxes
--- a/.github/workflows/generate-repros-next.yml
+++ b/.github/workflows/generate-repros-next.yml
@ -14,6 +14,7 @@ jobs:
    runs-on: ubuntu-latest
    env:
      YARN_ENABLE_IMMUTABLE_INSTALLS: false
+      CLEANUP_REPRO_NODE_MODULES: true
    steps:
      - uses: actions/setup-node@v3
        with:
--- a/.github/workflows/handle-release-branches.yml
+++ b/.github/workflows/handle-release-branches.yml
@ -40,7 +40,7 @@ jobs:
      - id: next-version
        uses: notiz-dev/github-action-json-property@release
        with:
-          path: ${{ github.workspace }}/next/package.json
+          path: ${{ github.workspace }}/next/code/package.json
          prop_path: version

      - run: |
--- a/.github/workflows/tests-unit.yml
+++ b/.github/workflows/tests-unit.yml
@ -5,12 +5,11 @@ on:
    branches:
      - next
  pull_request:
-    types: [opened, reopened, labeled, synchronize]
+    types: [opened, synchronize, reopened]

 jobs:
  build:
    name: Core Unit Tests node-${{ matrix.node_version }}, ${{ matrix.os }}
-    if: github.event_name == 'push' || contains(github.event.pull_request.labels.*.name, 'ci:matrix')
    strategy:
      fail-fast: false
      matrix:
@ -28,8 +27,7 @@ jobs:
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node_version }}
-          cache: yarn
      - name: install and compile
-        run: yarn task --task compile --start-from=auto
+        run: yarn task --task compile --start-from=auto --no-link
      - name: test
        run: yarn test --runInBand --ci
--- a/.github/workflows/trigger-circle-ci-workflow.yml
+++ b/.github/workflows/trigger-circle-ci-workflow.yml
@ -1,21 +1,101 @@
 name: Trigger CircleCI workflow

 on:
-  pull_request:
-    types: [labeled]
+  # Use pull_request_target, as we don't need to check out the actual code of the fork in this script.
+  # And this is the only way to trigger the Circle CI API on forks as well.
+  pull_request_target:
+    types: [opened, synchronize, labeled, unlabeled, reopened, converted_to_draft, ready_for_review]
+  push:
+    branches:
+      - next

 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
+  get-branch:
    runs-on: ubuntu-latest
    steps:
-      - name: Make request to CircleCI
+      - id: get-branch
+        run: |
+          if  [ "${{ github.event.pull_request.head.repo.fork }}" = "true" ]; then
+            export BRANCH=pull/${{ github.event.pull_request.number }}/head
+            elif [ "${{ github.event_name }}" = "push" ]; then
+            export BRANCH=${{ github.ref_name }}
+            else
+            export BRANCH=${{ github.event.pull_request.head.ref }}
+          fi
+          echo "$BRANCH"
+          echo "branch=$BRANCH" >> $GITHUB_ENV
+    outputs:
+      branch: ${{ env.branch }}
+
+  trigger-ci-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && github.event.pull_request.draft == true && !contains(github.event.pull_request.labels.*.name, 'ci:pr') && !contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily')
+    steps:
+      - name: Trigger draft PR tests
        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 }}"}'
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "ci"
+                  }
+                }'
        env:
          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-pr-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && ((github.event.pull_request.draft == false || contains(github.event.pull_request.labels.*.name, 'ci:pr')) && !contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+    steps:
+      - name: Trigger PR tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "pr"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-merged-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'push' || (contains(github.event.pull_request.labels.*.name, 'ci:merged') && !contains(github.event.pull_request.labels.*.name, 'ci:daily'))
+    steps:
+      - name: Trigger merged tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "merged"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
+  trigger-daily-tests:
+    runs-on: ubuntu-latest
+    needs: get-branch
+    if: github.event_name == 'pull_request_target' && contains(github.event.pull_request.labels.*.name, 'ci:daily')
+    steps:
+      - name: Trigger the daily tests
+        run: >
+          curl -X POST --location "https://circleci.com/api/v2/project/gh/storybookjs/storybook/pipeline" \
+            -H "Content-Type: application/json" \
+            -H "Circle-Token: $CIRCLE_CI_TOKEN" \
+            -d '{
+                  "branch": "${{ needs.get-branch.outputs.branch }}",
+                  "parameters": {
+                    "workflow": "daily"
+                  }
+                }'
+        env:
+          CIRCLE_CI_TOKEN: ${{ secrets.CIRCLE_CI_TOKEN }}
--- a/.gitignore
+++ b/.gitignore
@ -7,6 +7,7 @@ dist
 *.DS_Store
 .cache
 junit.xml
+test-results
 /repros
 /sandbox
 .verdaccio-cache
@ -19,3 +20,7 @@ junit.xml
 !/**/.yarn/versions
 /**/.pnp.*
 !/node_modules
+
+# test-storybooks
+test-storybooks/ember-cli/ember-output
+test-storybooks/angular-cli/addon-jest.testresults.json
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,4 +1,21 @@
 {
  "deepscan.enable": true,
-  "typescript.tsdk": "./code/node_modules/typescript/lib"
+  "eslint.workingDirectories": ["./code", "./scripts"],
+  "typescript.tsdk": "./code/node_modules/typescript/lib",
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,44 +1,233 @@
+## 7.0.0-alpha.49 (November 13, 2022)
+
+#### Bug Fixes
+
+-   Essentials: Fix preview annotations for Vite pnpm support [#19689](https://github.com/storybooks/storybook/pull/19689)
+
+#### Maintenance
+
+-   Build: convert addon-docs to use ts-up [#19790](https://github.com/storybooks/storybook/pull/19790)
+-   Core: Allow overriding WebView and UrlStore [#19623](https://github.com/storybooks/storybook/pull/19623)
+-   Storyshots: Support .cjs and .mjs file extensions [#19726](https://github.com/storybooks/storybook/pull/19726)
+
+#### Build
+
+-   Build: less noise when compiling [#19808](https://github.com/storybooks/storybook/pull/19808)
+-   Build: Upgrade bench to `next` [#19791](https://github.com/storybooks/storybook/pull/19791)
+-   Maintenance: improve error feedback when tasks fail in CI [#19786](https://github.com/storybooks/storybook/pull/19786)
+-   UI: Enable TurboSnap for UI Storybook [#19767](https://github.com/storybooks/storybook/pull/19767)
+-   CI: Use a new cadence (ci, pr, merged, daily) and trigger CircleCI from github actions [#19768](https://github.com/storybooks/storybook/pull/19768)
+-   Maintenance: provide expected failure metadata in junit reports [#19775](https://github.com/storybooks/storybook/pull/19775)
+
+## 7.0.0-alpha.48 (November 7, 2022)
+
+#### Breaking Changes
+
+-   Preact: Make preact use inline stories (without iframe) by default in docs [#19741](https://github.com/storybooks/storybook/pull/19741)
+
+#### Features
+
+-   Angular: Undo template gen removal during deprecation property removal [#19614](https://github.com/storybooks/storybook/pull/19614)
+-   CSF-tools: Support main.js default exports [#19738](https://github.com/storybooks/storybook/pull/19738)
+-   Addon-docs: Disable play functions in docs mode unless you set `parameters.docs.autoplay` [#19659](https://github.com/storybooks/storybook/pull/19659)
+-   Addon-docs: Add docsPage `automatic` to create docs entries for all components [#19713](https://github.com/storybooks/storybook/pull/19713)
+-   CLI: Add docsPage to all Button/Header story templates [#19715](https://github.com/storybooks/storybook/pull/19715)
+
+#### Bug Fixes
+
+-   Svelte: Fix docs rendering [#19705](https://github.com/storybooks/storybook/pull/19705)
+-   React: Expose ReactFramework type [#19704](https://github.com/storybooks/storybook/pull/19704)
+
+#### Maintenance
+
+-   Core: Update index generation to use tags to detect MDX stories [#19712](https://github.com/storybooks/storybook/pull/19712)
+-   CI: Fix cross OS github actions  [#19754](https://github.com/storybooks/storybook/pull/19754)
+-   Blocks: Redo stories for controls [#19744](https://github.com/storybooks/storybook/pull/19744)
+-   Blocks: Setup and create example story for blocks with context [#19740](https://github.com/storybooks/storybook/pull/19740)
+-   Client-api: Fix export from store [#19720](https://github.com/storybooks/storybook/pull/19720)
+-   Pull renderer+builder from framework's package.json + a known list [#19717](https://github.com/storybooks/storybook/pull/19717)
+-   CLI: Add automigration to set docsPage = 'automatic' for existing Storybooks [#19716](https://github.com/storybooks/storybook/pull/19716)
+-   Builder-webpack5: Use import.meta.webpackHot instead of module.hot for check [#19686](https://github.com/storybooks/storybook/pull/19686)
+-   Fix: Point to correct .d.ts files from export maps [#19724](https://github.com/storybooks/storybook/pull/19724)
+-   CLI: Remove deprecated `-s` flag on `sb init` [#19585](https://github.com/storybooks/storybook/pull/19585)
+
+#### Build
+
+-   Build: Fix eslint formatting in scripts [#19765](https://github.com/storybooks/storybook/pull/19765)
+-   Sandboxes: Fix up stories entry to allow HMR [#19750](https://github.com/storybooks/storybook/pull/19750)
+-   Fix prepare script on Windows machines [#19762](https://github.com/storybooks/storybook/pull/19762)
+-   CI: Fix fix handle-release-branches workflow [#19756](https://github.com/storybooks/storybook/pull/19756)
+-   Build: Cancel workflow in CI on steps failure [#19748](https://github.com/storybooks/storybook/pull/19748)
+-   CI: Schedule a daily job that runs all sandboxes [#19699](https://github.com/storybooks/storybook/pull/19699)
+-   Build: Delete node_modules in repro generation [#19734](https://github.com/storybooks/storybook/pull/19734)
+-   Fix: dts facade generator did not support deep links [#19723](https://github.com/storybooks/storybook/pull/19723)
+-   Build: Re-enable test-runner for vue-cli [#19706](https://github.com/storybooks/storybook/pull/19706)
+
+#### Dependency Upgrades
+
+-   Upgrade mdx2-csf to fix mdxSource generation [#19766](https://github.com/storybooks/storybook/pull/19766)
+-   Dependencies: Bump prettier dependency, cleanup config [#19672](https://github.com/storybooks/storybook/pull/19672)
+-   Vue: Add babel loader 9.0.0 to vue-webpack5 peer dependencies [#19697](https://github.com/storybooks/storybook/pull/19697)
+
+## 7.0.0-alpha.47 (November 1, 2022)
+
+#### Features
+
+-   CSF-tools: Turn story comments into docs descriptions [#19684](https://github.com/storybooks/storybook/pull/19684)
+-   CLI: Migrate CLI templates to CSF3 [#19665](https://github.com/storybooks/storybook/pull/19665)
+-   Vite: Set default `base` for subfolder deployments [#19383](https://github.com/storybooks/storybook/pull/19383)
+
+#### Bug Fixes
+
+-   Disable keyboard shortcuts during (docs) play functions and add tests [#19668](https://github.com/storybooks/storybook/pull/19668)
+
+#### Maintenance
+
+-   Addon-docs: Replace source-loader with csf-plugin [#19680](https://github.com/storybooks/storybook/pull/19680)
+-   CLI: Move all templates out of cli into renderers [#19664](https://github.com/storybooks/storybook/pull/19664)
+-   Addon-docs: Remove mdx-compiler-plugin [#19681](https://github.com/storybooks/storybook/pull/19681)
+
+## 7.0.0-alpha.46 (October 28, 2022)
+
+#### Features
+
+- Addon-docs: Don't show docspage unless the user opts in [#19627](https://github.com/storybooks/storybook/pull/19627)
+- Core: Allow setting tags in storiesOf via parameters. [#19642](https://github.com/storybooks/storybook/pull/19642)
+
+#### Bug Fixes
+
+- Addon-docs: Fix React Profiler in source snippets [#19004](https://github.com/storybooks/storybook/pull/19004)
+
+#### Maintenance
+
+- Telemetry: Measure version update check [#19660](https://github.com/storybooks/storybook/pull/19660)
+- Build: Bundle lib/preview-web with ts-up [#19655](https://github.com/storybooks/storybook/pull/19655)
+- CSF-tools: Make ESM node compatible [#19661](https://github.com/storybooks/storybook/pull/19661)
+- Telemetry: Measure docs usage [#19648](https://github.com/storybooks/storybook/pull/19648)
+- Go back to `csf@next` [#19657](https://github.com/storybooks/storybook/pull/19657)
+
+#### Build
+
+- Build: Reduce parallelism in check task [#19662](https://github.com/storybooks/storybook/pull/19662)
+
+## 7.0.0-alpha.45 (October 28, 2022)
+
+#### Bug Fixes
+
+- Svelte: Fix regression causing all stories to error [#19653](https://github.com/storybooks/storybook/pull/19653)
+- CSF: Fix `StoryObj<typeof Cmp>` to work the same as old ComponentStoryObj [#19651](https://github.com/storybooks/storybook/pull/19651)
+
+#### Maintenance
+
+- Core: Misc dead code removal [#19654](https://github.com/storybooks/storybook/pull/19654)
+- Addon-actions: Move decorator to its own entrypoint [#19650](https://github.com/storybooks/storybook/pull/19650)
+
+#### Build
+
+- Build: Reduce resource classes [#19652](https://github.com/storybooks/storybook/pull/19652)
+
+## 7.0.0-alpha.44 (October 27, 2022)
+
+#### Features
+
+- Add tags to story and index [#19625](https://github.com/storybooks/storybook/pull/19625)
+- CSF tools: Add tags support [#19626](https://github.com/storybooks/storybook/pull/19626)
+- Vue2: Improve CSF3 types [#19603](https://github.com/storybooks/storybook/pull/19603)
+- Vue3: Improve CSF3 types [#19602](https://github.com/storybooks/storybook/pull/19602)
+
+#### Bug Fixes
+
+- Core: Fix v6 store when no explicit renderer [#19624](https://github.com/storybooks/storybook/pull/19624)
+- CLI/React native: Fix addons template to import register instead of manager [#19620](https://github.com/storybooks/storybook/pull/19620)
+
+#### Maintenance
+
+- Build-storybook: Only copy .mjs files for manager build [#19647](https://github.com/storybooks/storybook/pull/19647)
+- Rename storybook/ui to storybook/manager [#19635](https://github.com/storybooks/storybook/pull/19635)
+- Addons: Support SSR by not using global.window to store hooks context [#19631](https://github.com/storybooks/storybook/pull/19631)
+- Breaking: Final few deprecations removal in a batch [#19553](https://github.com/storybooks/storybook/pull/19553)
+- TypeScript: Misc types improvements [#19633](https://github.com/storybooks/storybook/pull/19633)
+- TypeScript: Restructure storybook types [#19580](https://github.com/storybooks/storybook/pull/19580)
+- TypeScript: cleanup types [#19621](https://github.com/storybooks/storybook/pull/19621)
+
+#### Build
+
+- Build: Reduce CI usage by 60% [#19644](https://github.com/storybooks/storybook/pull/19644)
+- Remove `netlify.toml` [#19645](https://github.com/storybooks/storybook/pull/19645)
+- Small fixes for `check` task [#19643](https://github.com/storybooks/storybook/pull/19643)
+- Storybook for `@storybook/blocks` only [#19630](https://github.com/storybooks/storybook/pull/19630)
+- Fix broken stories in UI Storybook [#19632](https://github.com/storybooks/storybook/pull/19632)
+- Ugrade eslint [#19601](https://github.com/storybooks/storybook/pull/19601)
+- Integrate standalone Storybook with Chromatic [#19619](https://github.com/storybooks/storybook/pull/19619)
+
+## 7.0.0-alpha.43 (October 25, 2022)
+
+#### Bug Fixes
+
+- Core: Add `renderer` field to frameworks, and use to drive v6 store entrypoints [#19595](https://github.com/storybooks/storybook/pull/19595)
+- Core: Add new SET_INDEX event [#19590](https://github.com/storybooks/storybook/pull/19590)
+- CLI: Don't run MDX2 automigration on node_modules [#19611](https://github.com/storybooks/storybook/pull/19611)
+- Core: Ensure preview annotations are resolved relative to the cwd [#19594](https://github.com/storybooks/storybook/pull/19594)
+- Core: Fix addon URLs on Windows [#19589](https://github.com/storybooks/storybook/pull/19589)
+
+#### Maintenance
+
+- Vite: Tidy up mdx-plugin [#19563](https://github.com/storybooks/storybook/pull/19563)
+- Web-components/Vite: remove unused dependencies [#19583](https://github.com/storybooks/storybook/pull/19583)
+
+#### Build
+
+- Remove DocBlocks example Storybook [#19616](https://github.com/storybooks/storybook/pull/19616)
+- Move and include `@storybook/blocks` in standalone Storybook [#19615](https://github.com/storybooks/storybook/pull/19615)
+- Move and include `@storybook/components` in standalone Storybook [#19598](https://github.com/storybooks/storybook/pull/19598)
+- Move examples -> test-storybooks [#19599](https://github.com/storybooks/storybook/pull/19599)
+- MDX iframe stories [#19586](https://github.com/storybooks/storybook/pull/19586)
+
+#### Dependency Upgrades
+
+- Upgrade mdx2-csf to next [#19600](https://github.com/storybooks/storybook/pull/19600)
+
 ## 7.0.0-alpha.42 (October 24, 2022)

 #### Features

-   Svelte: Improve CSF3 types [#19512](https://github.com/storybooks/storybook/pull/19512)
+- Svelte: Improve CSF3 types [#19512](https://github.com/storybooks/storybook/pull/19512)

 #### Maintenance

-   Telemetry: Use a wrapper around all CLI commands to send boot and error events [#19566](https://github.com/storybooks/storybook/pull/19566)
+- Telemetry: Use a wrapper around all CLI commands to send boot and error events [#19566](https://github.com/storybooks/storybook/pull/19566)

 #### Build

-   Add ability to run tasks from code dir [#19588](https://github.com/storybooks/storybook/pull/19588)
-   Make the reporter dynamic [#19587](https://github.com/storybooks/storybook/pull/19587)
-   Add vite-react benchmark [#19558](https://github.com/storybooks/storybook/pull/19558)
+- Add ability to run tasks from code dir [#19588](https://github.com/storybooks/storybook/pull/19588)
+- Make the reporter dynamic [#19587](https://github.com/storybooks/storybook/pull/19587)
+- Add vite-react benchmark [#19558](https://github.com/storybooks/storybook/pull/19558)

 #### Dependency Upgrades

-   Fix test-runner version conflicts [#19581](https://github.com/storybooks/storybook/pull/19581)
+- Fix test-runner version conflicts [#19581](https://github.com/storybooks/storybook/pull/19581)

 ## 7.0.0-alpha.41 (October 21, 2022)

 #### Features

-   Add `@storybook/nextjs` framework [#19382](https://github.com/storybooks/storybook/pull/19382)
-   CLI: Enable `@storybook/nextjs` framework [#19478](https://github.com/storybooks/storybook/pull/19478)
-   CLI: Automigrate from MDX1 to MDX2 [#19568](https://github.com/storybooks/storybook/pull/19568)
+- Add `@storybook/nextjs` framework [#19382](https://github.com/storybooks/storybook/pull/19382)
+- CLI: Enable `@storybook/nextjs` framework [#19478](https://github.com/storybooks/storybook/pull/19478)
+- CLI: Automigrate from MDX1 to MDX2 [#19568](https://github.com/storybooks/storybook/pull/19568)

 #### Maintenance

-   Remove warning of removed feature in lib/client-api [#19544](https://github.com/storybooks/storybook/pull/19544)
-   Remove vite-plugin-svelte-kit when detected [#19522](https://github.com/storybooks/storybook/pull/19522)
+- Remove warning of removed feature in lib/client-api [#19544](https://github.com/storybooks/storybook/pull/19544)
+- Remove vite-plugin-svelte-kit when detected [#19522](https://github.com/storybooks/storybook/pull/19522)

 #### Build

-   Delete Svelte example [#19549](https://github.com/storybooks/storybook/pull/19549)
-   Fix circle test results [#19552](https://github.com/storybooks/storybook/pull/19552)
+- Delete Svelte example [#19549](https://github.com/storybooks/storybook/pull/19549)
+- Fix circle test results [#19552](https://github.com/storybooks/storybook/pull/19552)

 #### Dependency Upgrades

-   Update the version of the "update-notifier" package [#19569](https://github.com/storybooks/storybook/pull/19569)
+- Update the version of the "update-notifier" package [#19569](https://github.com/storybooks/storybook/pull/19569)

 ## 7.0.0-alpha.40 (October 20, 2022)

--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -1,54 +1,134 @@
+
 # Contributor Covenant Code of Conduct

 ## Our Pledge

-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, caste, color, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.

 ## Our Standards

-Examples of behavior that contributes to creating a positive environment include:
+Examples of behavior that contributes to a positive environment for our
+community include:

- Using welcoming and inclusive language
- Being respectful of differing viewpoints and experiences
- Gracefully accepting constructive criticism
- Focusing on what is best for the community
- Showing empathy towards other community members
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the overall
+  community

-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior include:

- The use of sexualized language or imagery and unwelcome sexual attention or advances
- Trolling, insulting/derogatory comments, and personal or political attacks
- Public or private harassment
- Publishing others' private information, such as a physical or electronic address, without explicit permission
- Other conduct which could reasonably be considered inappropriate in a professional setting
+* The use of sexualized language or imagery, and sexual attention or advances of
+  any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email address,
+  without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting

-## Our Responsibilities
+## Enforcement Responsibilities

-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.

-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.

 ## Scope

-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.

 ## Enforcement

-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members:
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting one of the Steering committee members for enforcement:

-Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
-Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
-Tom Coleman ~ @tmeasday - `tom@thesnail.org`
-Michael Shilman ~ @shilman - `michael@lab80.co`
-Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`
+- Norbert de Langen ~ @ndelangen - `ndelangen@me.com`
+- Igor Davydkin ~ @igordv - `davydkin.igor@gmail.com`
+- Tom Coleman ~ @tmeasday - `tom@thesnail.org`
+- Michael Shilman ~ @shilman - `michael@lab80.co`
+- Philip Riabchun ~ @hypnosphi - `talpa@yandex.ru`

-The steering committee will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+The steering committee will review and investigate all complaints and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.

-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+## Enforcement Guidelines
+
+Project maintainers or community leaders who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed
+unprofessional or unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing
+clarity around the nature of the violation and an explanation of why the
+behavior was inappropriate. A public apology may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of
+actions.
+
+**Consequence**: A warning with consequences for continued behavior. No
+interaction with the people involved, including unsolicited interaction with
+those enforcing the Code of Conduct, for a specified period of time. This
+includes avoiding interactions in community spaces as well as external channels
+like social media. Violating these terms may lead to a temporary or permanent
+ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including
+sustained inappropriate behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public
+communication with the community for a specified period of time. No public or
+private interaction with the people involved, including unsolicited interaction
+with those enforcing the Code of Conduct, is allowed during this period.
+Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community
+standards, including sustained inappropriate behavior, harassment of an
+individual, or aggression toward or disparagement of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the
+community.

 ## Attribution

-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.1, available at
+[https://www.contributor-covenant.org/version/2/1/code_of_conduct.html][v2.1].

-[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder][Mozilla CoC].
+
+For answers to common questions about this code of conduct, see the FAQ at
+[https://www.contributor-covenant.org/faq][FAQ]. Translations are available at
+[https://www.contributor-covenant.org/translations][translations].
+
+[homepage]: https://www.contributor-covenant.org
+[v2.1]: https://www.contributor-covenant.org/version/2/1/code_of_conduct.html
+[Mozilla CoC]: https://github.com/mozilla/diversity
+[FAQ]: https://www.contributor-covenant.org/faq
+[translations]: https://www.contributor-covenant.org/translations
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -2,9 +2,9 @@

 - [From version 6.5.x to 7.0.0](#from-version-65x-to-700)
  - [Alpha release notes](#alpha-release-notes)
-  - [Breaking changes](#breaking-changes)
+  - [7.0 breaking changes](#70-breaking-changes)
+    - [removed auto injection of @storybook/addon-actions decorator](#removed-auto-injection-of-storybookaddon-actions-decorator)
    - [register.js removed](#registerjs-removed)
-    - [`Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`](#story-type-change-to-storyfn-and-the-new-story-type-now-refers-to-storyobj)
    - [Change of root html IDs](#change-of-root-html-ids)
    - [No more default export from `@storybook/addons`](#no-more-default-export-from-storybookaddons)
    - [Modern browser support](#modern-browser-support)
@ -37,12 +37,18 @@
    - [Configuring the Docs Container](#configuring-the-docs-container)
    - [External Docs](#external-docs)
    - [MDX2 upgrade](#mdx2-upgrade)
+    - [Dropped source loader / storiesOf static snippets](#dropped-source-loader--storiesof-static-snippets)
    - [Dropped addon-docs manual configuration](#dropped-addon-docs-manual-configuration)
+    - [Autoplay in docs](#autoplay-in-docs)
+  - [7.0 Deprecations](#70-deprecations)
+    - [`Story` type deprecated](#story-type-deprecated)
+    - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated)
+    - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot)
+    - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
 - [From version 6.4.x to 6.5.0](#from-version-64x-to-650)
  - [Vue 3 upgrade](#vue-3-upgrade)
  - [React18 new root API](#react18-new-root-api)
  - [Renamed isToolshown to showToolbar](#renamed-istoolshown-to-showtoolbar)
-  - [Deprecated register.js](#deprecated-registerjs)
  - [Dropped support for addon-actions addDecorators](#dropped-support-for-addon-actions-adddecorators)
  - [Vite builder renamed](#vite-builder-renamed)
  - [Docs framework refactor for React](#docs-framework-refactor-for-react)
@ -51,6 +57,8 @@
    - [Auto-title filename case](#auto-title-filename-case)
    - [Auto-title redundant filename](#auto-title-redundant-filename)
    - [Auto-title always prefixes](#auto-title-always-prefixes)
+  - [6.5 Deprecations](#65-deprecations)
+    - [Deprecated register.js](#deprecated-registerjs)
 - [From version 6.3.x to 6.4.0](#from-version-63x-to-640)
  - [Automigrate](#automigrate)
  - [CRA5 upgrade](#cra5-upgrade)
@ -247,7 +255,33 @@ Storybook 7.0 is in early alpha. During the alpha, we are making a large number

 In the meantime, these migration notes are the best available documentation on things you should know upgrading to 7.0.

-### Breaking changes
+### 7.0 breaking changes
+
+#### removed auto injection of @storybook/addon-actions decorator
+
+The `withActions` decorator is no longer automatically added to stories. This is because it is really only used in the html renderer, for all other renderers it's redundant.
+If you are using the html renderer and use the `handles` parameter, you'll need to manually add the `withActions` decorator:
+
+```diff
+import globalThis from 'global';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+export default {
+  component: globalThis.Components.Button,
+  args: {
+    label: 'Click Me!',
+  },
+  parameters: {
+    chromatic: { disable: true },
+  },
+};
+export const Basic = {
+  parameters: {
+    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
+  },
+  decorators: [withActions],
+};
+```

 #### register.js removed

@ -257,46 +291,6 @@ In 7.0, most of Storybook's addons now export a `manager.js` entry point, which

 If your `.manager.js` config references `register.js` of any of the following addons, you can remove it: `a11y`, `actions`, `backgrounds`, `controls`, `interactions`, `jest`, `links`, `measure`, `outline`, `toolbars`, `viewport`.

-#### `Story` type change to `StoryFn`, and the new `Story` type now refers to `StoryObj`
-
-In 6.x you were able to do this:
-
-```js
-import type { Story } from '@storybook/react';
-
-export const MyStory: Story = () => <div />;
-```
-
-But this will produce an error in 7.0 because `Story` is now a type that refers to the `StoryObj` type.
-You must now use the new `StoryFn` type:
-
-```js
-import type { StoryFn } from '@storybook/react';
-
-export const MyStory: StoryFn = () => <div />;
-```
-
-This change was done to improve the experience of writing CSF3 stories, which is the recommended way of writing stories in 7.0:
-
-```js
-import type { Story } from '@storybook/react';
-import { Button, ButtonProps } from './Button';
-
-export default {
-  component: Button,
-};
-
-export const Primary: Story<ButtonProps> = {
-  variant: 'primary',
-};
-```
-
-If you want to be explicit, you can also import `StoryObj` instead of `Story`, they are the same type.
-
-For Storybook for react users: We also changed `ComponentStory` to refer to `ComponentStoryObj` instead of `ComponentStoryFn`, so if you were using `ComponentStory` you should now import/use `ComponentStoryFn` instead.
-
-You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
-
 #### Change of root html IDs

 The root ID unto which storybook renders stories is renamed from `root` to `#storybook-root` to avoid conflicts with user's code.
@ -369,7 +363,7 @@ Each addon is imported into the manager as an ESM module that's bundled separate

 SB6.x framework packages shipped binaries called `start-storybook` and `build-storybook`.

-In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `sb dev` and `sb build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.
+In SB7.0, we've removed these binaries and replaced them with new commands in Storybook's CLI: `storybook dev` and `storybook build`. These commands will look for the `framework` field in your `.storybook/main.js` config--[which is now required](#framework-field-mandatory)--and use that to determine how to start/build your storybook. The benefit of this change is that it is now possible to install multiple frameworks in a project without having to worry about hoisting issues.

 A typical storybook project includes two scripts in your projects `package.json`:

@ -391,7 +385,7 @@ To convert this project to 7.0:
    "build-storybook": "storybook build <some flags>"
  },
  "devDependencies": {
-    "storybook": "future"
+    "storybook": "next"
  }
 }
 ```
@ -471,9 +465,9 @@ In 7.0, the `main.js` fields `reactOptions` and `angularOptions` have been renam
 module.exports = {
  framework: {
    name: '@storybook/react-webpack5',
-    options: { fastRefresh: true };
-  }
-}
+    options: { fastRefresh: true },
+  },
+};
 ```

 #### Framework standalone build moved
@ -666,12 +660,24 @@ You can configure Docs Page in `main.js`:
 ```js
 module.exports = {
  docs: {
-    docsPage: true, // set to false to disable docs page entirely
+    docsPage: 'automatic', // see below for alternatives
    defaultName: 'Docs', // set to change the name of generated docs entries
  },
 };
 ```

+If you are migrating from 6.x your `docs.docsPage` option will have been set to `'automatic'`, which has the effect of enabling docs page for _every_ CSF file. However, as of 7.0, the new default is `true`, which requires opting into DocsPage per-CSF file, with the `docsPage` **tag** on your component export:
+
+```ts
+export default {
+  component: MyComponent
+  // Tags are a new feature coming in 7.1, that we are using to drive this behaviour.
+  tags: ['docsPage']
+}
+```
+
+You can also set `docsPage: false` to opt-out of docs page entirely.
+
 You can change the default template in the same way as in 6.x, using the `docs.page` parameter.

 #### Configuring the Docs Container
@ -747,10 +753,117 @@ We will update this section with specific pointers based on user feedback during

 As part of the upgrade we deleted the codemod `mdx-to-csf` and will be replacing it with a more sophisticated version prior to release.

+#### Dropped source loader / storiesOf static snippets
+
+In SB 6.x, Storybook Docs used a webpack loader called `source-loader` to help display static code snippets. This was configurable using the `options.sourceLoaderOptions` field.
+
+In SB 7.0, we've moved to a faster, simpler alternative called `csf-plugin` that **only supports CSF**. It is configurable using the `options.csfPluginOptions` field.
+
+If you're using `storiesOf` and want to restore the previous behavior, you can add `source-loader` by hand to your webpack config using the following snippet in `main.js`:
+
+```js
+module.exports = {
+  webpackFinal: (config) => {
+    config.modules.rules.push({
+      test: /\.stories\.[tj]sx?$/,
+      use: [
+        {
+          loader: require.resolve('@storybook/source-loader'),
+          options: {} /* your sourceLoaderOptions here */,
+        },
+      ],
+      enforce: 'pre',
+    });
+    return config;
+  },
+};
+```
+
 #### Dropped addon-docs manual configuration

 Storybook Docs 5.x shipped with instructions for how to manually configure webpack and storybook without the use of Storybook's "presets" feature. Over time, these docs went out of sync. Now in Storybook 7 we have removed support for manual configuration entirely.

+#### Autoplay in docs
+
+Running play functions in docs is generally tricky, as they can steal focus and cause the window to scroll. Consequently, we've disabled play functions in docs by default.
+
+If your story depends on a play function to render correctly, _and_ you are confident the function autoplaying won't mess up your docs, you can set `parameters.docs.autoplay = true` to have it auto play.
+
+### 7.0 Deprecations
+
+#### `Story` type deprecated
+
+In 6.x you were able to do this:
+
+```ts
+import type { Story } from '@storybook/react';
+
+export const MyStory: Story = () => <div />;
+```
+
+But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
+To fix the deprecation warning, use the `StoryFn` type:
+
+```ts
+import type { StoryFn } from '@storybook/react';
+
+export const MyStory: StoryFn = () => <div />;
+```
+
+This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
+You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
+
+#### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
+
+The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
+
+```ts
+import type { Story } from '@storybook/react';
+import { Button, ButtonProps } from './Button';
+
+// This works in 7.0, making the ComponentX types redundant.
+const meta: Meta<typeof Button> = { component: Button };
+
+export const CSF3Story: StoryObj<typeof Button> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<typeof Button> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+
+// Passing props directly still works as well.
+const meta: Meta<ButtonProps> = { component: Button };
+
+export const CSF3Story: StoryObj<ButtonProps> = { args: { label: 'Label' } };
+
+export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
+CSF2Story.args = { label: 'Label' };
+```
+
+#### Renamed `renderToDOM` to `renderToCanvas`
+
+The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.
+
+#### Renamed `XFramework` to `XRenderer`
+
+In 6.x you could import XFramework types:
+
+```ts
+import type { ReactFramework } from '@storybook/react';
+import type { VueFramework } from '@storybook/vue';
+import type { SvelteFramework } from '@storybook/svelte';
+
+// etc.
+```
+
+Those are deprecated in 7.0 as they are renamed to:
+
+```ts
+import type { ReactRenderer } from '@storybook/react';
+import type { VueRenderer } from '@storybook/vue';
+import type { SvelteRenderer } from '@storybook/svelte';
+
+// etc.
+```
+
 ## From version 6.4.x to 6.5.0

 ### Vue 3 upgrade
@ -784,22 +897,6 @@ addons.setConfig({
 });
 ```

-### Deprecated register.js
-
-In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
-
-Before:
-
-```js
-module.exports = { addons: ['my-addon/register.js'] };
-```
-
-After:
-
-```js
-module.exports = { addons: ['my-addon'] };
-```
-
 ### Dropped support for addon-actions addDecorators

 Prior to SB6.5, `addon-actions` provided an option called `addDecorators`. In SB6.5, decorators are applied always. This is technically a breaking change, so if this affects you please file an issue in Github and we can consider reverting this in a patch release.
@ -917,6 +1014,24 @@ In 6.5, the final titles would be:

 <!-- markdown-link-check-disable -->

+### 6.5 Deprecations
+
+#### Deprecated register.js
+
+In ancient versions of Storybook, addons were registered by referring to `addon-name/register.js`. This is going away in SB7.0. Instead you should just add `addon-name` to the `addons` array in `.storybook/main.js`.
+
+Before:
+
+```js
+module.exports = { addons: ['my-addon/register.js'] };
+```
+
+After:
+
+```js
+module.exports = { addons: ['my-addon'] };
+```
+
 ## From version 6.3.x to 6.4.0

 ### Automigrate
--- a/README.md
+++ b/README.md
@ -165,7 +165,7 @@ If you're looking for material to use in your presentation about storybook, like
 - Tweeting via [@storybookjs](https://twitter.com/storybookjs)
 - Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs)
 - Chatting on [Discord](https://discord.gg/storybook)
- Videos and streams at [Youtube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
+- Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)

 ## Contributing

--- a/code/.eslintignore
+++ b/code/.eslintignore
@ -6,13 +6,11 @@ node_modules
 docs/public
 storybook-static
 built-storybooks
-lib/cli/test
 lib/codemod/src/transforms/__testfixtures__
 scripts/storage
 scripts/repros-generator
 *.bundle.js
 *.js.map
-*.d.ts
 examples/ember-cli/.storybook/preview-head.html
 examples/official-storybook/tests/addon-jest.test.js
 ember-output
--- a/code/.eslintrc.js
+++ b/code/.eslintrc.js
@ -5,7 +5,24 @@ const scriptPath = path.join(__dirname, '..', 'scripts');
 module.exports = {
  root: true,
  extends: [path.join(scriptPath, '.eslintrc.js')],
+  parserOptions: {
+    tsconfigRootDir: __dirname,
+    project: ['./tsconfig.json'],
+  },
+  rules: {
+    'eslint-comments/disable-enable-pair': ['error', { allowWholeFile: true }],
+    'react-hooks/rules-of-hooks': 'off',
+    'jest/no-done-callback': 'off',
+  },
  overrides: [
+    {
+      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
+      files: ['**/frameworks/angular/template/**/*'],
+      rules: {
+        '@typescript-eslint/no-useless-constructor': 'off',
+        '@typescript-eslint/dot-notation': 'off',
+      },
+    },
    {
      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
      files: ['**/addons/docs/**/*'],
@ -13,6 +30,27 @@ module.exports = {
        'import/no-extraneous-dependencies': 'off',
      },
    },
+    {
+      files: [
+        '*.js',
+        '*.jsx',
+        '*.json',
+        '*.html',
+        '**/.storybook/*.ts',
+        '**/.storybook/*.tsx',
+        'setup-jest.ts',
+      ],
+      parserOptions: {
+        project: null,
+      },
+      rules: {
+        // '@typescript-eslint/no-var-requires': 'off',
+        '@typescript-eslint/dot-notation': 'off',
+        '@typescript-eslint/no-implied-eval': 'off',
+        '@typescript-eslint/no-throw-literal': 'off',
+        '@typescript-eslint/return-await': 'off',
+      },
+    },
    {
      // this package depends on a lot of peerDependencies we don't want to specify, because npm would install them
      files: ['**/*.ts', '**/*.tsx'],
@ -27,7 +65,7 @@ module.exports = {
        '**/lib/theming/**/*',
        '**/lib/router/**/*',
        '**/ui/manager/**/*',
-        '**/lib/components/**/*',
+        '**/ui/components/**/*',
      ],
      rules: {
        'import/no-extraneous-dependencies': ['error', { bundledDependencies: false }],
@ -112,5 +150,12 @@ module.exports = {
        'no-undef': 'off', // ignore "window" undef errors
      },
    },
+    {
+      // Because those templates reference css files in other directory.
+      files: ['**/template/cli/**/*'],
+      rules: {
+        'import/no-unresolved': 'off',
+      },
+    },
  ],
 };
--- a/code/.gitignore
+++ b/code/.gitignore
@ -28,10 +28,8 @@ lib/**/dll
 built-storybooks
 cypress/videos
 cypress/screenshots
-examples/ember-cli/ember-output
 .verdaccio-cache
 tsconfig.tsbuildinfo
-examples/angular-cli/addon-jest.testresults.json
 junit.xml
 .next

--- a/code/.prettierrc
+++ b/code/.prettierrc
@ -1,8 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "bracketSpacing": true,
-  "trailingComma": "es5",
-  "singleQuote": true,
-  "arrowParens": "always"
-}
--- a/code/.vscode/settings.json
+++ b/code/.vscode/settings.json
@ -1,3 +1,21 @@
 {
-  "typescript.tsdk": "node_modules/typescript/lib"
+  "deepscan.enable": true,
+  "eslint.workingDirectories": [".", "../scripts"],
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[javascript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "dbaeumer.vscode-eslint",
+    "editor.formatOnSave": true
+  }
 }
--- a/code/mocks/fs-extra.js
+++ b/code/mocks/fs-extra.js
@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs-extra');
 // `fs` APIs are used.
 let mockFiles = Object.create(null);

-// eslint-disable-next-line no-underscore-dangle
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
 function __setMockFiles(newMockFiles) {
  mockFiles = newMockFiles;
 }
--- a/code/mocks/fs.js
+++ b/code/mocks/fs.js
@ -5,7 +5,7 @@ const fs = jest.createMockFromModule('fs');
 // `fs` APIs are used.
 let mockFiles = Object.create(null);

-// eslint-disable-next-line no-underscore-dangle
+// eslint-disable-next-line no-underscore-dangle, @typescript-eslint/naming-convention
 function __setMockFiles(newMockFiles) {
  mockFiles = newMockFiles;
 }
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Test component compliance with web accessibility standards",
  "keywords": [
    "a11y",
@ -62,15 +62,15 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addon-highlight": "7.0.0-alpha.42",
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/channels": "7.0.0-alpha.42",
-    "@storybook/client-logger": "7.0.0-alpha.42",
-    "@storybook/components": "7.0.0-alpha.42",
-    "@storybook/core-events": "7.0.0-alpha.42",
-    "@storybook/csf": "next",
-    "@storybook/theming": "7.0.0-alpha.42",
+    "@storybook/addon-highlight": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/channels": "7.0.0-alpha.49",
+    "@storybook/client-logger": "7.0.0-alpha.49",
+    "@storybook/components": "7.0.0-alpha.49",
+    "@storybook/core-events": "7.0.0-alpha.49",
+    "@storybook/theming": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
    "axe-core": "^4.2.0",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -102,7 +102,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/code/addons/a11y/src/a11yRunner.ts
+++ b/code/addons/a11y/src/a11yRunner.ts
@ -1,7 +1,7 @@
 import global from 'global';
 import { addons } from '@storybook/addons';
 import { EVENTS } from './constants';
-import { A11yParameters } from './params';
+import type { A11yParameters } from './params';

 const { document, window: globalWindow } = global;

--- a/code/addons/a11y/src/components/A11YPanel.tsx
+++ b/code/addons/a11y/src/components/A11YPanel.tsx
@ -4,14 +4,16 @@ import { styled } from '@storybook/theming';

 import { ActionBar, Icons, ScrollArea } from '@storybook/components';

-import { AxeResults } from 'axe-core';
+import type { AxeResults } from 'axe-core';
 import { useChannel, useParameter, useStorybookState } from '@storybook/api';
+
 import { Report } from './Report';
+
 import { Tabs } from './Tabs';

 import { useA11yContext } from './A11yContext';
 import { EVENTS } from '../constants';
-import { A11yParameters } from '../params';
+import type { A11yParameters } from '../params';

 export enum RuleType {
  VIOLATION,
--- a/code/addons/a11y/src/components/A11yContext.test.tsx
+++ b/code/addons/a11y/src/components/A11yContext.test.tsx
@ -1,5 +1,5 @@
 import * as React from 'react';
-import { AxeResults } from 'axe-core';
+import type { AxeResults } from 'axe-core';
 import { render, act } from '@testing-library/react';
 import * as api from '@storybook/api';
 import { STORY_CHANGED } from '@storybook/core-events';
--- a/code/addons/a11y/src/components/A11yContext.tsx
+++ b/code/addons/a11y/src/components/A11yContext.tsx
@ -1,6 +1,6 @@
 import * as React from 'react';
 import { themes, convert } from '@storybook/theming';
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
 import { useChannel, useAddonState, useStorybookApi } from '@storybook/api';
 import { STORY_CHANGED, STORY_RENDERED } from '@storybook/core-events';
 import { HIGHLIGHT } from '@storybook/addon-highlight';
--- a/code/addons/a11y/src/components/Report/Elements.tsx
+++ b/code/addons/a11y/src/components/Report/Elements.tsx
@ -1,10 +1,12 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';

 import { styled } from '@storybook/theming';

-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import { Rules } from './Rules';
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';

 const Item = styled.li({
--- a/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
+++ b/code/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@ -1,6 +1,6 @@
 import React from 'react';
 import { render, fireEvent } from '@testing-library/react';
-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import HighlightToggle from './HighlightToggle';
 import { A11yContext } from '../A11yContext';

--- a/code/addons/a11y/src/components/Report/HighlightToggle.tsx
+++ b/code/addons/a11y/src/components/Report/HighlightToggle.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { styled } from '@storybook/theming';

-import { NodeResult } from 'axe-core';
+import type { NodeResult } from 'axe-core';
 import { useA11yContext } from '../A11yContext';

 interface ToggleProps {
--- a/code/addons/a11y/src/components/Report/Info.tsx
+++ b/code/addons/a11y/src/components/Report/Info.tsx
@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';

 import { styled } from '@storybook/theming';
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';

 const Wrapper = styled.div({
  padding: 12,
--- a/code/addons/a11y/src/components/Report/Item.tsx
+++ b/code/addons/a11y/src/components/Report/Item.tsx
@ -3,11 +3,13 @@ import React, { Fragment, useState } from 'react';
 import { styled } from '@storybook/theming';
 import { Icons } from '@storybook/components';

-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
 import { Info } from './Info';
+
 import { Elements } from './Elements';
 import { Tags } from './Tags';
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';
 import HighlightToggle from './HighlightToggle';

 const Wrapper = styled.div(({ theme }) => ({
--- a/code/addons/a11y/src/components/Report/Rules.tsx
+++ b/code/addons/a11y/src/components/Report/Rules.tsx
@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 import { styled } from '@storybook/theming';
 import { Badge } from '@storybook/components';
-import { CheckResult } from 'axe-core';
+import type { CheckResult } from 'axe-core';
 import { SizeMe } from 'react-sizeme';

 const List = styled.div({
--- a/code/addons/a11y/src/components/Report/Tags.tsx
+++ b/code/addons/a11y/src/components/Report/Tags.tsx
@ -1,7 +1,8 @@
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';

 import { styled } from '@storybook/theming';
-import { TagValue } from 'axe-core';
+import type { TagValue } from 'axe-core';

 const Wrapper = styled.div({
  display: 'flex',
--- a/code/addons/a11y/src/components/Report/index.tsx
+++ b/code/addons/a11y/src/components/Report/index.tsx
@ -1,8 +1,11 @@
-import React, { Fragment, FC } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { Placeholder } from '@storybook/components';
-import { Result } from 'axe-core';
+import type { Result } from 'axe-core';
+
 import { Item } from './Item';
-import { RuleType } from '../A11YPanel';
+
+import type { RuleType } from '../A11YPanel';

 export interface ReportProps {
  items: Result[];
--- a/code/addons/a11y/src/components/Tabs.tsx
+++ b/code/addons/a11y/src/components/Tabs.tsx
@ -1,10 +1,11 @@
 import * as React from 'react';

 import { styled } from '@storybook/theming';
-import { NodeResult, Result } from 'axe-core';
+import type { NodeResult, Result } from 'axe-core';
 import { SizeMe } from 'react-sizeme';
 import HighlightToggle from './Report/HighlightToggle';
-import { RuleType } from './A11YPanel';
+
+import type { RuleType } from './A11YPanel';
 import { useA11yContext } from './A11yContext';

 // TODO: reuse the Tabs component from @storybook/theming instead of re-building identical functionality
--- a/code/addons/a11y/src/components/VisionSimulator.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.tsx
@ -1,4 +1,5 @@
-import React, { ReactNode, useState } from 'react';
+import type { ReactNode } from 'react';
+import React, { useState } from 'react';
 import { Global, styled } from '@storybook/theming';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

--- a/code/addons/a11y/src/manager.tsx
+++ b/code/addons/a11y/src/manager.tsx
@ -3,7 +3,8 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID, PANEL_ID, PARAM_KEY } from './constants';
 import { VisionSimulator } from './components/VisionSimulator';
 import { A11YPanel } from './components/A11YPanel';
-import { A11yContextProvider, Results } from './components/A11yContext';
+import type { Results } from './components/A11yContext';
+import { A11yContextProvider } from './components/A11yContext';

 addons.register(ADDON_ID, (api) => {
  addons.add(PANEL_ID, {
--- a/code/addons/a11y/src/params.ts
+++ b/code/addons/a11y/src/params.ts
@ -1,4 +1,4 @@
-import { ElementContext, Spec, RunOptions } from 'axe-core';
+import type { ElementContext, Spec, RunOptions } from 'axe-core';

 export interface Setup {
  element?: ElementContext;
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -27,6 +27,11 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
+    "./decorator": {
+      "require": "./dist/decorator.js",
+      "import": "./dist/decorator.mjs",
+      "types": "./dist/decorator.d.ts"
+    },
    "./manager": {
      "require": "./dist/manager.js",
      "import": "./dist/manager.mjs",
@ -47,6 +52,19 @@
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
  "files": [
    "dist/**/*",
    "README.md",
@ -58,13 +76,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/client-logger": "7.0.0-alpha.42",
-    "@storybook/components": "7.0.0-alpha.42",
-    "@storybook/core-events": "7.0.0-alpha.42",
-    "@storybook/csf": "next",
-    "@storybook/theming": "7.0.0-alpha.42",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/client-logger": "7.0.0-alpha.49",
+    "@storybook/components": "7.0.0-alpha.49",
+    "@storybook/core-events": "7.0.0-alpha.49",
+    "@storybook/theming": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
    "dequal": "^2.0.2",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -73,7 +91,6 @@
    "react-inspector": "^6.0.0",
    "telejson": "^6.0.8",
    "ts-dedent": "^2.0.0",
-    "util-deprecate": "^1.0.2",
    "uuid-browser": "^3.1.0"
  },
  "devDependencies": {
@ -98,11 +115,12 @@
  "bundler": {
    "entries": [
      "./src/index.ts",
+      "./src/decorator.ts",
      "./src/manager.tsx",
      "./src/preview.ts"
    ]
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/code/addons/actions/src/addArgs.ts
+++ b/code/addons/actions/src/addArgs.ts
@ -1,3 +1,7 @@
+import type { ArgsEnhancer } from '@storybook/types';
 import { addActionsFromArgTypes, inferActionsFromArgTypesRegex } from './addArgsHelpers';

-export const argsEnhancers = [addActionsFromArgTypes, inferActionsFromArgTypesRegex];
+export const argsEnhancers: ArgsEnhancer[] = [
+  addActionsFromArgTypes,
+  inferActionsFromArgTypesRegex,
+];
--- a/code/addons/actions/src/addArgsHelpers.test.ts
+++ b/code/addons/actions/src/addArgsHelpers.test.ts
@ -1,4 +1,4 @@
-import type { StoryContext } from '@storybook/addons';
+import type { StoryContext } from '@storybook/types';
 import { inferActionsFromArgTypesRegex, addActionsFromArgTypes } from './addArgsHelpers';

 describe('actions parameter enhancers', () => {
--- a/code/addons/actions/src/addArgsHelpers.ts
+++ b/code/addons/actions/src/addArgsHelpers.ts
@ -1,4 +1,4 @@
-import type { Args, AnyFramework, ArgsEnhancer } from '@storybook/csf';
+import type { Args, Renderer, ArgsEnhancer } from '@storybook/types';
 import { action } from './runtime/action';

 // interface ActionsParameter {
@ -14,7 +14,7 @@ const isInInitialArgs = (name: string, initialArgs: Args) =>
 * matches a regex, such as `^on.*` for react-style `onClick` etc.
 */

-export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (context) => {
+export const inferActionsFromArgTypesRegex: ArgsEnhancer<Renderer> = (context) => {
  const {
    initialArgs,
    argTypes,
@ -40,7 +40,7 @@ export const inferActionsFromArgTypesRegex: ArgsEnhancer<AnyFramework> = (contex
 /**
 * Add action args for list of strings.
 */
-export const addActionsFromArgTypes: ArgsEnhancer<AnyFramework> = (context) => {
+export const addActionsFromArgTypes: ArgsEnhancer<Renderer> = (context) => {
  const {
    initialArgs,
    argTypes,
--- a/code/addons/actions/src/addDecorator.ts
+++ b/code/addons/actions/src/addDecorator.ts
@ -1,3 +0,0 @@
-import { withActions } from './runtime/withActions';
-
-export const decorators = [withActions];
--- a/code/addons/actions/src/components/ActionLogger/index.tsx
+++ b/code/addons/actions/src/components/ActionLogger/index.tsx
@ -1,4 +1,5 @@
-import React, { FC, Fragment } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 import { styled, withTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';

@ -6,7 +7,7 @@ import { Inspector } from 'react-inspector';
 import { ActionBar, ScrollArea } from '@storybook/components';

 import { Action, InspectorContainer, Counter } from './style';
-import { ActionDisplay } from '../../models';
+import type { ActionDisplay } from '../../models';

 const UnstyledWrapped: FC<{ className?: string }> = ({ children, className }) => (
  <ScrollArea horizontal vertical className={className}>
--- a/code/addons/actions/src/containers/ActionLogger/index.tsx
+++ b/code/addons/actions/src/containers/ActionLogger/index.tsx
@ -6,7 +6,7 @@ import { STORY_CHANGED } from '@storybook/core-events';

 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
-import { ActionDisplay } from '../../models';
+import type { ActionDisplay } from '../../models';

 interface ActionLoggerProps {
  active: boolean;
@ -64,9 +64,11 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
      const actions = [...prevState.actions];
      const previous = actions.length && actions[0];
      if (previous && safeDeepEqual(previous.data, action.data)) {
-        previous.count++; // eslint-disable-line
+        // eslint-disable-next-line no-plusplus
+        previous.count++;
      } else {
-        action.count = 1; // eslint-disable-line
+        // eslint-disable-next-line no-param-reassign
+        action.count = 1;
        actions.unshift(action);
      }
      return { actions: actions.slice(0, action.options.limit) };
--- a/code/addons/actions/src/decorator.ts
+++ b/code/addons/actions/src/decorator.ts
@ -0,0 +1,65 @@
+import global from 'global';
+import { useEffect, makeDecorator } from '@storybook/addons';
+import { actions } from './runtime/actions';
+
+import { PARAM_KEY } from './constants';
+
+const { document, Element } = global;
+
+const delegateEventSplitter = /^(\S+)\s*(.*)$/;
+
+const isIE = Element != null && !Element.prototype.matches;
+const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
+
+const hasMatchInAncestry = (element: any, selector: any): boolean => {
+  if (element[matchesMethod](selector)) {
+    return true;
+  }
+  const parent = element.parentElement;
+  if (!parent) {
+    return false;
+  }
+  return hasMatchInAncestry(parent, selector);
+};
+
+const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
+  const actionsObject = actionsFn(...handles);
+  return Object.entries(actionsObject).map(([key, action]) => {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
+    return {
+      eventName,
+      handler: (e: { target: any }) => {
+        if (!selector || hasMatchInAncestry(e.target, selector)) {
+          action(e);
+        }
+      },
+    };
+  });
+};
+
+const applyEventHandlers = (actionsFn: any, ...handles: any[]) => {
+  const root = document && document.getElementById('storybook-root');
+  useEffect(() => {
+    if (root != null) {
+      const handlers = createHandlers(actionsFn, ...handles);
+      handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
+      return () =>
+        handlers.forEach(({ eventName, handler }) => root.removeEventListener(eventName, handler));
+    }
+    return undefined;
+  }, [root, actionsFn, handles]);
+};
+
+export const withActions = makeDecorator({
+  name: 'withActions',
+  parameterName: PARAM_KEY,
+  skipIfNoParametersOrOptions: true,
+  wrapper: (getStory, context, { parameters }) => {
+    if (parameters?.handles) {
+      applyEventHandlers(actions, ...parameters.handles);
+    }
+
+    return getStory(context);
+  },
+});
--- a/code/addons/actions/src/models/ActionDisplay.ts
+++ b/code/addons/actions/src/models/ActionDisplay.ts
@ -1,4 +1,4 @@
-import { ActionOptions } from './ActionOptions';
+import type { ActionOptions } from './ActionOptions';

 export interface ActionDisplay {
  id: string;
--- a/code/addons/actions/src/models/ActionsFunction.ts
+++ b/code/addons/actions/src/models/ActionsFunction.ts
@ -1,5 +1,5 @@
-import { ActionOptions } from './ActionOptions';
-import { ActionsMap } from './ActionsMap';
+import type { ActionOptions } from './ActionOptions';
+import type { ActionsMap } from './ActionsMap';

 export interface ActionsFunction {
  <T extends string>(handlerMap: Record<T, string>, options?: ActionOptions): ActionsMap<T>;
--- a/code/addons/actions/src/models/ActionsMap.ts
+++ b/code/addons/actions/src/models/ActionsMap.ts
@ -1,3 +1,3 @@
-import { HandlerFunction } from './HandlerFunction';
+import type { HandlerFunction } from './HandlerFunction';

 export type ActionsMap<T extends string = string> = Record<T, HandlerFunction>;
--- a/code/addons/actions/src/preview.ts
+++ b/code/addons/actions/src/preview.ts
@ -1,2 +1 @@
-export * from './addDecorator';
 export * from './addArgs';
--- a/code/addons/actions/src/runtime/action.ts
+++ b/code/addons/actions/src/runtime/action.ts
@ -1,7 +1,7 @@
 import uuidv4 from 'uuid-browser/v4';
 import { addons } from '@storybook/addons';
 import { EVENT_ID } from '../constants';
-import { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
+import type { ActionDisplay, ActionOptions, HandlerFunction } from '../models';
 import { config } from './configureActions';

 type SyntheticEvent = any; // import('react').SyntheticEvent;
--- a/code/addons/actions/src/runtime/actions.ts
+++ b/code/addons/actions/src/runtime/actions.ts
@ -1,5 +1,5 @@
 import { action } from './action';
-import { ActionsFunction, ActionOptions, ActionsMap } from '../models';
+import type { ActionsFunction, ActionOptions, ActionsMap } from '../models';
 import { config } from './configureActions';

 export const actions: ActionsFunction = (...args: any[]) => {
--- a/code/addons/actions/src/runtime/configureActions.ts
+++ b/code/addons/actions/src/runtime/configureActions.ts
@ -1,4 +1,4 @@
-import { ActionOptions } from '../models';
+import type { ActionOptions } from '../models';

 export const config: ActionOptions = {
  depth: 10,
--- a/code/addons/actions/src/runtime/decorateAction.ts
+++ b/code/addons/actions/src/runtime/decorateAction.ts
@ -1,37 +0,0 @@
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
-
-import { DecoratorFunction } from '../models';
-
-export const decorateAction = (_decorators: DecoratorFunction[]) => {
-  return deprecate(
-    () => {},
-    dedent`
-    decorateAction is no longer supported as of Storybook 6.0.
-  `
-  );
-};
-
-const deprecatedCallback = deprecate(() => {},
-'decorate.* is no longer supported as of Storybook 6.0.');
-
-export const decorate = (_decorators: DecoratorFunction[]) => {
-  return deprecate(
-    () => {
-      return {
-        action: deprecatedCallback,
-        actions: deprecatedCallback,
-        withActions: deprecatedCallback,
-      };
-    },
-    dedent`
-    decorate is deprecated, please configure addon-actions using the addParameter api:
-      
-      addParameters({
-        actions: {
-          handles: options
-        },
-      });
-    `
-  );
-};
--- a/code/addons/actions/src/runtime/index.ts
+++ b/code/addons/actions/src/runtime/index.ts
@ -1,5 +1,3 @@
 export * from './action';
 export * from './actions';
 export * from './configureActions';
-export * from './decorateAction';
-export * from './withActions';
--- a/code/addons/actions/src/runtime/withActions.ts
+++ b/code/addons/actions/src/runtime/withActions.ts
@ -1,87 +0,0 @@
-// Based on http://backbonejs.org/docs/backbone.html#section-164
-import global from 'global';
-import { useEffect, makeDecorator } from '@storybook/addons';
-import deprecate from 'util-deprecate';
-import { dedent } from 'ts-dedent';
-
-import { actions } from './actions';
-
-import { PARAM_KEY } from '../constants';
-
-const { document, Element } = global;
-
-const delegateEventSplitter = /^(\S+)\s*(.*)$/;
-
-const isIE = Element != null && !Element.prototype.matches;
-const matchesMethod = isIE ? 'msMatchesSelector' : 'matches';
-
-const hasMatchInAncestry = (element: any, selector: any): boolean => {
-  if (element[matchesMethod](selector)) {
-    return true;
-  }
-  const parent = element.parentElement;
-  if (!parent) {
-    return false;
-  }
-  return hasMatchInAncestry(parent, selector);
-};
-
-const createHandlers = (actionsFn: (...arg: any[]) => object, ...handles: any[]) => {
-  const actionsObject = actionsFn(...handles);
-  return Object.entries(actionsObject).map(([key, action]) => {
-    const [_, eventName, selector] = key.match(delegateEventSplitter) || [];
-    return {
-      eventName,
-      handler: (e: { target: any }) => {
-        if (!selector || hasMatchInAncestry(e.target, selector)) {
-          action(e);
-        }
-      },
-    };
-  });
-};
-
-const applyEventHandlers = deprecate(
-  (actionsFn: any, ...handles: any[]) => {
-    const root = document && document.getElementById('storybook-root');
-    useEffect(() => {
-      if (root != null) {
-        const handlers = createHandlers(actionsFn, ...handles);
-        handlers.forEach(({ eventName, handler }) => root.addEventListener(eventName, handler));
-        return () =>
-          handlers.forEach(({ eventName, handler }) =>
-            root.removeEventListener(eventName, handler)
-          );
-      }
-      return undefined;
-    }, [root, actionsFn, handles]);
-  },
-  dedent`
-    withActions(options) is deprecated, please configure addon-actions using the addParameter api:
-
-    addParameters({
-      actions: {
-        handles: options
-      },
-    });
-  `
-);
-
-const applyDeprecatedOptions = (actionsFn: any, options: any[]) => {
-  if (options) {
-    applyEventHandlers(actionsFn, options);
-  }
-};
-
-export const withActions = makeDecorator({
-  name: 'withActions',
-  parameterName: PARAM_KEY,
-  skipIfNoParametersOrOptions: true,
-  wrapper: (getStory, context, { parameters, options }) => {
-    applyDeprecatedOptions(actions, options as any[]);
-
-    if (parameters && parameters.handles) applyEventHandlers(actions, ...parameters.handles);
-
-    return getStory(context);
-  },
-});
--- a/code/addons/actions/template/stories/parameters.stories.ts
+++ b/code/addons/actions/template/stories/parameters.stories.ts
@ -1,4 +1,5 @@
 import globalThis from 'global';
+import { withActions } from '@storybook/addon-actions/decorator';

 export default {
  component: globalThis.Components.Button,
@ -14,4 +15,5 @@ export const Basic = {
  parameters: {
    handles: [{ click: 'clicked', contextmenu: 'right clicked' }],
  },
+  decorators: [withActions],
 };
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -51,6 +51,19 @@
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ],
+      "preview": [
+        "dist/preview.d.ts"
+      ]
+    }
+  },
  "files": [
    "dist/**/*",
    "README.md",
@ -62,13 +75,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/client-logger": "7.0.0-alpha.42",
-    "@storybook/components": "7.0.0-alpha.42",
-    "@storybook/core-events": "7.0.0-alpha.42",
-    "@storybook/csf": "next",
-    "@storybook/theming": "7.0.0-alpha.42",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/client-logger": "7.0.0-alpha.49",
+    "@storybook/components": "7.0.0-alpha.49",
+    "@storybook/core-events": "7.0.0-alpha.49",
+    "@storybook/theming": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "ts-dedent": "^2.0.0"
@ -98,7 +111,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -1,4 +1,5 @@
-import React, { FC, Fragment, useCallback, useMemo, memo } from 'react';
+import type { FC } from 'react';
+import React, { Fragment, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';

 import { useParameter, useGlobals } from '@storybook/api';
@ -7,7 +8,12 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp

 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
-import { BackgroundSelectorItem, Background, BackgroundsParameter, GlobalState } from '../types';
+import type {
+  BackgroundSelectorItem,
+  Background,
+  BackgroundsParameter,
+  GlobalState,
+} from '../types';
 import { getBackgroundColorByName } from '../helpers';

 const createBackgroundSelectorItem = memoize(1000)(
@ -71,7 +77,7 @@ const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
  values: [],
 };

-export const BackgroundSelector: FC = memo(() => {
+export const BackgroundSelector: FC = memo(function BackgroundSelector() {
  const backgroundsConfig = useParameter<BackgroundsParameter>(
    BACKGROUNDS_PARAM_KEY,
    DEFAULT_BACKGROUNDS_CONFIG
--- a/code/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/code/addons/backgrounds/src/containers/GridSelector.tsx
@ -1,11 +1,12 @@
-import React, { FC, memo } from 'react';
+import type { FC } from 'react';
+import React, { memo } from 'react';

 import { useGlobals, useParameter } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';

 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

-export const GridSelector: FC = memo(() => {
+export const GridSelector: FC = memo(function GridSelector() {
  const [globals, updateGlobals] = useGlobals();

  const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {
--- a/code/addons/backgrounds/src/decorators/withBackground.ts
+++ b/code/addons/backgrounds/src/decorators/withBackground.ts
@ -1,5 +1,5 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';

 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import {
@ -10,8 +10,8 @@ import {
 } from '../helpers';

 export const withBackground = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
+  StoryFn: StoryFunction<Renderer>,
+  context: StoryContext<Renderer>
 ) => {
  const { globals, parameters } = context;
  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
--- a/code/addons/backgrounds/src/decorators/withGrid.ts
+++ b/code/addons/backgrounds/src/decorators/withGrid.ts
@ -1,13 +1,10 @@
 import { useMemo, useEffect } from '@storybook/addons';
-import type { AnyFramework, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/csf';
+import type { Renderer, PartialStoryFn as StoryFunction, StoryContext } from '@storybook/types';

 import { clearStyles, addGridStyle } from '../helpers';
 import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

-export const withGrid = (
-  StoryFn: StoryFunction<AnyFramework>,
-  context: StoryContext<AnyFramework>
-) => {
+export const withGrid = (StoryFn: StoryFunction<Renderer>, context: StoryContext<Renderer>) => {
  const { globals, parameters } = context;
  const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
  const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
--- a/code/addons/backgrounds/src/helpers/index.ts
+++ b/code/addons/backgrounds/src/helpers/index.ts
@ -3,7 +3,7 @@ import { dedent } from 'ts-dedent';

 import { logger } from '@storybook/client-logger';

-import { Background } from '../types';
+import type { Background } from '../types';

 const { document, window } = global;

--- a/code/addons/backgrounds/src/preview.tsx
+++ b/code/addons/backgrounds/src/preview.tsx
@ -1,9 +1,10 @@
 import { withBackground } from './decorators/withBackground';
 import { withGrid } from './decorators/withGrid';
+import { PARAM_KEY } from './constants';

 export const decorators = [withGrid, withBackground];
 export const parameters = {
-  backgrounds: {
+  [PARAM_KEY]: {
    grid: {
      cellSize: 20,
      opacity: 0.5,
@ -15,3 +16,7 @@ export const parameters = {
    ],
  },
 };
+
+export const globals = {
+  [PARAM_KEY]: null as any,
+};
--- a/code/addons/backgrounds/src/types/index.ts
+++ b/code/addons/backgrounds/src/types/index.ts
@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';

 export interface GlobalState {
  name: string | undefined;
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -46,6 +46,16 @@
  "main": "dist/index.js",
  "module": "dist/index.mjs",
  "types": "dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "dist/index.d.ts"
+      ],
+      "manager": [
+        "dist/manager.d.ts"
+      ]
+    }
+  },
  "files": [
    "dist/**/*",
    "README.md",
@ -57,16 +67,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/blocks": "7.0.0-alpha.42",
-    "@storybook/client-logger": "7.0.0-alpha.42",
-    "@storybook/components": "7.0.0-alpha.42",
-    "@storybook/core-common": "7.0.0-alpha.42",
-    "@storybook/csf": "next",
-    "@storybook/node-logger": "7.0.0-alpha.42",
-    "@storybook/store": "7.0.0-alpha.42",
-    "@storybook/theming": "7.0.0-alpha.42",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/blocks": "7.0.0-alpha.49",
+    "@storybook/client-logger": "7.0.0-alpha.49",
+    "@storybook/components": "7.0.0-alpha.49",
+    "@storybook/core-common": "7.0.0-alpha.49",
+    "@storybook/node-logger": "7.0.0-alpha.49",
+    "@storybook/store": "7.0.0-alpha.49",
+    "@storybook/theming": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
@ -92,7 +102,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/code/addons/controls/src/ControlsPanel.tsx
+++ b/code/addons/controls/src/ControlsPanel.tsx
@ -1,19 +1,14 @@
-import React, { FC } from 'react';
-import {
-  ArgTypes,
-  useArgs,
-  useGlobals,
-  useArgTypes,
-  useParameter,
-  useStorybookState,
-} from '@storybook/api';
+import type { FC } from 'react';
+import React from 'react';
+import { useArgs, useGlobals, useArgTypes, useParameter, useStorybookState } from '@storybook/api';
 import {
  PureArgsTable as ArgsTable,
  NoControlsWarning,
-  PresetColor,
-  SortType,
+  type PresetColor,
+  type SortType,
 } from '@storybook/blocks';

+import type { API_ArgTypes } from '@storybook/types';
 import { PARAM_KEY } from './constants';

 interface ControlsParameters {
@ -43,7 +38,7 @@ export const ControlsPanel: FC = () => {
    if (arg?.control?.type !== 'color' || arg?.control?.presetColors) acc[key] = arg;
    else acc[key] = { ...arg, control: { ...arg.control, presetColors } };
    return acc;
-  }, {} as ArgTypes);
+  }, {} as API_ArgTypes);

  return (
    <>
--- a/code/addons/controls/src/manager.tsx
+++ b/code/addons/controls/src/manager.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { addons, types } from '@storybook/addons';
 import { AddonPanel } from '@storybook/components';
-import { API, useArgTypes } from '@storybook/api';
+import { type API, useArgTypes } from '@storybook/api';
 import { ControlsPanel } from './ControlsPanel';
 import { ADDON_ID, PARAM_KEY } from './constants';

--- a/code/addons/controls/template/stories/basics.stories.ts
+++ b/code/addons/controls/template/stories/basics.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/conditional.stories.ts
+++ b/code/addons/controls/template/stories/conditional.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/disable.stories.ts
+++ b/code/addons/controls/template/stories/disable.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/filters.stories.ts
+++ b/code/addons/controls/template/stories/filters.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/issues.stories.ts
+++ b/code/addons/controls/template/stories/issues.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/matchers.stories.ts
+++ b/code/addons/controls/template/stories/matchers.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/controls/template/stories/sorting.stories.ts
+++ b/code/addons/controls/template/stories/sorting.stories.ts
@ -1,5 +1,5 @@
 import globalThis from 'global';
-import { PartialStoryFn, StoryContext } from '@storybook/csf';
+import type { PartialStoryFn, StoryContext } from '@storybook/types';

 export default {
  component: null,
--- a/code/addons/docs/README.md
+++ b/code/addons/docs/README.md
@ -142,7 +142,7 @@ module.exports = {
      options: {
        configureJSX: true,
        babelOptions: {},
-        sourceLoaderOptions: null,
+        csfPluginOptions: null,
        transcludeMarkdown: true,
      },
    },
@ -152,7 +152,7 @@ module.exports = {

 The `configureJSX` option is useful when you're writing your docs in MDX and your project's babel config isn't already set up to handle JSX files. `babelOptions` is a way to further configure the babel processor when you're using `configureJSX`.

-`sourceLoaderOptions` is an object for configuring `@storybook/source-loader`. When set to `null` it tells docs not to run the `source-loader` at all, which can be used as an optimization, or if you're already using `source-loader` in your `main.js`.
+`csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.

 The `transcludeMarkdown` option enables mdx files to import `.md` files and render them as a component.

--- a/code/addons/docs/jest-transform-mdx.js
+++ b/code/addons/docs/jest-transform-mdx.js
@ -2,11 +2,11 @@ const path = require('path');
 const { ScriptTransformer } = require('@jest/transform');
 const { dedent } = require('ts-dedent');

-const { compileAsync } = require('@storybook/mdx2-csf');
+const { compile } = require('@storybook/mdx2-csf');

 module.exports = {
  async processAsync(src, filename, config, { instrument }) {
-    const code = await compileAsync(src, { skipCsf: false });
+    const code = await compile(src, { skipCsf: false });
    const result = dedent`
      /* @jsx mdx */
      import React from 'react'
--- a/code/addons/docs/mdx-compiler-plugin.js
+++ b/code/addons/docs/mdx-compiler-plugin.js
@ -1 +0,0 @@
-module.exports = require('@storybook/mdx1-csf').createCompiler;
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -24,9 +24,44 @@
    "url": "https://opencollective.com/storybook"
  },
  "license": "MIT",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.js",
+      "import": "./dist/index.mjs",
+      "types": "./dist/index.d.ts"
+    },
+    "./preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./dist/preview": {
+      "require": "./dist/preview.js",
+      "import": "./dist/preview.mjs",
+      "types": "./dist/preview.d.ts"
+    },
+    "./dist/preset": {
+      "require": "./dist/preset.js",
+      "import": "./dist/preset.mjs",
+      "types": "./dist/preset.d.ts"
+    },
+    "./svelte/HOC.svelte": "./svelte/HOC.svelte",
+    "./ember": "./ember/index.js",
+    "./ember/index.js": "./ember/index.js",
+    "./angular": "./angular/index.js",
+    "./angular/index.js": "./angular/index.js",
+    "./web-components/index.js": "./web-components/index.js",
+    "./jest-transform-mdx.js": "./jest-transform-mdx.js",
+    "./package.json": "./package.json"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
  "files": [
    "dist/**/*",
    "angular/**/*",
@ -46,29 +81,21 @@
  ],
  "scripts": {
    "check": "../../../scripts/node_modules/.bin/tsc --noEmit",
-    "prep": "node ../../../scripts/prepare.js"
+    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
    "@babel/plugin-transform-react-jsx": "^7.12.12",
    "@jest/transform": "^26.6.2",
    "@mdx-js/react": "^2.1.5",
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/blocks": "7.0.0-alpha.42",
-    "@storybook/components": "7.0.0-alpha.42",
-    "@storybook/core-common": "7.0.0-alpha.42",
-    "@storybook/core-events": "7.0.0-alpha.42",
-    "@storybook/csf": "next",
-    "@storybook/csf-tools": "7.0.0-alpha.42",
-    "@storybook/docs-tools": "7.0.0-alpha.42",
-    "@storybook/mdx2-csf": "0.1.0-next.0",
-    "@storybook/node-logger": "7.0.0-alpha.42",
-    "@storybook/postinstall": "7.0.0-alpha.42",
-    "@storybook/preview-web": "7.0.0-alpha.42",
-    "@storybook/source-loader": "7.0.0-alpha.42",
-    "@storybook/store": "7.0.0-alpha.42",
-    "@storybook/theming": "7.0.0-alpha.42",
-    "dequal": "^2.0.2",
+    "@storybook/blocks": "7.0.0-alpha.49",
+    "@storybook/components": "7.0.0-alpha.49",
+    "@storybook/csf-plugin": "7.0.0-alpha.49",
+    "@storybook/csf-tools": "7.0.0-alpha.49",
+    "@storybook/mdx2-csf": "next",
+    "@storybook/node-logger": "7.0.0-alpha.49",
+    "@storybook/postinstall": "7.0.0-alpha.49",
+    "@storybook/preview-web": "7.0.0-alpha.49",
+    "@storybook/types": "7.0.0-alpha.49",
    "fs-extra": "^9.0.1",
    "global": "^4.4.0",
    "remark-external-links": "^8.0.0",
@ -94,7 +121,14 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b",
+  "bundler": {
+    "entries": [
+      "./src/index.ts",
+      "./src/preset.ts",
+      "./src/preview.ts"
+    ]
+  },
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/code/addons/docs/preset.js
+++ b/code/addons/docs/preset.js
@ -1 +1 @@
-module.exports = require('./dist/cjs/preset');
+module.exports = require('./dist/preset');
--- a/code/addons/docs/preview.js
+++ b/code/addons/docs/preview.js
@ -1 +1 @@
-export * from './dist/esm/preview';
+export * from './dist/preview';
--- a/code/addons/docs/src/DocsRenderer.tsx
+++ b/code/addons/docs/src/DocsRenderer.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { AnyFramework, Parameters } from '@storybook/csf';
-import { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
+import type { Renderer, Parameters } from '@storybook/types';
+import type { DocsContextProps, DocsRenderFunction } from '@storybook/preview-web';
 import { components as htmlComponents } from '@storybook/components';
 import { Docs, CodeOrSourceMdx, AnchorMdx, HeadersMdx } from '@storybook/blocks';
 import { MDXProvider } from '@mdx-js/react';
@ -14,14 +14,14 @@ export const defaultComponents: Record<string, any> = {
  ...HeadersMdx,
 };

-export class DocsRenderer<TFramework extends AnyFramework> {
-  public render: DocsRenderFunction<TFramework>;
+export class DocsRenderer<TRenderer extends Renderer> {
+  public render: DocsRenderFunction<TRenderer>;

  public unmount: (element: HTMLElement) => void;

  constructor() {
    this.render = (
-      context: DocsContextProps<TFramework>,
+      context: DocsContextProps<TRenderer>,
      docsParameter: Parameters,
      element: HTMLElement,
      callback: () => void
@ -33,6 +33,7 @@ export class DocsRenderer<TFramework extends AnyFramework> {
        ...defaultComponents,
        ...docsParameter?.components,
      };
+
      ReactDOM.render(
        <MDXProvider components={components}>
          <Docs key={Math.random()} context={context} docsParameter={docsParameter} />
--- a/code/addons/docs/src/blocks.ts
+++ b/code/addons/docs/src/blocks.ts
@ -1 +0,0 @@
-export * from '@storybook/blocks';
--- a/code/addons/docs/src/index.ts
+++ b/code/addons/docs/src/index.ts
@ -1,2 +1,2 @@
-export * from './blocks';
+export * from '@storybook/blocks';
 export { DocsRenderer } from './DocsRenderer';
--- a/code/addons/docs/src/preset.ts
+++ b/code/addons/docs/src/preset.ts
@ -1,9 +1,15 @@
 import fs from 'fs-extra';
 import remarkSlug from 'remark-slug';
 import remarkExternalLinks from 'remark-external-links';
+import { dedent } from 'ts-dedent';

-import type { DocsOptions, IndexerOptions, Options, StoryIndexer } from '@storybook/core-common';
-import { logger } from '@storybook/node-logger';
+import type {
+  CoreCommon_IndexerOptions,
+  CoreCommon_StoryIndexer,
+  DocsOptions,
+  Options,
+} from '@storybook/types';
+import type { CsfPluginOptions } from '@storybook/csf-plugin';
 import { loadCsf } from '@storybook/csf-tools';

 // for frameworks that are not working with react, we need to configure
@ -40,10 +46,15 @@ function createBabelOptions({ babelOptions, mdxBabelOptions, configureJSX }: Bab
  };
 }

-export async function webpack(
+async function webpack(
  webpackConfig: any = {},
  options: Options &
-    BabelParams & { sourceLoaderOptions: any; transcludeMarkdown: boolean } /* & Parameters<
+    BabelParams & {
+      /** @deprecated */
+      sourceLoaderOptions: any;
+      csfPluginOptions: CsfPluginOptions | null;
+      transcludeMarkdown: boolean;
+    } /* & Parameters<
      typeof createCompiler
    >[0] */
 ) {
@ -57,7 +68,8 @@ export async function webpack(
    babelOptions,
    mdxBabelOptions,
    configureJSX = true,
-    sourceLoaderOptions = { injectStoryParameters: true },
+    csfPluginOptions = {},
+    sourceLoaderOptions = null,
    transcludeMarkdown = false,
  } = options;

@ -67,22 +79,18 @@ export async function webpack(
    remarkPlugins: [remarkSlug, remarkExternalLinks],
  };

-  logger.info(`Addon-docs: using MDX2`);
+  if (sourceLoaderOptions) {
+    throw new Error(dedent`
+      Addon-docs no longer uses source-loader in 7.0.
+
+      To update your configuration, please see migration instructions here:
+
+      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#dropped-source-loader--storiesof-static-snippets
+    `);
+  }

  const mdxLoader = require.resolve('@storybook/mdx2-csf/loader');

-  // set `sourceLoaderOptions` to `null` to disable for manual configuration
-  const sourceLoader = sourceLoaderOptions
-    ? [
-        {
-          test: /\.(stories|story)\.[tj]sx?$/,
-          loader: require.resolve('@storybook/source-loader'),
-          options: { ...sourceLoaderOptions, inspectLocalDependencies: true },
-          enforce: 'pre',
-        },
-      ]
-    : [];
-
  let rules = module.rules || [];
  if (transcludeMarkdown) {
    rules = [
@ -105,6 +113,12 @@ export async function webpack(

  const result = {
    ...webpackConfig,
+    plugins: [
+      ...(webpackConfig.plugins || []),
+      // eslint-disable-next-line global-require
+      ...(csfPluginOptions ? [require('@storybook/csf-plugin').webpack(csfPluginOptions)] : []),
+    ],
+
    module: {
      ...module,
      rules: [
@ -139,7 +153,6 @@ export async function webpack(
            },
          ],
        },
-        ...sourceLoader,
      ],
    },
  };
@ -147,10 +160,9 @@ export async function webpack(
  return result;
 }

-export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
-  const mdxIndexer = async (fileName: string, opts: IndexerOptions) => {
+const storyIndexers = (indexers: CoreCommon_StoryIndexer[] | null) => {
+  const mdxIndexer = async (fileName: string, opts: CoreCommon_IndexerOptions) => {
    let code = (await fs.readFile(fileName, 'utf-8')).toString();
-    // @ts-expect-error (Converted from ts-ignore)
    const { compile } = await import('@storybook/mdx2-csf');
    code = await compile(code, {});
    return loadCsf(code, { ...opts, fileName }).parse();
@ -159,13 +171,12 @@ export const storyIndexers = async (indexers: StoryIndexer[] | null) => {
    {
      test: /(stories|story)\.mdx$/,
      indexer: mdxIndexer,
-      addDocsTemplate: true,
    },
    ...(indexers || []),
  ];
 };

-export const docs = (docsOptions: DocsOptions) => {
+const docs = (docsOptions: DocsOptions) => {
  return {
    ...docsOptions,
    enabled: true,
@ -173,3 +184,13 @@ export const docs = (docsOptions: DocsOptions) => {
    docsPage: true,
  };
 };
+
+/*
+ * This is a workaround for https://github.com/Swatinem/rollup-plugin-dts/issues/162
+ * something down the dependency chain is using typescript namespaces, which are not supported by rollup-plugin-dts
+ */
+const webpackX = webpack as any;
+const storyIndexersX = storyIndexers as any;
+const docsX = docs as any;
+
+export { webpackX as webpack, storyIndexersX as storyIndexers, docsX as docs };
--- a/code/addons/docs/src/shared.ts
+++ b/code/addons/docs/src/shared.ts
@ -1,28 +0,0 @@
-export const ADDON_ID = 'storybook/docs';
-export const PANEL_ID = `${ADDON_ID}/panel`;
-export const PARAM_KEY = `docs`;
-
-export const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`;
-
-export enum SourceType {
-  /**
-   * AUTO is the default
-   *
-   * Use the CODE logic if:
-   * - the user has set a custom source snippet in `docs.source.code` story parameter
-   * - the story is not an args-based story
-   *
-   * Use the DYNAMIC rendered snippet if the story is an args story
-   */
-  AUTO = 'auto',
-
-  /**
-   * Render the code extracted by source-loader
-   */
-  CODE = 'code',
-
-  /**
-   * Render dynamically-rendered source snippet from the story's virtual DOM (currently React only)
-   */
-  DYNAMIC = 'dynamic',
-}
--- a/code/addons/docs/template/stories/docs2/Title.mdx
+++ b/code/addons/docs/template/stories/docs2/Title.mdx
@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';

-<Meta title="addons/docs/docs2/Yabbadabbadooo" />
+<Meta title="Yabbadabbadooo" />

 # Docs with title

--- a/code/addons/docs/template/stories/docspage/autoplay.stories.ts
+++ b/code/addons/docs/template/stories/docspage/autoplay.stories.ts
@ -0,0 +1,33 @@
+import globalThis from 'global';
+import { expect } from '@storybook/jest';
+import { within } from '@storybook/testing-library';
+
+export default {
+  component: globalThis.Components.Pre,
+  tags: ['docsPage'],
+  args: { text: 'Play has not run' },
+  parameters: { chromatic: { disable: true } },
+};
+
+// Should not autoplay
+export const NoAutoplay = {
+  play: async ({ viewMode, canvasElement }) => {
+    const pre = await within(canvasElement).findByText('Play has not run');
+    if (viewMode === 'docs') {
+      pre.innerText = 'Play should not have run!';
+      // Sort of pointless
+      expect(viewMode).not.toBe('docs');
+    } else {
+      pre.innerText = 'Play has run';
+    }
+  },
+};
+
+// Should autoplay
+export const Autoplay = {
+  parameters: { docs: { autoplay: true } },
+  play: async ({ canvasElement }) => {
+    const pre = await within(canvasElement).findByText('Play has not run');
+    pre.innerText = 'Play has run';
+  },
+};
--- a/code/addons/docs/template/stories/docspage/basic.stories.ts
+++ b/code/addons/docs/template/stories/docspage/basic.stories.ts
@ -2,19 +2,29 @@ import globalThis from 'global';

 export default {
  component: globalThis.Components.Button,
+  tags: ['docsPage'],
  args: { label: 'Click Me!' },
  parameters: { chromatic: { disable: true } },
 };

+/**
+ * A basic button
+ */
 export const Basic = {
  args: { label: 'Basic' },
 };

+/**
+ * Won't show up in DocsPage
+ */
 export const Disabled = {
  args: { label: 'Disabled in DocsPage' },
  parameters: { docs: { disable: true } },
 };

+/**
+ * Another button, just to show multiple stories
+ */
 export const Another = {
  args: { label: 'Another' },
 };
--- a/code/addons/docs/template/stories/docspage/description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/description.stories.ts
@ -6,6 +6,7 @@ export default {
  subcomponents: {
    Pre: globalThis.Components.Pre,
  },
+  tags: ['docsPage'],
  args: { label: 'Click Me!' },
  parameters: {
    docs: {
--- a/code/addons/docs/template/stories/docspage/extract-description.stories.ts
+++ b/code/addons/docs/template/stories/docspage/extract-description.stories.ts
@ -2,6 +2,7 @@ import globalThis from 'global';

 export default {
  component: globalThis.Components.Button,
+  tags: ['docsPage'],
  args: { label: 'Click Me!' },
  parameters: {
    docs: {
--- a/code/addons/docs/template/stories/docspage/iframe.stories.ts
+++ b/code/addons/docs/template/stories/docspage/iframe.stories.ts
@ -2,6 +2,7 @@ import globalThis from 'global';

 export default {
  component: globalThis.Components.Button,
+  tags: ['docsPage'],
  args: { label: 'Rendered in iframe' },
  parameters: {
    chromatic: { disable: true },
--- a/code/addons/docs/template/stories/docspage/overflow.stories.ts
+++ b/code/addons/docs/template/stories/docspage/overflow.stories.ts
@ -2,6 +2,7 @@ import globalThis from 'global';

 export default {
  component: globalThis.Components.Pre,
+  tags: ['docsPage'],
  args: {
    text: 'Demonstrates overflow',
    style: { width: 2000, height: 500, background: 'hotpink' },
--- a/code/addons/docs/template/stories/docspage/override.stories.ts
+++ b/code/addons/docs/template/stories/docspage/override.stories.ts
@ -15,6 +15,7 @@ const Override = () => 'overridden';

 export default {
  component: globalThis.Components.Button,
+  tags: ['docsPage'],
  args: { label: 'Click Me!' },
  parameters: {
    chromatic: { disable: true },
--- a/code/addons/docs/template/stories/docspage/source.stories.ts
+++ b/code/addons/docs/template/stories/docspage/source.stories.ts
@ -2,6 +2,7 @@ import globalThis from 'global';

 export default {
  component: globalThis.Components.Button,
+  tags: ['docsPage'],
  args: { label: 'Click Me!' },
  parameters: { chromatic: { disable: true } },
 };
--- a/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx
+++ b/code/addons/docs/template/stories/stories-mdx/basic.stories.mdx
@ -1,24 +1,22 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';

-<Meta title="addons/docs/stories-mdx/basic" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />

 # MDX Stories

 This file demonstrates defining stories inside MDX.

 <Canvas>
-  <Story
-    name="Primary"
-    args={{ label: 'Primary' }}
-  />
+  <Story name="Primary" args={{ label: 'Primary' }} />
 </Canvas>

 <ArgsTable story="^" />

 <Canvas>
-  <Story
-    name="Secondary"
-    args={{ label: 'Secondary' }}
-  />
+  <Story name="Secondary" args={{ label: 'Secondary' }} />
+</Canvas>
+
+<Canvas>
+  <div>Non-story content</div>
 </Canvas>
--- a/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx
+++ b/code/addons/docs/template/stories/stories-mdx/csf-in-mdx.stories.mdx
@ -1,8 +1,8 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs';
+import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';
 import * as Csf from './csf-in-mdx.stories.js';

-<Meta title="addons/docs/stories-mdx/csf-in-mdx" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />

 # Legacy CSF in MDX Stories

--- a/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
+++ b/code/addons/docs/template/stories/stories-mdx/iframe.stories.mdx
@ -1,7 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';

-<Meta title="addons/docs/stories-mdx/iframe" component={globalThis.Components.Button} />
+<Meta component={globalThis.Components.Button} />

 # MDX Stories

--- a/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx
+++ b/code/addons/docs/template/stories/stories-mdx/play-functions.stories.mdx
@ -1,11 +1,7 @@
 import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
 import globalThis from 'global';

-<Meta
-  title="addons/docs/stories-mdx/play functions"
-  component={globalThis.Components.Button}
-  play={() => console.log('component play')}
-/>
+<Meta component={globalThis.Components.Button} play={() => console.log('component play')} />

 # MDX Play function Stories

--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "7.0.0-alpha.42",
+  "version": "7.0.0-alpha.49",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -27,6 +27,76 @@
      "import": "./dist/index.mjs",
      "types": "./dist/index.d.ts"
    },
+    "./actions/preview": {
+      "require": "./dist/actions/preview.js",
+      "import": "./dist/actions/preview.mjs",
+      "types": "./dist/actions/preview.d.ts"
+    },
+    "./actions/manager": {
+      "require": "./dist/actions/manager.js",
+      "import": "./dist/actions/manager.mjs",
+      "types": "./dist/actions/manager.d.ts"
+    },
+    "./backgrounds/preview": {
+      "require": "./dist/backgrounds/preview.js",
+      "import": "./dist/backgrounds/preview.mjs",
+      "types": "./dist/backgrounds/preview.d.ts"
+    },
+    "./backgrounds/manager": {
+      "require": "./dist/backgrounds/manager.js",
+      "import": "./dist/backgrounds/manager.mjs",
+      "types": "./dist/backgrounds/manager.d.ts"
+    },
+    "./controls/manager": {
+      "require": "./dist/controls/manager.js",
+      "import": "./dist/controls/manager.mjs",
+      "types": "./dist/controls/manager.d.ts"
+    },
+    "./docs/preview": {
+      "require": "./dist/docs/preview.js",
+      "import": "./dist/docs/preview.mjs",
+      "types": "./dist/docs/preview.d.ts"
+    },
+    "./docs/preset": {
+      "require": "./dist/docs/preset.js",
+      "import": "./dist/docs/preset.mjs",
+      "types": "./dist/docs/preset.d.ts"
+    },
+    "./highlight/preview": {
+      "require": "./dist/highlight/preview.js",
+      "import": "./dist/highlight/preview.mjs",
+      "types": "./dist/highlight/preview.d.ts"
+    },
+    "./measure/preview": {
+      "require": "./dist/measure/preview.js",
+      "import": "./dist/measure/preview.mjs",
+      "types": "./dist/measure/preview.d.ts"
+    },
+    "./measure/manager": {
+      "require": "./dist/measure/manager.js",
+      "import": "./dist/measure/manager.mjs",
+      "types": "./dist/measure/manager.d.ts"
+    },
+    "./outline/preview": {
+      "require": "./dist/outline/preview.js",
+      "import": "./dist/outline/preview.mjs",
+      "types": "./dist/outline/preview.d.ts"
+    },
+    "./outline/manager": {
+      "require": "./dist/outline/manager.js",
+      "import": "./dist/outline/manager.mjs",
+      "types": "./dist/outline/manager.d.ts"
+    },
+    "./toolbars/manager": {
+      "require": "./dist/toolbars/manager.js",
+      "import": "./dist/toolbars/manager.mjs",
+      "types": "./dist/toolbars/manager.d.ts"
+    },
+    "./viewport/manager": {
+      "require": "./dist/viewport/manager.js",
+      "import": "./dist/viewport/manager.mjs",
+      "types": "./dist/viewport/manager.d.ts"
+    },
    "./package.json": "./package.json"
  },
  "main": "dist/index.js",
@ -41,76 +111,52 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.42",
-    "@storybook/addon-backgrounds": "7.0.0-alpha.42",
-    "@storybook/addon-controls": "7.0.0-alpha.42",
-    "@storybook/addon-docs": "7.0.0-alpha.42",
-    "@storybook/addon-highlight": "7.0.0-alpha.42",
-    "@storybook/addon-measure": "7.0.0-alpha.42",
-    "@storybook/addon-outline": "7.0.0-alpha.42",
-    "@storybook/addon-toolbars": "7.0.0-alpha.42",
-    "@storybook/addon-viewport": "7.0.0-alpha.42",
-    "@storybook/addons": "7.0.0-alpha.42",
-    "@storybook/api": "7.0.0-alpha.42",
-    "@storybook/core-common": "7.0.0-alpha.42",
-    "@storybook/node-logger": "7.0.0-alpha.42",
+    "@storybook/addon-actions": "7.0.0-alpha.49",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.49",
+    "@storybook/addon-controls": "7.0.0-alpha.49",
+    "@storybook/addon-docs": "7.0.0-alpha.49",
+    "@storybook/addon-highlight": "7.0.0-alpha.49",
+    "@storybook/addon-measure": "7.0.0-alpha.49",
+    "@storybook/addon-outline": "7.0.0-alpha.49",
+    "@storybook/addon-toolbars": "7.0.0-alpha.49",
+    "@storybook/addon-viewport": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.49",
+    "@storybook/api": "7.0.0-alpha.49",
+    "@storybook/core-common": "7.0.0-alpha.49",
+    "@storybook/node-logger": "7.0.0-alpha.49",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
-    "@storybook/vue": "7.0.0-alpha.42",
+    "@storybook/vue": "7.0.0-alpha.49",
    "@types/jest": "^26.0.16",
    "typescript": "~4.6.3"
  },
  "peerDependencies": {
    "@babel/core": "^7.9.6"
  },
-  "peerDependenciesMeta": {
-    "@storybook/angular": {
-      "optional": true
-    },
-    "@storybook/html": {
-      "optional": true
-    },
-    "@storybook/vue": {
-      "optional": true
-    },
-    "@storybook/vue3": {
-      "optional": true
-    },
-    "@storybook/web-components": {
-      "optional": true
-    },
-    "lit": {
-      "optional": true
-    },
-    "lit-html": {
-      "optional": true
-    },
-    "react": {
-      "optional": true
-    },
-    "react-dom": {
-      "optional": true
-    },
-    "svelte": {
-      "optional": true
-    },
-    "sveltedoc-parser": {
-      "optional": true
-    },
-    "vue": {
-      "optional": true
-    }
-  },
  "publishConfig": {
    "access": "public"
  },
  "bundler": {
    "entries": [
-      "./src/index.ts"
+      "./src/index.ts",
+      "./src/actions/preview.ts",
+      "./src/actions/manager.ts",
+      "./src/backgrounds/preview.ts",
+      "./src/backgrounds/manager.ts",
+      "./src/controls/manager.ts",
+      "./src/docs/preview.ts",
+      "./src/docs/preset.ts",
+      "./src/highlight/preview.ts",
+      "./src/measure/preview.ts",
+      "./src/measure/manager.ts",
+      "./src/outline/preview.ts",
+      "./src/outline/manager.ts",
+      "./src/toolbars/manager.ts",
+      "./src/viewport/manager.ts"
    ],
    "platform": "node"
  },
-  "gitHead": "4ed2e832e3accf8e533da92a46a812eacaf5db0b"
+  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
 }
--- a/code/addons/essentials/src/actions/manager.ts
+++ b/code/addons/essentials/src/actions/manager.ts
@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-actions/manager';
--- a/code/addons/essentials/src/actions/preview.ts
+++ b/code/addons/essentials/src/actions/preview.ts
@ -0,0 +1,4 @@
+/* eslint-disable import/export */
+// TODO: We need to configure an eslint-import typescript resolver for export maps to be considered
+
+export * from '@storybook/addon-actions/preview';
--- a/code/addons/essentials/src/backgrounds/manager.ts
+++ b/code/addons/essentials/src/backgrounds/manager.ts
@ -0,0 +1,2 @@
+// @ts-expect-error The generated definition file is empty. https://github.com/egoist/tsup/issues/762
+export * from '@storybook/addon-backgrounds/manager';
--- a/Show More
+++ b/Show More
				`@ -1 +0,0 @@`
				`module.exports = require('@storybook/mdx1-csf').createCompiler;`