Merge branch 'next' into shilman/upgrade-docs-mdx

2025-04-05 08:01:20 +08:00 · 2022-11-18 14:47:01 +08:00 · 2022-11-18 14:47:01 +08:00 · d360b58212
commit d360b58212
parent 73623fae7a 609ba772ba
1068 changed files with 9185 additions and 10456 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -19,7 +19,7 @@ executors:
    docker:
      - image: cimg/node:16.17.1
        environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
    resource_class: <<parameters.class>>
  sb_node_16_browsers:
    parameters:
@ -32,7 +32,7 @@ executors:
    docker:
      - image: cimg/node:16.17.1-browsers
        environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
    resource_class: <<parameters.class>>
  sb_playwright:
    parameters:
@ -43,9 +43,9 @@ executors:
        default: 'small'
    working_directory: /tmp/storybook
    docker:
-      - image: mcr.microsoft.com/playwright:v1.27.0-focal
+      - image: mcr.microsoft.com/playwright:v1.28.0-focal
        environment:
-          NODE_OPTIONS: --max_old_space_size=3076
+          NODE_OPTIONS: --max_old_space_size=6144
    resource_class: <<parameters.class>>

 orbs:
@ -176,31 +176,36 @@ commands:
            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}"
-  list-recent-merges:
-    description: 'Lists the merge commits from the past 24 hours'
-    steps:
-      - run:
-          name: Listing merge commits from the past 24 hours
-          when: on_fail
-          command: |
-            git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar | %s [%an]" | grep "Merge pull request" | sed "s/Merge pull request #/https:\/\/github.com\/storybookjs\/storybook\/pull\//g"
  report-workflow-on-failure:
    description: 'Reports failures to discord'
    parameters:
      template:
        description: |
-          Which template to report in discord
+          Which template to report in discord. Applicable for parallel sandbox jobs
        type: string
+        default: 'none'
    steps:
      - run:
          when: on_fail
          command: git fetch --unshallow
-      - list-recent-merges
      - discord/status:
-          only_for_branches: next,alpha
+          only_for_branches: main,next,next-release,latest-release
          fail_only: true
-          failure_message: 'Oh no! The **$CIRCLE_JOB** job has failed for **<< parameters.template >>**.\n\n**Relevant PRs of the last 24h:**\n$(git log --merges --since="24 hours ago" --pretty=format:"\`%h\` %<(12)%ar %s [%an]" | grep "Merge pull request" | sed "s/Merge pull request #/https:\/\/github.com\/storybookjs\/storybook\/pull\//g" | tr "\\n" "\\\\n" | sed "s/\\\\/\\\\n/g")'
+          failure_message: $(yarn get-report-message << pipeline.parameters.workflow >> << parameters.template >>)
 jobs:
+  pretty-docs:
+    executor:
+      class: small
+      name: sb_node_16_classic
+    steps:
+      - checkout_advanced:
+          clone_options: '--depth 1 --verbose'
+      - run:
+          name: Prettier
+          command: |
+            cd scripts
+            yarn
+            yarn docs:prettier:check
  build:
    executor:
      class: large
@ -222,6 +227,7 @@ jobs:
          command: |
            cd code
            yarn local-registry --publish
+      - report-workflow-on-failure
      - save_cache:
          name: Save Yarn cache
          key: build-yarn-2-cache-v4--{{ checksum "code/yarn.lock" }}--{{ checksum "scripts/yarn.lock" }}
@ -274,6 +280,7 @@ jobs:
            rm -rf node_modules
            mkdir node_modules
            npx -p @storybook/bench@next sb-bench 'yarn install' --label cra
+      - report-workflow-on-failure
      - run:
          name: prep artifacts
          when: always
@ -314,6 +321,7 @@ jobs:
            rm -rf node_modules
            mkdir node_modules
            npx -p @storybook/bench@next sb-bench 'yarn install' --label react-vite
+      - report-workflow-on-failure
      - run:
          name: prep artifacts
          when: always
@ -323,7 +331,7 @@ jobs:
          destination: react-vite-default-ts-bench.tar.gz
  lint:
    executor:
-      class: medium
+      class: large
      name: sb_node_16_classic
    steps:
      - checkout_advanced:
@ -335,6 +343,7 @@ jobs:
          command: |
            cd code
            yarn lint
+      - report-workflow-on-failure
      - cancel-workflow-on-failure
  check:
    executor:
@ -350,6 +359,7 @@ jobs:
          command: |
            yarn task --task check --start-from=auto --no-link --debug
            git diff --exit-code
+      - report-workflow-on-failure
      - cancel-workflow-on-failure
  script-unit-tests:
    executor: sb_node_16_browsers
@ -365,6 +375,7 @@ jobs:
            yarn test --coverage --ci
      - store_test_results:
          path: scripts/junit.xml
+      - report-workflow-on-failure
      - cancel-workflow-on-failure
  unit-tests:
    executor:
@ -379,13 +390,14 @@ jobs:
          name: Test
          command: |
            cd code
-            yarn test --coverage --ci
+            yarn test --coverage --ci --maxWorkers=6
      - store_test_results:
          path: code/junit.xml
      - persist_to_workspace:
          root: .
          paths:
            - code/coverage
+      - report-workflow-on-failure
      - cancel-workflow-on-failure
  coverage:
    executor:
@ -401,10 +413,13 @@ jobs:
          command: |
            cd code
            yarn coverage
+      - report-workflow-on-failure
  chromatic-internal-storybooks:
    executor:
-      class: medium
+      class: medium+
      name: sb_node_16_browsers
+    environment:
+        NODE_OPTIONS: --max_old_space_size=6144
    steps:
      # switched this to the CircleCI helper to get the full git history for TurboSnap
      - checkout
@ -416,6 +431,7 @@ jobs:
            cd code
            yarn storybook:ui:chromatic
            yarn storybook:blocks:chromatic
+      - report-workflow-on-failure
      - store_test_results:
          path: test-results
  ## new workflow
@ -527,6 +543,8 @@ jobs:
      - run:
          name: Running Chromatic
          command: yarn task --task chromatic --template $(yarn get-template << pipeline.parameters.workflow >> chromatic) --no-link --start-from=never --junit
+      - report-workflow-on-failure:
+          template: $(yarn get-template << pipeline.parameters.workflow >> chromatic)
      - store_test_results:
          path: test-results
  e2e-sandboxes:
@ -561,6 +579,7 @@ workflows:
        - equal: [api, << pipeline.trigger_source >>]
        - equal: [ci, << pipeline.parameters.workflow >>]
    jobs:
+      - pretty-docs
      - build
      - lint:
          requires:
@ -593,6 +612,7 @@ workflows:
    when:
      equal: [pr, << pipeline.parameters.workflow >>]
    jobs:
+      - pretty-docs
      - build
      - lint:
          requires:
@ -642,6 +662,7 @@ workflows:
    when:
      equal: [merged, << pipeline.parameters.workflow >>]
    jobs:
+      - pretty-docs
      - build
      - lint:
          requires:
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,35 @@
+## 7.0.0-alpha.50 (November 17, 2022)
+
+#### Features
+
+-   Expose more CSF types in all renderers [#19833](https://github.com/storybooks/storybook/pull/19833)
+-   CSF: Renamed Framework to Renderer [#19802](https://github.com/storybooks/storybook/pull/19802)
+
+#### Bug Fixes
+
+-   Next.js: use file path instead of image contents for next-image-loader-stub [#19858](https://github.com/storybooks/storybook/pull/19858)
+-   TypeScript: Fix type inference bug with decorators  [#19839](https://github.com/storybooks/storybook/pull/19839)
+-   Vite: Keep using absolute path node_modules splitting [#19836](https://github.com/storybooks/storybook/pull/19836)
+-   Vite: Fix preview annotation paths on Windows [#19822](https://github.com/storybooks/storybook/pull/19822)
+-   Fix csf-plugin ignoring options [#19823](https://github.com/storybooks/storybook/pull/19823)
+-   Controls: Checkbox does not update when using useArgs hook [#19508](https://github.com/storybooks/storybook/pull/19508)
+
+#### Maintenance
+
+-   Jest: switch from Parameters to StorybookInternalParameters [#19853](https://github.com/storybooks/storybook/pull/19853)
+-   Blocks: Story stories [#19805](https://github.com/storybooks/storybook/pull/19805)
+-   Blocks: Canvas stories [#19804](https://github.com/storybooks/storybook/pull/19804)
+-   Tech: TypeScript should check stories and tests as well [#19831](https://github.com/storybooks/storybook/pull/19831)
+
+#### Build
+
+-   UI Storybook: Disable sourcemaps when building in CI [#19862](https://github.com/storybooks/storybook/pull/19862)
+-   Build: Increase max node memory for jobs [#19856](https://github.com/storybooks/storybook/pull/19856)
+-   CI: improve error reporting mechanism [#19841](https://github.com/storybooks/storybook/pull/19841)
+-   Fix tests on Windows [#19777](https://github.com/storybooks/storybook/pull/19777)
+-   Build: Fix benchmark to run on local packages [#19832](https://github.com/storybooks/storybook/pull/19832)
+-   CI: Report failures on discord [#19801](https://github.com/storybooks/storybook/pull/19801)
+
 ## 7.0.0-alpha.49 (November 13, 2022)

 #### Bug Fixes
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -43,8 +43,9 @@
  - [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 `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas)
    - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer)
+    - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator)
 - [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)
@ -864,6 +865,47 @@ import type { SvelteRenderer } from '@storybook/svelte';
 // etc.
 ```

+#### Renamed `DecoratorFn` to `Decorator`
+
+In 6.x you could import the type `DecoratorFn`:
+
+```ts
+import type { DecoratorFn } from '@storybook/react';
+```
+
+This type is deprecated in 7.0, instead you can use the type `Decorator`, which is now available for all renderers:
+
+```ts
+import type { Decorator } from '@storybook/react';
+// or
+import type { Decorator } from '@storybook/vue';
+// or
+import type { Decorator } from '@storybook/svelte';
+// etc.
+```
+
+The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this:
+
+```tsx
+import type { Decorator } from '@storybook/react';
+import { LocaleProvider } from './locale';
+
+const withLocale: Decorator<{ locale: 'en' | 'es' }> = (Story, { args }) => (
+  <LocaleProvider lang={args.locale}>
+    <Story />
+  </LocaleProvider>
+);
+```
+
+If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use:
+
+```tsx
+import type { Args, Decorator } from '@storybook/react';
+
+// Decorator<Args> behaves the same as DecoratorFn (without generic)
+const withLocale: Decorator<Args> = (Story, { args }) => // args has type { [name: string]: any }
+```
+
 ## From version 6.4.x to 6.5.0

 ### Vue 3 upgrade
--- a/code/addons/a11y/jest.config.js
+++ b/code/addons/a11y/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "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.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",
+    "@storybook/addon-highlight": "7.0.0-alpha.50",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/channels": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "axe-core": "^4.2.0",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -78,7 +78,7 @@
  },
  "devDependencies": {
    "@testing-library/react": "^11.2.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -102,7 +102,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Accessibility",
    "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png",
--- a/code/addons/actions/jest.config.js
+++ b/code/addons/actions/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "description": "Get UI feedback when an action is performed on an interactive element",
  "keywords": [
    "storybook",
@ -76,13 +76,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "dequal": "^2.0.2",
    "global": "^4.4.0",
    "lodash": "^4.17.21",
@ -95,7 +95,7 @@
  },
  "devDependencies": {
    "@types/lodash": "^4.14.167",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -120,7 +120,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Actions",
    "unsupportedFrameworks": [
--- a/code/addons/backgrounds/jest.config.js
+++ b/code/addons/backgrounds/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "description": "Switch backgrounds to view components in different settings",
  "keywords": [
    "addon",
@ -75,19 +75,19 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -111,7 +111,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Backgrounds",
    "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png",
--- a/code/addons/controls/jest.config.js
+++ b/code/addons/controls/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "description": "Interact with component inputs dynamically in the Storybook UI",
  "keywords": [
    "addon",
@ -67,16 +67,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/blocks": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/store": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "lodash": "^4.17.21",
    "ts-dedent": "^2.0.0"
  },
@ -102,7 +102,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Controls",
    "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png",
--- a/code/addons/docs/jest.config.js
+++ b/code/addons/docs/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "description": "Document component usage and properties in Markdown",
  "keywords": [
    "addon",
@ -56,7 +56,7 @@
    "./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",
+    "./jest-transform-mdx": "./jest-transform-mdx.js",
    "./package.json": "./package.json"
  },
  "main": "dist/index.js",
@ -84,18 +84,18 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@babel/plugin-transform-react-jsx": "^7.12.12",
-    "@jest/transform": "^26.6.2",
+    "@babel/plugin-transform-react-jsx": "^7.19.0",
+    "@jest/transform": "^29.3.1",
    "@mdx-js/react": "^2.1.5",
-    "@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/blocks": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/csf-plugin": "7.0.0-alpha.50",
+    "@storybook/csf-tools": "7.0.0-alpha.50",
    "@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",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/postinstall": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "fs-extra": "^9.0.1",
    "global": "^4.4.0",
    "remark-external-links": "^8.0.0",
@ -103,8 +103,8 @@
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "typescript": "~4.6.3"
+    "@babel/core": "^7.20.2",
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -128,7 +128,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Docs",
    "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png",
--- a/code/addons/essentials/jest.config.js
+++ b/code/addons/essentials/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- 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.49",
+  "version": "7.0.0-alpha.50",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -111,26 +111,25 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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",
+    "@storybook/addon-actions": "7.0.0-alpha.50",
+    "@storybook/addon-backgrounds": "7.0.0-alpha.50",
+    "@storybook/addon-controls": "7.0.0-alpha.50",
+    "@storybook/addon-docs": "7.0.0-alpha.50",
+    "@storybook/addon-highlight": "7.0.0-alpha.50",
+    "@storybook/addon-measure": "7.0.0-alpha.50",
+    "@storybook/addon-outline": "7.0.0-alpha.50",
+    "@storybook/addon-toolbars": "7.0.0-alpha.50",
+    "@storybook/addon-viewport": "7.0.0-alpha.50",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
-    "@babel/core": "^7.12.10",
-    "@storybook/vue": "7.0.0-alpha.49",
-    "@types/jest": "^26.0.16",
-    "typescript": "~4.6.3"
+    "@babel/core": "^7.20.2",
+    "@storybook/vue": "7.0.0-alpha.50",
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "^7.9.6"
@ -158,5 +157,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/addons/highlight/jest.config.js
+++ b/code/addons/highlight/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-highlight",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Highlight DOM nodes within your stories",
  "keywords": [
    "storybook-addons",
@ -60,13 +60,13 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/core-events": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
    "global": "^4.4.0"
  },
  "devDependencies": {
    "@types/webpack-env": "^1.16.0",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "publishConfig": {
    "access": "public"
@ -77,7 +77,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "sbmodern": "dist/modern/index.js",
  "storybook": {
    "displayName": "Highlight",
--- a/code/addons/interactions/jest.config.js
+++ b/code/addons/interactions/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-interactions",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Automate, test and debug user interactions",
  "keywords": [
    "storybook-addons",
@ -72,15 +72,15 @@
  },
  "dependencies": {
    "@devtools-ds/object-inspector": "^1.1.2",
-    "@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-common": "7.0.0-alpha.49",
-    "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/instrumenter": "7.0.0-alpha.49",
-    "@storybook/theming": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/instrumenter": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "jest-mock": "^27.0.6",
    "polished": "^4.2.2",
@ -89,9 +89,9 @@
  "devDependencies": {
    "@storybook/jest": "^0.0.10",
    "@storybook/testing-library": "0.0.14-next.0",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.11.9",
    "formik": "^2.2.9",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -117,7 +117,7 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Interactions",
    "unsupportedFrameworks": [
--- a/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
+++ b/code/addons/interactions/src/components/InteractionsPanel.stories.tsx
@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
--- a/code/addons/interactions/template/stories/basics.stories.ts
+++ b/code/addons/interactions/template/stories/basics.stories.ts
@ -1,4 +1,3 @@
-/* eslint-disable jest/no-standalone-expect */
 import globalThis from 'global';
 import {
  within,
--- a/code/addons/jest/jest.config.js
+++ b/code/addons/jest/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -69,18 +69,18 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "react-sizeme": "^3.0.1",
    "upath": "^1.2.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -104,7 +104,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Jest",
    "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg",
--- a/code/addons/jest/src/shared.test.ts
+++ b/code/addons/jest/src/shared.test.ts
@ -27,7 +27,7 @@ describe('defineJestParameter', () => {
  });

  test('returns null if filename is a module ID that cannot be inferred from', () => {
-    // @ts-expect-error (Converted from ts-ignore)
+    // @ts-expect-error Storybook's fileName type is string, but according to this test it could be number in case it is a module id.
    expect(defineJestParameter({ fileName: 1234 })).toBeNull();
  });
 });
--- a/code/addons/jest/src/shared.ts
+++ b/code/addons/jest/src/shared.ts
@ -1,4 +1,4 @@
-import type { Parameters } from '@storybook/types';
+import type { StorybookInternalParameters } from '@storybook/types';

 // addons, panels and events get unique names using a prefix
 export const PARAM_KEY = 'test';
@ -7,7 +7,7 @@ export const PANEL_ID = `${ADDON_ID}/panel`;

 export const ADD_TESTS = `${ADDON_ID}/add_tests`;

-interface AddonParameters extends Parameters {
+interface AddonParameters extends StorybookInternalParameters {
  jest?: string | string[] | { disabled: true };
 }

--- a/code/addons/links/jest.config.js
+++ b/code/addons/links/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Link stories together to build demos and prototypes with your UI components",
  "keywords": [
    "addon",
@ -76,18 +76,18 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/csf": "0.0.2-next.5",
-    "@storybook/router": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/router": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "prop-types": "^15.7.2",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -112,7 +112,7 @@
      "./src/react/index.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Links",
    "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png",
--- a/code/addons/links/src/utils.ts
+++ b/code/addons/links/src/utils.ts
@ -49,7 +49,6 @@ export const hrefTo = (title: ComponentTitle, name: StoryName): Promise<string>
  });
 };

-// eslint-disable-next-line @typescript-eslint/no-shadow
 const valueOrCall = (args: string[]) => (value: string | ((...args: string[]) => string)) =>
  typeof value === 'function' ? value(...args) : value;

--- a/code/addons/measure/jest.config.js
+++ b/code/addons/measure/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-measure",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Inspect layouts by visualizing the box model",
  "keywords": [
    "storybook-addons",
@ -74,16 +74,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/types": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -107,7 +107,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Measure",
    "unsupportedFrameworks": [
--- a/code/addons/outline/jest.config.js
+++ b/code/addons/outline/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-outline",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Outline all elements with CSS to help with layout placement and alignment",
  "keywords": [
    "storybook-addons",
@ -77,17 +77,17 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/types": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "ts-dedent": "^2.0.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -111,7 +111,7 @@
      "./src/preview.tsx"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Outline",
    "unsupportedFrameworks": [
--- a/code/addons/storyshots/jest.config.js
+++ b/code/addons/storyshots/jest.config.js
@ -0,0 +1,12 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  snapshotSerializers: [...baseConfig.snapshotSerializers, 'enzyme-to-json/serializer'],
+  transform: {
+    ...baseConfig.transform,
+    '^.+\\.stories\\.[jt]sx?$': '@storybook/addon-storyshots/injectFileName',
+  },
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/storyshots/storyshots-core/package.json
+++ b/code/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Take a code snapshot of every story automatically with Jest",
  "keywords": [
    "addon",
@ -37,23 +37,22 @@
    "storybook": "yarn sb dev -p 6006"
  },
  "dependencies": {
-    "@jest/transform": "^26.6.2",
-    "@storybook/addons": "7.0.0-alpha.49",
+    "@jest/transform": "^29.3.1",
+    "@storybook/addons": "7.0.0-alpha.50",
    "@storybook/babel-plugin-require-context-hook": "1.0.1",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/core-client": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/core-webpack": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/core-client": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/core-webpack": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "@types/glob": "^7.1.3",
-    "@types/jest": "^26.0.16",
-    "@types/jest-specific-snapshot": "^0.5.3",
+    "@types/jest-specific-snapshot": "^0.5.6",
    "core-js": "^3.8.2",
    "glob": "^7.1.6",
    "global": "^4.4.0",
-    "jest-specific-snapshot": "^4.0.0",
+    "jest-specific-snapshot": "^6.0.0",
    "preact-render-to-string": "^5.1.19",
-    "pretty-format": "^26.6.2",
+    "pretty-format": "^28.0.0",
    "react-test-renderer": "^16.8.0 || ^17.0.0 || ^18.0.0",
    "read-pkg-up": "^7.0.1",
    "ts-dedent": "^2.0.0"
@ -62,12 +61,12 @@
    "@angular/core": "^13.3.6",
    "@angular/platform-browser-dynamic": "^13.3.6",
    "@emotion/jest": "^11.8.0",
-    "@storybook/addon-docs": "7.0.0-alpha.49",
-    "@storybook/angular": "7.0.0-alpha.49",
-    "@storybook/react": "7.0.0-alpha.49",
-    "@storybook/vue": "7.0.0-alpha.49",
-    "@storybook/vue3": "7.0.0-alpha.49",
-    "babel-loader": "^8.2.5",
+    "@storybook/addon-docs": "7.0.0-alpha.50",
+    "@storybook/angular": "7.0.0-alpha.50",
+    "@storybook/react": "7.0.0-alpha.50",
+    "@storybook/vue": "7.0.0-alpha.50",
+    "@storybook/vue3": "7.0.0-alpha.50",
+    "babel-loader": "^8.3.0",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.6.1",
    "jest-preset-angular": "^8.3.2",
@ -144,7 +143,7 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Storyshots",
    "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png",
--- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
+++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.test.ts
@ -4,33 +4,33 @@ const target = new Stories2SnapsConverter();

 describe('getSnapshotFileName', () => {
  it('fileName is provided - snapshot is stored in __snapshots__ dir', () => {
-    const context = { fileName: 'foo.js' };
+    const context = { fileName: 'foo.js', kind: 'kind' };

-    // @ts-expect-error (TODO)
    const result = target.getSnapshotFileName(context);
    const platformAgnosticResult = result.replace(/\\|\//g, '/');

-    expect(platformAgnosticResult).toBe('__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.storyshot');
  });

  it('fileName with multiple extensions is provided - only the last extension is replaced', () => {
-    const context = { fileName: 'foo.web.stories.js' };
+    const context = { fileName: 'foo.web.stories.js', kind: 'kind' };

-    // @ts-expect-error (TODO)
    const result = target.getSnapshotFileName(context);
    const platformAgnosticResult = result.replace(/\\|\//g, '/');

-    expect(platformAgnosticResult).toBe('__snapshots__/foo.web.stories.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('__snapshots__/foo.web.stories.storyshot');
  });

  it('fileName with dir is provided - __snapshots__ dir is created inside another dir', () => {
-    const context = { fileName: 'test/foo.js' };
+    const context = { fileName: 'test/foo.js', kind: 'kind' };

-    // @ts-expect-error (TODO)
    const result = target.getSnapshotFileName(context);
    const platformAgnosticResult = result.replace(/\\|\//g, '/');

-    expect(platformAgnosticResult).toBe('test/__snapshots__/foo.storyshot');
+    // This is an absolute path, so we need to use `toContain()`
+    expect(platformAgnosticResult).toContain('test/__snapshots__/foo.storyshot');
  });
 });

--- a/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
+++ b/code/addons/storyshots/storyshots-core/src/Stories2SnapsConverter.ts
@ -29,7 +29,15 @@ export class Stories2SnapsConverter {
    const { dir, name } = path.parse(fileName);
    const { snapshotsDirName, snapshotExtension } = this.options;

-    return path.format({ dir: path.join(dir, snapshotsDirName), name, ext: snapshotExtension });
+    // Convert to absolute path, in case jest is not running in CWD,
+    // else it will create snapshots with the wrong path
+    const absDir = path.isAbsolute(dir) ? dir : path.resolve(dir);
+
+    return path.format({
+      dir: path.join(absDir, snapshotsDirName),
+      name,
+      ext: snapshotExtension,
+    });
  }

  getSnapshotFileName(context: { fileName?: string; kind: any }) {
--- a/code/addons/storyshots/storyshots-puppeteer/package.json
+++ b/code/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -34,18 +34,18 @@
  },
  "dependencies": {
    "@axe-core/puppeteer": "^4.2.0",
-    "@storybook/csf": "0.0.2-next.5",
-    "@storybook/node-logger": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
-    "@types/jest-image-snapshot": "^4.1.3",
-    "jest-image-snapshot": "^4.3.0"
+    "@storybook/csf": "0.0.2-next.7",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
+    "@types/jest-image-snapshot": "^5.1.0",
+    "jest-image-snapshot": "^6.0.0"
  },
  "devDependencies": {
    "@types/puppeteer": "^5.4.0",
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "7.0.0-alpha.49",
+    "@storybook/addon-storyshots": "7.0.0-alpha.50",
    "puppeteer": ">=2.0.0"
  },
  "peerDependenciesMeta": {
@ -56,5 +56,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/addons/storysource/jest.config.js
+++ b/code/addons/storysource/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "View a story’s source code to see how it works and paste into your app",
  "keywords": [
    "addon",
@ -53,21 +53,21 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/router": "7.0.0-alpha.49",
-    "@storybook/source-loader": "7.0.0-alpha.49",
-    "@storybook/theming": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/router": "7.0.0-alpha.50",
+    "@storybook/source-loader": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
    "estraverse": "^5.2.0",
    "prop-types": "^15.7.2",
    "react-syntax-highlighter": "^15.5.0"
  },
  "devDependencies": {
-    "@types/react": "^16.14.23",
+    "@types/react": "^16.14.34",
    "@types/react-syntax-highlighter": "11.0.5",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -91,7 +91,7 @@
      "./src/preset.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Storysource",
    "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png",
--- a/code/addons/toolbars/jest.config.js
+++ b/code/addons/toolbars/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Create your own toolbar items that control story rendering",
  "keywords": [
    "addon",
@ -67,14 +67,14 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/theming": "7.0.0-alpha.49"
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -98,7 +98,7 @@
    ],
    "platform": "browser"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Toolbars",
    "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png",
--- a/code/addons/viewport/jest.config.js
+++ b/code/addons/viewport/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.browser');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-viewport",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
  "keywords": [
    "addon",
@ -72,18 +72,18 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@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/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/components": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/theming": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "memoizerific": "^1.11.3",
    "prop-types": "^15.7.2"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
@ -108,7 +108,7 @@
      "./src/preview.ts"
    ]
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8",
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242",
  "storybook": {
    "displayName": "Viewport",
    "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png",
--- a/code/addons/viewport/src/shortcuts.ts
+++ b/code/addons/viewport/src/shortcuts.ts
@ -1,6 +1,11 @@
 import type { API } from '@storybook/api';
 import { ADDON_ID } from './constants';

+type State = {
+  selected: string;
+  isRotated: boolean;
+};
+
 const getCurrentViewportIndex = (viewportsKeys: string[], current: string): number =>
  viewportsKeys.indexOf(current);

@ -24,7 +29,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
    defaultShortcut: ['shift', 'V'],
    actionName: 'previous',
    action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
      setState({
        selected: getPreviousViewport(viewportsKeys, selected),
        isRotated,
@ -37,7 +42,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
    defaultShortcut: ['V'],
    actionName: 'next',
    action: () => {
-      const { selected, isRotated } = api.getAddonState(ADDON_ID);
+      const { selected, isRotated } = api.getAddonState<State>(ADDON_ID);
      setState({
        selected: getNextViewport(viewportsKeys, selected),
        isRotated,
@ -50,7 +55,7 @@ export const registerShortcuts = async (api: API, setState: any, viewportsKeys:
    defaultShortcut: ['alt', 'V'],
    actionName: 'reset',
    action: () => {
-      const { isRotated } = api.getAddonState(ADDON_ID);
+      const { isRotated } = api.getAddonState<State>(ADDON_ID);
      setState({
        selected: 'reset',
        isRotated,
--- a/code/frameworks/angular/jest.config.js
+++ b/code/frameworks/angular/jest.config.js
@ -1,5 +1,12 @@
+const path = require('path');
+
 module.exports = {
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
  preset: 'jest-preset-angular',
  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
-  transformIgnorePatterns: ['^.+\\.js$'],
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid)'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
 };
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/angular",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
  "keywords": [
    "storybook",
@ -34,21 +34,21 @@
    "prep": "rimraf dist && ../../../scripts/node_modules/.bin/tsc --project tsconfig.build.json && echo \"Preventing passing flags to tsc\""
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/api": "7.0.0-alpha.49",
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/client-logger": "7.0.0-alpha.49",
-    "@storybook/core-client": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/core-events": "7.0.0-alpha.49",
-    "@storybook/core-server": "7.0.0-alpha.49",
-    "@storybook/core-webpack": "7.0.0-alpha.49",
-    "@storybook/docs-tools": "7.0.0-alpha.49",
-    "@storybook/node-logger": "7.0.0-alpha.49",
-    "@storybook/store": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
-    "@types/react": "^16.14.23",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/api": "7.0.0-alpha.50",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/client-logger": "7.0.0-alpha.50",
+    "@storybook/core-client": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/core-events": "7.0.0-alpha.50",
+    "@storybook/core-server": "7.0.0-alpha.50",
+    "@storybook/core-webpack": "7.0.0-alpha.50",
+    "@storybook/docs-tools": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/store": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
+    "@types/react": "^16.14.34",
    "@types/react-dom": "^16.9.14",
    "@types/semver": "^7.3.4",
    "@types/webpack-env": "^1.18.0",
@ -81,12 +81,12 @@
    "@types/rimraf": "^3.0.2",
    "@types/tmp": "^0.2.3",
    "cross-spawn": "^7.0.3",
-    "jest": "^27.5.1",
+    "jest": "^29.3.1",
    "jest-preset-angular": "^12.0.0",
-    "jest-specific-snapshot": "^5.0.0",
+    "jest-specific-snapshot": "^6.0.0",
    "rimraf": "^3.0.2",
    "tmp": "^0.2.1",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
    "webpack": "5",
    "zone.js": "^0.11.0"
  },
@ -123,5 +123,5 @@
    "access": "public"
  },
  "builders": "dist/builders/builders.json",
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/angular/setup-jest.ts
+++ b/code/frameworks/angular/setup-jest.ts
@ -1,4 +1,12 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
 import 'jest-preset-angular/setup-jest';

+import { webcrypto } from 'node:crypto';
+
+Object.defineProperty(window, 'crypto', {
+  get() {
+    return webcrypto;
+  },
+});
+
 global.EventSource = class {} as any;
--- a/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
+++ b/code/frameworks/angular/src/builders/build-storybook/index.spec.ts
@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';

-const buildStandaloneMock = jest.fn();
-jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+const buildDevStandaloneMock = jest.fn();
+const buildStaticStandaloneMock = jest.fn();
+const buildMock = {
+  buildDevStandalone: buildDevStandaloneMock,
+  buildStaticStandalone: buildStaticStandaloneMock,
+};
+jest.doMock('@storybook/core-server', () => buildMock);
 jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));

 const cpSpawnMock = {
@ -50,7 +55,7 @@ describe('Build Storybook Builder', () => {
  });

  beforeEach(() => {
-    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    buildStaticStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
    cpSpawnMock.spawn.mockImplementation(() => ({
      stdout: { on: () => {} },
      stderr: { on: () => {} },
@ -74,14 +79,16 @@ describe('Build Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: 'angular-cli:build-2',
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      configDir: '.storybook',
+      docs: undefined,
      loglevel: undefined,
      quiet: false,
      outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
      mode: 'static',
      tsConfig: './storybook/tsconfig.ts',
      webpackStatsJson: false,
@ -100,14 +107,16 @@ describe('Build Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: null,
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      configDir: '.storybook',
+      docs: undefined,
      loglevel: undefined,
      quiet: false,
      outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
      mode: 'static',
      tsConfig: 'path/to/tsConfig.json',
      webpackStatsJson: false,
@ -127,14 +136,16 @@ describe('Build Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: null,
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      configDir: '.storybook',
+      docs: undefined,
      loglevel: undefined,
      quiet: false,
      outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
      mode: 'static',
      tsConfig: 'path/to/tsConfig.json',
      webpackStatsJson: true,
@ -142,7 +153,7 @@ describe('Build Storybook Builder', () => {
  });

  it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(true);
+    buildStaticStandaloneMock.mockRejectedValue(true);

    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
      browserTarget: 'angular-cli:build-2',
@ -177,16 +188,19 @@ describe('Build Storybook Builder', () => {
      ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
      {
        cwd: '',
+        shell: true,
      }
    );
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: 'angular-cli:build-2',
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      configDir: '.storybook',
+      docs: undefined,
      loglevel: undefined,
      quiet: false,
      outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
      mode: 'static',
      tsConfig: './storybook/tsconfig.ts',
      webpackStatsJson: false,
@ -206,14 +220,16 @@ describe('Build Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildStaticStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: null,
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: { styles: ['style.scss'] },
      configDir: '.storybook',
+      docs: undefined,
      loglevel: undefined,
      quiet: false,
      outputDir: 'storybook-static',
+      packageJson: expect.any(Object),
      mode: 'static',
      tsConfig: 'path/to/tsConfig.json',
      webpackStatsJson: false,
--- a/code/frameworks/angular/src/builders/start-storybook/index.spec.ts
+++ b/code/frameworks/angular/src/builders/start-storybook/index.spec.ts
@ -3,8 +3,13 @@ import { TestingArchitectHost } from '@angular-devkit/architect/testing';
 import { schema } from '@angular-devkit/core';
 import * as path from 'path';

-const buildStandaloneMock = jest.fn();
-jest.doMock('@storybook/angular/standalone', () => buildStandaloneMock);
+const buildDevStandaloneMock = jest.fn();
+const buildStaticStandaloneMock = jest.fn();
+const buildMock = {
+  buildDevStandalone: buildDevStandaloneMock,
+  buildStaticStandalone: buildStaticStandaloneMock,
+};
+jest.doMock('@storybook/core-server', () => buildMock);
 jest.doMock('find-up', () => ({ sync: () => './storybook/tsconfig.ts' }));

 const cpSpawnMock = {
@ -49,7 +54,7 @@ describe('Start Storybook Builder', () => {
  });

  beforeEach(() => {
-    buildStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
+    buildDevStandaloneMock.mockImplementation((_options: unknown) => Promise.resolve());
    cpSpawnMock.spawn.mockImplementation(() => ({
      stdout: { on: () => {} },
      stderr: { on: () => {} },
@ -74,14 +79,16 @@ describe('Start Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: 'angular-cli:build-2',
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      ci: false,
      configDir: '.storybook',
+      docs: undefined,
      host: 'localhost',
      https: false,
+      packageJson: expect.any(Object),
      port: 4400,
      quiet: false,
      smokeTest: false,
@ -105,14 +112,16 @@ describe('Start Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: null,
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      ci: false,
      configDir: '.storybook',
+      docs: undefined,
      host: 'localhost',
      https: false,
+      packageJson: expect.any(Object),
      port: 4400,
      quiet: false,
      smokeTest: false,
@ -124,7 +133,7 @@ describe('Start Storybook Builder', () => {
  });

  it('should throw error', async () => {
-    buildStandaloneMock.mockRejectedValue(true);
+    buildDevStandaloneMock.mockRejectedValue(true);

    const run = await architect.scheduleBuilder('@storybook/angular:start-storybook', {
      browserTarget: 'angular-cli:build-2',
@ -159,16 +168,19 @@ describe('Start Storybook Builder', () => {
      ['compodoc', '-p', './storybook/tsconfig.ts', '-d', '', '-e', 'json'],
      {
        cwd: '',
+        shell: true,
      }
    );
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: 'angular-cli:build-2',
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {},
      ci: false,
      configDir: '.storybook',
+      docs: undefined,
      host: 'localhost',
      https: false,
+      packageJson: expect.any(Object),
      port: 9009,
      quiet: false,
      smokeTest: false,
@ -193,7 +205,7 @@ describe('Start Storybook Builder', () => {

    expect(output.success).toBeTruthy();
    expect(cpSpawnMock.spawn).not.toHaveBeenCalledWith();
-    expect(buildStandaloneMock).toHaveBeenCalledWith({
+    expect(buildDevStandaloneMock).toHaveBeenCalledWith({
      angularBrowserTarget: null,
      angularBuilderContext: expect.any(Object),
      angularBuilderOptions: {
@ -201,9 +213,11 @@ describe('Start Storybook Builder', () => {
      },
      ci: false,
      configDir: '.storybook',
+      docs: undefined,
      host: 'localhost',
      https: false,
      port: 4400,
+      packageJson: expect.any(Object),
      quiet: false,
      smokeTest: false,
      sslCa: undefined,
--- a/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
+++ b/code/frameworks/angular/src/builders/utils/run-compodoc.spec.ts
@ -51,6 +51,7 @@ describe('runCompodoc', () => {
      ['compodoc', '-p', 'path/to/tsconfig.json', '-d', 'path/to/project'],
      {
        cwd: 'path/to/project',
+        shell: true,
      }
    );
  });
@ -74,6 +75,7 @@ describe('runCompodoc', () => {
      ['compodoc', '-d', 'path/to/project', '-p', 'path/to/tsconfig.stories.json'],
      {
        cwd: 'path/to/project',
+        shell: true,
      }
    );
  });
--- a/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts
+++ b/code/frameworks/angular/src/client/angular-beta/RendererFactory.test.ts
@ -18,8 +18,8 @@ describe('RendererFactory', () => {
  beforeEach(async () => {
    rendererFactory = new RendererFactory();
    document.body.innerHTML =
-      '<div id="root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
-    rootTargetDOMNode = global.document.getElementById('root');
+      '<div id="storybook-root"></div><div id="root-docs"><div id="story-in-docs"></div></div>';
+    rootTargetDOMNode = global.document.getElementById('storybook-root');
    rootDocstargetDOMNode = global.document.getElementById('root-docs');
    (platformBrowserDynamic as any).mockImplementation(platformBrowserDynamicTesting);
    jest.spyOn(console, 'log').mockImplementation(() => {});
@ -301,14 +301,16 @@ describe('RendererFactory', () => {
      });

      it('should reset root HTML', async () => {
-        global.document.getElementById('root').appendChild(global.document.createElement('👾'));
+        global.document
+          .getElementById('storybook-root')
+          .appendChild(global.document.createElement('👾'));

-        expect(global.document.getElementById('root').innerHTML).toContain('Canvas 🖼');
+        expect(global.document.getElementById('storybook-root').innerHTML).toContain('Canvas 🖼');
        const render = await rendererFactory.getRendererInstance(
          'my-story-in-docs',
          rootDocstargetDOMNode
        );
-        expect(global.document.getElementById('root').innerHTML).toBe('');
+        expect(global.document.getElementById('storybook-root').innerHTML).toBe('');
      });
    });

--- a/code/frameworks/angular/src/client/docs/testfixtures/doc-button/compodoc-posix.snapshot
+++ b/code/frameworks/angular/src/client/docs/testfixtures/doc-button/compodoc-posix.snapshot
@ -10,7 +10,7 @@ Object {
          "getSignature": Object {
            "description": "<p>Getter for <code>inputValue</code>.</p>
 ",
-            "line": 115,
+            "line": 116,
            "name": "inputValue",
            "rawdescription": "
 Getter for \`inputValue\`.",
@ -42,7 +42,7 @@ Getter for \`inputValue\`.",
                "type": "string",
              },
            ],
-            "line": 110,
+            "line": 111,
            "name": "inputValue",
            "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
                "type": "T[]",
              },
            ],
-            "line": 195,
+            "line": 196,
            "name": "item",
            "returnType": "void",
            "type": "void",
@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
          "getSignature": Object {
            "description": "<p>Get the private value.</p>
 ",
-            "line": 154,
+            "line": 155,
            "name": "value",
            "rawdescription": "
 Get the private value.",
@ -116,7 +116,7 @@ Get the private value.",
                "type": "string | number",
              },
            ],
-            "line": 149,
+            "line": 150,
            "name": "value",
            "rawdescription": "
 Set the private value.",
@ -137,14 +137,14 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
 ",
      "encapsulation": Array [],
      "entryComponents": Array [],
-      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
      "hostBindings": Array [
        Object {
          "decorators": Array [],
          "defaultValue": "false",
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 124,
+          "line": 125,
          "name": "class.focused",
          "type": "boolean",
        },
@ -164,7 +164,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          ],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 120,
+          "line": 121,
          "name": "click",
        },
      ],
@ -177,7 +177,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "deprecationMessage": "",
          "description": "<p>Specify the accent-type of the button</p>
 ",
-          "line": 56,
+          "line": 57,
          "name": "accent",
          "rawdescription": "
 Specify the accent-type of the button",
@ -190,7 +190,7 @@ Specify the accent-type of the button",
          "deprecationMessage": "",
          "description": "<p>Appearance style of the button.</p>
 ",
-          "line": 52,
+          "line": 53,
          "name": "appearance",
          "rawdescription": "
 Appearance style of the button.",
@ -202,7 +202,7 @@ Appearance style of the button.",
          "deprecationMessage": "",
          "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
 ",
-          "line": 110,
+          "line": 111,
          "name": "inputValue",
          "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
          "deprecationMessage": "",
          "description": "<p>Sets the button to a disabled state.</p>
 ",
-          "line": 60,
+          "line": 61,
          "name": "isDisabled",
          "rawdescription": "
 Sets the button to a disabled state.",
@ -225,7 +225,7 @@ Sets the button to a disabled state.",
          "decorators": Array [],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 195,
+          "line": 196,
          "name": "item",
          "type": "T[]",
        },
@ -238,24 +238,24 @@ Sets the button to a disabled state.",
          "jsdoctags": Array [
            Object {
              "comment": "",
-              "end": 1525,
+              "end": 1587,
              "flags": 4227072,
              "kind": 325,
              "modifierFlagsCache": 0,
-              "pos": 1512,
+              "pos": 1574,
              "tagName": Object {
-                "end": 1521,
+                "end": 1583,
                "escapedText": "required",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 1513,
+                "pos": 1575,
                "transformFlags": 0,
              },
              "transformFlags": 0,
            },
          ],
-          "line": 68,
+          "line": 69,
          "name": "label",
          "rawdescription": "

@ -268,7 +268,7 @@ The inner text of the button.
          "decorators": Array [],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 192,
+          "line": 193,
          "name": "showKeyAlias",
          "type": "",
        },
@ -279,7 +279,7 @@ The inner text of the button.
          "deprecationMessage": "",
          "description": "<p>Size of the button.</p>
 ",
-          "line": 72,
+          "line": 73,
          "name": "size",
          "rawdescription": "
 Size of the button.",
@ -291,7 +291,7 @@ Size of the button.",
          "deprecationMessage": "",
          "description": "<p>Specifies some arbitrary object</p>
 ",
-          "line": 75,
+          "line": 76,
          "name": "someDataObject",
          "rawdescription": "
 Specifies some arbitrary object",
@ -307,24 +307,24 @@ Specifies some arbitrary object",
          "jsdoctags": Array [
            Object {
              "comment": "",
-              "end": 1802,
+              "end": 1864,
              "flags": 4227072,
              "kind": 329,
              "modifierFlagsCache": 0,
-              "pos": 1787,
+              "pos": 1849,
              "tagName": Object {
-                "end": 1798,
+                "end": 1860,
                "escapedText": "deprecated",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 1788,
+                "pos": 1850,
                "transformFlags": 0,
              },
              "transformFlags": 0,
            },
          ],
-          "line": 83,
+          "line": 84,
          "name": "somethingYouShouldNotUse",
          "rawdescription": "

@ -361,21 +361,21 @@ Some input you shouldn't use.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3518,
+                "end": 3580,
                "escapedText": "x",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3517,
+                "pos": 3579,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 3516,
+                "end": 3578,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3511,
+                "pos": 3573,
                "transformFlags": 0,
              },
              "type": "number",
@ -386,27 +386,27 @@ Some input you shouldn't use.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3563,
+                "end": 3625,
                "escapedText": "y",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3562,
+                "pos": 3624,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 3561,
+                "end": 3623,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3556,
+                "pos": 3618,
                "transformFlags": 0,
              },
              "type": "string | number",
            },
          ],
-          "line": 164,
+          "line": 165,
          "modifierKind": Array [
            123,
          ],
@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together.
              "type": "",
            },
          ],
-          "line": 120,
+          "line": 121,
          "name": "onClickListener",
          "optional": false,
          "returnType": "void",
@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 4079,
+                "end": 4141,
                "escapedText": "password",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 4071,
+                "pos": 4133,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 4070,
+                "end": 4132,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 4065,
+                "pos": 4127,
                "transformFlags": 0,
              },
              "type": "string",
            },
          ],
-          "line": 187,
+          "line": 188,
          "modifierKind": Array [
            121,
          ],
@ -529,28 +529,28 @@ A private method.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3938,
+                "end": 4000,
                "escapedText": "id",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3936,
+                "pos": 3998,
                "transformFlags": 0,
              },
              "optional": true,
              "tagName": Object {
-                "end": 3935,
+                "end": 3997,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3930,
+                "pos": 3992,
                "transformFlags": 0,
              },
              "type": "number",
            },
          ],
-          "line": 178,
+          "line": 179,
          "modifierKind": Array [
            122,
          ],
@ -588,7 +588,7 @@ A protected method.
              "type": "ISomeInterface",
            },
          ],
-          "line": 169,
+          "line": 170,
          "modifierKind": Array [
            123,
          ],
@ -610,7 +610,7 @@ A public method using an interface.",
          "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
 ",
-          "line": 91,
+          "line": 92,
          "name": "onClick",
          "rawdescription": "

@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 106,
+          "line": 107,
          "modifierKind": Array [
            121,
          ],
@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
          "deprecationMessage": "",
          "description": "<p>Private value.</p>
 ",
-          "line": 146,
+          "line": 147,
          "modifierKind": Array [
            121,
          ],
@ -661,7 +661,7 @@ Private value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 48,
+          "line": 49,
          "name": "buttonRef",
          "optional": false,
          "type": "ElementRef",
@ -677,7 +677,7 @@ Private value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 124,
+          "line": 125,
          "name": "focus",
          "optional": false,
          "type": "",
@ -688,7 +688,7 @@ Private value.",
          "deprecationMessage": "",
          "description": "<p>Public value.</p>
 ",
-          "line": 143,
+          "line": 144,
          "modifierKind": Array [
            123,
          ],
@ -702,7 +702,7 @@ Public value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 199,
+          "line": 200,
          "modifierKind": Array [
            123,
          ],
@ -937,7 +937,7 @@ export class InputComponent<T> {
      Object {
        "coverageCount": "16/25",
        "coveragePercent": 64,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "linktype": "component",
        "name": "InputComponent",
        "status": "good",
@ -946,7 +946,7 @@ export class InputComponent<T> {
      Object {
        "coverageCount": "0/4",
        "coveragePercent": 0,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "linktype": "interface",
        "name": "ISomeInterface",
        "status": "low",
@ -955,7 +955,7 @@ export class InputComponent<T> {
      Object {
        "coverageCount": "0/1",
        "coveragePercent": 0,
-        "filePath": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "filePath": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "linksubtype": "variable",
        "linktype": "miscellaneous",
        "name": "exportedConstant",
@ -973,7 +973,7 @@ export class InputComponent<T> {
    Object {
      "deprecated": false,
      "deprecationMessage": "",
-      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+      "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
      "id": "interface-ISomeInterface-d145da25329b094ee29610c45a9e46387cb39eddb2a67b4c9fadb84bcec76eacd60d131e48d98b2ee5725dedd25f2eb299b704e8e0a34307d6e84f6e57d57044",
      "indexSignatures": Array [],
      "kind": 165,
@ -984,7 +984,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 25,
+          "line": 26,
          "name": "one",
          "optional": false,
          "type": "string",
@ -993,7 +993,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 27,
+          "line": 28,
          "name": "three",
          "optional": false,
          "type": "any[]",
@ -1002,7 +1002,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 26,
+          "line": 27,
          "name": "two",
          "optional": false,
          "type": "boolean",
@ -1230,14 +1230,14 @@ export class InputComponent<T> {
        "deprecated": false,
        "deprecationMessage": "",
        "description": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "name": "ButtonAccent",
        "subtype": "enum",
      },
    ],
    "functions": Array [],
    "groupedEnumerations": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
        Object {
          "childs": Array [
            Object {
@ -1257,7 +1257,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
          "name": "ButtonAccent",
          "subtype": "enum",
        },
@ -1265,13 +1265,13 @@ export class InputComponent<T> {
    },
    "groupedFunctions": Object {},
    "groupedTypeAliases": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
        Object {
          "ctype": "miscellaneous",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
          "kind": 186,
          "name": "ButtonSize",
          "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
@ -1280,13 +1280,13 @@ export class InputComponent<T> {
      ],
    },
    "groupedVariables": Object {
-      "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts": Array [
+      "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts": Array [
        Object {
          "ctype": "miscellaneous",
          "defaultValue": "'An exported constant'",
          "deprecated": false,
          "deprecationMessage": "",
-          "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+          "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
          "name": "exportedConstant",
          "subtype": "variable",
          "type": "string",
@ -1299,7 +1299,7 @@ export class InputComponent<T> {
        "deprecated": false,
        "deprecationMessage": "",
        "description": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "kind": 186,
        "name": "ButtonSize",
        "rawtype": "\\"small\\" | \\"medium\\" | \\"large\\" | \\"xlarge\\"",
@ -1312,7 +1312,7 @@ export class InputComponent<T> {
        "defaultValue": "'An exported constant'",
        "deprecated": false,
        "deprecationMessage": "",
-        "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
+        "file": "frameworks/angular/src/client/docs/__testfixtures__/doc-button/input.ts",
        "name": "exportedConstant",
        "subtype": "variable",
        "type": "string",
--- a/code/frameworks/angular/src/client/docs/testfixtures/doc-button/compodoc-undefined.snapshot
+++ b/code/frameworks/angular/src/client/docs/testfixtures/doc-button/compodoc-undefined.snapshot
@ -10,7 +10,7 @@ Object {
          "getSignature": Object {
            "description": "<p>Getter for <code>inputValue</code>.</p>
 ",
-            "line": 115,
+            "line": 116,
            "name": "inputValue",
            "rawdescription": "
 Getter for \`inputValue\`.",
@ -42,7 +42,7 @@ Getter for \`inputValue\`.",
                "type": "string",
              },
            ],
-            "line": 110,
+            "line": 111,
            "name": "inputValue",
            "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@ -74,7 +74,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
                "type": "T[]",
              },
            ],
-            "line": 195,
+            "line": 196,
            "name": "item",
            "returnType": "void",
            "type": "void",
@ -84,7 +84,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
          "getSignature": Object {
            "description": "<p>Get the private value.</p>
 ",
-            "line": 154,
+            "line": 155,
            "name": "value",
            "rawdescription": "
 Get the private value.",
@ -116,7 +116,7 @@ Get the private value.",
                "type": "string | number",
              },
            ],
-            "line": 149,
+            "line": 150,
            "name": "value",
            "rawdescription": "
 Set the private value.",
@ -144,7 +144,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "defaultValue": "false",
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 124,
+          "line": 125,
          "name": "class.focused",
          "type": "boolean",
        },
@ -164,7 +164,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          ],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 120,
+          "line": 121,
          "name": "click",
        },
      ],
@ -177,7 +177,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "deprecationMessage": "",
          "description": "<p>Specify the accent-type of the button</p>
 ",
-          "line": 56,
+          "line": 57,
          "name": "accent",
          "rawdescription": "
 Specify the accent-type of the button",
@ -190,7 +190,7 @@ Specify the accent-type of the button",
          "deprecationMessage": "",
          "description": "<p>Appearance style of the button.</p>
 ",
-          "line": 52,
+          "line": 53,
          "name": "appearance",
          "rawdescription": "
 Appearance style of the button.",
@ -202,7 +202,7 @@ Appearance style of the button.",
          "deprecationMessage": "",
          "description": "<p>Setter for <code>inputValue</code> that is also an <code>@Input</code>.</p>
 ",
-          "line": 110,
+          "line": 111,
          "name": "inputValue",
          "rawdescription": "
 Setter for \`inputValue\` that is also an \`@Input\`.",
@ -215,7 +215,7 @@ Setter for \`inputValue\` that is also an \`@Input\`.",
          "deprecationMessage": "",
          "description": "<p>Sets the button to a disabled state.</p>
 ",
-          "line": 60,
+          "line": 61,
          "name": "isDisabled",
          "rawdescription": "
 Sets the button to a disabled state.",
@ -225,7 +225,7 @@ Sets the button to a disabled state.",
          "decorators": Array [],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 195,
+          "line": 196,
          "name": "item",
          "type": "T[]",
        },
@ -238,24 +238,24 @@ Sets the button to a disabled state.",
          "jsdoctags": Array [
            Object {
              "comment": "",
-              "end": 1525,
+              "end": 1587,
              "flags": 4227072,
              "kind": 325,
              "modifierFlagsCache": 0,
-              "pos": 1512,
+              "pos": 1574,
              "tagName": Object {
-                "end": 1521,
+                "end": 1583,
                "escapedText": "required",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 1513,
+                "pos": 1575,
                "transformFlags": 0,
              },
              "transformFlags": 0,
            },
          ],
-          "line": 68,
+          "line": 69,
          "name": "label",
          "rawdescription": "

@ -268,7 +268,7 @@ The inner text of the button.
          "decorators": Array [],
          "deprecated": false,
          "deprecationMessage": "",
-          "line": 192,
+          "line": 193,
          "name": "showKeyAlias",
          "type": "",
        },
@ -279,7 +279,7 @@ The inner text of the button.
          "deprecationMessage": "",
          "description": "<p>Size of the button.</p>
 ",
-          "line": 72,
+          "line": 73,
          "name": "size",
          "rawdescription": "
 Size of the button.",
@ -291,7 +291,7 @@ Size of the button.",
          "deprecationMessage": "",
          "description": "<p>Specifies some arbitrary object</p>
 ",
-          "line": 75,
+          "line": 76,
          "name": "someDataObject",
          "rawdescription": "
 Specifies some arbitrary object",
@ -307,24 +307,24 @@ Specifies some arbitrary object",
          "jsdoctags": Array [
            Object {
              "comment": "",
-              "end": 1802,
+              "end": 1864,
              "flags": 4227072,
              "kind": 329,
              "modifierFlagsCache": 0,
-              "pos": 1787,
+              "pos": 1849,
              "tagName": Object {
-                "end": 1798,
+                "end": 1860,
                "escapedText": "deprecated",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 1788,
+                "pos": 1850,
                "transformFlags": 0,
              },
              "transformFlags": 0,
            },
          ],
-          "line": 83,
+          "line": 84,
          "name": "somethingYouShouldNotUse",
          "rawdescription": "

@ -361,21 +361,21 @@ Some input you shouldn't use.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3518,
+                "end": 3580,
                "escapedText": "x",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3517,
+                "pos": 3579,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 3516,
+                "end": 3578,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3511,
+                "pos": 3573,
                "transformFlags": 0,
              },
              "type": "number",
@ -386,27 +386,27 @@ Some input you shouldn't use.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3563,
+                "end": 3625,
                "escapedText": "y",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3562,
+                "pos": 3624,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 3561,
+                "end": 3623,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3556,
+                "pos": 3618,
                "transformFlags": 0,
              },
              "type": "string | number",
            },
          ],
-          "line": 164,
+          "line": 165,
          "modifierKind": Array [
            123,
          ],
@ -448,7 +448,7 @@ An internal calculation method which adds \`x\` and \`y\` together.
              "type": "",
            },
          ],
-          "line": 120,
+          "line": 121,
          "name": "onClickListener",
          "optional": false,
          "returnType": "void",
@ -474,27 +474,27 @@ An internal calculation method which adds \`x\` and \`y\` together.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 4079,
+                "end": 4141,
                "escapedText": "password",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 4071,
+                "pos": 4133,
                "transformFlags": 0,
              },
              "tagName": Object {
-                "end": 4070,
+                "end": 4132,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 4065,
+                "pos": 4127,
                "transformFlags": 0,
              },
              "type": "string",
            },
          ],
-          "line": 187,
+          "line": 188,
          "modifierKind": Array [
            121,
          ],
@ -529,28 +529,28 @@ A private method.
              "deprecated": false,
              "deprecationMessage": "",
              "name": Object {
-                "end": 3938,
+                "end": 4000,
                "escapedText": "id",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3936,
+                "pos": 3998,
                "transformFlags": 0,
              },
              "optional": true,
              "tagName": Object {
-                "end": 3935,
+                "end": 3997,
                "escapedText": "param",
                "flags": 4227072,
                "kind": 79,
                "modifierFlagsCache": 0,
-                "pos": 3930,
+                "pos": 3992,
                "transformFlags": 0,
              },
              "type": "number",
            },
          ],
-          "line": 178,
+          "line": 179,
          "modifierKind": Array [
            122,
          ],
@ -588,7 +588,7 @@ A protected method.
              "type": "ISomeInterface",
            },
          ],
-          "line": 169,
+          "line": 170,
          "modifierKind": Array [
            123,
          ],
@ -610,7 +610,7 @@ A public method using an interface.",
          "description": "<p>Handler to be called when the button is clicked by a user.</p>
 <p>Will also block the emission of the event if <code>isDisabled</code> is true.</p>
 ",
-          "line": 91,
+          "line": 92,
          "name": "onClick",
          "rawdescription": "

@ -627,7 +627,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 106,
+          "line": 107,
          "modifierKind": Array [
            121,
          ],
@ -641,7 +641,7 @@ Will also block the emission of the event if \`isDisabled\` is true.
          "deprecationMessage": "",
          "description": "<p>Private value.</p>
 ",
-          "line": 146,
+          "line": 147,
          "modifierKind": Array [
            121,
          ],
@ -661,7 +661,7 @@ Private value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 48,
+          "line": 49,
          "name": "buttonRef",
          "optional": false,
          "type": "ElementRef",
@ -677,7 +677,7 @@ Private value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 124,
+          "line": 125,
          "name": "focus",
          "optional": false,
          "type": "",
@ -688,7 +688,7 @@ Private value.",
          "deprecationMessage": "",
          "description": "<p>Public value.</p>
 ",
-          "line": 143,
+          "line": 144,
          "modifierKind": Array [
            123,
          ],
@ -702,7 +702,7 @@ Public value.",
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 199,
+          "line": 200,
          "modifierKind": Array [
            123,
          ],
@ -984,7 +984,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 25,
+          "line": 26,
          "name": "one",
          "optional": false,
          "type": "string",
@ -993,7 +993,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 27,
+          "line": 28,
          "name": "three",
          "optional": false,
          "type": "any[]",
@ -1002,7 +1002,7 @@ export class InputComponent<T> {
          "deprecated": false,
          "deprecationMessage": "",
          "description": "",
-          "line": 26,
+          "line": 27,
          "name": "two",
          "optional": false,
          "type": "boolean",
--- a/code/frameworks/angular/src/client/public-types.ts
+++ b/code/frameworks/angular/src/client/public-types.ts
@ -1,7 +1,18 @@
-import { AnnotatedStoryFn, Args, ComponentAnnotations, StoryAnnotations } from '@storybook/types';
+import {
+  AnnotatedStoryFn,
+  Args,
+  ComponentAnnotations,
+  DecoratorFunction,
+  LoaderFunction,
+  StoryAnnotations,
+  StoryContext as GenericStoryContext,
+  StrictArgs,
+} from '@storybook/types';
 import { AngularRenderer } from './types';

-export type { Args, ArgTypes } from '@storybook/types';
+export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
+export type { Parameters as AngularParameters } from './types';
+export type { AngularRenderer };

 /**
 * Metadata to configure the stories for a component.
@ -34,3 +45,7 @@ export type StoryObj<TArgs = Args> = StoryAnnotations<AngularRenderer, TArgs>;
 * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports)
 */
 export type Story<TArgs = Args> = StoryFn<TArgs>;
+
+export type Decorator<TArgs = StrictArgs> = DecoratorFunction<AngularRenderer, TArgs>;
+export type Loader<TArgs = StrictArgs> = LoaderFunction<AngularRenderer, TArgs>;
+export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<AngularRenderer, TArgs>;
--- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
+++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts
@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-shadow */
 import webpack from 'webpack';
 import { logger } from '@storybook/node-logger';
 import { BuilderContext, Target, targetFromTargetString } from '@angular-devkit/architect';
--- a/code/frameworks/angular/template/cli/Button.stories.ts
+++ b/code/frameworks/angular/template/cli/Button.stories.ts
@ -1,20 +1,17 @@
 import type { Meta, StoryObj } from '@storybook/angular';
 import Button from './button.component';

-// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/angular/writing-stories/introduction
 const meta: Meta<Button> = {
  title: 'Example/Button',
  component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/angular/writing-docs/docs-page
  tags: ['docsPage'],
-  // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
  render: (args: Button) => ({
    props: {
      backgroundColor: null,
      ...args,
    },
  }),
-  // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
  argTypes: {
    backgroundColor: {
      control: 'color',
@ -25,7 +22,7 @@ const meta: Meta<Button> = {
 export default meta;
 type Story = StoryObj<Button>;

-// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/angular/writing-stories/args
 export const Primary: Story = {
  args: {
    primary: true,
--- a/code/frameworks/angular/template/cli/Header.stories.ts
+++ b/code/frameworks/angular/template/cli/Header.stories.ts
@ -8,7 +8,7 @@ import Header from './header.component';
 const meta: Meta<Header> = {
  title: 'Example/Header',
  component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/angular/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/angular/writing-docs/docs-page
  tags: ['docsPage'],
  render: (args) => ({ props: args }),
  decorators: [
@ -18,7 +18,7 @@ const meta: Meta<Header> = {
    }),
  ],
  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
    layout: 'fullscreen',
  },
 };
--- a/code/frameworks/angular/template/cli/Page.stories.ts
+++ b/code/frameworks/angular/template/cli/Page.stories.ts
@ -11,7 +11,7 @@ const meta: Meta<Page> = {
  title: 'Example/Page',
  component: Page,
  parameters: {
-    // More on StoryFn layout: https://storybook.js.org/docs/angular/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/angular/configure/story-layout
    layout: 'fullscreen',
  },
  decorators: [
@ -31,7 +31,7 @@ export const LoggedOut: Story = {
  }),
 };

-// More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/angular/writing-tests/interaction-testing
 export const LoggedIn: Story = {
  render: (args: Page) => ({
    props: args,
--- a/code/frameworks/ember/jest.config.js
+++ b/code/frameworks/ember/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/ember",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
  "homepage": "https://github.com/storybookjs/storybook/tree/main/frameworks/ember",
  "bugs": {
@ -31,12 +31,12 @@
    "prep": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-client": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/docs-tools": "7.0.0-alpha.49",
-    "@storybook/store": "7.0.0-alpha.49",
-    "@storybook/types": "7.0.0-alpha.49",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-client": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/docs-tools": "7.0.0-alpha.50",
+    "@storybook/store": "7.0.0-alpha.50",
+    "@storybook/types": "7.0.0-alpha.50",
    "global": "^4.4.0",
    "react": "16.14.0",
    "react-dom": "16.14.0",
@ -45,7 +45,7 @@
  },
  "devDependencies": {
    "ember-source": "~3.28.1",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "*",
@ -60,5 +60,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/ember/template/cli/1-Button.stories.js
+++ b/code/frameworks/ember/template/cli/1-Button.stories.js
@ -2,20 +2,19 @@ import { hbs } from 'ember-cli-htmlbars';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';

-// More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/ember/writing-stories/introduction
 export default {
-  title: 'Button',
+  title: 'Example/Button',
  render: (args) => ({
    template: hbs`<button {{action onClick}}>{{label}}</button>`,
    context: args,
  }),
-  // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
  argTypes: {
    label: { control: 'text' },
  },
 };

-// More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/ember/writing-stories/args
 export const Text = {
  args: {
    label: 'Button',
--- a/code/frameworks/html-webpack5/jest.config.js
+++ b/code/frameworks/html-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/html-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,17 +50,17 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/html": "7.0.0-alpha.49",
-    "@storybook/preset-html-webpack": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/html": "7.0.0-alpha.50",
+    "@storybook/preset-html-webpack": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "global": "^4.4.0",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "*"
@ -78,5 +78,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/nextjs/jest.config.js
+++ b/code/frameworks/nextjs/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/nextjs",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Next.js",
  "keywords": [
    "storybook",
@ -60,13 +60,13 @@
  },
  "dependencies": {
    "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/node-logger": "7.0.0-alpha.49",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.49",
-    "@storybook/react": "7.0.0-alpha.49",
-    "@types/node": "^14.14.20 || ^16.0.0",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.50",
+    "@storybook/react": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "find-up": "^5.0.0",
    "fs-extra": "^9.0.1",
    "image-size": "^1.0.0",
@ -81,9 +81,9 @@
    "tsconfig-paths-webpack-plugin": "^3.5.2"
  },
  "devDependencies": {
-    "@storybook/addon-actions": "7.0.0-alpha.49",
+    "@storybook/addon-actions": "7.0.0-alpha.50",
    "next": "^12.2.4",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
    "webpack": "^5.65.0"
  },
  "peerDependencies": {
@ -120,5 +120,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/nextjs/src/next-image-loader-stub.ts
+++ b/code/frameworks/nextjs/src/next-image-loader-stub.ts
@ -16,7 +16,7 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (conten

  this.emitFile(outputPath, content);

-  const { width, height } = imageSizeOf(content);
+  const { width, height } = imageSizeOf(this.resourcePath);

  return `export default ${JSON.stringify({
    src: outputPath,
@ -28,4 +28,4 @@ const nextImageLoaderStub: RawLoaderDefinition<LoaderOptions> = function (conten

 nextImageLoaderStub.raw = true;

-export = nextImageLoaderStub;
+export default nextImageLoaderStub;
--- a/code/frameworks/nextjs/template/cli/js/Button.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Button.stories.js
@ -0,0 +1,41 @@
+import { Button } from './Button';
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
+export default {
+  title: 'Example/Button',
+  component: Button,
+  tags: ['docsPage'],
+  argTypes: {
+    backgroundColor: {
+      control: 'color',
+    },
+  },
+};
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};
--- a/code/frameworks/nextjs/template/cli/js/Button.stories.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Button.stories.jsx
@ -1,42 +0,0 @@
-import React from 'react';
-
-import { Button } from './Button';
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
-  tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
--- a/code/frameworks/nextjs/template/cli/js/Header.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Header.stories.js
@ -0,0 +1,23 @@
+import { Header } from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: Header,
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
+  tags: ['docsPage'],
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut = {
+  args: {},
+};
--- a/code/frameworks/nextjs/template/cli/js/Header.stories.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Header.stories.jsx
@ -1,26 +0,0 @@
-import React from 'react';
-
-import { Header } from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
-  tags: ['docsPage'],
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
-  },
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
--- a/code/frameworks/nextjs/template/cli/js/Page.stories.js
+++ b/code/frameworks/nextjs/template/cli/js/Page.stories.js
@ -0,0 +1,24 @@
+import { within, userEvent } from '@storybook/testing-library';
+import { Page } from './Page';
+
+export default {
+  title: 'Example/Page',
+  component: Page,
+  parameters: {
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
+    layout: 'fullscreen',
+  },
+};
+
+export const LoggedOut = {};
+
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
+export const LoggedIn = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
+};
--- a/code/frameworks/nextjs/template/cli/js/Page.stories.jsx
+++ b/code/frameworks/nextjs/template/cli/js/Page.stories.jsx
@ -1,25 +0,0 @@
-import React from 'react';
-import { within, userEvent } from '@storybook/testing-library';
-
-import { Page } from './Page';
-
-export default {
-  title: 'Example/Page',
-  component: Page,
-  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
-    layout: 'fullscreen',
-  },
-};
-
-const Template = (args) => <Page {...args} />;
-
-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
-};
--- a/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Button.stories.ts
@ -2,13 +2,11 @@ import type { Meta, StoryObj } from '@storybook/react';

 import { Button } from './Button';

-// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/react/writing-stories/introduction
 const meta: Meta<typeof Button> = {
  title: 'Example/Button',
  component: Button,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
  tags: ['docsPage'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
  argTypes: {
    backgroundColor: {
      control: 'color',
@ -19,7 +17,7 @@ const meta: Meta<typeof Button> = {
 export default meta;
 type Story = StoryObj<typeof Button>;

-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+// More on writing stories with args: https://storybook.js.org/docs/7.0/react/writing-stories/args
 export const Primary: Story = {
  args: {
    primary: true,
--- a/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Header.stories.ts
@ -4,10 +4,10 @@ import { Header } from './Header';
 const meta: Meta<typeof Header> = {
  title: 'Example/Header',
  component: Header,
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/react/writing-docs/docs-page
+  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/react/writing-docs/docs-page
  tags: ['docsPage'],
  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
 };
--- a/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
+++ b/code/frameworks/nextjs/template/cli/ts/Page.stories.ts
@ -7,7 +7,7 @@ const meta: Meta<typeof Page> = {
  title: 'Example/Page',
  component: Page,
  parameters: {
-    // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
+    // More on how to position stories at: https://storybook.js.org/docs/7.0/react/configure/story-layout
    layout: 'fullscreen',
  },
 };
@ -17,7 +17,7 @@ type Story = StoryObj<typeof Page>;

 export const LoggedOut: Story = {};

-// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+// More on interaction testing: https://storybook.js.org/docs/7.0/react/writing-tests/interaction-testing
 export const LoggedIn: Story = {
  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);
--- a/code/frameworks/preact-webpack5/jest.config.js
+++ b/code/frameworks/preact-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/preact-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Preact: Develop Preact Component in isolation.",
  "keywords": [
    "storybook"
@ -50,17 +50,17 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preact": "7.0.0-alpha.49",
-    "@storybook/preset-preact-webpack": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preact": "7.0.0-alpha.50",
+    "@storybook/preset-preact-webpack": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "preact": "^10.5.13",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "*",
@ -79,5 +79,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/react-vite/jest.config.js
+++ b/code/frameworks/react-vite/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-vite",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -53,13 +53,13 @@
  "dependencies": {
    "@joshwooding/vite-plugin-react-docgen-typescript": "^0.0.5",
    "@rollup/pluginutils": "^4.2.0",
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-vite": "7.0.0-alpha.49",
-    "@storybook/channel-postmessage": "7.0.0-alpha.49",
-    "@storybook/channel-websocket": "7.0.0-alpha.49",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/preview-web": "7.0.0-alpha.49",
-    "@storybook/react": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
+    "@storybook/channel-postmessage": "7.0.0-alpha.50",
+    "@storybook/channel-websocket": "7.0.0-alpha.50",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/react": "7.0.0-alpha.50",
    "@vitejs/plugin-react": "^2.0.0",
    "ast-types": "^0.14.2",
    "magic-string": "^0.26.1",
@ -67,8 +67,8 @@
    "vite": "^3.1.3"
  },
  "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^18.11.9",
+    "typescript": "^4.9.3",
    "vite": "^3.1.3"
  },
  "peerDependencies": {
@ -88,5 +88,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/react-webpack5/jest.config.js
+++ b/code/frameworks/react-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/react-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,14 +51,14 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/preset-react-webpack": "7.0.0-alpha.49",
-    "@storybook/react": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0"
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/preset-react-webpack": "7.0.0-alpha.50",
+    "@storybook/react": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9"
  },
  "devDependencies": {
-    "jest-specific-snapshot": "^4.0.0",
-    "typescript": "~4.6.3"
+    "jest-specific-snapshot": "^6.0.0",
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "^7.11.5",
@ -86,5 +86,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/server-webpack5/jest.config.js
+++ b/code/frameworks/server-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/server-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,16 +50,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preset-server-webpack": "7.0.0-alpha.49",
-    "@storybook/server": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preset-server-webpack": "7.0.0-alpha.50",
+    "@storybook/server": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "engines": {
    "node": ">=10.13.0"
@ -74,5 +74,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/svelte-vite/jest.config.js
+++ b/code/frameworks/svelte-vite/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-vite",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -52,14 +52,14 @@
  },
  "dependencies": {
    "@storybook/addon-svelte-csf": "^2.0.0",
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-vite": "7.0.0-alpha.49",
-    "@storybook/channel-postmessage": "7.0.0-alpha.49",
-    "@storybook/channel-websocket": "7.0.0-alpha.49",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/node-logger": "7.0.0-alpha.49",
-    "@storybook/preview-web": "7.0.0-alpha.49",
-    "@storybook/svelte": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
+    "@storybook/channel-postmessage": "7.0.0-alpha.50",
+    "@storybook/channel-websocket": "7.0.0-alpha.50",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/svelte": "7.0.0-alpha.50",
    "@sveltejs/vite-plugin-svelte": "^1.0.0",
    "magic-string": "^0.26.1",
    "svelte": "^3.0.0",
@ -67,8 +67,8 @@
    "vite": "^3.1.3"
  },
  "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^18.11.9",
+    "typescript": "^4.9.3",
    "vite": "^3.1.3"
  },
  "peerDependencies": {
@ -92,5 +92,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/svelte-webpack5/jest.config.js
+++ b/code/frameworks/svelte-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/svelte-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,17 +51,17 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preset-svelte-webpack": "7.0.0-alpha.49",
-    "@storybook/svelte": "7.0.0-alpha.49",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preset-svelte-webpack": "7.0.0-alpha.50",
+    "@storybook/svelte": "7.0.0-alpha.50",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "svelte": "^3.48.0",
    "svelte-loader": "^3.1.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "@babel/core": "*",
@ -81,5 +81,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/vue-vite/jest.config.js
+++ b/code/frameworks/vue-vite/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/vue-vite/package.json
+++ b/code/frameworks/vue-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue-vite",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,21 +50,21 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-vite": "7.0.0-alpha.49",
-    "@storybook/channel-postmessage": "7.0.0-alpha.49",
-    "@storybook/channel-websocket": "7.0.0-alpha.49",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/core-server": "7.0.0-alpha.49",
-    "@storybook/preview-web": "7.0.0-alpha.49",
-    "@storybook/vue": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
+    "@storybook/channel-postmessage": "7.0.0-alpha.50",
+    "@storybook/channel-websocket": "7.0.0-alpha.50",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/core-server": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/vue": "7.0.0-alpha.50",
    "magic-string": "^0.26.1",
    "vite": "^3.1.3",
    "vue-docgen-api": "^4.40.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
    "vue": "^2.7.10"
  },
  "peerDependencies": {
@ -83,5 +83,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/vue-webpack5/jest.config.js
+++ b/code/frameworks/vue-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/vue-webpack5/package.json
+++ b/code/frameworks/vue-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,16 +50,16 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preset-vue-webpack": "7.0.0-alpha.49",
-    "@storybook/vue": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preset-vue-webpack": "7.0.0-alpha.50",
+    "@storybook/vue": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
    "vue": "^2.6.12",
    "vue-loader": "^15.7.0",
    "vue-template-compiler": "^2.6.14"
@ -85,5 +85,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/vue3-vite/jest.config.js
+++ b/code/frameworks/vue3-vite/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-vite",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,22 +51,22 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-vite": "7.0.0-alpha.49",
-    "@storybook/channel-postmessage": "7.0.0-alpha.49",
-    "@storybook/channel-websocket": "7.0.0-alpha.49",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/core-server": "7.0.0-alpha.49",
-    "@storybook/preview-web": "7.0.0-alpha.49",
-    "@storybook/vue3": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
+    "@storybook/channel-postmessage": "7.0.0-alpha.50",
+    "@storybook/channel-websocket": "7.0.0-alpha.50",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/core-server": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/vue3": "7.0.0-alpha.50",
    "@vitejs/plugin-vue": "^3.0.0",
    "magic-string": "^0.26.1",
    "vite": "^3.1.3",
    "vue-docgen-api": "^4.40.0"
  },
  "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^18.11.9",
+    "typescript": "^4.9.3",
    "vite": "^3.1.3"
  },
  "engines": {
@ -82,5 +82,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/vue3-webpack5/jest.config.js
+++ b/code/frameworks/vue3-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/vue3-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -50,17 +50,17 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preset-vue3-webpack": "7.0.0-alpha.49",
-    "@storybook/vue3": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preset-vue3-webpack": "7.0.0-alpha.50",
+    "@storybook/vue3": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "@vue/compiler-sfc": "3.0.0",
-    "typescript": "~4.6.3",
+    "typescript": "^4.9.3",
    "vue": "3.0.0"
  },
  "peerDependencies": {
@ -82,5 +82,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/web-components-vite/jest.config.js
+++ b/code/frameworks/web-components-vite/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/web-components-vite/package.json
+++ b/code/frameworks/web-components-vite/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-vite",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
  "keywords": [
    "storybook"
@ -51,21 +51,21 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@storybook/addons": "7.0.0-alpha.49",
-    "@storybook/builder-vite": "7.0.0-alpha.49",
-    "@storybook/channel-postmessage": "7.0.0-alpha.49",
-    "@storybook/channel-websocket": "7.0.0-alpha.49",
-    "@storybook/client-api": "7.0.0-alpha.49",
-    "@storybook/core-server": "7.0.0-alpha.49",
-    "@storybook/node-logger": "7.0.0-alpha.49",
-    "@storybook/preview-web": "7.0.0-alpha.49",
-    "@storybook/web-components": "7.0.0-alpha.49",
+    "@storybook/addons": "7.0.0-alpha.50",
+    "@storybook/builder-vite": "7.0.0-alpha.50",
+    "@storybook/channel-postmessage": "7.0.0-alpha.50",
+    "@storybook/channel-websocket": "7.0.0-alpha.50",
+    "@storybook/client-api": "7.0.0-alpha.50",
+    "@storybook/core-server": "7.0.0-alpha.50",
+    "@storybook/node-logger": "7.0.0-alpha.50",
+    "@storybook/preview-web": "7.0.0-alpha.50",
+    "@storybook/web-components": "7.0.0-alpha.50",
    "magic-string": "^0.26.1",
    "vite": "3"
  },
  "devDependencies": {
-    "@types/node": "^16.0.0",
-    "typescript": "~4.6.3",
+    "@types/node": "^18.11.9",
+    "typescript": "^4.9.3",
    "vite": "^3.1.0"
  },
  "engines": {
@ -81,5 +81,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/frameworks/web-components-webpack5/jest.config.js
+++ b/code/frameworks/web-components-webpack5/jest.config.js
@ -0,0 +1,7 @@
+const path = require('path');
+const baseConfig = require('../../jest.config.node');
+
+module.exports = {
+  ...baseConfig,
+  displayName: __dirname.split(path.sep).slice(-2).join(path.posix.sep),
+};
--- a/code/frameworks/web-components-webpack5/package.json
+++ b/code/frameworks/web-components-webpack5/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/web-components-webpack5",
-  "version": "7.0.0-alpha.49",
+  "version": "7.0.0-alpha.50",
  "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
  "keywords": [
    "lit-html",
@ -52,18 +52,18 @@
    "prep": "../../../scripts/prepare/bundle.ts"
  },
  "dependencies": {
-    "@babel/preset-env": "^7.12.11",
-    "@storybook/builder-webpack5": "7.0.0-alpha.49",
-    "@storybook/core-common": "7.0.0-alpha.49",
-    "@storybook/preset-web-components-webpack": "7.0.0-alpha.49",
-    "@storybook/web-components": "7.0.0-alpha.49",
-    "@types/node": "^16.0.0",
+    "@babel/preset-env": "^7.20.2",
+    "@storybook/builder-webpack5": "7.0.0-alpha.50",
+    "@storybook/core-common": "7.0.0-alpha.50",
+    "@storybook/preset-web-components-webpack": "7.0.0-alpha.50",
+    "@storybook/web-components": "7.0.0-alpha.50",
+    "@types/node": "^18.11.9",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "devDependencies": {
    "lit-html": "2.0.2",
-    "typescript": "~4.6.3"
+    "typescript": "^4.9.3"
  },
  "peerDependencies": {
    "lit-html": "^1.4.1 || ^2.0.0"
@ -81,5 +81,5 @@
    ],
    "platform": "node"
  },
-  "gitHead": "d7eb433300cac55d3c7256c8181eb6fd7a47b4c8"
+  "gitHead": "77184d039091f4782dc4540df6d271a24fb3e242"
 }
--- a/code/jest.config.base.js
+++ b/code/jest.config.base.js
@ -0,0 +1,94 @@
+const os = require('os');
+const path = require('path');
+
+/**
+ * TODO: Some windows related tasks are still commented out, because they are behaving differently on
+ * a local Windows machine compared to the Windows Server 2022 machine running in GitHub Actions.
+ * The main issue is that path.sep is behaving differently on the two machines. Some more investagations
+ * are necessary!
+ * */
+const skipOnWindows = [
+  'lib/core-server/src/utils/__tests__/server-statics.test.ts',
+  'lib/core-common/src/utils/__tests__/template.test.ts',
+  'addons/storyshots/storyshots-core/src/frameworks/configure.test.ts',
+  'lib/core-common/src/utils/__tests__/interpret-files.test.ts',
+  'lib/cli/src/helpers.test.ts',
+];
+
+module.exports = {
+  cacheDirectory: path.resolve('.cache/jest'),
+  clearMocks: true,
+  moduleNameMapper: {
+    // non-js files
+    '\\.(jpg|jpeg|png|apng|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      path.resolve('./__mocks__/fileMock.js'),
+    '\\.(css|scss|stylesheet)$': path.resolve('./__mocks__/styleMock.js'),
+    '\\.(md)$': path.resolve('./__mocks__/htmlMock.js'),
+
+    // core-js v2 to v3 mapping
+    'core-js/modules/es6.(.*)': 'core-js/modules/es.$1',
+    'core-js/modules/es7.(.*)': 'core-js/modules/esnext.$1',
+    'core-js/library/fn/(.*)': `core-js/features/$1`,
+    'core-js/es5/(.*)': `core-js/es/$1`,
+    'core-js/es6/(.*)': `core-js/es/$1`,
+    'core-js/es7/reflect': `core-js/proposals/reflect-metadata`,
+    'core-js/es7/(.*)': `core-js/proposals/$1`,
+    'core-js/object$/': `core-js/es/object`,
+    'core-js/object/(.*)': `core-js/es/object/$1`,
+    'babel-runtime/core-js/(.*)': `core-js/es/$1`,
+    // 'babel-runtime/core-js/object/assign'
+    'core-js/library/fn/object/assign': 'core-js/es/object/assign',
+  },
+  transform: {
+    '^.+\\.[jt]sx?$': path.resolve('../scripts/utils/jest-transform-js.js'),
+    '^.+\\.mdx$': '@storybook/addon-docs/jest-transform-mdx',
+  },
+  transformIgnorePatterns: ['/node_modules/(?!@angular|rxjs|nanoid|uuid|lit-html|@mdx-js)'],
+  testMatch: ['**/__tests__/**/*.[jt]s?(x)', '**/?(*.)+(spec|test).[jt]s?(x)'],
+  testPathIgnorePatterns: [
+    '/storybook-static/',
+    '/node_modules/',
+    '/dist/',
+    '/prebuilt/',
+    '/template/',
+    'addon-jest.test.js',
+    // TODO: Can not get svelte-jester to work, but also not necessary for this test, as it is run by tsc/svelte-check.
+    '/renderers/svelte/src/public-types.test.ts',
+    '/renderers/vue/src/public-types.test.ts',
+    '/renderers/vue3/src/public-types.test.ts',
+    ...(process.platform === 'win32' ? skipOnWindows : []),
+  ],
+  coveragePathIgnorePatterns: [
+    '/node_modules/',
+    '/cli/test/',
+    '/dist/',
+    '/prebuilt/',
+    '/generators/',
+    '/template/',
+    '/__mocks__ /',
+    '/__mockdata__/',
+    '/__mocks-ng-workspace__/',
+    '/__testfixtures__/',
+    '^.*\\.stories\\.[jt]sx?$',
+    'typings.d.ts$',
+  ],
+  globals: {
+    PREVIEW_URL: undefined,
+    SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix',
+  },
+  snapshotSerializers: ['@emotion/jest/serializer', 'jest-serializer-html'],
+  testEnvironmentOptions: {
+    url: 'http://localhost',
+  },
+  modulePathIgnorePatterns: [
+    //
+    '/dist/.*/__mocks__/',
+    '/storybook-static/',
+    '/template/',
+  ],
+  moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'node'],
+  snapshotFormat: {
+    escapeString: true,
+    printBasicPrototype: true,
+  },
+};
--- a/Show More
+++ b/Show More