diff --git a/.circleci/config.yml b/.circleci/config.yml index ba7d9e3e5397..169309ba598f 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -43,7 +43,7 @@ executors: default: 'small' working_directory: /tmp/storybook docker: - - image: mcr.microsoft.com/playwright:v1.31.1-focal + - image: mcr.microsoft.com/playwright:v1.32.3-focal environment: NODE_OPTIONS: --max_old_space_size=6144 resource_class: <> diff --git a/CHANGELOG.md b/CHANGELOG.md index cb64d7a8c596..108214b648c3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,30 @@ +## 7.1.0-alpha.7 (April 19, 2023) + +#### Bug Fixes + +- Vue3: Fix reactive decorators [#21954](https://github.com/storybooks/storybook/pull/21954) + +#### Build + +- Build: Improve sandboxes commit message [#22136](https://github.com/storybooks/storybook/pull/22136) + +## 7.1.0-alpha.6 (April 18, 2023) + +#### Bug Fixes + +- Core: Restore Docs `useParameter` using `DOCS_PREPARED` [#22118](https://github.com/storybooks/storybook/pull/22118) +- Core: Add new tags to distinguish docs attachment [#22120](https://github.com/storybooks/storybook/pull/22120) +- Core: Fix `module` guard in non-webpack environments [#22085](https://github.com/storybooks/storybook/pull/22085) + +#### Build + +- Build: Skip docs pages e2e tests for ssv6 examples [#22141](https://github.com/storybooks/storybook/pull/22141) +- Build: Upgrade Playwright to 1.32.3 [#22087](https://github.com/storybooks/storybook/pull/22087) + +#### Dependency Upgrades + +- Remove unused babel dependencies [#21984](https://github.com/storybooks/storybook/pull/21984) + ## 7.1.0-alpha.5 (April 17, 2023) #### Maintenance diff --git a/MIGRATION.md b/MIGRATION.md index 5d8b63b44224..d3a88a146bb8 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -726,7 +726,7 @@ In 7.0 the location of the standalone node API has moved to `@storybook/core-ser If you used the React standalone API, for example, you might have written: ```js -const { buildStandalone } = require('@storybook/react/standalone'); +const buildStandalone = require('@storybook/react/standalone'); const options = {}; buildStandalone(options).then(() => console.log('done')); ``` @@ -734,7 +734,7 @@ buildStandalone(options).then(() => console.log('done')); In 7.0, you would now use: ```js -const build = require('@storybook/core-server/standalone'); +const { build } = require('@storybook/core-server'); const options = {}; build(options).then(() => console.log('done')); ``` diff --git a/README.md b/README.md index 950644d55743..f0c57639d0c9 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,6 @@ Storybook is a frontend workshop for building UI components and pages in isolati - ๐Ÿš€ [Getting Started](#getting-started) - ๐Ÿ“’ [Projects](#projects) - ๐Ÿ›  [Supported Frameworks & Examples](#supported-frameworks) - - ๐Ÿš‡[ Sub Projects](#sub-projects) - ๐Ÿ”—[Addons](#addons) - ๐Ÿ… [Badges & Presentation materials](#badges--presentation-materials) - ๐Ÿ‘ฅ [Community](#community) @@ -86,6 +85,8 @@ Documentation can be found on [Storybook's docs site](https://storybook.js.org/d View [Component Encyclopedia](https://storybook.js.org/showcase) to see how leading teams use Storybook. +Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz. + Storybook comes with a lot of [addons](https://storybook.js.org/docs/react/configure/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile. ### Community @@ -96,26 +97,21 @@ For additional help, join us in the [Storybook Discord](https://discord.gg/story ### Supported Frameworks -| Renderer | Demo | | -| -------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- | -| ? | TODO, the link below will break | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | -| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/official-storybook/?path=/story/*) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | -| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/vue-kitchen-sink/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) | -| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/angular-cli/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | -| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/web-components-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | -| [React Native](https://github.com/storybookjs/react-native) | - | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | -| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/html-kitchen-sink/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | -| [Ember](code/frameworks/ember/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/ember-cli/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) | -| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/svelte-kitchen-sink/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | -| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://storybookjs.netlify.com/preact-kitchen-sink/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | -| [Marionette.js](https://github.com/storybookjs/marionette) | - | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | -| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | - | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) | -| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](https://storybookjs.github.io/native/@storybook/native-flutter-example/index.html) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | - -### Sub Projects - -- [CLI](code/lib/cli) - Streamlined installation for a variety of app types -- [examples](code/examples) - Code examples to illustrate different Storybook use cases +| Renderer | Demo | | +| -------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- | +| [React](code/renderers/react) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/react/latest?style=flat-square&color=blue&label)](https://next--630511d655df72125520f051.chromatic.com/) | [![React](https://img.shields.io/npm/dm/@storybook/react?style=flat-square&color=eee)](code/renderers/react) | +| [Angular](code/frameworks/angular/) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/angular/latest?style=flat-square&color=blue&label)](https://next--6322ce6af69825592bbb28fc.chromatic.com/) | [![Angular](https://img.shields.io/npm/dm/@storybook/angular?style=flat-square&color=eee)](code/frameworks/angular/) | +| [Vue](code/renderers/vue) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/vue/latest?style=flat-square&color=blue&label)](https://next--630513346a8e284ae244d415.chromatic.com/) | [![Vue](https://img.shields.io/npm/dm/@storybook/vue?style=flat-square&color=eee)](code/renderers/vue) | +| [Web components](code/renderers/web-components) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/web-components/latest?style=flat-square&color=blue&label)](https://next--638db5bf49adfdfe8cf545e0.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/web-components?style=flat-square&color=eee)](code/renderers/web-components) | +| [React Native](https://github.com/storybookjs/react-native) | [![](https://img.shields.io/npm/v/@storybook/react-native/latest?style=flat-square&color=blue&label)](/) | [![React Native](https://img.shields.io/npm/dm/@storybook/react-native?style=flat-square&color=eee)](https://github.com/storybookjs/react-native) | +| [HTML](code/renderers/html) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/html/latest?style=flat-square&color=blue&label)](https://next--63dd39a158cf6fc05199b4bb.chromatic.com/) | [![HTML](https://img.shields.io/npm/dm/@storybook/html?style=flat-square&color=eee)](code/renderers/html) | +| [Ember](code/frameworks/ember/) | [![](https://img.shields.io/npm/v/@storybook/ember/latest?style=flat-square&color=blue&label)](/) | [![Ember](https://img.shields.io/npm/dm/@storybook/ember?style=flat-square&color=eee)](code/frameworks/ember/) | +| [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | +| [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | +| [Marionette.js](https://github.com/storybookjs/marionette) | [![](https://img.shields.io/npm/v/@storybook/marionette/latest?style=flat-square&color=blue&label)](/) | [![Marionette.js](https://img.shields.io/npm/dm/@storybook/marionette?style=flat-square&color=eee)](https://github.com/storybookjs/marionette) | +| [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/) | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) | +| [SolidJS](https://github.com/storybookjs/solidjs) | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/) | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs) | +| [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Addons diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 9cd9a5256dbf..b5e2f149f32a 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", @@ -63,16 +63,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-highlight": "7.1.0-alpha.5", - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/addon-highlight": "7.1.0-alpha.7", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "axe-core": "^4.2.0", "lodash": "^4.17.21", "react-resize-detector": "^7.1.2" @@ -104,7 +104,7 @@ "./src/preview.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index c67c0dbb51c4..d040960abf51 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -124,7 +124,7 @@ "./src/preview.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Actions", "unsupportedFrameworks": [ diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 78b99f80c5c6..31ff1a8924c6 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", @@ -76,14 +76,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "memoizerific": "^1.11.3", "ts-dedent": "^2.0.0" }, @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Backgrounds", "icon": "https://user-images.githubusercontent.com/263385/101991667-479cc600-3c7c-11eb-96d3-410e936252e7.png", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 16f544017cfc..0b22c05cbac2 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", @@ -68,15 +68,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/blocks": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/blocks": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "lodash": "^4.17.21", "ts-dedent": "^2.0.0" }, @@ -102,7 +102,7 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Controls", "icon": "https://user-images.githubusercontent.com/263385/101991669-479cc600-3c7c-11eb-93d9-38b67e8371f2.png", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 5d1c7c6a8ffa..b070a1f74b4e 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", @@ -99,23 +99,21 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.20.2", - "@babel/plugin-transform-react-jsx": "^7.19.0", "@jest/transform": "^29.3.1", "@mdx-js/react": "^2.1.5", - "@storybook/blocks": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/csf-plugin": "7.1.0-alpha.5", - "@storybook/csf-tools": "7.1.0-alpha.5", + "@storybook/blocks": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/csf-plugin": "7.1.0-alpha.7", + "@storybook/csf-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/postinstall": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/react-dom-shim": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/postinstall": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/react-dom-shim": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "fs-extra": "^11.1.0", "remark-external-links": "^8.0.0", "remark-slug": "^6.0.0", @@ -145,7 +143,7 @@ "@storybook/mdx1-csf" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 2082255eafa8..b3444c988da3 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", @@ -119,23 +119,23 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addon-actions": "7.1.0-alpha.5", - "@storybook/addon-backgrounds": "7.1.0-alpha.5", - "@storybook/addon-controls": "7.1.0-alpha.5", - "@storybook/addon-docs": "7.1.0-alpha.5", - "@storybook/addon-highlight": "7.1.0-alpha.5", - "@storybook/addon-measure": "7.1.0-alpha.5", - "@storybook/addon-outline": "7.1.0-alpha.5", - "@storybook/addon-toolbars": "7.1.0-alpha.5", - "@storybook/addon-viewport": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", + "@storybook/addon-actions": "7.1.0-alpha.7", + "@storybook/addon-backgrounds": "7.1.0-alpha.7", + "@storybook/addon-controls": "7.1.0-alpha.7", + "@storybook/addon-docs": "7.1.0-alpha.7", + "@storybook/addon-highlight": "7.1.0-alpha.7", + "@storybook/addon-measure": "7.1.0-alpha.7", + "@storybook/addon-outline": "7.1.0-alpha.7", + "@storybook/addon-toolbars": "7.1.0-alpha.7", + "@storybook/addon-viewport": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { - "@storybook/vue": "7.1.0-alpha.5", + "@storybook/vue": "7.1.0-alpha.7", "typescript": "^4.9.3" }, "peerDependencies": { @@ -166,5 +166,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index a15b566698cd..0696f900a6e8 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", @@ -51,7 +51,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", "remark-gfm": "^3.0.1", "ts-dedent": "^2.0.0" }, @@ -69,5 +69,5 @@ "cjs" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 95e00868d680..86e3aabd731d 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", @@ -61,9 +61,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/preview-api": "7.1.0-alpha.7" }, "devDependencies": { "@types/webpack-env": "^1.16.0", @@ -78,7 +78,7 @@ "./src/preview.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "sbmodern": "dist/modern/index.js", "storybook": { "displayName": "Highlight", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 4cdd6583a98f..eb7966e49eb2 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", @@ -72,16 +72,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/instrumenter": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/instrumenter": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "jest-mock": "^27.0.6", "polished": "^4.2.2", "ts-dedent": "^2.2.0" @@ -118,7 +118,7 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Interactions", "unsupportedFrameworks": [ diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index f69b5e84e85b..fe95ef534344 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "React storybook addon that show component jest report", "keywords": [ "addon", @@ -70,13 +70,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", "react-resize-detector": "^7.1.2", "upath": "^1.2.0" }, @@ -105,7 +105,7 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index a7685c6083e7..b42fe3ded537 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "addon", @@ -80,14 +80,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/router": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/router": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "prop-types": "^15.7.2", "ts-dedent": "^2.0.0" }, @@ -119,7 +119,7 @@ ], "post": "./scripts/fix-preview-api-reference.ts" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index c195bd5bdddd..2cba6515acfd 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", @@ -75,13 +75,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5" + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7" }, "devDependencies": { "typescript": "~4.9.3" @@ -108,7 +108,7 @@ "./src/preview.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Measure", "unsupportedFrameworks": [ diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index 2ebd514469e4..8c7bc3feeabf 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", @@ -78,13 +78,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -112,7 +112,7 @@ "./src/preview.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Outline", "unsupportedFrameworks": [ diff --git a/code/addons/storyshots-core/package.json b/code/addons/storyshots-core/package.json index d7d939a1b16f..b16171f3ec05 100644 --- a/code/addons/storyshots-core/package.json +++ b/code/addons/storyshots-core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Take a code snapshot of every story automatically with Jest", "keywords": [ "addon", @@ -37,12 +37,12 @@ "dependencies": { "@jest/transform": "^29.3.1", "@storybook/babel-plugin-require-context-hook": "1.0.1", - "@storybook/client-api": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/client-api": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-webpack": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/glob": "^7.1.3", "@types/jest-specific-snapshot": "^0.5.6", "glob": "^8.1.0", @@ -57,11 +57,11 @@ "@angular/core": "^13.3.6", "@angular/platform-browser-dynamic": "^13.3.6", "@emotion/jest": "^11.8.0", - "@storybook/addon-docs": "7.1.0-alpha.5", - "@storybook/angular": "7.1.0-alpha.5", - "@storybook/react": "7.1.0-alpha.5", - "@storybook/vue": "7.1.0-alpha.5", - "@storybook/vue3": "7.1.0-alpha.5", + "@storybook/addon-docs": "7.1.0-alpha.7", + "@storybook/angular": "7.1.0-alpha.7", + "@storybook/react": "7.1.0-alpha.7", + "@storybook/vue": "7.1.0-alpha.7", + "@storybook/vue3": "7.1.0-alpha.7", "babel-loader": "^9.1.2", "enzyme": "^3.11.0", "enzyme-adapter-react-16": "^1.15.5", @@ -142,7 +142,7 @@ "access": "public" }, "bundler": {}, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Storyshots", "icon": "https://user-images.githubusercontent.com/263385/101991676-48cdf300-3c7c-11eb-8aa1-944dab6ab29b.png", diff --git a/code/addons/storyshots-puppeteer/package.json b/code/addons/storyshots-puppeteer/package.json index b29c76af6e9c..d01b1089581f 100644 --- a/code/addons/storyshots-puppeteer/package.json +++ b/code/addons/storyshots-puppeteer/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storyshots-puppeteer", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Image snapshots addition to StoryShots based on puppeteer", "keywords": [ "addon", @@ -36,8 +36,8 @@ "dependencies": { "@axe-core/puppeteer": "^4.2.0", "@storybook/csf": "^0.1.0", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/jest-image-snapshot": "^5.1.0", "jest-image-snapshot": "^6.0.0" }, @@ -49,7 +49,7 @@ "rimraf": "^3.0.2" }, "peerDependencies": { - "@storybook/addon-storyshots": "7.1.0-alpha.5", + "@storybook/addon-storyshots": "7.1.0-alpha.7", "puppeteer": ">=2.0.0" }, "peerDependenciesMeta": { @@ -61,5 +61,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index e91f3da60033..d8dea4ef834f 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "View a storyโ€™s source code to see how it works and paste into your app", "keywords": [ "addon", @@ -54,13 +54,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/router": "7.1.0-alpha.5", - "@storybook/source-loader": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/router": "7.1.0-alpha.7", + "@storybook/source-loader": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", "estraverse": "^5.2.0", "prop-types": "^15.7.2", "react-syntax-highlighter": "^15.5.0" @@ -92,7 +92,7 @@ "./src/preset.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Storysource", "icon": "https://user-images.githubusercontent.com/263385/101991675-48cdf300-3c7c-11eb-9400-58de5ac6daa7.png", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 08605a815f45..32c2265d1f27 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", @@ -68,11 +68,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7" }, "devDependencies": { "typescript": "~4.9.3" @@ -99,7 +99,7 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Toolbars", "icon": "https://user-images.githubusercontent.com/263385/101991677-48cdf300-3c7c-11eb-93b4-19b0e3366959.png", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index 51da87864374..146f5c5fa0f7 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Build responsive components by adjusting Storybookโ€™s viewport size and orientation", "keywords": [ "addon", @@ -73,13 +73,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", "memoizerific": "^1.11.3", "prop-types": "^15.7.2" }, @@ -109,7 +109,7 @@ "./src/preview.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1", + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc", "storybook": { "displayName": "Viewport", "icon": "https://user-images.githubusercontent.com/263385/101991678-48cdf300-3c7c-11eb-9764-f8af293c1b28.png", diff --git a/code/e2e-tests/addon-backgrounds.spec.ts b/code/e2e-tests/addon-backgrounds.spec.ts index 5dfb3e46c05d..fd577bf432cb 100644 --- a/code/e2e-tests/addon-backgrounds.spec.ts +++ b/code/e2e-tests/addon-backgrounds.spec.ts @@ -3,6 +3,7 @@ import process from 'process'; import { SbPage } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; +const templateName = process.env.STORYBOOK_TEMPLATE_NAME; test.describe('addon-backgrounds', () => { test.beforeEach(async ({ page }) => { @@ -10,11 +11,14 @@ test.describe('addon-backgrounds', () => { await new SbPage(page).waitUntilLoaded(); }); + const backgroundToolbarSelector = '[title="Change the background of the preview"]'; + const gridToolbarSelector = '[title="Apply a grid to the preview"]'; + test('should have a dark background', async ({ page }) => { const sbPage = new SbPage(page); await sbPage.navigateToStory('example/button', 'primary'); - await sbPage.selectToolbar('[title="Change the background of the preview"]', '#list-item-dark'); + await sbPage.selectToolbar(backgroundToolbarSelector, '#list-item-dark'); await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-color', 'rgb(51, 51, 51)'); }); @@ -23,8 +27,42 @@ test.describe('addon-backgrounds', () => { const sbPage = new SbPage(page); await sbPage.navigateToStory('example/button', 'primary'); - await sbPage.selectToolbar('[title="Apply a grid to the preview"]'); + await sbPage.selectToolbar(gridToolbarSelector); await expect(sbPage.getCanvasBodyElement()).toHaveCSS('background-image', /linear-gradient/); }); + + test('button should appear for story pages', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('example/button', 'primary'); + await expect(sbPage.page.locator(backgroundToolbarSelector)).toBeVisible(); + }); + + test.describe('docs pages', () => { + // eslint-disable-next-line jest/no-disabled-tests + test.skip( + // eslint-disable-next-line jest/valid-title + templateName.includes('ssv6'), + 'Only run this test for Sandboxes with StoryStoreV7 enabled' + ); + + test('button should appear for attached docs pages', async ({ page }) => { + const sbPage = new SbPage(page); + + await sbPage.navigateToStory('example/button', 'docs'); + await expect(sbPage.page.locator(backgroundToolbarSelector)).toBeVisible(); + }); + + test('button should appear for unattached docs pages', async ({ page }) => { + const sbPage = new SbPage(page); + + // We start on the introduction page by default. + await sbPage.page.waitForURL((url) => + url.search.includes(`path=/docs/example-introduction--docs`) + ); + + await expect(sbPage.page.locator(backgroundToolbarSelector)).toBeVisible(); + }); + }); }); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 67edeedc197c..568cbbf26d8d 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", @@ -36,21 +36,21 @@ "prep": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/cli": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/core-webpack": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/cli": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/core-webpack": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/telemetry": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/telemetry": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/node": "^16.0.0", "@types/react": "^16.14.34", "@types/react-dom": "^16.9.14", @@ -124,5 +124,5 @@ "bundler": { "tsConfig": "tsconfig.build.json" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/angular/src/client/index.ts b/code/frameworks/angular/src/client/index.ts index 04e9244b1314..bfc209efb4d4 100644 --- a/code/frameworks/angular/src/client/index.ts +++ b/code/frameworks/angular/src/client/index.ts @@ -12,4 +12,4 @@ export type { StoryFnAngularReturnType as IStory } from './types'; export { moduleMetadata, componentWrapperDecorator, applicationConfig } from './decorators'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index f7f11bbeb994..83ce8d179af5 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "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": "../../../scripts/prepare/tsc.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -59,5 +59,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/ember/src/index.ts b/code/frameworks/ember/src/index.ts index db22918233c3..3d30d71982e6 100644 --- a/code/frameworks/ember/src/index.ts +++ b/code/frameworks/ember/src/index.ts @@ -3,4 +3,4 @@ export { storiesOf, configure, forceReRender, raw } from './client/preview'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 9bca273acc88..96e12f7e550f 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,15 +48,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/addons": "7.1.0-alpha.5", - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/channel-postmessage": "7.1.0-alpha.5", - "@storybook/channel-websocket": "7.1.0-alpha.5", - "@storybook/client-api": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/html": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview-web": "7.1.0-alpha.5", + "@storybook/addons": "7.1.0-alpha.7", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/channel-postmessage": "7.1.0-alpha.7", + "@storybook/channel-websocket": "7.1.0-alpha.7", + "@storybook/client-api": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/html": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview-web": "7.1.0-alpha.7", "magic-string": "^0.27.0" }, "devDependencies": { @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 142e1faec8b2..503daf6e3f4b 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/html": "7.1.0-alpha.5", - "@storybook/preset-html-webpack": "7.1.0-alpha.5", + "@storybook/html": "7.1.0-alpha.7", + "@storybook/preset-html-webpack": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index fb539efb7080..64413b4d42d5 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Next.js", "keywords": [ "storybook", @@ -71,13 +71,13 @@ "@babel/preset-react": "^7.18.6", "@babel/preset-typescript": "^7.21.0", "@babel/runtime": "^7.21.0", - "@storybook/addon-actions": "7.1.0-alpha.5", - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preset-react-webpack": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/react": "7.1.0-alpha.5", + "@storybook/addon-actions": "7.1.0-alpha.7", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preset-react-webpack": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/react": "7.1.0-alpha.7", "@types/node": "^16.0.0", "css-loader": "^6.7.3", "find-up": "^5.0.0", @@ -147,5 +147,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 84903d8bb242..649f30fd99e5 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,8 +48,8 @@ }, "dependencies": { "@preact/preset-vite": "^2.0.0", - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/preact": "7.1.0-alpha.5" + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/preact": "7.1.0-alpha.7" }, "devDependencies": { "@types/node": "^16.0.0", @@ -73,5 +73,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index 7ee945d3f396..cd151984e9c6 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preact": "7.1.0-alpha.5", - "@storybook/preset-preact-webpack": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preact": "7.1.0-alpha.7", + "@storybook/preset-preact-webpack": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -77,5 +77,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index cd0342b4d7af..f7153eecebb8 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -50,8 +50,8 @@ "dependencies": { "@joshwooding/vite-plugin-react-docgen-typescript": "0.2.1", "@rollup/pluginutils": "^4.2.0", - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/react": "7.1.0-alpha.5", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/react": "7.1.0-alpha.7", "@vitejs/plugin-react": "^3.0.1", "ast-types": "^0.14.2", "magic-string": "^0.27.0", @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 2b0353663e3b..86382efe4e41 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/preset-react-webpack": "7.1.0-alpha.5", - "@storybook/react": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/preset-react-webpack": "7.1.0-alpha.7", + "@storybook/react": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 4780ac7b26d2..09dc4578678b 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preset-server-webpack": "7.1.0-alpha.5", - "@storybook/server": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preset-server-webpack": "7.1.0-alpha.7", + "@storybook/server": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index 2e6f16320327..98a8120a534d 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/svelte": "7.1.0-alpha.5", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/svelte": "7.1.0-alpha.7", "@sveltejs/vite-plugin-svelte": "^2.0.0", "magic-string": "^0.27.0", "svelte": "^3.0.0", @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index eda375ad5c6b..36e448619831 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preset-svelte-webpack": "7.1.0-alpha.5", - "@storybook/svelte": "7.1.0-alpha.5" + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preset-svelte-webpack": "7.1.0-alpha.7", + "@storybook/svelte": "7.1.0-alpha.7" }, "devDependencies": { "svelte": "^3.48.0", @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 45da9e6cec73..21b3277ddb5a 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for SvelteKit", "keywords": [ "storybook", @@ -51,9 +51,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/svelte": "7.1.0-alpha.5", - "@storybook/svelte-vite": "7.1.0-alpha.5" + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/svelte": "7.1.0-alpha.7", + "@storybook/svelte-vite": "7.1.0-alpha.7" }, "devDependencies": { "@types/node": "^16.0.0", @@ -76,5 +76,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/vue-vite/package.json b/code/frameworks/vue-vite/package.json index 86467b5ae8d8..c454f2e8a4fa 100644 --- a/code/frameworks/vue-vite/package.json +++ b/code/frameworks/vue-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue2 and Vite: Develop Vue2 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/vue": "7.1.0-alpha.5", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/vue": "7.1.0-alpha.7", "magic-string": "^0.27.0", "vue-docgen-api": "^4.40.0" }, @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/vue-webpack5/package.json b/code/frameworks/vue-webpack5/package.json index bc7566791157..36b03f706e0e 100644 --- a/code/frameworks/vue-webpack5/package.json +++ b/code/frameworks/vue-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preset-vue-webpack": "7.1.0-alpha.5", - "@storybook/vue": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preset-vue-webpack": "7.1.0-alpha.7", + "@storybook/vue": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -83,5 +83,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 14087d44047b..7f79d4f753c8 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,9 +48,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/vue3": "7.1.0-alpha.5", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/vue3": "7.1.0-alpha.7", "@vitejs/plugin-vue": "^4.0.0", "magic-string": "^0.27.0", "vue-docgen-api": "^4.40.0" @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 8c54aa4ded12..2b35f6823bdf 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preset-vue3-webpack": "7.1.0-alpha.5", - "@storybook/vue3": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preset-vue3-webpack": "7.1.0-alpha.7", + "@storybook/vue3": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 704ba47cdebe..f04757f60847 100644 --- 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.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/builder-vite": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/web-components": "7.1.0-alpha.5", + "@storybook/builder-vite": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/web-components": "7.1.0-alpha.7", "magic-string": "^0.27.0" }, "devDependencies": { @@ -75,5 +75,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index a40968e892c2..3d1dc67abd6d 100644 --- 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.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -52,10 +52,10 @@ }, "dependencies": { "@babel/preset-env": "^7.20.2", - "@storybook/builder-webpack5": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preset-web-components-webpack": "7.1.0-alpha.5", - "@storybook/web-components": "7.1.0-alpha.5", + "@storybook/builder-webpack5": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preset-web-components-webpack": "7.1.0-alpha.7", + "@storybook/web-components": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lerna.json b/code/lerna.json index 8f3740a15fc6..a63e56e966db 100644 --- a/code/lerna.json +++ b/code/lerna.json @@ -2,5 +2,5 @@ "npmClient": "yarn", "useWorkspaces": true, "registry": "https://registry.npmjs.org", - "version": "7.1.0-alpha.5" + "version": "7.1.0-alpha.7" } diff --git a/code/lib/addons/package.json b/code/lib/addons/package.json index f4644d3d67ef..5a68af8ea93f 100644 --- a/code/lib/addons/package.json +++ b/code/lib/addons/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addons", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook addons store", "keywords": [ "storybook" @@ -44,9 +44,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5" + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/builder-manager/package.json b/code/lib/builder-manager/package.json index 18c6cf4f7782..265e0b6f5a57 100644 --- a/code/lib/builder-manager/package.json +++ b/code/lib/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook manager builder", "keywords": [ "storybook" @@ -44,9 +44,9 @@ }, "dependencies": { "@fal-works/esbuild-plugin-global-externals": "^2.1.2", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/manager": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/manager": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", "@types/ejs": "^3.1.1", "@types/find-cache-dir": "^3.2.1", "@yarnpkg/esbuild-plugin-pnp": "^3.0.0-rc.10", @@ -73,5 +73,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/builder-vite/package.json b/code/lib/builder-vite/package.json index 353ec94a4f52..37d2e8df48d8 100644 --- a/code/lib/builder-vite/package.json +++ b/code/lib/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/main/code/lib/builder-vite/#readme", "bugs": { @@ -42,16 +42,16 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.5", - "@storybook/channel-websocket": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/csf-plugin": "7.1.0-alpha.5", + "@storybook/channel-postmessage": "7.1.0-alpha.7", + "@storybook/channel-websocket": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/csf-plugin": "7.1.0-alpha.7", "@storybook/mdx2-csf": "^1.0.0", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "browser-assert": "^1.2.1", "es-module-lexer": "^0.9.3", "express": "^4.17.3", @@ -100,5 +100,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/builder-webpack5/package.json b/code/lib/builder-webpack5/package.json index df8c11bd2174..610959db56c2 100644 --- a/code/lib/builder-webpack5/package.json +++ b/code/lib/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -58,25 +58,25 @@ }, "dependencies": { "@babel/core": "^7.12.10", - "@storybook/addons": "7.1.0-alpha.5", - "@storybook/api": "7.1.0-alpha.5", - "@storybook/channel-postmessage": "7.1.0-alpha.5", - "@storybook/channel-websocket": "7.1.0-alpha.5", - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-api": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/components": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/addons": "7.1.0-alpha.7", + "@storybook/api": "7.1.0-alpha.7", + "@storybook/channel-postmessage": "7.1.0-alpha.7", + "@storybook/channel-websocket": "7.1.0-alpha.7", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-api": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/components": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", + "@storybook/core-webpack": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/router": "7.1.0-alpha.5", - "@storybook/store": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", + "@storybook/manager-api": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/router": "7.1.0-alpha.7", + "@storybook/store": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", "babel-loader": "^9.0.0", @@ -131,5 +131,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/channel-postmessage/package.json b/code/lib/channel-postmessage/package.json index fc5b97265179..5a56733f47b2 100644 --- a/code/lib/channel-postmessage/package.json +++ b/code/lib/channel-postmessage/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-postmessage", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", "qs": "^6.10.0", "telejson": "^7.0.3" @@ -61,5 +61,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/channel-websocket/package.json b/code/lib/channel-websocket/package.json index 28686a1ee8cb..4d992845de1d 100644 --- a/code/lib/channel-websocket/package.json +++ b/code/lib/channel-websocket/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channel-websocket", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -43,8 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", "telejson": "^7.0.3" }, @@ -59,5 +59,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/channels/package.json b/code/lib/channels/package.json index ec04c4a15272..1646d4d1b56a 100644 --- a/code/lib/channels/package.json +++ b/code/lib/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -53,5 +53,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 45f5fd2607ea..3f072e274430 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" @@ -21,10 +21,10 @@ "license": "MIT", "bin": "./index.js", "dependencies": { - "@storybook/cli": "7.1.0-alpha.5" + "@storybook/cli": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 46fe9a746d00..e4f9f586bf21 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook CLI", "keywords": [ "storybook" @@ -24,10 +24,10 @@ "storybook": "./index.js" }, "dependencies": { - "@storybook/cli": "7.1.0-alpha.5" + "@storybook/cli": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 910cb6487e78..5fe74fe3c517 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook's CLI - easiest method of adding storybook to your projects", "keywords": [ "cli", @@ -57,13 +57,13 @@ "@babel/core": "^7.20.2", "@babel/preset-env": "^7.20.2", "@ndelangen/get-tarball": "^3.0.7", - "@storybook/codemod": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/csf-tools": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/telemetry": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/codemod": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/csf-tools": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/telemetry": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/semver": "^7.3.4", "boxen": "^5.1.2", "chalk": "^4.1.0", @@ -94,7 +94,7 @@ "util-deprecate": "^1.0.2" }, "devDependencies": { - "@storybook/client-api": "7.1.0-alpha.5", + "@storybook/client-api": "7.1.0-alpha.7", "@types/cross-spawn": "^6.0.2", "@types/prompts": "^2.0.9", "@types/puppeteer-core": "^2.1.0", @@ -114,5 +114,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts b/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts index 7e0f393798fa..fcc4f79e9f4f 100644 --- a/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts +++ b/code/lib/cli/src/automigrate/helpers/getIncompatibleAddons.ts @@ -30,6 +30,7 @@ export const getIncompatibleAddons = async (mainConfig: StorybookConfig) => { 'storybook-addon-mock': '3.2.0', '@chakra-ui/storybook-addon': '4.0.16', 'storybook-mobile-addon': '1.0.2', + '@storybook/addon-queryparams': '6.2.9', }; const addons = getAddonNames(mainConfig).filter((addon) => addon in incompatibleList); diff --git a/code/lib/cli/src/versions.ts b/code/lib/cli/src/versions.ts index 31b4e996e88c..b1f48e396da5 100644 --- a/code/lib/cli/src/versions.ts +++ b/code/lib/cli/src/versions.ts @@ -1,96 +1,96 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '7.1.0-alpha.5', - '@storybook/addon-actions': '7.1.0-alpha.5', - '@storybook/addon-backgrounds': '7.1.0-alpha.5', - '@storybook/addon-controls': '7.1.0-alpha.5', - '@storybook/addon-docs': '7.1.0-alpha.5', - '@storybook/addon-essentials': '7.1.0-alpha.5', - '@storybook/addon-highlight': '7.1.0-alpha.5', - '@storybook/addon-interactions': '7.1.0-alpha.5', - '@storybook/addon-jest': '7.1.0-alpha.5', - '@storybook/addon-links': '7.1.0-alpha.5', - '@storybook/addon-mdx-gfm': '7.1.0-alpha.5', - '@storybook/addon-measure': '7.1.0-alpha.5', - '@storybook/addon-outline': '7.1.0-alpha.5', - '@storybook/addon-storyshots': '7.1.0-alpha.5', - '@storybook/addon-storyshots-puppeteer': '7.1.0-alpha.5', - '@storybook/addon-storysource': '7.1.0-alpha.5', - '@storybook/addon-toolbars': '7.1.0-alpha.5', - '@storybook/addon-viewport': '7.1.0-alpha.5', - '@storybook/addons': '7.1.0-alpha.5', - '@storybook/angular': '7.1.0-alpha.5', - '@storybook/api': '7.1.0-alpha.5', - '@storybook/blocks': '7.1.0-alpha.5', - '@storybook/builder-manager': '7.1.0-alpha.5', - '@storybook/builder-vite': '7.1.0-alpha.5', - '@storybook/builder-webpack5': '7.1.0-alpha.5', - '@storybook/channel-postmessage': '7.1.0-alpha.5', - '@storybook/channel-websocket': '7.1.0-alpha.5', - '@storybook/channels': '7.1.0-alpha.5', - '@storybook/cli': '7.1.0-alpha.5', - '@storybook/client-api': '7.1.0-alpha.5', - '@storybook/client-logger': '7.1.0-alpha.5', - '@storybook/codemod': '7.1.0-alpha.5', - '@storybook/components': '7.1.0-alpha.5', - '@storybook/core-client': '7.1.0-alpha.5', - '@storybook/core-common': '7.1.0-alpha.5', - '@storybook/core-events': '7.1.0-alpha.5', - '@storybook/core-server': '7.1.0-alpha.5', - '@storybook/core-webpack': '7.1.0-alpha.5', - '@storybook/csf-plugin': '7.1.0-alpha.5', - '@storybook/csf-tools': '7.1.0-alpha.5', - '@storybook/docs-tools': '7.1.0-alpha.5', - '@storybook/ember': '7.1.0-alpha.5', - '@storybook/html': '7.1.0-alpha.5', - '@storybook/html-vite': '7.1.0-alpha.5', - '@storybook/html-webpack5': '7.1.0-alpha.5', - '@storybook/instrumenter': '7.1.0-alpha.5', - '@storybook/manager': '7.1.0-alpha.5', - '@storybook/manager-api': '7.1.0-alpha.5', - '@storybook/nextjs': '7.1.0-alpha.5', - '@storybook/node-logger': '7.1.0-alpha.5', - '@storybook/postinstall': '7.1.0-alpha.5', - '@storybook/preact': '7.1.0-alpha.5', - '@storybook/preact-vite': '7.1.0-alpha.5', - '@storybook/preact-webpack5': '7.1.0-alpha.5', - '@storybook/preset-create-react-app': '7.1.0-alpha.5', - '@storybook/preset-html-webpack': '7.1.0-alpha.5', - '@storybook/preset-preact-webpack': '7.1.0-alpha.5', - '@storybook/preset-react-webpack': '7.1.0-alpha.5', - '@storybook/preset-server-webpack': '7.1.0-alpha.5', - '@storybook/preset-svelte-webpack': '7.1.0-alpha.5', - '@storybook/preset-vue-webpack': '7.1.0-alpha.5', - '@storybook/preset-vue3-webpack': '7.1.0-alpha.5', - '@storybook/preset-web-components-webpack': '7.1.0-alpha.5', - '@storybook/preview': '7.1.0-alpha.5', - '@storybook/preview-api': '7.1.0-alpha.5', - '@storybook/preview-web': '7.1.0-alpha.5', - '@storybook/react': '7.1.0-alpha.5', - '@storybook/react-dom-shim': '7.1.0-alpha.5', - '@storybook/react-vite': '7.1.0-alpha.5', - '@storybook/react-webpack5': '7.1.0-alpha.5', - '@storybook/router': '7.1.0-alpha.5', - '@storybook/server': '7.1.0-alpha.5', - '@storybook/server-webpack5': '7.1.0-alpha.5', - '@storybook/source-loader': '7.1.0-alpha.5', - '@storybook/store': '7.1.0-alpha.5', - '@storybook/svelte': '7.1.0-alpha.5', - '@storybook/svelte-vite': '7.1.0-alpha.5', - '@storybook/svelte-webpack5': '7.1.0-alpha.5', - '@storybook/sveltekit': '7.1.0-alpha.5', - '@storybook/telemetry': '7.1.0-alpha.5', - '@storybook/theming': '7.1.0-alpha.5', - '@storybook/types': '7.1.0-alpha.5', - '@storybook/vue': '7.1.0-alpha.5', - '@storybook/vue-vite': '7.1.0-alpha.5', - '@storybook/vue-webpack5': '7.1.0-alpha.5', - '@storybook/vue3': '7.1.0-alpha.5', - '@storybook/vue3-vite': '7.1.0-alpha.5', - '@storybook/vue3-webpack5': '7.1.0-alpha.5', - '@storybook/web-components': '7.1.0-alpha.5', - '@storybook/web-components-vite': '7.1.0-alpha.5', - '@storybook/web-components-webpack5': '7.1.0-alpha.5', - sb: '7.1.0-alpha.5', - storybook: '7.1.0-alpha.5', + '@storybook/addon-a11y': '7.1.0-alpha.7', + '@storybook/addon-actions': '7.1.0-alpha.7', + '@storybook/addon-backgrounds': '7.1.0-alpha.7', + '@storybook/addon-controls': '7.1.0-alpha.7', + '@storybook/addon-docs': '7.1.0-alpha.7', + '@storybook/addon-essentials': '7.1.0-alpha.7', + '@storybook/addon-highlight': '7.1.0-alpha.7', + '@storybook/addon-interactions': '7.1.0-alpha.7', + '@storybook/addon-jest': '7.1.0-alpha.7', + '@storybook/addon-links': '7.1.0-alpha.7', + '@storybook/addon-mdx-gfm': '7.1.0-alpha.7', + '@storybook/addon-measure': '7.1.0-alpha.7', + '@storybook/addon-outline': '7.1.0-alpha.7', + '@storybook/addon-storyshots': '7.1.0-alpha.7', + '@storybook/addon-storyshots-puppeteer': '7.1.0-alpha.7', + '@storybook/addon-storysource': '7.1.0-alpha.7', + '@storybook/addon-toolbars': '7.1.0-alpha.7', + '@storybook/addon-viewport': '7.1.0-alpha.7', + '@storybook/addons': '7.1.0-alpha.7', + '@storybook/angular': '7.1.0-alpha.7', + '@storybook/api': '7.1.0-alpha.7', + '@storybook/blocks': '7.1.0-alpha.7', + '@storybook/builder-manager': '7.1.0-alpha.7', + '@storybook/builder-vite': '7.1.0-alpha.7', + '@storybook/builder-webpack5': '7.1.0-alpha.7', + '@storybook/channel-postmessage': '7.1.0-alpha.7', + '@storybook/channel-websocket': '7.1.0-alpha.7', + '@storybook/channels': '7.1.0-alpha.7', + '@storybook/cli': '7.1.0-alpha.7', + '@storybook/client-api': '7.1.0-alpha.7', + '@storybook/client-logger': '7.1.0-alpha.7', + '@storybook/codemod': '7.1.0-alpha.7', + '@storybook/components': '7.1.0-alpha.7', + '@storybook/core-client': '7.1.0-alpha.7', + '@storybook/core-common': '7.1.0-alpha.7', + '@storybook/core-events': '7.1.0-alpha.7', + '@storybook/core-server': '7.1.0-alpha.7', + '@storybook/core-webpack': '7.1.0-alpha.7', + '@storybook/csf-plugin': '7.1.0-alpha.7', + '@storybook/csf-tools': '7.1.0-alpha.7', + '@storybook/docs-tools': '7.1.0-alpha.7', + '@storybook/ember': '7.1.0-alpha.7', + '@storybook/html': '7.1.0-alpha.7', + '@storybook/html-vite': '7.1.0-alpha.7', + '@storybook/html-webpack5': '7.1.0-alpha.7', + '@storybook/instrumenter': '7.1.0-alpha.7', + '@storybook/manager': '7.1.0-alpha.7', + '@storybook/manager-api': '7.1.0-alpha.7', + '@storybook/nextjs': '7.1.0-alpha.7', + '@storybook/node-logger': '7.1.0-alpha.7', + '@storybook/postinstall': '7.1.0-alpha.7', + '@storybook/preact': '7.1.0-alpha.7', + '@storybook/preact-vite': '7.1.0-alpha.7', + '@storybook/preact-webpack5': '7.1.0-alpha.7', + '@storybook/preset-create-react-app': '7.1.0-alpha.7', + '@storybook/preset-html-webpack': '7.1.0-alpha.7', + '@storybook/preset-preact-webpack': '7.1.0-alpha.7', + '@storybook/preset-react-webpack': '7.1.0-alpha.7', + '@storybook/preset-server-webpack': '7.1.0-alpha.7', + '@storybook/preset-svelte-webpack': '7.1.0-alpha.7', + '@storybook/preset-vue-webpack': '7.1.0-alpha.7', + '@storybook/preset-vue3-webpack': '7.1.0-alpha.7', + '@storybook/preset-web-components-webpack': '7.1.0-alpha.7', + '@storybook/preview': '7.1.0-alpha.7', + '@storybook/preview-api': '7.1.0-alpha.7', + '@storybook/preview-web': '7.1.0-alpha.7', + '@storybook/react': '7.1.0-alpha.7', + '@storybook/react-dom-shim': '7.1.0-alpha.7', + '@storybook/react-vite': '7.1.0-alpha.7', + '@storybook/react-webpack5': '7.1.0-alpha.7', + '@storybook/router': '7.1.0-alpha.7', + '@storybook/server': '7.1.0-alpha.7', + '@storybook/server-webpack5': '7.1.0-alpha.7', + '@storybook/source-loader': '7.1.0-alpha.7', + '@storybook/store': '7.1.0-alpha.7', + '@storybook/svelte': '7.1.0-alpha.7', + '@storybook/svelte-vite': '7.1.0-alpha.7', + '@storybook/svelte-webpack5': '7.1.0-alpha.7', + '@storybook/sveltekit': '7.1.0-alpha.7', + '@storybook/telemetry': '7.1.0-alpha.7', + '@storybook/theming': '7.1.0-alpha.7', + '@storybook/types': '7.1.0-alpha.7', + '@storybook/vue': '7.1.0-alpha.7', + '@storybook/vue-vite': '7.1.0-alpha.7', + '@storybook/vue-webpack5': '7.1.0-alpha.7', + '@storybook/vue3': '7.1.0-alpha.7', + '@storybook/vue3-vite': '7.1.0-alpha.7', + '@storybook/vue3-webpack5': '7.1.0-alpha.7', + '@storybook/web-components': '7.1.0-alpha.7', + '@storybook/web-components-vite': '7.1.0-alpha.7', + '@storybook/web-components-webpack5': '7.1.0-alpha.7', + sb: '7.1.0-alpha.7', + storybook: '7.1.0-alpha.7', }; diff --git a/code/lib/client-api/package.json b/code/lib/client-api/package.json index e07a0d1df4aa..8db0280aae13 100644 --- a/code/lib/client-api/package.json +++ b/code/lib/client-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-api", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Client API", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" @@ -54,5 +54,5 @@ ], "shim": "@storybook/preview-api/dist/client-api" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/client-logger/package.json b/code/lib/client-logger/package.json index 6c096398b61d..fab2b8313055 100644 --- a/code/lib/client-logger/package.json +++ b/code/lib/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -56,5 +56,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 0eec4f0af5ad..8648439dd4ac 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" @@ -49,9 +49,9 @@ "@babel/preset-env": "~7.21.0", "@babel/types": "~7.21.2", "@storybook/csf": "^0.1.0", - "@storybook/csf-tools": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/csf-tools": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "cross-spawn": "^7.0.3", "globby": "^11.0.2", "jscodeshift": "^0.14.0", @@ -97,5 +97,5 @@ "cjs" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/core-client/package.json b/code/lib/core-client/package.json index d2be185033ea..9dc65c74faa3 100644 --- a/code/lib/core-client/package.json +++ b/code/lib/core-client/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-client", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -35,8 +35,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" @@ -47,5 +47,5 @@ ], "shim": "@storybook/preview-api/dist/core-client" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/core-common/package.json b/code/lib/core-common/package.json index 086db93f59e3..a10009c9870c 100644 --- a/code/lib/core-common/package.json +++ b/code/lib/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -43,8 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/node": "^16.0.0", "@types/pretty-hrtime": "^1.0.0", "chalk": "^4.1.0", @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/core-events/package.json b/code/lib/core-events/package.json index 6991131a311e..3f787552682d 100644 --- a/code/lib/core-events/package.json +++ b/code/lib/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Event names used in storybook core", "keywords": [ "storybook" @@ -53,5 +53,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/core-events/src/index.ts b/code/lib/core-events/src/index.ts index a995c2b8c80c..b65ebe7dbd07 100644 --- a/code/lib/core-events/src/index.ts +++ b/code/lib/core-events/src/index.ts @@ -25,6 +25,8 @@ enum events { PRELOAD_ENTRIES = 'preloadStories', // The story has been loaded into the store, we have parameters/args/etc STORY_PREPARED = 'storyPrepared', + // The a docs entry has been loaded into the store, we have parameters + DOCS_PREPARED = 'docsPrepared', // The next 6 events are emitted by the StoryRenderer when rendering the current story STORY_CHANGED = 'storyChanged', STORY_UNCHANGED = 'storyUnchanged', @@ -73,6 +75,7 @@ export const { CHANNEL_CREATED, CONFIG_ERROR, CURRENT_STORY_WAS_SET, + DOCS_PREPARED, DOCS_RENDERED, FORCE_RE_RENDER, FORCE_REMOUNT, diff --git a/code/lib/core-server/package.json b/code/lib/core-server/package.json index 141381eeb1ec..f41c7a3d4411 100644 --- a/code/lib/core-server/package.json +++ b/code/lib/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -58,18 +58,18 @@ "dependencies": { "@aw-web-design/x-default-browser": "1.4.88", "@discoveryjs/json-ext": "^0.5.3", - "@storybook/builder-manager": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/builder-manager": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/csf": "^0.1.0", - "@storybook/csf-tools": "7.1.0-alpha.5", + "@storybook/csf-tools": "7.1.0-alpha.7", "@storybook/docs-mdx": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/manager": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/telemetry": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/manager": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/telemetry": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/detect-port": "^1.3.0", "@types/node": "^16.0.0", "@types/node-fetch": "^2.5.7", @@ -120,5 +120,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts index 6011e1c0d1ce..dda39482fa5d 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.test.ts @@ -508,6 +508,7 @@ describe('StoryIndexGenerator', () => { "./src/B.stories.ts", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "B", @@ -566,6 +567,7 @@ describe('StoryIndexGenerator', () => { "./src/B.stories.ts", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "B", @@ -616,6 +618,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -727,6 +730,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -740,6 +744,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -762,6 +767,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "ComponentReference", @@ -773,6 +779,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -784,6 +791,7 @@ describe('StoryIndexGenerator', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "NoTitle", @@ -844,6 +852,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -857,6 +866,7 @@ describe('StoryIndexGenerator', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -879,6 +889,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "ComponentReference", @@ -890,6 +901,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -901,6 +913,7 @@ describe('StoryIndexGenerator', () => { "name": "Info", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "NoTitle", @@ -911,6 +924,62 @@ describe('StoryIndexGenerator', () => { } `); }); + + it('pulls the attached story file to the front of the list', async () => { + const generator = new StoryIndexGenerator( + [ + normalizeStoriesEntry('./src/A.stories.js', options), + normalizeStoriesEntry('./src/B.stories.ts', options), + normalizeStoriesEntry('./complex/TwoStoryReferences.mdx', options), + ], + options + ); + await generator.initialize(); + expect(await generator.getIndex()).toMatchInlineSnapshot(` + Object { + "entries": Object { + "a--story-one": Object { + "id": "a--story-one", + "importPath": "./src/A.stories.js", + "name": "Story One", + "tags": Array [ + "story-tag", + "story", + ], + "title": "A", + "type": "story", + }, + "b--story-one": Object { + "id": "b--story-one", + "importPath": "./src/B.stories.ts", + "name": "Story One", + "tags": Array [ + "autodocs", + "story", + ], + "title": "B", + "type": "story", + }, + "b--twostoryreferences": Object { + "id": "b--twostoryreferences", + "importPath": "./complex/TwoStoryReferences.mdx", + "name": "TwoStoryReferences", + "storiesImports": Array [ + "./src/B.stories.ts", + "./src/A.stories.js", + ], + "tags": Array [ + "attached-mdx", + "docs", + ], + "title": "B", + "type": "docs", + }, + }, + "v": 4, + } + `); + }); }); describe('errors', () => { diff --git a/code/lib/core-server/src/utils/StoryIndexGenerator.ts b/code/lib/core-server/src/utils/StoryIndexGenerator.ts index d80c705ca752..7043c39bc991 100644 --- a/code/lib/core-server/src/utils/StoryIndexGenerator.ts +++ b/code/lib/core-server/src/utils/StoryIndexGenerator.ts @@ -325,6 +325,10 @@ export class StoryIndexGenerator { // are invalidated.f const dependencies = this.findDependencies(absoluteImports); + // To ensure the `` import is always first in the list, we'll bring the dependency + // that contains it to the front of the list. + let sortedDependencies = dependencies; + // Also, if `result.of` is set, it means that we're using the `` syntax, // so find the `title` defined the file that `meta` points to. let csfEntry: StoryIndexEntry; @@ -342,6 +346,8 @@ export class StoryIndexGenerator { csfEntry = first; } } + + sortedDependencies = [dep, ...dependencies.filter((d) => d !== dep)]; }); if (!csfEntry) @@ -372,9 +378,9 @@ export class StoryIndexGenerator { title, name, importPath, - storiesImports: dependencies.map((dep) => dep.entries[0].importPath), + storiesImports: sortedDependencies.map((dep) => dep.entries[0].importPath), type: 'docs', - tags: [...(result.tags || []), 'docs'], + tags: [...(result.tags || []), csfEntry ? 'attached-mdx' : 'unattached-mdx', 'docs'], }; return docsEntry; } catch (err) { diff --git a/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx b/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx new file mode 100644 index 000000000000..c70caf598e6d --- /dev/null +++ b/code/lib/core-server/src/utils/__mockdata__/complex/TwoStoryReferences.mdx @@ -0,0 +1,9 @@ +{/* References AStories first, but is attached to B */} +import * as AStories from '../src/A.stories'; +import * as BStories from '../src/B.stories'; + + + +# This file references two story files + +It is important that B.stories is the first listed in `storiesImports` (so we can tell what it is attached to) diff --git a/code/lib/core-server/src/utils/stories-json.test.ts b/code/lib/core-server/src/utils/stories-json.test.ts index bbc0e920c8d1..a36c0bc5c46d 100644 --- a/code/lib/core-server/src/utils/stories-json.test.ts +++ b/code/lib/core-server/src/utils/stories-json.test.ts @@ -126,6 +126,7 @@ describe('useStoriesJson', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -139,6 +140,7 @@ describe('useStoriesJson', () => { "./src/A.stories.js", ], "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -183,6 +185,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/ComponentReference", @@ -194,6 +197,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/NoTitle", @@ -205,6 +209,7 @@ describe('useStoriesJson', () => { "name": "docs", "storiesImports": Array [], "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", @@ -304,6 +309,7 @@ describe('useStoriesJson', () => { ], "story": "MetaOf", "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -323,6 +329,7 @@ describe('useStoriesJson', () => { ], "story": "Second Docs", "tags": Array [ + "attached-mdx", "docs", ], "title": "A", @@ -391,6 +398,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/ComponentReference", @@ -408,6 +416,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/NoTitle", @@ -425,6 +434,7 @@ describe('useStoriesJson', () => { "storiesImports": Array [], "story": "docs", "tags": Array [ + "unattached-mdx", "docs", ], "title": "docs2/Yabbadabbadooo", diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 5da0a8930514..602485bf4485 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" @@ -43,9 +43,9 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/node": "^16.0.0", "ts-dedent": "^2.0.0" }, @@ -62,5 +62,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 5b50b76f1ffd..6296669835e3 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/csf-tools": "7.1.0-alpha.5", + "@storybook/csf-tools": "7.1.0-alpha.7", "unplugin": "^0.10.2" }, "devDependencies": { @@ -64,5 +64,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/csf-tools/package.json b/code/lib/csf-tools/package.json index 08dabea2707d..8b41a5309201 100644 --- a/code/lib/csf-tools/package.json +++ b/code/lib/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" @@ -46,7 +46,7 @@ "@babel/traverse": "~7.21.2", "@babel/types": "~7.21.2", "@storybook/csf": "^0.1.0", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/types": "7.1.0-alpha.7", "fs-extra": "^11.1.0", "recast": "^0.23.1", "ts-dedent": "^2.0.0" @@ -68,5 +68,5 @@ "cjs" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/docs-tools/package.json b/code/lib/docs-tools/package.json index 71a299dc550b..6f3d1fec706b 100644 --- a/code/lib/docs-tools/package.json +++ b/code/lib/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" @@ -43,15 +43,15 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@babel/core": "^7.12.10", - "@storybook/core-common": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/core-common": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/doctrine": "^0.0.3", "doctrine": "^3.0.0", "lodash": "^4.17.21" }, "devDependencies": { + "@babel/core": "^7.12.10", "jest-specific-snapshot": "^7.0.0", "require-from-string": "^2.0.2", "typescript": "~4.9.3" @@ -64,5 +64,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 91f3030c3731..fadc2c05ffc3 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -43,11 +43,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/preview-api": "7.1.0-alpha.7" }, "devDependencies": { "typescript": "~4.9.3" @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/manager-api-shim/package.json b/code/lib/manager-api-shim/package.json index 0577b85105e2..78e8a97ff645 100644 --- a/code/lib/manager-api-shim/package.json +++ b/code/lib/manager-api-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/api", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Manager API (facade)", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/manager-api": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/manager-api": "7.1.0-alpha.7" }, "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0", @@ -66,5 +66,5 @@ ], "shim": "@storybook/manager-api" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/manager-api/package.json b/code/lib/manager-api/package.json index ba8edcf7da32..dfed774aa0a3 100644 --- a/code/lib/manager-api/package.json +++ b/code/lib/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" @@ -42,14 +42,14 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/router": "7.1.0-alpha.5", - "@storybook/theming": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/router": "7.1.0-alpha.7", + "@storybook/theming": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "dequal": "^2.0.2", "lodash": "^4.17.21", "memoizerific": "^1.11.3", @@ -78,5 +78,5 @@ "./src/index.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/manager-api/src/lib/stories.ts b/code/lib/manager-api/src/lib/stories.ts index 5b5f3d3b7191..51823a7cfa6b 100644 --- a/code/lib/manager-api/src/lib/stories.ts +++ b/code/lib/manager-api/src/lib/stories.ts @@ -261,7 +261,7 @@ export const transformStoryIndexToStoriesHash = ( depth: paths.length, parent: paths[paths.length - 1], renderLabel, - ...(item.type !== 'docs' && { prepared: !!item.parameters }), + prepared: !!item.parameters, // deprecated fields kind: item.title, diff --git a/code/lib/manager-api/src/modules/stories.ts b/code/lib/manager-api/src/modules/stories.ts index 16abb3a14a7f..0d8b7b87659c 100644 --- a/code/lib/manager-api/src/modules/stories.ts +++ b/code/lib/manager-api/src/modules/stories.ts @@ -15,6 +15,9 @@ import type { StoryIndex, API_LoadedRefData, API_IndexHash, + StoryPreparedPayload, + DocsPreparedPayload, + API_DocsEntry, } from '@storybook/types'; import { PRELOAD_ENTRIES, @@ -31,6 +34,7 @@ import { CONFIG_ERROR, CURRENT_STORY_WAS_SET, STORY_MISSING, + DOCS_PREPARED, } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; @@ -54,7 +58,10 @@ type Direction = -1 | 1; type ParameterName = string; type ViewMode = 'story' | 'info' | 'settings' | string | undefined; -type StoryUpdate = Pick; +type StoryUpdate = Partial< + Pick +>; +type DocsUpdate = Partial>; export interface SubState extends API_LoadedRefData { storyId: StoryId; @@ -93,6 +100,7 @@ export interface SubAPI { ): StoryId; fetchIndex: () => Promise; updateStory: (storyId: StoryId, update: StoryUpdate, ref?: API_ComposedRef) => Promise; + updateDocs: (storyId: StoryId, update: DocsUpdate, ref?: API_ComposedRef) => Promise; setPreviewInitialized: (ref?: ComposedRef) => Promise; } @@ -157,7 +165,7 @@ export const init: ModuleFn = ({ : storyIdOrCombo; const data = api.getData(storyId, refId); - if (data?.type === 'story') { + if (['story', 'docs'].includes(data?.type)) { const { parameters } = data; if (parameters) { @@ -370,6 +378,27 @@ export const init: ModuleFn = ({ await fullAPI.updateRef(refId, { index }); } }, + updateDocs: async ( + docsId: StoryId, + update: DocsUpdate, + ref?: API_ComposedRef + ): Promise => { + if (!ref) { + const { index } = store.getState(); + index[docsId] = { + ...index[docsId], + ...update, + } as API_DocsEntry; + await store.setState({ index }); + } else { + const { id: refId, index } = ref; + index[docsId] = { + ...index[docsId], + ...update, + } as API_DocsEntry; + await fullAPI.updateRef(refId, { index }); + } + }, setPreviewInitialized: async (ref?: ComposedRef): Promise => { if (!ref) { store.setState({ previewInitialized: true }); @@ -428,7 +457,7 @@ export const init: ModuleFn = ({ } }); - fullAPI.on(STORY_PREPARED, function handler({ id, ...update }) { + fullAPI.on(STORY_PREPARED, function handler({ id, ...update }: StoryPreparedPayload) { const { ref, sourceType } = getEventMetadata(this, fullAPI); fullAPI.updateStory(id, { ...update, prepared: true }, ref); @@ -458,6 +487,11 @@ export const init: ModuleFn = ({ } }); + fullAPI.on(DOCS_PREPARED, function handler({ id, ...update }: DocsPreparedPayload) { + const { ref } = getEventMetadata(this, fullAPI); + fullAPI.updateStory(id, { ...update, prepared: true }, ref); + }); + fullAPI.on(SET_INDEX, function handler(index: API_PreparedStoryIndex) { const { ref } = getEventMetadata(this, fullAPI); diff --git a/code/lib/manager-api/src/tests/stories.test.ts b/code/lib/manager-api/src/tests/stories.test.ts index 60aa2a16e5e2..fc73f4598113 100644 --- a/code/lib/manager-api/src/tests/stories.test.ts +++ b/code/lib/manager-api/src/tests/stories.test.ts @@ -48,6 +48,14 @@ jest.mock('@storybook/global', () => ({ const getEventMetadataMock = getEventMetadata as ReturnType; const mockEntries: StoryIndex['entries'] = { + 'component-a--docs': { + type: 'docs', + id: 'component-a--docs', + title: 'Component A', + name: 'Docs', + importPath: './path/to/component-a.ts', + storiesImports: [], + }, 'component-a--story-1': { type: 'story', id: 'component-a--story-1', @@ -139,6 +147,7 @@ describe('stories API', () => { // We need exact key ordering, even if in theory JS doesn't guarantee it expect(Object.keys(index)).toEqual([ 'component-a', + 'component-a--docs', 'component-a--story-1', 'component-a--story-2', 'component-b', @@ -147,7 +156,17 @@ describe('stories API', () => { expect(index['component-a']).toMatchObject({ type: 'component', id: 'component-a', - children: ['component-a--story-1', 'component-a--story-2'], + children: ['component-a--docs', 'component-a--story-1', 'component-a--story-2'], + }); + + expect(index['component-a--docs']).toMatchObject({ + type: 'docs', + id: 'component-a--docs', + parent: 'component-a', + title: 'Component A', + name: 'Docs', + storiesImports: [], + prepared: false, }); expect(index['component-a--story-1']).toMatchObject({ @@ -232,6 +251,7 @@ describe('stories API', () => { // We need exact key ordering, even if in theory JS doesn't guarantee it expect(Object.keys(index)).toEqual([ 'component-a', + 'component-a--docs', 'component-a--story-1', 'component-a--story-2', 'component-b', @@ -1424,6 +1444,37 @@ describe('stories API', () => { }); }); + describe('DOCS_PREPARED', () => { + it('prepares the docs entry', async () => { + const navigate = jest.fn(); + const store = createMockStore(); + const fullAPI = Object.assign(new EventEmitter(), { + setStories: jest.fn(), + setOptions: jest.fn(), + }); + + const { api, init } = initStoriesAndSetState({ store, navigate, provider, fullAPI } as any); + Object.assign(fullAPI, api); + + await init(); + fullAPI.emit(STORY_PREPARED, { + id: 'component-a--docs', + parameters: { a: 'b' }, + }); + + const { index } = store.getState(); + expect(index['component-a--docs']).toMatchObject({ + type: 'docs', + id: 'component-a--docs', + parent: 'component-a', + title: 'Component A', + name: 'Docs', + prepared: true, + parameters: { a: 'b' }, + }); + }); + }); + describe('CONFIG_ERROR', () => { it('sets previewInitialized to true, local', async () => { const navigate = jest.fn(); diff --git a/code/lib/manager-api/src/version.ts b/code/lib/manager-api/src/version.ts index 5a8ed19a7bc1..f1f93cfbe0f1 100644 --- a/code/lib/manager-api/src/version.ts +++ b/code/lib/manager-api/src/version.ts @@ -1 +1 @@ -export const version = '7.1.0-alpha.5'; +export const version = '7.1.0-alpha.7'; diff --git a/code/lib/node-logger/package.json b/code/lib/node-logger/package.json index 90517fdc3257..fd9b8df5353a 100644 --- a/code/lib/node-logger/package.json +++ b/code/lib/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -60,5 +60,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/postinstall/package.json b/code/lib/postinstall/package.json index 8158fbcbd117..00f16b558e3f 100644 --- a/code/lib/postinstall/package.json +++ b/code/lib/postinstall/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/postinstall", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook addons postinstall utilities", "keywords": [ "api", @@ -57,5 +57,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/preview-api/package.json b/code/lib/preview-api/package.json index 3b0b67ee4797..57942b8c4047 100644 --- a/code/lib/preview-api/package.json +++ b/code/lib/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -67,13 +67,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.5", - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", + "@storybook/channel-postmessage": "7.1.0-alpha.7", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", "@storybook/csf": "^0.1.0", "@storybook/global": "^5.0.0", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/types": "7.1.0-alpha.7", "@types/qs": "^6.9.5", "dequal": "^2.0.2", "lodash": "^4.17.21", @@ -85,7 +85,7 @@ }, "devDependencies": { "@jest/globals": "^26.6.2", - "@storybook/core-common": "7.1.0-alpha.5", + "@storybook/core-common": "7.1.0-alpha.7", "ansi-to-html": "^0.6.11", "react": "^16.14.0", "slash": "^5.0.0" @@ -103,5 +103,5 @@ "./src/store.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts index 5b6cbbaa0894..e136fc63b260 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.mockdata.ts @@ -32,6 +32,9 @@ export const componentTwoExports = { default: { title: 'Component Two' }, c: { args: { foo: 'c' } }, }; +export const attachedDocsExports = { + default: jest.fn(), +}; export const unattachedDocsExports = { default: jest.fn(), }; @@ -49,6 +52,7 @@ export const importFn: jest.Mocked = jest.fn( async (path: string) => ({ './src/ComponentOne.stories.js': componentOneExports, + './src/ComponentOne.mdx': attachedDocsExports, './src/ComponentTwo.stories.js': componentTwoExports, './src/Introduction.mdx': unattachedDocsExports, './src/ExtraComponentOne.stories.js': extraComponentOneExports, @@ -80,7 +84,16 @@ export const storyIndex: StoryIndex = { name: 'Docs', importPath: './src/ComponentOne.stories.js', storiesImports: ['./src/ExtraComponentOne.stories.js'], - tags: ['autodocs'], + tags: ['autodocs', 'docs'], + }, + 'component-one--attached-docs': { + type: 'docs', + id: 'component-one--attached-docs', + title: 'Component One', + name: 'Attached Docs', + importPath: './src/ComponentOne.mdx', + storiesImports: ['./src/ComponentOne.stories.js'], + tags: ['attached-mdx', 'docs'], }, 'component-one--a': { type: 'story', @@ -110,7 +123,7 @@ export const storyIndex: StoryIndex = { name: 'Docs', importPath: './src/ComponentTwo.stories.js', storiesImports: [], - tags: ['autodocs'], + tags: ['autodocs', 'docs'], }, 'component-two--c': { type: 'story', @@ -126,6 +139,7 @@ export const storyIndex: StoryIndex = { name: 'Docs', importPath: './src/Introduction.mdx', storiesImports: ['./src/ComponentTwo.stories.js'], + tags: ['unattached-mdx', 'docs'], }, }, }; diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts index 7f2c39c6dcd6..1a0188c1e55e 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWeb.test.ts @@ -28,6 +28,7 @@ import { STORY_UNCHANGED, UPDATE_GLOBALS, UPDATE_STORY_ARGS, + DOCS_PREPARED, } from '@storybook/core-events'; import { logger } from '@storybook/client-logger'; import type { Renderer, ModuleImportFn, ProjectAnnotations } from '@storybook/types'; @@ -652,6 +653,19 @@ describe('PreviewWeb', () => { }); describe('CSF docs entries', () => { + it('emits DOCS_PREPARED', async () => { + document.location.search = '?id=component-one--docs'; + await createAndRenderPreview(); + + expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_PREPARED, { + id: 'component-one--docs', + parameters: { + docs: expect.any(Object), + fileName: './src/ComponentOne.stories.js', + }, + }); + }); + it('always renders in docs viewMode', async () => { document.location.search = '?id=component-one--docs'; await createAndRenderPreview(); @@ -709,7 +723,7 @@ describe('PreviewWeb', () => { }); }); - describe('mdx docs entries', () => { + describe('MDX docs entries', () => { it('always renders in docs viewMode', async () => { document.location.search = '?id=introduction--docs'; await createAndRenderPreview(); @@ -717,6 +731,33 @@ describe('PreviewWeb', () => { expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_RENDERED, 'introduction--docs'); }); + it('emits DOCS_PREPARED', async () => { + document.location.search = '?id=introduction--docs'; + await createAndRenderPreview(); + + expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_PREPARED, { + id: 'introduction--docs', + parameters: { + docs: expect.any(Object), + }, + }); + }); + + describe('attached', () => { + it('emits DOCS_PREPARED with component parameters', async () => { + document.location.search = '?id=component-one--attached-docs'; + await createAndRenderPreview(); + + expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_PREPARED, { + id: 'component-one--attached-docs', + parameters: { + docs: expect.any(Object), + fileName: './src/ComponentOne.stories.js', + }, + }); + }); + }); + it('calls view.prepareForDocs', async () => { document.location.search = '?id=component-one--docs&viewMode=docs'; const preview = await createAndRenderPreview(); @@ -2261,6 +2302,26 @@ describe('PreviewWeb', () => { }); describe('when changing from story viewMode to docs', () => { + it('emits DOCS_PREPARED', async () => { + document.location.search = '?id=component-one--a'; + await createAndRenderPreview(); + + mockChannel.emit.mockClear(); + emitter.emit(SET_CURRENT_STORY, { + storyId: 'component-one--docs', + viewMode: 'docs', + }); + await waitForSetCurrentStory(); + + expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_PREPARED, { + id: 'component-one--docs', + parameters: { + docs: expect.any(Object), + fileName: './src/ComponentOne.stories.js', + }, + }); + }); + it('calls renderToCanvass teardown', async () => { document.location.search = '?id=component-one--a'; await createAndRenderPreview(); @@ -3182,6 +3243,24 @@ describe('PreviewWeb', () => { return path === './src/Introduction.mdx' ? newUnattachedDocsExports : importFn(path); }); + it('emits DOCS_PREPARED', async () => { + document.location.search = '?id=introduction--docs'; + const preview = await createAndRenderPreview(); + + mockChannel.emit.mockClear(); + docsRenderer.render.mockClear(); + + preview.onStoriesChanged({ importFn: newImportFn }); + await waitForRender(); + + expect(mockChannel.emit).toHaveBeenCalledWith(DOCS_PREPARED, { + id: 'introduction--docs', + parameters: { + docs: expect.any(Object), + }, + }); + }); + it('renders with the generated docs parameters', async () => { document.location.search = '?id=introduction--docs&viewMode=docs'; const preview = await createAndRenderPreview(); diff --git a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx index af62eeea6e88..269d05bf1e39 100644 --- a/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx +++ b/code/lib/preview-api/src/modules/preview-web/PreviewWithSelection.tsx @@ -2,6 +2,7 @@ import { dedent } from 'ts-dedent'; import { global } from '@storybook/global'; import { CURRENT_STORY_WAS_SET, + DOCS_PREPARED, PRELOAD_ENTRIES, PREVIEW_KEYDOWN, SET_CURRENT_STORY, @@ -50,6 +51,7 @@ function focusInInput(event: Event) { export const AUTODOCS_TAG = 'autodocs'; export const STORIES_MDX_TAG = 'stories-mdx'; +export const ATTACHED_MDX_TAG = 'attached-mdx'; /** Was this docs entry generated by a .mdx file? (see discussion below) */ export function isMdxEntry({ tags }: DocsIndexEntry) { @@ -67,6 +69,18 @@ function isStoryRender( return r.type === 'story'; } +function isDocsRender( + r: PossibleRender +): r is CsfDocsRender | MdxDocsRender { + return r.type === 'docs'; +} + +function isCsfDocsRender( + r: PossibleRender +): r is CsfDocsRender { + return isDocsRender(r) && r.subtype === 'csf'; +} + export class PreviewWithSelection extends Preview { currentSelection?: Selection; @@ -89,12 +103,6 @@ export class PreviewWithSelection extends Preview) { - return super - .initializeWithProjectAnnotations(projectAnnotations) - .then(() => this.setInitialGlobals()); - } - async setInitialGlobals() { if (!this.storyStore.globals) throw new Error(`Cannot call setInitialGlobals before initialization`); @@ -392,6 +400,22 @@ export class PreviewWithSelection extends Preview { const projectAnnotations = { render: jest.fn() }; const store = { componentStoriesFromCSFFile: () => [story], + preparedMetaFromCSFFile: () => ({ prepareMeta: 'preparedMeta' }), projectAnnotations, } as unknown as StoryStore; const context = new DocsContext(channel, store, renderStoryToElement, [csfFile]); @@ -179,6 +180,7 @@ describe('resolveOf', () => { const projectAnnotations = { render: jest.fn() }; const store = { componentStoriesFromCSFFile: () => [story], + preparedMetaFromCSFFile: () => ({ prepareMeta: 'preparedMeta' }), projectAnnotations, } as unknown as StoryStore; const context = new DocsContext(channel, store, renderStoryToElement, [csfFile]); diff --git a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts index 071d2ccf1d59..6796913596bd 100644 --- a/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts +++ b/code/lib/preview-api/src/modules/preview-web/docs-context/DocsContext.ts @@ -14,7 +14,6 @@ import type { Channel } from '@storybook/channels'; import dedent from 'ts-dedent'; import type { StoryStore } from '../../store'; -import { prepareMeta } from '../../store'; import type { DocsContextProps } from './DocsContextProps'; export class DocsContext implements DocsContextProps { @@ -181,11 +180,7 @@ export class DocsContext implements DocsContextProps case 'meta': { return { ...resolved, - preparedMeta: prepareMeta( - resolved.csfFile.meta, - this.projectAnnotations, - resolved.csfFile.moduleExports.default - ), + preparedMeta: this.store.preparedMetaFromCSFFile({ csfFile: resolved.csfFile }), }; } case 'story': diff --git a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts index 9ea79bc43533..a4fbb47b9e01 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/CsfDocsRender.ts @@ -31,6 +31,8 @@ import { DocsContext } from '../docs-context/DocsContext'; export class CsfDocsRender implements Render { public readonly type: RenderType = 'docs'; + public readonly subtype = 'csf'; + public readonly id: StoryId; public story?: PreparedStory; @@ -45,7 +47,7 @@ export class CsfDocsRender implements Render[]; + public csfFiles?: CSFFile[]; constructor( protected channel: Channel, diff --git a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts index 8486a9eb0ea5..ca81e01d438a 100644 --- a/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts +++ b/code/lib/preview-api/src/modules/preview-web/render/MdxDocsRender.ts @@ -29,6 +29,8 @@ import { DocsContext } from '../docs-context/DocsContext'; export class MdxDocsRender implements Render { public readonly type: RenderType = 'docs'; + public readonly subtype = 'mdx'; + public readonly id: StoryId; private exports?: ModuleExports; @@ -43,7 +45,7 @@ export class MdxDocsRender implements Render[]; + public csfFiles?: CSFFile[]; constructor( protected channel: Channel, diff --git a/code/lib/preview-api/src/modules/store/StoryStore.ts b/code/lib/preview-api/src/modules/store/StoryStore.ts index 20b13bbff693..e007c06c1a43 100644 --- a/code/lib/preview-api/src/modules/store/StoryStore.ts +++ b/code/lib/preview-api/src/modules/store/StoryStore.ts @@ -20,6 +20,7 @@ import type { StoryContextForEnhancers, StoryContextForLoaders, StoryId, + PreparedMeta, } from '@storybook/types'; import mapValues from 'lodash/mapValues.js'; import pick from 'lodash/pick.js'; @@ -29,7 +30,7 @@ import { HooksContext } from '../addons'; import { StoryIndexStore } from './StoryIndexStore'; import { ArgsStore } from './ArgsStore'; import { GlobalsStore } from './GlobalsStore'; -import { processCSFFile, prepareStory, normalizeProjectAnnotations } from './csf'; +import { processCSFFile, prepareStory, prepareMeta, normalizeProjectAnnotations } from './csf'; const CSF_CACHE_SIZE = 1000; const STORY_CACHE_SIZE = 10000; @@ -52,6 +53,8 @@ export class StoryStore { processCSFFileWithCache: typeof processCSFFile; + prepareMetaWithCache: typeof prepareMeta; + prepareStoryWithCache: typeof prepareStory; initializationPromise: SynchronousPromise; @@ -67,6 +70,7 @@ export class StoryStore { // 1. For performance // 2. To ensure that when the same story is prepared with the same inputs you get the same output this.processCSFFileWithCache = memoize(CSF_CACHE_SIZE)(processCSFFile) as typeof processCSFFile; + this.prepareMetaWithCache = memoize(CSF_CACHE_SIZE)(prepareMeta) as typeof prepareMeta; this.prepareStoryWithCache = memoize(STORY_CACHE_SIZE)(prepareStory) as typeof prepareStory; // We cannot call `loadStory()` until we've been initialized properly. But we can wait for it. @@ -190,6 +194,18 @@ export class StoryStore { ); } + preparedMetaFromCSFFile({ csfFile }: { csfFile: CSFFile }): PreparedMeta { + if (!this.projectAnnotations) throw new Error(`storyFromCSFFile called before initialization`); + + const componentAnnotations = csfFile.meta; + + return this.prepareMetaWithCache( + componentAnnotations, + this.projectAnnotations, + csfFile.moduleExports.default + ); + } + // Load the CSF file for a story and prepare the story from it and the project annotations. async loadStory({ storyId }: { storyId: StoryId }): Promise> { await this.initializationPromise; diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts index f05d826fb8f8..4cf8f51a3860 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.test.ts @@ -724,10 +724,12 @@ describe('prepareMeta', () => { undecoratedStoryFn, playFunction, prepareContext, + // eslint-disable-next-line @typescript-eslint/naming-convention + parameters: { __isArgsStory, ...parameters }, ...expectedPreparedMeta } = preparedStory; - expect(preparedMeta).toMatchObject(expectedPreparedMeta); - expect(Object.keys(preparedMeta)).toHaveLength(Object.keys(expectedPreparedMeta).length); + expect(preparedMeta).toMatchObject({ ...expectedPreparedMeta, parameters }); + expect(Object.keys(preparedMeta)).toHaveLength(Object.keys(expectedPreparedMeta).length + 1); }); }); diff --git a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts index 6370ebb4ffe8..e66161209323 100644 --- a/code/lib/preview-api/src/modules/store/csf/prepareStory.ts +++ b/code/lib/preview-api/src/modules/store/csf/prepareStory.ts @@ -169,8 +169,6 @@ function preparePartialAnnotations( // anything at render time. The assumption is that as we don't load all the stories at once, this // will have a limited cost. If this proves misguided, we can refactor it. - const id = storyAnnotations?.id || componentAnnotations.id; - const tags = [...(storyAnnotations?.tags || componentAnnotations.tags || []), 'story']; const parameters: Parameters = combineParameters( @@ -182,24 +180,26 @@ function preparePartialAnnotations( // Currently it is only possible to set these globally const { argTypesEnhancers = [], argsEnhancers = [] } = projectAnnotations; - // The render function on annotations *has* to be an `ArgsStoryFn`, so when we normalize - // CSFv1/2, we use a new field called `userStoryFn` so we know that it can be a LegacyStoryFn - const render = - storyAnnotations?.userStoryFn || - storyAnnotations?.render || - componentAnnotations.render || - projectAnnotations.render; - - if (!render) throw new Error(`No render function available for id '${id}'`); const passedArgTypes: StrictArgTypes = combineParameters( projectAnnotations.argTypes, componentAnnotations.argTypes, storyAnnotations?.argTypes ) as StrictArgTypes; - const { passArgsFirst = true } = parameters; - // eslint-disable-next-line no-underscore-dangle - parameters.__isArgsStory = passArgsFirst && render.length > 0; + if (storyAnnotations) { + // The render function on annotations *has* to be an `ArgsStoryFn`, so when we normalize + // CSFv1/2, we use a new field called `userStoryFn` so we know that it can be a LegacyStoryFn + const render = + storyAnnotations?.userStoryFn || + storyAnnotations?.render || + componentAnnotations.render || + projectAnnotations.render; + + const { passArgsFirst = true } = parameters; + + // eslint-disable-next-line no-underscore-dangle + parameters.__isArgsStory = passArgsFirst && render && render.length > 0; + } // Pull out args[X] into initialArgs for argTypes enhancers const passedArgs: Args = { diff --git a/code/lib/preview-web/package.json b/code/lib/preview-web/package.json index 783ce665f4b5..3f702df244cd 100644 --- a/code/lib/preview-web/package.json +++ b/code/lib/preview-web/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-web", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" @@ -54,5 +54,5 @@ ], "shim": "@storybook/preview-api/dist/preview-web" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/preview/package.json b/code/lib/preview/package.json index 8cbbaf4691fb..ccbc6eec3a54 100644 --- a/code/lib/preview/package.json +++ b/code/lib/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -57,12 +57,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "devDependencies": { - "@storybook/channel-postmessage": "7.1.0-alpha.5", - "@storybook/channel-websocket": "7.1.0-alpha.5", - "@storybook/channels": "7.1.0-alpha.5", - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5", + "@storybook/channel-postmessage": "7.1.0-alpha.7", + "@storybook/channel-websocket": "7.1.0-alpha.7", + "@storybook/channels": "7.1.0-alpha.7", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7", "typescript": "~4.9.3" }, "publishConfig": { @@ -74,5 +74,5 @@ "./src/globals.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 401d4d605114..2884c5b4468d 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -54,7 +54,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "devDependencies": { - "@storybook/types": "7.1.0-alpha.5", + "@storybook/types": "7.1.0-alpha.7", "typescript": "~4.9.3" }, "peerDependencies": { @@ -71,5 +71,5 @@ "./src/react-18.tsx" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/router/package.json b/code/lib/router/package.json index 29e5b0d9b971..7da56fd387a2 100644 --- a/code/lib/router/package.json +++ b/code/lib/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Core Storybook Router", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", "memoizerific": "^1.11.3", "qs": "^6.10.0" }, @@ -74,5 +74,5 @@ "./src/utils.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index e996ea732b54..7e50a40d16d2 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Source loader", "keywords": [ "lib", @@ -45,7 +45,7 @@ }, "dependencies": { "@storybook/csf": "^0.1.0", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/types": "7.1.0-alpha.7", "estraverse": "^5.2.0", "lodash": "^4.17.21", "prettier": "^2.8.0" @@ -67,5 +67,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/store/package.json b/code/lib/store/package.json index 09e752f54ca9..708c999d86d9 100644 --- a/code/lib/store/package.json +++ b/code/lib/store/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/store", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "", "keywords": [ "storybook" @@ -42,8 +42,8 @@ "prep": "../../../scripts/prepare/facade.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/preview-api": "7.1.0-alpha.5" + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/preview-api": "7.1.0-alpha.7" }, "publishConfig": { "access": "public" @@ -55,5 +55,5 @@ "platform": "node", "shim": "@storybook/preview-api/dist/store" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/store/template/stories/args.stories.ts b/code/lib/store/template/stories/args.stories.ts index e1e6eb7104f4..7c80ddb679ec 100644 --- a/code/lib/store/template/stories/args.stories.ts +++ b/code/lib/store/template/stories/args.stories.ts @@ -70,13 +70,13 @@ export const Events = { parameters: { argNames: ['test'] }, play: async ({ canvasElement, id }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; + await channel.emit(RESET_STORY_ARGS, { storyId: id }); + await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve)); + await within(canvasElement).findByText(/initial/); await channel.emit(UPDATE_STORY_ARGS, { storyId: id, updatedArgs: { test: 'updated' } }); - await within(canvasElement).findByText(/updated/); - - await channel.emit(RESET_STORY_ARGS, { storyId: id }); await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve)); - await within(canvasElement).findByText(/initial/); + await within(canvasElement).findByText(/updated/); }, }; diff --git a/code/lib/store/template/stories/globals.stories.ts b/code/lib/store/template/stories/globals.stories.ts index 216551d9fb5b..625c14829e9e 100644 --- a/code/lib/store/template/stories/globals.stories.ts +++ b/code/lib/store/template/stories/globals.stories.ts @@ -29,6 +29,7 @@ export const Events = { ], play: async ({ canvasElement }: PlayFunctionContext) => { const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; + await channel.emit('updateGlobals', { globals: { foo: 'fooValue' } }); await within(canvasElement).findByText('fooValue'); await channel.emit('updateGlobals', { globals: { foo: 'updated' } }); diff --git a/code/lib/telemetry/package.json b/code/lib/telemetry/package.json index dc961bfba4f3..80400919ee6a 100644 --- a/code/lib/telemetry/package.json +++ b/code/lib/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" @@ -43,8 +43,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-common": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-common": "7.1.0-alpha.7", "chalk": "^4.1.0", "detect-package-manager": "^2.0.1", "fetch-retry": "^5.0.2", @@ -65,5 +65,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/theming/package.json b/code/lib/theming/package.json index c37c26e1979c..770b5d34782a 100644 --- a/code/lib/theming/package.json +++ b/code/lib/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Core Storybook Components", "keywords": [ "storybook" @@ -49,7 +49,7 @@ }, "dependencies": { "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", - "@storybook/client-logger": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", "memoizerific": "^1.11.3" }, @@ -80,5 +80,5 @@ ], "post": "./scripts/fix-theme-type-export.ts" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/types/package.json b/code/lib/types/package.json index 59ad4f8d9ed8..ffa41cb469e9 100644 --- a/code/lib/types/package.json +++ b/code/lib/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Core Storybook TS Types", "keywords": [ "storybook" @@ -43,7 +43,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/channels": "7.1.0-alpha.5", + "@storybook/channels": "7.1.0-alpha.7", "@types/babel__core": "^7.0.0", "@types/express": "^4.7.0", "file-system-cache": "^2.0.0" @@ -61,5 +61,5 @@ "./src/index.ts" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/lib/types/src/modules/api-stories.ts b/code/lib/types/src/modules/api-stories.ts index 26999b6f22a6..7cfd32b22284 100644 --- a/code/lib/types/src/modules/api-stories.ts +++ b/code/lib/types/src/modules/api-stories.ts @@ -64,6 +64,11 @@ export interface API_DocsEntry extends API_BaseEntry { /** @deprecated */ kind: ComponentTitle; importPath: Path; + tags: Tag[]; + prepared: boolean; + parameters?: { + [parameterName: string]: any; + }; /** @deprecated */ isRoot: false; diff --git a/code/lib/types/src/modules/channelApi.ts b/code/lib/types/src/modules/channelApi.ts index 2020fb0409ad..0fe35baf824a 100644 --- a/code/lib/types/src/modules/channelApi.ts +++ b/code/lib/types/src/modules/channelApi.ts @@ -55,3 +55,16 @@ export interface SetGlobalsPayload { globals: Globals; globalTypes: GlobalTypes; } + +export interface StoryPreparedPayload { + id: StoryId; + parameters: Parameters; + argTypes: ArgTypes; + initialArgs: Args; + args: Args; +} + +export interface DocsPreparedPayload { + id: StoryId; + parameters: Parameters; +} diff --git a/code/package.json b/code/package.json index ea676cad527c..65b7ed4d9eb4 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", @@ -78,13 +78,13 @@ "defaults" ], "resolutions": { - "@playwright/test": "1.31.1", + "@playwright/test": "1.32.3", "@typescript-eslint/eslint-plugin": "^5.45.0", "@typescript-eslint/experimental-utils": "^5.45.0", "@typescript-eslint/parser": "^5.45.0", "esbuild": "^0.17.0", "eslint": "^8.28.0", - "playwright": "1.31.1", + "playwright": "1.32.3", "serialize-javascript": "^3.1.0" }, "dependencies": { @@ -99,7 +99,7 @@ "@nrwl/cli": "^15.4.5", "@nrwl/nx-cloud": "^15.0.2", "@nrwl/workspace": "^15.4.5", - "@playwright/test": "1.31.1", + "@playwright/test": "1.32.3", "@storybook/addon-a11y": "workspace:*", "@storybook/addon-actions": "workspace:*", "@storybook/addon-backgrounds": "workspace:*", @@ -245,7 +245,7 @@ "lodash": "^4.17.21", "node-gyp": "^8.4.0", "nx": "^15.4.5", - "playwright": "1.31.1", + "playwright": "1.32.3", "prettier": "2.8.0", "process": "^0.11.10", "raf": "^3.4.1", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 2c7de1a07e21..d5f497d52366 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Create React App preset", "keywords": [ "storybook" @@ -50,14 +50,14 @@ "dependencies": { "@pmmmwh/react-refresh-webpack-plugin": "^0.5.1", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/types": "7.1.0-alpha.7", "@types/babel__core": "^7.1.7", "babel-plugin-react-docgen": "^4.1.0", "pnp-webpack-plugin": "^1.7.0", "semver": "^7.3.5" }, "devDependencies": { - "@storybook/node-logger": "7.1.0-alpha.5", + "@storybook/node-logger": "7.1.0-alpha.7", "@types/node": "^16.0.0", "typescript": "~4.9.3" }, @@ -76,5 +76,5 @@ "cjs" ] }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index da209f4beb17..44c65cc7d7b4 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -48,7 +48,7 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", "@types/node": "^16.0.0", "html-loader": "^3.1.0", "webpack": "5" @@ -71,5 +71,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index cc2a20e4ea04..df9b9885dcb4 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" @@ -50,7 +50,7 @@ "dependencies": { "@babel/plugin-transform-react-jsx": "^7.21.0", "@babel/preset-typescript": "^7.21.0", - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", "@types/node": "^16.0.0" }, "devDependencies": { @@ -73,5 +73,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index a79bd0b465f3..1bf880861040 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" @@ -66,10 +66,10 @@ "@babel/preset-flow": "^7.18.6", "@babel/preset-react": "^7.18.6", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.5", - "@storybook/core-webpack": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", - "@storybook/react": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", + "@storybook/react": "7.1.0-alpha.7", "@storybook/react-docgen-typescript-plugin": "1.0.6--canary.9.0c3f3b7.0", "@types/node": "^16.0.0", "@types/semver": "^7.3.4", @@ -111,5 +111,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index c51d04390400..d3374c95618f 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -53,10 +53,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-server": "7.1.0-alpha.5", - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/core-server": "7.1.0-alpha.7", + "@storybook/core-webpack": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/server": "7.1.0-alpha.5", + "@storybook/server": "7.1.0-alpha.7", "@types/node": "^16.0.0", "safe-identifier": "^0.4.1", "ts-dedent": "^2.0.0", @@ -81,5 +81,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 4a8e88250f56..ffc08b76f73f 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -63,8 +63,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.5", - "@storybook/node-logger": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", + "@storybook/node-logger": "7.1.0-alpha.7", "sveltedoc-parser": "^4.2.1", "ts-dedent": "^2.0.0" }, @@ -93,5 +93,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/vue-webpack/package.json b/code/presets/vue-webpack/package.json index 1ea5e2d15a67..5444d22d89ca 100644 --- a/code/presets/vue-webpack/package.json +++ b/code/presets/vue-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue: Develop Vue Component in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.44.23", @@ -95,5 +95,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index a214fc25c818..429d7c5a6ee6 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" @@ -58,8 +58,8 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-webpack": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@types/node": "^16.0.0", "ts-loader": "^9.2.8", "vue-docgen-api": "^4.46.0", @@ -92,5 +92,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/presets/web-components-webpack/package.json b/code/presets/web-components-webpack/package.json index 584f7d5f28d2..7c9d75978a3f 100644 --- a/code/presets/web-components-webpack/package.json +++ b/code/presets/web-components-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-web-components-webpack", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", @@ -54,7 +54,7 @@ "@babel/plugin-syntax-dynamic-import": "^7.8.3", "@babel/plugin-syntax-import-meta": "^7.10.4", "@babel/preset-env": "^7.20.2", - "@storybook/core-webpack": "7.1.0-alpha.5", + "@storybook/core-webpack": "7.1.0-alpha.7", "@types/node": "^16.0.0", "babel-loader": "^7.0.0 || ^8.0.0 || ^9.0.0", "babel-plugin-bundled-import-meta": "^0.3.1" @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index d89438556995..8be606223068 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook HTML renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/html/src/index.ts b/code/renderers/html/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/html/src/index.ts +++ b/code/renderers/html/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index a3b26dc260ab..cc539b9a0e07 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Preact renderer", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.5", + "@storybook/core-client": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -74,5 +74,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/preact/src/index.ts b/code/renderers/preact/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/preact/src/index.ts +++ b/code/renderers/preact/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 9802d6fa6b92..10087335b10c 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook React renderer", "keywords": [ "storybook" @@ -53,13 +53,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/react-dom-shim": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/react-dom-shim": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "@types/escodegen": "^0.0.6", "@types/estree": "^0.0.51", "@types/node": "^16.0.0", @@ -106,5 +106,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/react/src/index.ts b/code/renderers/react/src/index.ts index 68dae468dcc1..ae032e4f06b8 100644 --- a/code/renderers/react/src/index.ts +++ b/code/renderers/react/src/index.ts @@ -8,4 +8,4 @@ export * from './public-types'; export * from './testing-api'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index d0e6acbe4a1c..ff630f74eec6 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Server renderer", "keywords": [ "storybook" @@ -48,10 +48,10 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.5", + "@storybook/core-client": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0" }, "devDependencies": { @@ -70,5 +70,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/server/src/index.ts b/code/renderers/server/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/server/src/index.ts +++ b/code/renderers/server/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 045ea9987bfe..8ff47e69107e 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Svelte renderer", "keywords": [ "storybook" @@ -52,13 +52,13 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/core-events": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/core-events": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "sveltedoc-parser": "^4.2.1", "type-fest": "2.19.0" }, @@ -84,5 +84,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/svelte/src/index.ts b/code/renderers/svelte/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/svelte/src/index.ts +++ b/code/renderers/svelte/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/vue/package.json b/code/renderers/vue/package.json index 2f7c2cecf7ff..011143214abe 100644 --- a/code/renderers/vue/package.json +++ b/code/renderers/vue/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Vue renderer", "keywords": [ "storybook" @@ -48,12 +48,12 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/client-logger": "7.1.0-alpha.5", - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/client-logger": "7.1.0-alpha.7", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, @@ -86,5 +86,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/vue/src/index.ts b/code/renderers/vue/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/vue/src/index.ts +++ b/code/renderers/vue/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 184bb05f012c..316b252858e8 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "7.1.0-alpha.5", + "version": "7.1.0-alpha.7", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" @@ -48,11 +48,11 @@ "prep": "../../../scripts/prepare/bundle.ts" }, "dependencies": { - "@storybook/core-client": "7.1.0-alpha.5", - "@storybook/docs-tools": "7.1.0-alpha.5", + "@storybook/core-client": "7.1.0-alpha.7", + "@storybook/docs-tools": "7.1.0-alpha.7", "@storybook/global": "^5.0.0", - "@storybook/preview-api": "7.1.0-alpha.5", - "@storybook/types": "7.1.0-alpha.5", + "@storybook/preview-api": "7.1.0-alpha.7", + "@storybook/types": "7.1.0-alpha.7", "ts-dedent": "^2.0.0", "type-fest": "2.19.0" }, @@ -80,5 +80,5 @@ ], "platform": "browser" }, - "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1" + "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc" } diff --git a/code/renderers/vue3/src/decorateStory.ts b/code/renderers/vue3/src/decorateStory.ts index e2a56ec7204b..3955eba07644 100644 --- a/code/renderers/vue3/src/decorateStory.ts +++ b/code/renderers/vue3/src/decorateStory.ts @@ -1,8 +1,9 @@ import type { ConcreteComponent, Component, ComponentOptions } from 'vue'; import { h } from 'vue'; -import type { DecoratorFunction, StoryContext, LegacyStoryFn } from '@storybook/types'; +import type { DecoratorFunction, StoryContext, LegacyStoryFn, Args } from '@storybook/types'; import { sanitizeStoryContextUpdate } from '@storybook/preview-api'; - +// eslint-disable-next-line import/no-extraneous-dependencies +import { looseEqual } from '@vue/shared'; import type { VueRenderer } from './types'; /* @@ -11,6 +12,7 @@ import type { VueRenderer } from './types'; The concept is taken from Vue 3's `defineComponent` but changed from creating a `setup` method on the ComponentOptions so end-users don't need to specify a "thunk" as a decorator. */ + function normalizeFunctionalComponent(options: ConcreteComponent): ComponentOptions { return typeof options === 'function' ? { render: options, name: options.name } : options; } @@ -20,11 +22,10 @@ function prepare( innerStory?: ConcreteComponent ): Component | null { const story = rawStory as ComponentOptions; - - if (story == null) { + if (story === null) { return null; } - + if (typeof story === 'function') return story; // we don't need to wrap a functional component nor to convert it to a component options if (innerStory) { return { // Normalize so we can always spread an object @@ -44,6 +45,7 @@ export function decorateStory( storyFn: LegacyStoryFn, decorators: DecoratorFunction[] ): LegacyStoryFn { + let updatedArgs: Args; return decorators.reduce( (decorated: LegacyStoryFn, decorator) => (context: StoryContext) => { let story: VueRenderer['storyResult'] | undefined; @@ -53,18 +55,21 @@ export function decorateStory( ...context, ...sanitizeStoryContextUpdate(update), }); + + if (update && update.args && !looseEqual(update.args, context.args)) + updatedArgs ??= update.args; return story; }, context); - if (!story) { - story = decorated(context); - } + context.args = updatedArgs ?? context.args; + if (!story) story = decorated(context); if (decoratedStory === story) { return story; } - return prepare(decoratedStory, h(story, context.args)) as VueRenderer['storyResult']; + const innerStory = () => h(story!, context.args); + return prepare(decoratedStory, innerStory) as VueRenderer['storyResult']; }, (context) => prepare(storyFn(context)) as LegacyStoryFn ); diff --git a/code/renderers/vue3/src/index.ts b/code/renderers/vue3/src/index.ts index 9d5afe665e9a..0c37ede8d826 100644 --- a/code/renderers/vue3/src/index.ts +++ b/code/renderers/vue3/src/index.ts @@ -6,4 +6,4 @@ export * from './public-api'; export * from './public-types'; // optimization: stop HMR propagation in webpack -module?.hot?.decline(); +if (typeof module !== 'undefined') module?.hot?.decline(); diff --git a/code/renderers/vue3/src/render.test.ts b/code/renderers/vue3/src/render.test.ts new file mode 100644 index 000000000000..d1d04cf40638 --- /dev/null +++ b/code/renderers/vue3/src/render.test.ts @@ -0,0 +1,89 @@ +import { expectTypeOf } from 'expect-type'; + +import { reactive } from 'vue'; +import { updateArgs } from './render'; + +describe('Render Story', () => { + test('update reactive Args updateArgs()', () => { + const reactiveArgs = reactive({ argFoo: 'foo', argBar: 'bar' }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ argFoo: string; argBar: string }>(); + + const newArgs = { argFoo: 'foo2', argBar: 'bar2' }; + updateArgs(reactiveArgs, newArgs); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ argFoo: string; argBar: string }>(); + expect(reactiveArgs).toEqual({ argFoo: 'foo2', argBar: 'bar2' }); + }); + + test('update reactive Args component inherit objectArg updateArgs()', () => { + const reactiveArgs = reactive({ objectArg: { argFoo: 'foo', argBar: 'bar' } }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>(); + + const newArgs = { argFoo: 'foo2', argBar: 'bar2' }; + updateArgs(reactiveArgs, newArgs); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string; argBar: string } }>(); + expect(reactiveArgs).toEqual({ + argFoo: 'foo2', + argBar: 'bar2', + }); + }); + + test('update reactive Args component inherit objectArg', () => { + const reactiveArgs = reactive({ objectArg: { argFoo: 'foo' } }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ objectArg: { argFoo: string } }>(); + + const newArgs = { argFoo: 'foo2', argBar: 'bar2' }; + updateArgs(reactiveArgs, newArgs); + expect(reactiveArgs).toEqual({ argFoo: 'foo2', argBar: 'bar2' }); + }); + + test('update reactive Args component 2 object args -> updateArgs()', () => { + const reactiveArgs = reactive({ + objectArg: { argFoo: 'foo' }, + objectArg2: { argBar: 'bar' }, + }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ + objectArg: { argFoo: string }; + objectArg2: { argBar: string }; + }>(); + + const newArgs = { argFoo: 'foo2', argBar: 'bar2' }; + updateArgs(reactiveArgs, newArgs); + + expect(reactiveArgs).toEqual({ + argFoo: 'foo2', + argBar: 'bar2', + }); + }); + + test('update reactive Args component object with object -> updateArgs()', () => { + const reactiveArgs = reactive({ + objectArg: { argFoo: 'foo' }, + }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ + objectArg: { argFoo: string }; + }>(); + + const newArgs = { objectArg: { argFoo: 'bar' } }; + updateArgs(reactiveArgs, newArgs); + + expect(reactiveArgs).toEqual({ objectArg: { argFoo: 'bar' } }); + }); + + test('update reactive Args component no arg with all args -> updateArgs()', () => { + const reactiveArgs = reactive({ objectArg: { argFoo: 'foo' } }); // get reference to reactiveArgs or create a new one; + expectTypeOf(reactiveArgs).toMatchTypeOf>(); + expectTypeOf(reactiveArgs).toEqualTypeOf<{ + objectArg: { argFoo: string }; + }>(); + + const newArgs = { objectArg: { argFoo: 'bar' } }; + updateArgs(reactiveArgs, newArgs); + + expect(reactiveArgs).toEqual({ objectArg: { argFoo: 'bar' } }); + }); +}); diff --git a/code/renderers/vue3/src/render.ts b/code/renderers/vue3/src/render.ts index 640fc54d4e52..9cb7973910ac 100644 --- a/code/renderers/vue3/src/render.ts +++ b/code/renderers/vue3/src/render.ts @@ -1,8 +1,18 @@ /* eslint-disable no-param-reassign */ -import { createApp, h, reactive } from 'vue'; +import type { ConcreteComponent } from 'vue'; +import { createApp, h, isReactive, isVNode, reactive } from 'vue'; import type { RenderContext, ArgsStoryFn } from '@storybook/types'; import type { Args, StoryContext } from '@storybook/csf'; -import type { StoryFnVueReturnType, VueRenderer } from './types'; + +import type { VueRenderer, StoryFnVueReturnType, StoryID } from './types'; + +const slotsMap = new Map< + StoryID, + { + component?: Omit, 'props'>; + reactiveSlots?: Args; + } +>(); export const render: ArgsStoryFn = (props, context) => { const { id, component: Component } = context; @@ -12,7 +22,7 @@ export const render: ArgsStoryFn = (props, context) => { ); } - return h(Component, props, getSlots(props, context)); + return h(Component, props, createOrUpdateSlots(context)); }; let setupFunction = (_app: any) => {}; @@ -21,66 +31,86 @@ export const setup = (fn: (app: any) => void) => { }; const map = new Map< - VueRenderer['canvasElement'], - { vueApp: ReturnType; reactiveArgs: any } + VueRenderer['canvasElement'] | StoryID, + { + vueApp: ReturnType; + reactiveArgs: Args; + reactiveSlots?: Args; + } >(); -const elementMap = new Map(); - export function renderToCanvas( - { storyFn, forceRemount, showMain, showException, storyContext }: RenderContext, + { storyFn, forceRemount, showMain, showException, storyContext, id }: RenderContext, canvasElement: VueRenderer['canvasElement'] ) { - // fetch the story with the updated context (with reactive args) - storyContext.args = reactive(storyContext.args); - const element: StoryFnVueReturnType = storyFn(); - elementMap.set(canvasElement, element); - - const props = (element as any).render?.().props; - const reactiveArgs = props ? reactive(props) : storyContext.args; - const existingApp = map.get(canvasElement); + + // if the story is already rendered and we are not forcing a remount, we just update the reactive args if (existingApp && !forceRemount) { - updateArgs(existingApp.reactiveArgs, reactiveArgs); + // normally storyFn should be call once only in setup function,but because the nature of react and how storybook rendering the decorators + // we need to call here to run the decorators again + // i may wrap each decorator in memoized function to avoid calling it if the args are not changed + const element = storyFn(); // call the story function to get the root element with all the decorators + const args = getArgs(element, storyContext); // get args in case they are altered by decorators otherwise use the args from the context + + updateArgs(existingApp.reactiveArgs, args); return () => { teardown(existingApp.vueApp, canvasElement); }; } - if (existingApp && forceRemount) teardown(existingApp.vueApp, canvasElement); - const storybookApp = createApp({ - render() { - const renderedElement: any = elementMap.get(canvasElement); - const current = renderedElement && renderedElement.template ? renderedElement : element; - map.set(canvasElement, { vueApp: storybookApp, reactiveArgs }); - return h(current, reactiveArgs); + // create vue app for the story + const vueApp = createApp({ + setup() { + storyContext.args = reactive(storyContext.args); + const rootElement = storyFn(); // call the story function to get the root element with all the decorators + const args = getArgs(rootElement, storyContext); // get args in case they are altered by decorators otherwise use the args from the context + const appState = { + vueApp, + reactiveArgs: reactive(args), + }; + map.set(canvasElement, appState); + + return () => { + return h(rootElement, appState.reactiveArgs); + }; }, }); - - storybookApp.config.errorHandler = (e: unknown) => showException(e as Error); - setupFunction(storybookApp); - storybookApp.mount(canvasElement); + vueApp.config.errorHandler = (e: unknown) => showException(e as Error); + setupFunction(vueApp); + vueApp.mount(canvasElement); showMain(); return () => { - teardown(storybookApp, canvasElement); + teardown(vueApp, canvasElement); }; } /** - * get the slots as functions to be rendered - * @param props + * generate slots for default story without render function template * @param context */ -function getSlots(props: Args, context: StoryContext) { +function generateSlots(context: StoryContext) { const { argTypes } = context; - const slots = Object.entries(props) + const slots = Object.entries(argTypes) .filter(([key, value]) => argTypes[key]?.table?.category === 'slots') - .map(([key, value]) => [key, typeof value === 'function' ? value : () => value]); + .map(([key, value]) => { + const slotValue = context.args[key]; + return [key, typeof slotValue === 'function' ? slotValue : () => slotValue]; + }); + + return reactive(Object.fromEntries(slots)); +} +/** + * get the args from the root element props if it is a vnode otherwise from the context + * @param element is the root element of the story + * @param storyContext is the story context + */ - return Object.fromEntries(slots); +function getArgs(element: StoryFnVueReturnType, storyContext: StoryContext) { + return element.props && isVNode(element) ? element.props : storyContext.args; } /** @@ -89,14 +119,27 @@ function getSlots(props: Args, context: StoryContext) { * @param nextArgs * @returns */ -function updateArgs(reactiveArgs: Args, nextArgs: Args) { - if (!nextArgs) return; - Object.keys(reactiveArgs).forEach((key) => { - delete reactiveArgs[key]; +export function updateArgs(reactiveArgs: Args, nextArgs: Args) { + if (Object.keys(nextArgs).length === 0) return; + const currentArgs = isReactive(reactiveArgs) ? reactiveArgs : reactive(reactiveArgs); + // delete all args in currentArgs that are not in nextArgs + Object.keys(currentArgs).forEach((key) => { + if (!(key in nextArgs)) { + delete currentArgs[key]; + } }); - Object.assign(reactiveArgs, nextArgs); + // update currentArgs with nextArgs + Object.assign(currentArgs, nextArgs); } +/** + * unmount the vue app + * @param storybookApp + * @param canvasElement + * @returns void + * @private + * */ + function teardown( storybookApp: ReturnType, canvasElement: VueRenderer['canvasElement'] @@ -104,3 +147,15 @@ function teardown( storybookApp?.unmount(); if (map.has(canvasElement)) map.delete(canvasElement); } + +function createOrUpdateSlots(context: StoryContext) { + const { id: storyID, component } = context; + const slots = generateSlots(context); + if (slotsMap.has(storyID)) { + const app = slotsMap.get(storyID); + if (app?.reactiveSlots) updateArgs(app.reactiveSlots, slots); + return app?.reactiveSlots; + } + slotsMap.set(storyID, { component, reactiveSlots: slots }); + return slots; +} diff --git a/code/renderers/vue3/src/types.ts b/code/renderers/vue3/src/types.ts index 15809f9094e2..8526a6035165 100644 --- a/code/renderers/vue3/src/types.ts +++ b/code/renderers/vue3/src/types.ts @@ -3,6 +3,8 @@ import type { ConcreteComponent } from 'vue'; export type { RenderContext } from '@storybook/types'; +export type StoryID = string; + export interface ShowErrorArgs { title: string; description: string; diff --git a/code/renderers/vue3/template/stories/BaseLayout.vue b/code/renderers/vue3/template/stories/BaseLayout.vue new file mode 100644 index 000000000000..b938d272dd2e --- /dev/null +++ b/code/renderers/vue3/template/stories/BaseLayout.vue @@ -0,0 +1,18 @@ + + diff --git a/code/renderers/vue3/template/stories/CustomRenderFunctionalComponent.stories.ts b/code/renderers/vue3/template/stories/CustomRenderFunctionalComponent.stories.ts new file mode 100644 index 000000000000..2e723ab01b98 --- /dev/null +++ b/code/renderers/vue3/template/stories/CustomRenderFunctionalComponent.stories.ts @@ -0,0 +1,34 @@ +import type { Meta } from '@storybook/vue3'; +import { h } from 'vue'; +import Reactivity from './Reactivity.vue'; +import * as ReactiveDecorators from './ReactiveDecorators.stories'; + +const meta = { + ...ReactiveDecorators.default, + component: Reactivity, + // storybook render function is not a functional component. it returns a functional component or a component options + render: (args) => { + // create the slot contents as a functional components + const header = ({ title }: { title: string }) => h('h3', `${args.header} - Title: ${title}`); + const defaultSlot = () => h('p', `${args.default}`); + const footer = () => h('p', `${args.footer}`); + // vue render function is a functional components + return () => + h('div', [ + `Custom render uses a functional component, and passes slots to the component:`, + h(Reactivity, args, { header, default: defaultSlot, footer }), + ]); + }, +} satisfies Meta; + +export default meta; + +export { + NoDecorators, + DecoratorFunctionalComponent, + DecoratorFunctionalComponentArgsFromContext, + DecoratorFunctionalComponentArgsFromProps, + DecoratorComponentOptions, + DecoratorComponentOptionsArgsFromData, + DecoratorComponentOptionsArgsFromProps, +} from './ReactiveDecorators.stories'; diff --git a/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromData.stories.ts b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromData.stories.ts new file mode 100644 index 000000000000..75d25b464bff --- /dev/null +++ b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromData.stories.ts @@ -0,0 +1,47 @@ +import type { Meta } from '@storybook/vue3'; +import { defineComponent, shallowReactive } from 'vue'; +import Reactivity from './Reactivity.vue'; +import * as ReactiveDecorators from './ReactiveDecorators.stories'; + +// when you use custom render, you can use any vue api to create your story and garanti reactivity, otherwise i can ease kill the reactivity. +const state = shallowReactive<{ header: any; default: any; footer: any }>({ + header: '', + default: '', + footer: '', +}); // or reactive + +const meta = { + ...ReactiveDecorators.default, + component: Reactivity, + render: (args, { argTypes }) => { + state.header = args.header; + state.default = args.default; + state.footer = args.footer; + // return a component options + return defineComponent({ + data: () => ({ args, header: state.header, default: state.default, footer: state.footer }), + components: { + Reactivity, + }, + template: `
Custom render uses options api and binds args to data: + + + + + +
`, + }); + }, +} satisfies Meta; + +export default meta; + +export { + NoDecorators, + DecoratorFunctionalComponent, + DecoratorFunctionalComponentArgsFromContext, + DecoratorFunctionalComponentArgsFromProps, + DecoratorComponentOptions, + DecoratorComponentOptionsArgsFromData, + DecoratorComponentOptionsArgsFromProps, +} from './ReactiveDecorators.stories'; diff --git a/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromProps.stories.ts b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromProps.stories.ts new file mode 100644 index 000000000000..68c0ee37997b --- /dev/null +++ b/code/renderers/vue3/template/stories/CustomRenderOptionsArgsFromProps.stories.ts @@ -0,0 +1,33 @@ +import type { Meta } from '@storybook/vue3'; +import { defineComponent } from 'vue'; +import Reactivity from './Reactivity.vue'; +import * as ReactiveDecorators from './ReactiveDecorators.stories'; + +const meta = { + ...ReactiveDecorators.default, + component: Reactivity, + render: (args, { argTypes }) => { + return defineComponent({ + props: Object.keys(argTypes), + components: { Reactivity }, + template: `
Custom render uses options api and binds args to props: + + {{ $props.default }} + + +
`, + }); + }, +} satisfies Meta; + +export default meta; + +export { + NoDecorators, + DecoratorFunctionalComponent, + DecoratorFunctionalComponentArgsFromContext, + DecoratorFunctionalComponentArgsFromProps, + DecoratorComponentOptions, + DecoratorComponentOptionsArgsFromData, + DecoratorComponentOptionsArgsFromProps, +} from './ReactiveDecorators.stories'; diff --git a/code/renderers/vue3/template/stories/GlobalUsage.stories.js b/code/renderers/vue3/template/stories/GlobalUsage.stories.ts similarity index 95% rename from code/renderers/vue3/template/stories/GlobalUsage.stories.js rename to code/renderers/vue3/template/stories/GlobalUsage.stories.ts index 2ec0bef085bd..5e42b31674f7 100644 --- a/code/renderers/vue3/template/stories/GlobalUsage.stories.js +++ b/code/renderers/vue3/template/stories/GlobalUsage.stories.ts @@ -3,7 +3,7 @@ import GlobalUsage from './GlobalUsage.vue'; export default { component: GlobalUsage, argTypes: {}, - render: (args) => ({ + render: (args: any) => ({ // Components used in your story `template` are defined in the `components` object components: { GlobalUsage }, // The story's `args` need to be mapped into the template through the `setup()` method diff --git a/code/renderers/vue3/template/stories/MySlotComponent.vue b/code/renderers/vue3/template/stories/MySlotComponent.vue new file mode 100644 index 000000000000..effd47934152 --- /dev/null +++ b/code/renderers/vue3/template/stories/MySlotComponent.vue @@ -0,0 +1,12 @@ + + + diff --git a/code/renderers/vue3/template/stories/OverrideArgs.vue b/code/renderers/vue3/template/stories/OverrideArgs.vue index 3a16679ba850..708145d61038 100644 --- a/code/renderers/vue3/template/stories/OverrideArgs.vue +++ b/code/renderers/vue3/template/stories/OverrideArgs.vue @@ -5,8 +5,8 @@ - + + + diff --git a/code/renderers/vue3/template/stories/ScopedSlots.stories.ts b/code/renderers/vue3/template/stories/ScopedSlots.stories.ts new file mode 100644 index 000000000000..1d338dc24f9e --- /dev/null +++ b/code/renderers/vue3/template/stories/ScopedSlots.stories.ts @@ -0,0 +1,81 @@ +import { expect } from '@storybook/jest'; +import { global as globalThis } from '@storybook/global'; +import type { Channel } from '@storybook/channels'; +import { within } from '@storybook/testing-library'; +import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events'; + +import type { Meta, StoryObj } from '@storybook/vue3'; +import MySlotComponent from './MySlotComponent.vue'; + +declare global { + // eslint-disable-next-line no-var,vars-on-top,@typescript-eslint/naming-convention + var __STORYBOOK_ADDONS_CHANNEL__: Channel; +} + +const meta = { + component: MySlotComponent, + args: { + label: 'Storybook Day', + year: 2022, + default: ({ text, year }) => `${text}, ${year}`, + }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Basic: Story = { + // test that args are updated correctly in reactive mode + play: async ({ canvasElement, id }) => { + const channel = globalThis.__STORYBOOK_ADDONS_CHANNEL__; + const canvas = within(canvasElement); + + await channel.emit(RESET_STORY_ARGS, { storyId: id }); + await new Promise((resolve) => channel.once(STORY_ARGS_UPDATED, resolve)); + await expect(canvas.getByTestId('scoped-slot').innerText).toMatch( + 'Hello Storybook Day from the slot, 2022' + ); + + await channel.emit(UPDATE_STORY_ARGS, { + storyId: id, + updatedArgs: { + label: 'Storybook Day updated', + year: 2023, + }, + }); + await new Promise((resolve) => { + channel.once(STORY_ARGS_UPDATED, resolve); + }); + + await expect(canvas.getByTestId('scoped-slot').innerText).toMatch( + 'Hello Storybook Day updated from the slot, 2023' + ); + }, +}; + +export const CustomRender: Story = { + render: (args) => ({ + components: { MySlotComponent }, + setup() { + return { args }; + }, + template: ` + {{ slotProps.text }}, {{ slotProps.year }} + `, + }), + play: Basic.play, +}; + +export const CustomRenderUsingFunctionSlot: Story = { + render: (args: any) => ({ + components: { MySlotComponent }, + setup() { + return { args }; + }, + template: ` + {{args.default(slotProps)}} + `, + }), + play: Basic.play, +}; diff --git a/code/renderers/vue3/template/stories/decorators.stories.js b/code/renderers/vue3/template/stories/decorators.stories.js deleted file mode 100644 index 53d64ae0f076..000000000000 --- a/code/renderers/vue3/template/stories/decorators.stories.js +++ /dev/null @@ -1,66 +0,0 @@ -import { global as globalThis } from '@storybook/global'; -import { h } from 'vue'; - -const { Button, Pre } = globalThis.Components; - -export default { - component: Button, -}; - -export const ComponentTemplate = { - args: { label: 'With component' }, - decorators: [ - () => ({ - components: { - Pre, - }, - template: ` - 
-        
-      `,
-    }),
-  ],
-};
-
-export const SimpleTemplate = {
-  args: { label: 'With border' },
-  decorators: [
-    () => ({
-      template: `
-        

-          
-        

-        `,
-    }),
-  ],
-};
-
-export const VueWrapper = {
-  args: { label: 'With Vue wrapper' },
-  decorators: [
-    (storyFn) => {
-      // Call the `storyFn` to receive a component that Vue can render
-      const story = storyFn();
-      // Vue 3 "Functional" component as decorator
-      return () => {
-        return h('div', { style: 'border: 2px solid blue' }, h(story));
-      };
-    },
-  ],
-};
-
-export const DynamicWrapper = {
-  args: { label: 'With dynamic wrapper', primary: true },
-  argTypes: {
-    // Number type is detected, but we still want to constrain the range from 1-6
-    level: { control: { type: 'range', min: 1, max: 6 } },
-  },
-  decorators: [
-    (storyFn, { args }) => ({
-      template: `
`,
-      data() {
-        return { level: `${args.level}px` };
-      },
-    }),
-  ],
-};
diff --git a/code/renderers/vue3/template/stories/decorators.stories.ts b/code/renderers/vue3/template/stories/decorators.stories.ts
new file mode 100644
index 000000000000..fc771785a0f6
--- /dev/null
+++ b/code/renderers/vue3/template/stories/decorators.stories.ts
@@ -0,0 +1,84 @@
+import type { DecoratorFunction } from '@storybook/csf';
+import { global as globalThis } from '@storybook/global';
+import type { Meta, StoryObj, VueRenderer } from '@storybook/vue3';
+import { h } from 'vue';
+
+const { Button, Pre } = (globalThis as any).Components;
+
+const meta = {
+  component: Button,
+} satisfies Meta;
+
+export default meta;
+
+type Story = StoryObj;
+
+const ComponentTemplateWrapper = () => ({
+  components: {
+    Pre,
+  },
+  template: `
+    
+    
+  `,
+});
+
+const SimpleTemplateWrapper = () => ({
+  template: `
+    

+      
+    

+    `,
+});
+
+const VueWrapperWrapper: DecoratorFunction = (storyFn, context) => {
+  // Call the `storyFn` to receive a component that Vue can render
+  const story = storyFn();
+  // Vue 3 "Functional" component as decorator
+  return () => {
+    return h('div', { style: 'border: 5px solid blue' }, h(story, context.args));
+  };
+};
+
+const DynamicWrapperWrapper: DecoratorFunction = (storyFn, { args }) => ({
+  template: `
`,
+  computed: { level: () => `${args.level}px` },
+});
+
+export const ComponentTemplate: Story = {
+  args: { label: 'With component' },
+  decorators: [ComponentTemplateWrapper],
+};
+
+export const SimpleTemplate: Story = {
+  args: { label: 'With border' },
+  decorators: [SimpleTemplateWrapper],
+};
+
+export const VueWrapper: Story = {
+  args: { label: 'With Vue wrapper' },
+  decorators: [VueWrapperWrapper],
+};
+
+export const DynamicWrapper: Story = {
+  args: { label: 'With dynamic wrapper', primary: true },
+  argTypes: {
+    // Number type is detected, but we still want to constrain the range from 1-6
+    level: { control: { type: 'range', min: 1, max: 6 } },
+  },
+  decorators: [DynamicWrapperWrapper],
+};
+
+export const MultipleWrappers = {
+  args: { label: 'With multiple wrappers' },
+  argTypes: {
+    // Number type is detected, but we still want to constrain the range from 1-6
+    level: { control: { type: 'range', min: 1, max: 6 } },
+  },
+  decorators: [
+    ComponentTemplateWrapper,
+    SimpleTemplateWrapper,
+    VueWrapperWrapper,
+    DynamicWrapperWrapper,
+  ],
+};
diff --git a/code/renderers/vue3/tsconfig.json b/code/renderers/vue3/tsconfig.json
index a73aa28cbf3f..6063e7e89bd2 100644
--- a/code/renderers/vue3/tsconfig.json
+++ b/code/renderers/vue3/tsconfig.json
@@ -4,7 +4,8 @@
     "strict": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "allowJs": true
+    "allowJs": true,
+    "types": ["jest", "testing-library__jest-dom"]
   },
   "include": ["src/**/*", "src/**/*.vue", "template/**/*", "template/**/*.vue"]
 }
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index 7f55132043b8..effc8a4cc083 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/web-components",
-  "version": "7.1.0-alpha.5",
+  "version": "7.1.0-alpha.7",
   "description": "Storybook web-components renderer",
   "keywords": [
     "lit",
@@ -51,13 +51,13 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.5",
-    "@storybook/core-client": "7.1.0-alpha.5",
-    "@storybook/docs-tools": "7.1.0-alpha.5",
+    "@storybook/client-logger": "7.1.0-alpha.7",
+    "@storybook/core-client": "7.1.0-alpha.7",
+    "@storybook/docs-tools": "7.1.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.5",
-    "@storybook/preview-api": "7.1.0-alpha.5",
-    "@storybook/types": "7.1.0-alpha.5",
+    "@storybook/manager-api": "7.1.0-alpha.7",
+    "@storybook/preview-api": "7.1.0-alpha.7",
+    "@storybook/types": "7.1.0-alpha.7",
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
@@ -84,5 +84,5 @@
     ],
     "platform": "browser"
   },
-  "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1"
+  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
 }
diff --git a/code/renderers/web-components/src/index.ts b/code/renderers/web-components/src/index.ts
index 4234d00e0726..044e7875f24c 100644
--- a/code/renderers/web-components/src/index.ts
+++ b/code/renderers/web-components/src/index.ts
@@ -11,7 +11,7 @@ export * from './public-api';
 export * from './framework-api';
 
 // TODO: disable HMR and do full page loads because of customElements.define
-if (module && module.hot && module.hot.decline) {
+if (typeof module !== 'undefined' && module?.hot?.decline) {
   module.hot.decline();
 
   // forcing full reloads for customElements as elements can only be defined once per page
diff --git a/code/ui/blocks/package.json b/code/ui/blocks/package.json
index aefb256e84d7..9b770d3422a9 100644
--- a/code/ui/blocks/package.json
+++ b/code/ui/blocks/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/blocks",
-  "version": "7.1.0-alpha.5",
+  "version": "7.1.0-alpha.7",
   "description": "Storybook Doc Blocks",
   "keywords": [
     "storybook"
@@ -43,17 +43,17 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/channels": "7.1.0-alpha.5",
-    "@storybook/client-logger": "7.1.0-alpha.5",
-    "@storybook/components": "7.1.0-alpha.5",
-    "@storybook/core-events": "7.1.0-alpha.5",
+    "@storybook/channels": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.7",
+    "@storybook/components": "7.1.0-alpha.7",
+    "@storybook/core-events": "7.1.0-alpha.7",
     "@storybook/csf": "^0.1.0",
-    "@storybook/docs-tools": "7.1.0-alpha.5",
+    "@storybook/docs-tools": "7.1.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.5",
-    "@storybook/preview-api": "7.1.0-alpha.5",
-    "@storybook/theming": "7.1.0-alpha.5",
-    "@storybook/types": "7.1.0-alpha.5",
+    "@storybook/manager-api": "7.1.0-alpha.7",
+    "@storybook/preview-api": "7.1.0-alpha.7",
+    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/types": "7.1.0-alpha.7",
     "@types/lodash": "^4.14.167",
     "color-convert": "^2.0.1",
     "dequal": "^2.0.2",
@@ -67,7 +67,7 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "7.1.0-alpha.5",
+    "@storybook/addon-actions": "7.1.0-alpha.7",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {
@@ -82,5 +82,5 @@
       "./src/index.ts"
     ]
   },
-  "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1"
+  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
 }
diff --git a/code/ui/components/package.json b/code/ui/components/package.json
index 0cf3f24f339f..81f8fd751e7f 100644
--- a/code/ui/components/package.json
+++ b/code/ui/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "7.1.0-alpha.5",
+  "version": "7.1.0-alpha.7",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -48,11 +48,11 @@
     "prep": "../../../scripts/prepare/bundle.ts"
   },
   "dependencies": {
-    "@storybook/client-logger": "7.1.0-alpha.5",
+    "@storybook/client-logger": "7.1.0-alpha.7",
     "@storybook/csf": "^0.1.0",
     "@storybook/global": "^5.0.0",
-    "@storybook/theming": "7.1.0-alpha.5",
-    "@storybook/types": "7.1.0-alpha.5",
+    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/types": "7.1.0-alpha.7",
     "memoizerific": "^1.11.3",
     "use-resize-observer": "^9.1.0",
     "util-deprecate": "^1.0.2"
@@ -85,5 +85,5 @@
     ],
     "platform": "neutral"
   },
-  "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1"
+  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
 }
diff --git a/code/ui/manager/package.json b/code/ui/manager/package.json
index 6aaa24baa7b3..7435bed510b6 100644
--- a/code/ui/manager/package.json
+++ b/code/ui/manager/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/manager",
-  "version": "7.1.0-alpha.5",
+  "version": "7.1.0-alpha.7",
   "description": "Core Storybook UI",
   "keywords": [
     "storybook"
@@ -55,19 +55,19 @@
   },
   "devDependencies": {
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@storybook/addons": "7.1.0-alpha.5",
-    "@storybook/api": "7.1.0-alpha.5",
-    "@storybook/channel-postmessage": "7.1.0-alpha.5",
-    "@storybook/channel-websocket": "7.1.0-alpha.5",
-    "@storybook/channels": "7.1.0-alpha.5",
-    "@storybook/client-logger": "7.1.0-alpha.5",
-    "@storybook/components": "7.1.0-alpha.5",
-    "@storybook/core-events": "7.1.0-alpha.5",
+    "@storybook/addons": "7.1.0-alpha.7",
+    "@storybook/api": "7.1.0-alpha.7",
+    "@storybook/channel-postmessage": "7.1.0-alpha.7",
+    "@storybook/channel-websocket": "7.1.0-alpha.7",
+    "@storybook/channels": "7.1.0-alpha.7",
+    "@storybook/client-logger": "7.1.0-alpha.7",
+    "@storybook/components": "7.1.0-alpha.7",
+    "@storybook/core-events": "7.1.0-alpha.7",
     "@storybook/global": "^5.0.0",
-    "@storybook/manager-api": "7.1.0-alpha.5",
-    "@storybook/router": "7.1.0-alpha.5",
-    "@storybook/theming": "7.1.0-alpha.5",
-    "@storybook/types": "7.1.0-alpha.5",
+    "@storybook/manager-api": "7.1.0-alpha.7",
+    "@storybook/router": "7.1.0-alpha.7",
+    "@storybook/theming": "7.1.0-alpha.7",
+    "@storybook/types": "7.1.0-alpha.7",
     "@testing-library/react": "^11.2.2",
     "@types/semver": "^7.3.4",
     "copy-to-clipboard": "^3.3.1",
@@ -101,5 +101,5 @@
       "./src/runtime.ts"
     ]
   },
-  "gitHead": "8e835df7a5e177b96e4e55c2fc8d4a3ac4d47ec1"
+  "gitHead": "ab6f997ca1ff37b0711a7e12c12af8d76d85f0fc"
 }
diff --git a/code/ui/manager/src/globals/exports.ts b/code/ui/manager/src/globals/exports.ts
index c6319da64a47..f21d954b5191 100644
--- a/code/ui/manager/src/globals/exports.ts
+++ b/code/ui/manager/src/globals/exports.ts
@@ -118,6 +118,7 @@ export default {
     'CHANNEL_CREATED',
     'CONFIG_ERROR',
     'CURRENT_STORY_WAS_SET',
+    'DOCS_PREPARED',
     'DOCS_RENDERED',
     'FORCE_REMOUNT',
     'FORCE_RE_RENDER',
diff --git a/code/yarn.lock b/code/yarn.lock
index f5011f8288d8..a6b65b41483d 100644
--- a/code/yarn.lock
+++ b/code/yarn.lock
@@ -4727,19 +4727,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@playwright/test@npm:1.31.1":
-  version: 1.31.1
-  resolution: "@playwright/test@npm:1.31.1"
+"@playwright/test@npm:1.32.3":
+  version: 1.32.3
+  resolution: "@playwright/test@npm:1.32.3"
   dependencies:
     "@types/node": "*"
     fsevents: 2.3.2
-    playwright-core: 1.31.1
+    playwright-core: 1.32.3
   dependenciesMeta:
     fsevents:
       optional: true
   bin:
     playwright: cli.js
-  checksum: db0a4666d0399d26ff563346749e6a8c1f5b16a16a361ec0daa3b4956ea4cd9f44e8e18a48d48492d37409fba411980b383cb2d19c2dfffa7b14b7a8b3fee983
+  checksum: d09e4135c868b4067f45b8c297d02b0d8ddb8298657c942a06c72f3d9a3236af94586718dc7590693dbb31ea4b8fcceeb8a1e8811072f2add7d952c5c9129df3
   languageName: node
   linkType: hard
 
@@ -4977,16 +4977,16 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-a11y@workspace:addons/a11y"
   dependencies:
-    "@storybook/addon-highlight": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/addon-highlight": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@testing-library/react": ^11.2.2
     axe-core: ^4.2.0
     lodash: ^4.17.21
@@ -5004,18 +5004,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-actions@7.1.0-alpha.5, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
+"@storybook/addon-actions@7.1.0-alpha.7, @storybook/addon-actions@workspace:*, @storybook/addon-actions@workspace:addons/actions":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-actions@workspace:addons/actions"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/lodash": ^4.14.167
     dequal: ^2.0.2
     lodash: ^4.17.21
@@ -5037,18 +5037,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-backgrounds@7.1.0-alpha.5, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
+"@storybook/addon-backgrounds@7.1.0-alpha.7, @storybook/addon-backgrounds@workspace:*, @storybook/addon-backgrounds@workspace:addons/backgrounds":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-backgrounds@workspace:addons/backgrounds"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     memoizerific: ^1.11.3
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -5063,19 +5063,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-controls@7.1.0-alpha.5, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
+"@storybook/addon-controls@7.1.0-alpha.7, @storybook/addon-controls@workspace:*, @storybook/addon-controls@workspace:addons/controls":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-controls@workspace:addons/controls"
   dependencies:
-    "@storybook/blocks": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/blocks": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     lodash: ^4.17.21
     ts-dedent: ^2.0.0
   peerDependencies:
@@ -5089,27 +5089,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-docs@7.1.0-alpha.5, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
+"@storybook/addon-docs@7.1.0-alpha.7, @storybook/addon-docs@workspace:*, @storybook/addon-docs@workspace:addons/docs":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-docs@workspace:addons/docs"
   dependencies:
-    "@babel/core": ^7.20.2
-    "@babel/plugin-transform-react-jsx": ^7.19.0
     "@jest/transform": ^29.3.1
     "@mdx-js/react": ^2.1.5
-    "@storybook/blocks": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/csf-plugin": 7.1.0-alpha.5
-    "@storybook/csf-tools": 7.1.0-alpha.5
+    "@storybook/blocks": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/csf-plugin": 7.1.0-alpha.7
+    "@storybook/csf-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
     "@storybook/mdx2-csf": ^1.0.0
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/postinstall": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/react-dom-shim": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/postinstall": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/react-dom-shim": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     fs-extra: ^11.1.0
     react: ^16.14.0
     react-dom: ^16.8.0
@@ -5127,20 +5125,20 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-essentials@workspace:addons/essentials"
   dependencies:
-    "@storybook/addon-actions": 7.1.0-alpha.5
-    "@storybook/addon-backgrounds": 7.1.0-alpha.5
-    "@storybook/addon-controls": 7.1.0-alpha.5
-    "@storybook/addon-docs": 7.1.0-alpha.5
-    "@storybook/addon-highlight": 7.1.0-alpha.5
-    "@storybook/addon-measure": 7.1.0-alpha.5
-    "@storybook/addon-outline": 7.1.0-alpha.5
-    "@storybook/addon-toolbars": 7.1.0-alpha.5
-    "@storybook/addon-viewport": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/vue": 7.1.0-alpha.5
+    "@storybook/addon-actions": 7.1.0-alpha.7
+    "@storybook/addon-backgrounds": 7.1.0-alpha.7
+    "@storybook/addon-controls": 7.1.0-alpha.7
+    "@storybook/addon-docs": 7.1.0-alpha.7
+    "@storybook/addon-highlight": 7.1.0-alpha.7
+    "@storybook/addon-measure": 7.1.0-alpha.7
+    "@storybook/addon-outline": 7.1.0-alpha.7
+    "@storybook/addon-toolbars": 7.1.0-alpha.7
+    "@storybook/addon-viewport": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/vue": 7.1.0-alpha.7
     ts-dedent: ^2.0.0
     typescript: ^4.9.3
   peerDependencies:
@@ -5149,13 +5147,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-highlight@7.1.0-alpha.5, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
+"@storybook/addon-highlight@7.1.0-alpha.7, @storybook/addon-highlight@workspace:*, @storybook/addon-highlight@workspace:addons/highlight":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-highlight@workspace:addons/highlight"
   dependencies:
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
     "@types/webpack-env": ^1.16.0
     typescript: ~4.9.3
   languageName: unknown
@@ -5166,18 +5164,18 @@ __metadata:
   resolution: "@storybook/addon-interactions@workspace:addons/interactions"
   dependencies:
     "@devtools-ds/object-inspector": ^1.1.2
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/instrumenter": 7.1.0-alpha.5
+    "@storybook/instrumenter": 7.1.0-alpha.7
     "@storybook/jest": future
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
     "@storybook/testing-library": future
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     formik: ^2.2.9
     jest-mock: ^27.0.6
@@ -5199,13 +5197,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-jest@workspace:addons/jest"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
     react-resize-detector: ^7.1.2
     typescript: ~4.9.3
     upath: ^1.2.0
@@ -5224,14 +5222,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-links@workspace:addons/links"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/router": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/router": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     fs-extra: ^11.1.0
     prop-types: ^15.7.2
     ts-dedent: ^2.0.0
@@ -5251,24 +5249,24 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-mdx-gfm@workspace:addons/gfm"
   dependencies:
-    "@storybook/node-logger": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
     remark-gfm: ^3.0.1
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-measure@7.1.0-alpha.5, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
+"@storybook/addon-measure@7.1.0-alpha.7, @storybook/addon-measure@workspace:*, @storybook/addon-measure@workspace:addons/measure":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-measure@workspace:addons/measure"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5281,17 +5279,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-outline@7.1.0-alpha.5, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
+"@storybook/addon-outline@7.1.0-alpha.7, @storybook/addon-outline@workspace:*, @storybook/addon-outline@workspace:addons/outline":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-outline@workspace:addons/outline"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -5311,8 +5309,8 @@ __metadata:
   dependencies:
     "@axe-core/puppeteer": ^4.2.0
     "@storybook/csf": ^0.1.0
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/jest-image-snapshot": ^5.1.0
     "@types/puppeteer": ^5.4.0
     enzyme: ^3.11.0
@@ -5321,7 +5319,7 @@ __metadata:
     puppeteer: ^2.0.0 || ^3.0.0
     rimraf: ^3.0.2
   peerDependencies:
-    "@storybook/addon-storyshots": 7.1.0-alpha.5
+    "@storybook/addon-storyshots": 7.1.0-alpha.7
     puppeteer: ">=2.0.0"
   peerDependenciesMeta:
     puppeteer:
@@ -5337,18 +5335,18 @@ __metadata:
     "@angular/platform-browser-dynamic": ^13.3.6
     "@emotion/jest": ^11.8.0
     "@jest/transform": ^29.3.1
-    "@storybook/addon-docs": 7.1.0-alpha.5
-    "@storybook/angular": 7.1.0-alpha.5
+    "@storybook/addon-docs": 7.1.0-alpha.7
+    "@storybook/angular": 7.1.0-alpha.7
     "@storybook/babel-plugin-require-context-hook": 1.0.1
-    "@storybook/client-api": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/client-api": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/react": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
-    "@storybook/vue": 7.1.0-alpha.5
-    "@storybook/vue3": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/react": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
+    "@storybook/vue": 7.1.0-alpha.7
+    "@storybook/vue3": 7.1.0-alpha.7
     "@types/glob": ^7.1.3
     "@types/jest-specific-snapshot": ^0.5.6
     babel-loader: ^9.1.2
@@ -5422,13 +5420,13 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/addon-storysource@workspace:addons/storysource"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/router": 7.1.0-alpha.5
-    "@storybook/source-loader": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/router": 7.1.0-alpha.7
+    "@storybook/source-loader": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
     "@types/react": ^16.14.34
     "@types/react-syntax-highlighter": 11.0.5
     estraverse: ^5.2.0
@@ -5446,15 +5444,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-toolbars@7.1.0-alpha.5, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
+"@storybook/addon-toolbars@7.1.0-alpha.7, @storybook/addon-toolbars@workspace:*, @storybook/addon-toolbars@workspace:addons/toolbars":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-toolbars@workspace:addons/toolbars"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5467,17 +5465,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addon-viewport@7.1.0-alpha.5, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
+"@storybook/addon-viewport@7.1.0-alpha.7, @storybook/addon-viewport@workspace:*, @storybook/addon-viewport@workspace:addons/viewport":
   version: 0.0.0-use.local
   resolution: "@storybook/addon-viewport@workspace:addons/viewport"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
     memoizerific: ^1.11.3
     prop-types: ^15.7.2
     typescript: ~4.9.3
@@ -5492,20 +5490,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/addons@7.1.0-alpha.5, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
+"@storybook/addons@7.1.0-alpha.7, @storybook/addons@workspace:*, @storybook/addons@workspace:lib/addons":
   version: 0.0.0-use.local
   resolution: "@storybook/addons@workspace:lib/addons"
   dependencies:
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
   languageName: unknown
   linkType: soft
 
-"@storybook/angular@7.1.0-alpha.5, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
+"@storybook/angular@7.1.0-alpha.7, @storybook/angular@workspace:*, @storybook/angular@workspace:frameworks/angular":
   version: 0.0.0-use.local
   resolution: "@storybook/angular@workspace:frameworks/angular"
   dependencies:
@@ -5521,21 +5519,21 @@ __metadata:
     "@angular/forms": ^15.1.1
     "@angular/platform-browser": ^15.1.1
     "@angular/platform-browser-dynamic": ^15.1.1
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/cli": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/core-webpack": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/cli": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/core-webpack": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/telemetry": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/telemetry": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@types/react": ^16.14.34
     "@types/react-dom": ^16.9.14
@@ -5583,12 +5581,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/api@7.1.0-alpha.5, @storybook/api@workspace:*, @storybook/api@workspace:lib/manager-api-shim":
+"@storybook/api@7.1.0-alpha.7, @storybook/api@workspace:*, @storybook/api@workspace:lib/manager-api-shim":
   version: 0.0.0-use.local
   resolution: "@storybook/api@workspace:lib/manager-api-shim"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/manager-api": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/manager-api": 7.1.0-alpha.7
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
     react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -5632,22 +5630,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/blocks@7.1.0-alpha.5, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks":
+"@storybook/blocks@7.1.0-alpha.7, @storybook/blocks@workspace:*, @storybook/blocks@workspace:ui/blocks":
   version: 0.0.0-use.local
   resolution: "@storybook/blocks@workspace:ui/blocks"
   dependencies:
-    "@storybook/addon-actions": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/addon-actions": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/color-convert": ^2.0.0
     "@types/lodash": ^4.14.167
     color-convert: ^2.0.1
@@ -5666,14 +5664,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-manager@7.1.0-alpha.5, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:lib/builder-manager":
+"@storybook/builder-manager@7.1.0-alpha.7, @storybook/builder-manager@workspace:*, @storybook/builder-manager@workspace:lib/builder-manager":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-manager@workspace:lib/builder-manager"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": ^2.1.2
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/manager": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/manager": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
     "@types/ejs": ^3.1.1
     "@types/find-cache-dir": ^3.2.1
     "@yarnpkg/esbuild-plugin-pnp": ^3.0.0-rc.10
@@ -5691,20 +5689,20 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-vite@7.1.0-alpha.5, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:lib/builder-vite":
+"@storybook/builder-vite@7.1.0-alpha.7, @storybook/builder-vite@workspace:*, @storybook/builder-vite@workspace:lib/builder-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-vite@workspace:lib/builder-vite"
   dependencies:
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channel-websocket": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/csf-plugin": 7.1.0-alpha.5
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channel-websocket": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/csf-plugin": 7.1.0-alpha.7
     "@storybook/mdx2-csf": ^1.0.0
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/express": ^4.17.13
     "@types/node": ^16.0.0
     browser-assert: ^1.2.1
@@ -5735,30 +5733,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/builder-webpack5@7.1.0-alpha.5, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
+"@storybook/builder-webpack5@7.1.0-alpha.7, @storybook/builder-webpack5@workspace:*, @storybook/builder-webpack5@workspace:lib/builder-webpack5":
   version: 0.0.0-use.local
   resolution: "@storybook/builder-webpack5@workspace:lib/builder-webpack5"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/addons": 7.1.0-alpha.5
-    "@storybook/api": 7.1.0-alpha.5
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channel-websocket": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-api": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/addons": 7.1.0-alpha.7
+    "@storybook/api": 7.1.0-alpha.7
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channel-websocket": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-api": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/router": 7.1.0-alpha.5
-    "@storybook/store": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/router": 7.1.0-alpha.7
+    "@storybook/store": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@types/pretty-hrtime": ^1.0.0
     "@types/semver": ^7.3.4
@@ -5799,13 +5797,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/channel-postmessage@7.1.0-alpha.5, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
+"@storybook/channel-postmessage@7.1.0-alpha.7, @storybook/channel-postmessage@workspace:*, @storybook/channel-postmessage@workspace:lib/channel-postmessage":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-postmessage@workspace:lib/channel-postmessage"
   dependencies:
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
     qs: ^6.10.0
     telejson: ^7.0.3
@@ -5827,19 +5825,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/channel-websocket@7.1.0-alpha.5, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
+"@storybook/channel-websocket@7.1.0-alpha.7, @storybook/channel-websocket@workspace:*, @storybook/channel-websocket@workspace:lib/channel-websocket":
   version: 0.0.0-use.local
   resolution: "@storybook/channel-websocket@workspace:lib/channel-websocket"
   dependencies:
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
     telejson: ^7.0.3
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/channels@7.1.0-alpha.5, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
+"@storybook/channels@7.1.0-alpha.7, @storybook/channels@workspace:*, @storybook/channels@workspace:lib/channels":
   version: 0.0.0-use.local
   resolution: "@storybook/channels@workspace:lib/channels"
   dependencies:
@@ -5854,21 +5852,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/cli@7.1.0-alpha.5, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
+"@storybook/cli@7.1.0-alpha.7, @storybook/cli@workspace:*, @storybook/cli@workspace:lib/cli":
   version: 0.0.0-use.local
   resolution: "@storybook/cli@workspace:lib/cli"
   dependencies:
     "@babel/core": ^7.20.2
     "@babel/preset-env": ^7.20.2
     "@ndelangen/get-tarball": ^3.0.7
-    "@storybook/client-api": 7.1.0-alpha.5
-    "@storybook/codemod": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/csf-tools": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/telemetry": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/client-api": 7.1.0-alpha.7
+    "@storybook/codemod": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/csf-tools": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/telemetry": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/cross-spawn": ^6.0.2
     "@types/prompts": ^2.0.9
     "@types/puppeteer-core": ^2.1.0
@@ -5909,16 +5907,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/client-api@7.1.0-alpha.5, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
+"@storybook/client-api@7.1.0-alpha.7, @storybook/client-api@workspace:*, @storybook/client-api@workspace:lib/client-api":
   version: 0.0.0-use.local
   resolution: "@storybook/client-api@workspace:lib/client-api"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
   languageName: unknown
   linkType: soft
 
-"@storybook/client-logger@7.1.0-alpha.5, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
+"@storybook/client-logger@7.1.0-alpha.7, @storybook/client-logger@workspace:*, @storybook/client-logger@workspace:lib/client-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/client-logger@workspace:lib/client-logger"
   dependencies:
@@ -5936,7 +5934,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/codemod@7.1.0-alpha.5, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
+"@storybook/codemod@7.1.0-alpha.7, @storybook/codemod@workspace:*, @storybook/codemod@workspace:lib/codemod":
   version: 0.0.0-use.local
   resolution: "@storybook/codemod@workspace:lib/codemod"
   dependencies:
@@ -5944,9 +5942,9 @@ __metadata:
     "@babel/preset-env": ~7.21.0
     "@babel/types": ~7.21.2
     "@storybook/csf": ^0.1.0
-    "@storybook/csf-tools": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/csf-tools": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/jscodeshift": ^0.11.6
     ansi-regex: ^5.0.1
     cross-spawn: ^7.0.3
@@ -5971,16 +5969,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/components@7.1.0-alpha.5, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
+"@storybook/components@7.1.0-alpha.7, @storybook/components@workspace:*, @storybook/components@workspace:ui/components":
   version: 0.0.0-use.local
   resolution: "@storybook/components@workspace:ui/components"
   dependencies:
     "@popperjs/core": ^2.6.0
-    "@storybook/client-logger": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/overlayscrollbars": ^1.12.0
     "@types/react-syntax-highlighter": 11.0.5
     "@types/util-deprecate": ^1.0.0
@@ -6002,21 +6000,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-client@7.1.0-alpha.5, @storybook/core-client@workspace:*, @storybook/core-client@workspace:lib/core-client":
+"@storybook/core-client@7.1.0-alpha.7, @storybook/core-client@workspace:*, @storybook/core-client@workspace:lib/core-client":
   version: 0.0.0-use.local
   resolution: "@storybook/core-client@workspace:lib/core-client"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
   languageName: unknown
   linkType: soft
 
-"@storybook/core-common@7.1.0-alpha.5, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common":
+"@storybook/core-common@7.1.0-alpha.7, @storybook/core-common@workspace:*, @storybook/core-common@workspace:lib/core-common":
   version: 0.0.0-use.local
   resolution: "@storybook/core-common@workspace:lib/core-common"
   dependencies:
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/mock-fs": ^4.13.1
     "@types/node": ^16.0.0
     "@types/picomatch": ^2.3.0
@@ -6043,7 +6041,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-events@7.1.0-alpha.5, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
+"@storybook/core-events@7.1.0-alpha.7, @storybook/core-events@workspace:*, @storybook/core-events@workspace:lib/core-events":
   version: 0.0.0-use.local
   resolution: "@storybook/core-events@workspace:lib/core-events"
   dependencies:
@@ -6058,24 +6056,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/core-server@7.1.0-alpha.5, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
+"@storybook/core-server@7.1.0-alpha.7, @storybook/core-server@workspace:*, @storybook/core-server@workspace:lib/core-server":
   version: 0.0.0-use.local
   resolution: "@storybook/core-server@workspace:lib/core-server"
   dependencies:
     "@aw-web-design/x-default-browser": 1.4.88
     "@discoveryjs/json-ext": ^0.5.3
-    "@storybook/builder-manager": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/builder-manager": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
-    "@storybook/csf-tools": 7.1.0-alpha.5
+    "@storybook/csf-tools": 7.1.0-alpha.7
     "@storybook/docs-mdx": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/manager": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/telemetry": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/telemetry": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/compression": ^1.7.0
     "@types/detect-port": ^1.3.0
     "@types/ip": ^1.1.0
@@ -6115,13 +6113,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/core-webpack@7.1.0-alpha.5, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack":
+"@storybook/core-webpack@7.1.0-alpha.7, @storybook/core-webpack@workspace:*, @storybook/core-webpack@workspace:lib/core-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/core-webpack@workspace:lib/core-webpack"
   dependencies:
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -6129,17 +6127,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-plugin@7.1.0-alpha.5, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin":
+"@storybook/csf-plugin@7.1.0-alpha.7, @storybook/csf-plugin@workspace:*, @storybook/csf-plugin@workspace:lib/csf-plugin":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-plugin@workspace:lib/csf-plugin"
   dependencies:
-    "@storybook/csf-tools": 7.1.0-alpha.5
+    "@storybook/csf-tools": 7.1.0-alpha.7
     typescript: ~4.9.3
     unplugin: ^0.10.2
   languageName: unknown
   linkType: soft
 
-"@storybook/csf-tools@7.1.0-alpha.5, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
+"@storybook/csf-tools@7.1.0-alpha.7, @storybook/csf-tools@workspace:*, @storybook/csf-tools@workspace:lib/csf-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/csf-tools@workspace:lib/csf-tools"
   dependencies:
@@ -6148,7 +6146,7 @@ __metadata:
     "@babel/traverse": ~7.21.2
     "@babel/types": ~7.21.2
     "@storybook/csf": ^0.1.0
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/types": 7.1.0-alpha.7
     "@types/fs-extra": ^11.0.1
     "@types/js-yaml": ^3.12.6
     fs-extra: ^11.1.0
@@ -6184,14 +6182,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/docs-tools@7.1.0-alpha.5, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
+"@storybook/docs-tools@7.1.0-alpha.7, @storybook/docs-tools@workspace:*, @storybook/docs-tools@workspace:lib/docs-tools":
   version: 0.0.0-use.local
   resolution: "@storybook/docs-tools@workspace:lib/docs-tools"
   dependencies:
     "@babel/core": ^7.12.10
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/doctrine": ^0.0.3
     doctrine: ^3.0.0
     jest-specific-snapshot: ^7.0.0
@@ -6205,12 +6203,12 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/ember@workspace:frameworks/ember"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     ember-source: ~3.28.1
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -6254,15 +6252,15 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html-vite@workspace:frameworks/html-vite"
   dependencies:
-    "@storybook/addons": 7.1.0-alpha.5
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channel-websocket": 7.1.0-alpha.5
-    "@storybook/client-api": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/html": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preview-web": 7.1.0-alpha.5
+    "@storybook/addons": 7.1.0-alpha.7
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channel-websocket": 7.1.0-alpha.7
+    "@storybook/client-api": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/html": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preview-web": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
     typescript: ~4.9.3
@@ -6273,11 +6271,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/html-webpack5@workspace:frameworks/html-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/html": 7.1.0-alpha.5
-    "@storybook/preset-html-webpack": 7.1.0-alpha.5
+    "@storybook/html": 7.1.0-alpha.7
+    "@storybook/preset-html-webpack": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -6287,15 +6285,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/html@7.1.0-alpha.5, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
+"@storybook/html@7.1.0-alpha.7, @storybook/html@workspace:*, @storybook/html@workspace:renderers/html":
   version: 0.0.0-use.local
   resolution: "@storybook/html@workspace:renderers/html"
   dependencies:
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -6303,15 +6301,15 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/instrumenter@7.1.0-alpha.5, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
+"@storybook/instrumenter@7.1.0-alpha.7, @storybook/instrumenter@workspace:*, @storybook/instrumenter@workspace:lib/instrumenter":
   version: 0.0.0-use.local
   resolution: "@storybook/instrumenter@workspace:lib/instrumenter"
   dependencies:
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
@@ -6368,19 +6366,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-api@7.1.0-alpha.5, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api":
+"@storybook/manager-api@7.1.0-alpha.7, @storybook/manager-api@workspace:*, @storybook/manager-api@workspace:lib/manager-api":
   version: 0.0.0-use.local
   resolution: "@storybook/manager-api@workspace:lib/manager-api"
   dependencies:
     "@jest/globals": ^29.3.1
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/router": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/router": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/lodash": ^4.14.167
     "@types/qs": ^6
     dequal: ^2.0.2
@@ -6399,24 +6397,24 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/manager@7.1.0-alpha.5, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager":
+"@storybook/manager@7.1.0-alpha.7, @storybook/manager@workspace:*, @storybook/manager@workspace:ui/manager":
   version: 0.0.0-use.local
   resolution: "@storybook/manager@workspace:ui/manager"
   dependencies:
     "@fal-works/esbuild-plugin-global-externals": ^2.1.2
-    "@storybook/addons": 7.1.0-alpha.5
-    "@storybook/api": 7.1.0-alpha.5
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channel-websocket": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/components": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/addons": 7.1.0-alpha.7
+    "@storybook/api": 7.1.0-alpha.7
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channel-websocket": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/components": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/router": 7.1.0-alpha.5
-    "@storybook/theming": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/router": 7.1.0-alpha.7
+    "@storybook/theming": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@testing-library/react": ^11.2.2
     "@types/semver": ^7.3.4
     copy-to-clipboard: ^3.3.1
@@ -6466,13 +6464,13 @@ __metadata:
     "@babel/preset-typescript": ^7.21.0
     "@babel/runtime": ^7.21.0
     "@babel/types": ^7.20.5
-    "@storybook/addon-actions": 7.1.0-alpha.5
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/preset-react-webpack": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/react": 7.1.0-alpha.5
+    "@storybook/addon-actions": 7.1.0-alpha.7
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/preset-react-webpack": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/react": 7.1.0-alpha.7
     "@types/babel__core": ^7
     "@types/babel__plugin-transform-runtime": ^7
     "@types/babel__preset-env": ^7
@@ -6517,7 +6515,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/node-logger@7.1.0-alpha.5, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
+"@storybook/node-logger@7.1.0-alpha.7, @storybook/node-logger@workspace:*, @storybook/node-logger@workspace:lib/node-logger":
   version: 0.0.0-use.local
   resolution: "@storybook/node-logger@workspace:lib/node-logger"
   dependencies:
@@ -6530,7 +6528,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/postinstall@7.1.0-alpha.5, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
+"@storybook/postinstall@7.1.0-alpha.7, @storybook/postinstall@workspace:*, @storybook/postinstall@workspace:lib/postinstall":
   version: 0.0.0-use.local
   resolution: "@storybook/postinstall@workspace:lib/postinstall"
   dependencies:
@@ -6546,8 +6544,8 @@ __metadata:
   resolution: "@storybook/preact-vite@workspace:frameworks/preact-vite"
   dependencies:
     "@preact/preset-vite": ^2.0.0
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/preact": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/preact": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     typescript: ~4.9.3
     vite: ^4.0.0
@@ -6561,10 +6559,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/preact-webpack5@workspace:frameworks/preact-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preact": 7.1.0-alpha.5
-    "@storybook/preset-preact-webpack": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preact": 7.1.0-alpha.7
+    "@storybook/preset-preact-webpack": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
@@ -6576,14 +6574,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preact@7.1.0-alpha.5, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
+"@storybook/preact@7.1.0-alpha.7, @storybook/preact@workspace:*, @storybook/preact@workspace:renderers/preact":
   version: 0.0.0-use.local
   resolution: "@storybook/preact@workspace:renderers/preact"
   dependencies:
-    "@storybook/core-client": 7.1.0-alpha.5
+    "@storybook/core-client": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     preact: ^10.5.13
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
@@ -6597,9 +6595,9 @@ __metadata:
   resolution: "@storybook/preset-create-react-app@workspace:presets/create-react-app"
   dependencies:
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.1
-    "@storybook/node-logger": 7.1.0-alpha.5
+    "@storybook/node-logger": 7.1.0-alpha.7
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/types": 7.1.0-alpha.7
     "@types/babel__core": ^7.1.7
     "@types/node": ^16.0.0
     babel-plugin-react-docgen: ^4.1.0
@@ -6612,11 +6610,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-html-webpack@7.1.0-alpha.5, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
+"@storybook/preset-html-webpack@7.1.0-alpha.7, @storybook/preset-html-webpack@workspace:*, @storybook/preset-html-webpack@workspace:presets/html-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-html-webpack@workspace:presets/html-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     html-loader: ^3.1.0
     typescript: ~4.9.3
@@ -6626,13 +6624,13 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-preact-webpack@7.1.0-alpha.5, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack":
+"@storybook/preset-preact-webpack@7.1.0-alpha.7, @storybook/preset-preact-webpack@workspace:*, @storybook/preset-preact-webpack@workspace:presets/preact-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-preact-webpack@workspace:presets/preact-webpack"
   dependencies:
     "@babel/plugin-transform-react-jsx": ^7.21.0
     "@babel/preset-typescript": ^7.21.0
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     preact: ^10.5.13
     typescript: ~4.9.3
@@ -6642,17 +6640,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-react-webpack@7.1.0-alpha.5, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack":
+"@storybook/preset-react-webpack@7.1.0-alpha.7, @storybook/preset-react-webpack@workspace:*, @storybook/preset-react-webpack@workspace:presets/react-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-react-webpack@workspace:presets/react-webpack"
   dependencies:
     "@babel/preset-flow": ^7.18.6
     "@babel/preset-react": ^7.18.6
     "@pmmmwh/react-refresh-webpack-plugin": ^0.5.5
-    "@storybook/core-webpack": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/react": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/react": 7.1.0-alpha.7
     "@storybook/react-docgen-typescript-plugin": 1.0.6--canary.9.0c3f3b7.0
     "@types/node": ^16.0.0
     "@types/semver": ^7.3.4
@@ -6675,14 +6673,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-server-webpack@7.1.0-alpha.5, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack":
+"@storybook/preset-server-webpack@7.1.0-alpha.7, @storybook/preset-server-webpack@workspace:*, @storybook/preset-server-webpack@workspace:presets/server-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-server-webpack@workspace:presets/server-webpack"
   dependencies:
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/server": 7.1.0-alpha.5
+    "@storybook/server": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     fs-extra: ^11.1.0
     jest-specific-snapshot: ^7.0.0
@@ -6694,12 +6692,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-svelte-webpack@7.1.0-alpha.5, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack":
+"@storybook/preset-svelte-webpack@7.1.0-alpha.7, @storybook/preset-svelte-webpack@workspace:*, @storybook/preset-svelte-webpack@workspace:presets/svelte-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-svelte-webpack@workspace:presets/svelte-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
     svelte: ^3.31.2
     svelte-loader: ^3.1.2
     sveltedoc-parser: ^4.2.1
@@ -6712,12 +6710,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue-webpack@7.1.0-alpha.5, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack":
+"@storybook/preset-vue-webpack@7.1.0-alpha.7, @storybook/preset-vue-webpack@workspace:*, @storybook/preset-vue-webpack@workspace:presets/vue-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-vue-webpack@workspace:presets/vue-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     ts-loader: ^9.2.8
     typescript: ~4.9.3
@@ -6737,12 +6735,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-vue3-webpack@7.1.0-alpha.5, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack":
+"@storybook/preset-vue3-webpack@7.1.0-alpha.7, @storybook/preset-vue3-webpack@workspace:*, @storybook/preset-vue3-webpack@workspace:presets/vue3-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-vue3-webpack@workspace:presets/vue3-webpack"
   dependencies:
-    "@storybook/core-webpack": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@vue/compiler-sfc": ^3.2.33
     ts-loader: ^9.2.8
@@ -6760,14 +6758,14 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preset-web-components-webpack@7.1.0-alpha.5, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack":
+"@storybook/preset-web-components-webpack@7.1.0-alpha.7, @storybook/preset-web-components-webpack@workspace:*, @storybook/preset-web-components-webpack@workspace:presets/web-components-webpack":
   version: 0.0.0-use.local
   resolution: "@storybook/preset-web-components-webpack@workspace:presets/web-components-webpack"
   dependencies:
     "@babel/plugin-syntax-dynamic-import": ^7.8.3
     "@babel/plugin-syntax-import-meta": ^7.10.4
     "@babel/preset-env": ^7.20.2
-    "@storybook/core-webpack": 7.1.0-alpha.5
+    "@storybook/core-webpack": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     babel-loader: ^7.0.0 || ^8.0.0 || ^9.0.0
     babel-plugin-bundled-import-meta: ^0.3.1
@@ -6778,19 +6776,19 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/preview-api@7.1.0-alpha.5, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api":
+"@storybook/preview-api@7.1.0-alpha.7, @storybook/preview-api@workspace:*, @storybook/preview-api@workspace:lib/preview-api":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-api@workspace:lib/preview-api"
   dependencies:
     "@jest/globals": ^26.6.2
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
     "@storybook/global": ^5.0.0
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/types": 7.1.0-alpha.7
     "@types/qs": ^6.9.5
     ansi-to-html: ^0.6.11
     dequal: ^2.0.2
@@ -6828,25 +6826,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/preview-web@7.1.0-alpha.5, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
+"@storybook/preview-web@7.1.0-alpha.7, @storybook/preview-web@workspace:*, @storybook/preview-web@workspace:lib/preview-web":
   version: 0.0.0-use.local
   resolution: "@storybook/preview-web@workspace:lib/preview-web"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
   languageName: unknown
   linkType: soft
 
-"@storybook/preview@7.1.0-alpha.5, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview":
+"@storybook/preview@7.1.0-alpha.7, @storybook/preview@workspace:*, @storybook/preview@workspace:lib/preview":
   version: 0.0.0-use.local
   resolution: "@storybook/preview@workspace:lib/preview"
   dependencies:
-    "@storybook/channel-postmessage": 7.1.0-alpha.5
-    "@storybook/channel-websocket": 7.1.0-alpha.5
-    "@storybook/channels": 7.1.0-alpha.5
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/channel-postmessage": 7.1.0-alpha.7
+    "@storybook/channel-websocket": 7.1.0-alpha.7
+    "@storybook/channels": 7.1.0-alpha.7
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
@@ -6869,11 +6867,11 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/react-dom-shim@7.1.0-alpha.5, @storybook/react-dom-shim@workspace:lib/react-dom-shim":
+"@storybook/react-dom-shim@7.1.0-alpha.7, @storybook/react-dom-shim@workspace:lib/react-dom-shim":
   version: 0.0.0-use.local
   resolution: "@storybook/react-dom-shim@workspace:lib/react-dom-shim"
   dependencies:
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/types": 7.1.0-alpha.7
     typescript: ~4.9.3
   peerDependencies:
     react: ^16.8.0 || ^17.0.0 || ^18.0.0
@@ -6887,8 +6885,8 @@ __metadata:
   dependencies:
     "@joshwooding/vite-plugin-react-docgen-typescript": 0.2.1
     "@rollup/pluginutils": ^4.2.0
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/react": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/react": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@vitejs/plugin-react": ^3.0.1
     ast-types: ^0.14.2
@@ -6907,9 +6905,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/react-webpack5@workspace:frameworks/react-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/preset-react-webpack": 7.1.0-alpha.5
-    "@storybook/react": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/preset-react-webpack": 7.1.0-alpha.7
+    "@storybook/react": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     jest-specific-snapshot: ^7.0.0
     typescript: ~4.9.3
@@ -6925,18 +6923,18 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/react@7.1.0-alpha.5, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
+"@storybook/react@7.1.0-alpha.7, @storybook/react@workspace:*, @storybook/react@workspace:renderers/react":
   version: 0.0.0-use.local
   resolution: "@storybook/react@workspace:renderers/react"
   dependencies:
     "@babel/core": ^7.20.2
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/react-dom-shim": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/react-dom-shim": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/escodegen": ^0.0.6
     "@types/estree": ^0.0.51
     "@types/node": ^16.0.0
@@ -6980,7 +6978,7 @@ __metadata:
     "@nrwl/cli": ^15.4.5
     "@nrwl/nx-cloud": ^15.0.2
     "@nrwl/workspace": ^15.4.5
-    "@playwright/test": 1.31.1
+    "@playwright/test": 1.32.3
     "@storybook/addon-a11y": "workspace:*"
     "@storybook/addon-actions": "workspace:*"
     "@storybook/addon-backgrounds": "workspace:*"
@@ -7126,7 +7124,7 @@ __metadata:
     lodash: ^4.17.21
     node-gyp: ^8.4.0
     nx: ^15.4.5
-    playwright: 1.31.1
+    playwright: 1.32.3
     prettier: 2.8.0
     process: ^0.11.10
     raf: ^3.4.1
@@ -7161,11 +7159,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/router@7.1.0-alpha.5, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
+"@storybook/router@7.1.0-alpha.7, @storybook/router@workspace:*, @storybook/router@workspace:lib/router":
   version: 0.0.0-use.local
   resolution: "@storybook/router@workspace:lib/router"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
     dequal: ^2.0.2
     lodash: ^4.17.21
@@ -7184,10 +7182,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/server-webpack5@workspace:frameworks/server-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preset-server-webpack": 7.1.0-alpha.5
-    "@storybook/server": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preset-server-webpack": 7.1.0-alpha.7
+    "@storybook/server": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     typescript: ~4.9.3
   peerDependencies:
@@ -7196,25 +7194,25 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/server@7.1.0-alpha.5, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
+"@storybook/server@7.1.0-alpha.7, @storybook/server@workspace:*, @storybook/server@workspace:renderers/server":
   version: 0.0.0-use.local
   resolution: "@storybook/server@workspace:renderers/server"
   dependencies:
-    "@storybook/core-client": 7.1.0-alpha.5
+    "@storybook/core-client": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     ts-dedent: ^2.0.0
     typescript: ~4.9.3
   languageName: unknown
   linkType: soft
 
-"@storybook/source-loader@7.1.0-alpha.5, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
+"@storybook/source-loader@7.1.0-alpha.7, @storybook/source-loader@workspace:*, @storybook/source-loader@workspace:lib/source-loader":
   version: 0.0.0-use.local
   resolution: "@storybook/source-loader@workspace:lib/source-loader"
   dependencies:
     "@storybook/csf": ^0.1.0
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/types": 7.1.0-alpha.7
     estraverse: ^5.2.0
     jest-specific-snapshot: ^7.0.0
     lodash: ^4.17.21
@@ -7226,22 +7224,22 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/store@7.1.0-alpha.5, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
+"@storybook/store@7.1.0-alpha.7, @storybook/store@workspace:*, @storybook/store@workspace:lib/store":
   version: 0.0.0-use.local
   resolution: "@storybook/store@workspace:lib/store"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte-vite@7.1.0-alpha.5, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
+"@storybook/svelte-vite@7.1.0-alpha.7, @storybook/svelte-vite@workspace:frameworks/svelte-vite":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-vite@workspace:frameworks/svelte-vite"
   dependencies:
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/svelte": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/svelte": 7.1.0-alpha.7
     "@sveltejs/vite-plugin-svelte": ^2.0.0
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
@@ -7261,10 +7259,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/svelte-webpack5@workspace:frameworks/svelte-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preset-svelte-webpack": 7.1.0-alpha.5
-    "@storybook/svelte": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preset-svelte-webpack": 7.1.0-alpha.7
+    "@storybook/svelte": 7.1.0-alpha.7
     svelte: ^3.48.0
     svelte-loader: ^3.1.2
     typescript: ~4.9.3
@@ -7277,17 +7275,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/svelte@7.1.0-alpha.5, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
+"@storybook/svelte@7.1.0-alpha.7, @storybook/svelte@workspace:*, @storybook/svelte@workspace:renderers/svelte":
   version: 0.0.0-use.local
   resolution: "@storybook/svelte@workspace:renderers/svelte"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/core-events": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/core-events": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     expect-type: ^0.14.2
     svelte: ^3.31.2
     svelte-check: ^2.9.2
@@ -7303,9 +7301,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/sveltekit@workspace:frameworks/sveltekit"
   dependencies:
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/svelte": 7.1.0-alpha.5
-    "@storybook/svelte-vite": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/svelte": 7.1.0-alpha.7
+    "@storybook/svelte-vite": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     typescript: ^4.9.3
     vite: ^4.0.0
@@ -7314,12 +7312,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/telemetry@7.1.0-alpha.5, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
+"@storybook/telemetry@7.1.0-alpha.7, @storybook/telemetry@workspace:*, @storybook/telemetry@workspace:lib/telemetry":
   version: 0.0.0-use.local
   resolution: "@storybook/telemetry@workspace:lib/telemetry"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
     chalk: ^4.1.0
     detect-package-manager: ^2.0.1
     fetch-retry: ^5.0.2
@@ -7344,7 +7342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/theming@7.1.0-alpha.5, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
+"@storybook/theming@7.1.0-alpha.7, @storybook/theming@workspace:*, @storybook/theming@workspace:lib/theming":
   version: 0.0.0-use.local
   resolution: "@storybook/theming@workspace:lib/theming"
   dependencies:
@@ -7353,7 +7351,7 @@ __metadata:
     "@emotion/react": ^11.10.4
     "@emotion/styled": ^11.10.4
     "@emotion/use-insertion-effect-with-fallbacks": ^1.0.0
-    "@storybook/client-logger": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
     "@types/fs-extra": ^11.0.1
     "@types/node": ^16.0.0
@@ -7369,11 +7367,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/types@7.1.0-alpha.5, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
+"@storybook/types@7.1.0-alpha.7, @storybook/types@workspace:*, @storybook/types@workspace:lib/types":
   version: 0.0.0-use.local
   resolution: "@storybook/types@workspace:lib/types"
   dependencies:
-    "@storybook/channels": 7.1.0-alpha.5
+    "@storybook/channels": 7.1.0-alpha.7
     "@storybook/csf": ^0.1.0
     "@types/babel__core": ^7.0.0
     "@types/express": ^4.7.0
@@ -7399,10 +7397,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-vite@workspace:frameworks/vue-vite"
   dependencies:
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/vue": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/vue": 7.1.0-alpha.7
     magic-string: ^0.27.0
     typescript: ~4.9.3
     vite: ^4.0.0
@@ -7420,10 +7418,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue-webpack5@workspace:frameworks/vue-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preset-vue-webpack": 7.1.0-alpha.5
-    "@storybook/vue": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preset-vue-webpack": 7.1.0-alpha.7
+    "@storybook/vue": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     typescript: ~4.9.3
     vue: ^2.6.12
@@ -7445,9 +7443,9 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-vite@workspace:frameworks/vue3-vite"
   dependencies:
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/vue3": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/vue3": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@vitejs/plugin-vue": ^4.0.0
     magic-string: ^0.27.0
@@ -7465,10 +7463,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/vue3-webpack5@workspace:frameworks/vue3-webpack5"
   dependencies:
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preset-vue3-webpack": 7.1.0-alpha.5
-    "@storybook/vue3": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preset-vue3-webpack": 7.1.0-alpha.7
+    "@storybook/vue3": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     "@vue/compiler-sfc": 3.0.0
     typescript: ~4.9.3
@@ -7483,16 +7481,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue3@7.1.0-alpha.5, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3":
+"@storybook/vue3@7.1.0-alpha.7, @storybook/vue3@workspace:*, @storybook/vue3@workspace:renderers/vue3":
   version: 0.0.0-use.local
   resolution: "@storybook/vue3@workspace:renderers/vue3"
   dependencies:
     "@digitak/esrun": ^3.2.2
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/prettier": 2.7.2
     "@vue/vue3-jest": 29
     ts-dedent: ^2.0.0
@@ -7505,16 +7503,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/vue@7.1.0-alpha.5, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
+"@storybook/vue@7.1.0-alpha.7, @storybook/vue@workspace:*, @storybook/vue@workspace:renderers/vue":
   version: 0.0.0-use.local
   resolution: "@storybook/vue@workspace:renderers/vue"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     ts-dedent: ^2.0.0
     type-fest: 2.19.0
     typescript: ~4.9.3
@@ -7535,10 +7533,10 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@storybook/web-components-vite@workspace:frameworks/web-components-vite"
   dependencies:
-    "@storybook/builder-vite": 7.1.0-alpha.5
-    "@storybook/core-server": 7.1.0-alpha.5
-    "@storybook/node-logger": 7.1.0-alpha.5
-    "@storybook/web-components": 7.1.0-alpha.5
+    "@storybook/builder-vite": 7.1.0-alpha.7
+    "@storybook/core-server": 7.1.0-alpha.7
+    "@storybook/node-logger": 7.1.0-alpha.7
+    "@storybook/web-components": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     magic-string: ^0.27.0
     typescript: ~4.9.3
@@ -7553,10 +7551,10 @@ __metadata:
   resolution: "@storybook/web-components-webpack5@workspace:frameworks/web-components-webpack5"
   dependencies:
     "@babel/preset-env": ^7.20.2
-    "@storybook/builder-webpack5": 7.1.0-alpha.5
-    "@storybook/core-common": 7.1.0-alpha.5
-    "@storybook/preset-web-components-webpack": 7.1.0-alpha.5
-    "@storybook/web-components": 7.1.0-alpha.5
+    "@storybook/builder-webpack5": 7.1.0-alpha.7
+    "@storybook/core-common": 7.1.0-alpha.7
+    "@storybook/preset-web-components-webpack": 7.1.0-alpha.7
+    "@storybook/web-components": 7.1.0-alpha.7
     "@types/node": ^16.0.0
     lit: 2.3.1
     typescript: ~4.9.3
@@ -7567,17 +7565,17 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@storybook/web-components@7.1.0-alpha.5, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components":
+"@storybook/web-components@7.1.0-alpha.7, @storybook/web-components@workspace:*, @storybook/web-components@workspace:renderers/web-components":
   version: 0.0.0-use.local
   resolution: "@storybook/web-components@workspace:renderers/web-components"
   dependencies:
-    "@storybook/client-logger": 7.1.0-alpha.5
-    "@storybook/core-client": 7.1.0-alpha.5
-    "@storybook/docs-tools": 7.1.0-alpha.5
+    "@storybook/client-logger": 7.1.0-alpha.7
+    "@storybook/core-client": 7.1.0-alpha.7
+    "@storybook/docs-tools": 7.1.0-alpha.7
     "@storybook/global": ^5.0.0
-    "@storybook/manager-api": 7.1.0-alpha.5
-    "@storybook/preview-api": 7.1.0-alpha.5
-    "@storybook/types": 7.1.0-alpha.5
+    "@storybook/manager-api": 7.1.0-alpha.7
+    "@storybook/preview-api": 7.1.0-alpha.7
+    "@storybook/types": 7.1.0-alpha.7
     "@types/cross-spawn": ^6.0.2
     "@types/node": ^16.0.0
     cross-spawn: ^7.0.3
@@ -24113,23 +24111,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.31.1":
-  version: 1.31.1
-  resolution: "playwright-core@npm:1.31.1"
+"playwright-core@npm:1.32.3":
+  version: 1.32.3
+  resolution: "playwright-core@npm:1.32.3"
   bin:
     playwright: cli.js
-  checksum: 9df7cb50df49a61fc7146dfd5a8d08488a295fabdedb2e522678ba2f393149f8baaaeff189fb4efbc3c1849ee375c6be3cbe5adf379e816b5efd365954e26f6c
+  checksum: 8b94feb15084813607abac69ef3d4f78b345bcc89e322706e62c203b79e74096caf499ce4cd4103b1bfc853f17a9ff0573f636dc0ee88f56a5cb6ed18ce55f06
   languageName: node
   linkType: hard
 
-"playwright@npm:1.31.1":
-  version: 1.31.1
-  resolution: "playwright@npm:1.31.1"
+"playwright@npm:1.32.3":
+  version: 1.32.3
+  resolution: "playwright@npm:1.32.3"
   dependencies:
-    playwright-core: 1.31.1
+    playwright-core: 1.32.3
   bin:
     playwright: cli.js
-  checksum: 786f581b768a7c76248f59ecb2fc5a9b9f85eca371a62afdcbc0298e5714434648dd86fc3860215ffb2719351558e9c194b0a437e162a8c8bf384c54477a250e
+  checksum: 26a3a8897d1a41cd5d001859521ee44b3ac21618e638d3b2a58615672b2f325a6cdeb614dabc6b120999d8874f260c9786683644b13fe07476d4a3a47fcfff1f
   languageName: node
   linkType: hard
 
@@ -26746,7 +26744,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "sb@workspace:lib/cli-sb"
   dependencies:
-    "@storybook/cli": 7.1.0-alpha.5
+    "@storybook/cli": 7.1.0-alpha.7
   bin:
     sb: ./index.js
   languageName: unknown
@@ -27664,7 +27662,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "storybook@workspace:lib/cli-storybook"
   dependencies:
-    "@storybook/cli": 7.1.0-alpha.5
+    "@storybook/cli": 7.1.0-alpha.7
   bin:
     sb: ./index.js
     storybook: ./index.js
diff --git a/docs/api/doc-block-icongallery.md b/docs/api/doc-block-icongallery.md
index c6f8d9f705cf..56f4fa1a12b2 100644
--- a/docs/api/doc-block-icongallery.md
+++ b/docs/api/doc-block-icongallery.md
@@ -2,7 +2,7 @@
 title: 'IconGallery'
 ---
 
-The `IconGallery` block enables you to easily document all icons associated with your project, displayed in a neat grid.
+The `IconGallery` block enables you to easily document React icon components associated with your project, displayed in a neat grid.
 
 ![Screenshot of IconGallery and IconItem blocks](./doc-block-icongallery.png)
 
diff --git a/docs/api/doc-block-markdown.md b/docs/api/doc-block-markdown.md
index e93e204d1b53..8e05ca60d08a 100644
--- a/docs/api/doc-block-markdown.md
+++ b/docs/api/doc-block-markdown.md
@@ -33,7 +33,7 @@ import { Markdown } from '@storybook/blocks';
 
 # A header 
 
-{ReadMe}
+{ReadMe}
 ```
 
 
diff --git a/docs/configure/theming.md b/docs/configure/theming.md
index e272c530b28d..5650ddc9899a 100644
--- a/docs/configure/theming.md
+++ b/docs/configure/theming.md
@@ -61,7 +61,7 @@ Here's how you'd specify the same theme for docs in [`.storybook/preview.js`](./
 
 
@@ -79,7 +79,7 @@ Inside your `.storybook` directory, create a new file called `YourTheme.js` and
 
 
 
diff --git a/docs/contribute/code.md b/docs/contribute/code.md
index 04b1734b0992..ece3481c1e1c 100644
--- a/docs/contribute/code.md
+++ b/docs/contribute/code.md
@@ -33,7 +33,6 @@ If all goes well, you should see the sandbox running.
 
 ![Storybook sandbox running](../get-started/example-welcome.png)
 
-
 ## Running a different sandbox template
 
 By default, the `start` command is configured to initialize a Vite-based React template. If you're planning on working on a different renderer instead, you can do so as well. Start by running the `task` command as follows:
@@ -124,6 +123,12 @@ To run an e2e test against a sandbox, you can use the `e2e-tests` task:
 yarn task --task e2e-tests --template=react-vite/default-ts --start-from=auto
 ```
 
+If there are issues and you'd like to debug them, you can pass a `DEBUG=1` environment variable, and Playwright will run in watch mode.
+
+```shell
+DEBUG=1 yarn task --task e2e-tests --template=react-vite/default-ts --start-from=auto
+```
+
 ## Submit a pull request
 
 Before submitting your contribution, run the test suite one last time with the following:
diff --git a/docs/faq.md b/docs/faq.md
index 819f00a0305d..5d351bbe1409 100644
--- a/docs/faq.md
+++ b/docs/faq.md
@@ -8,6 +8,7 @@ Here are some answers to frequently asked questions. If you have a question, you
 - [How can I opt-out of Angular ngcc?](#how-can-i-opt-out-of-angular-ngcc)
 - [How can I run coverage tests with Create React App and leave out stories?](#how-can-i-run-coverage-tests-with-create-react-app-and-leave-out-stories)
 - [I see `ReferenceError: React is not defined` when using Storybook with Next.js](#i-see-referenceerror-react-is-not-defined-when-using-storybook-with-nextjs)
+- [How do I fix module resolutions while using pnpm Plug-n-Play](#how-do-i-fix-module-resolution-while-using-pnpm-plug-n-play)
 - [How do I setup Storybook to share Webpack configuration with Next.js?](#how-do-i-setup-storybook-to-share-webpack-configuration-with-nextjs)
 - [How do I setup React Fast Refresh with Storybook?](#how-do-i-setup-react-fast-refresh-with-storybook)
 - [How do I setup the new React Context Root API with Storybook?](#how-do-i-setup-the-new-react-context-root-api-with-storybook)
@@ -111,6 +112,28 @@ export default {
 };
 ```
 
+### How do I fix module resolution while using pnpm Plug-n-Play?
+
+In case you are using [pnpm](https://pnpm.io/), you might run into issues with module resolution similar to this when running Storybook:
+
+```shell
+WARN   Failed to load preset: "@storybook/react-webpack5/preset"`
+Required package: @storybook/react-webpack5 (via "@storybook/react-webpack5/preset")
+```
+
+To fix this, you can wrap the package name inside your Storybook configuration file (i.e., `.storybook/main.js|ts`) as follows:
+
+
+
+
+
+
+
 ### How do I setup React Fast Refresh with Storybook?
 
 Fast refresh is an opt-in feature that can be used in Storybook React.
@@ -412,7 +435,7 @@ Storybook allows you to use most characters while naming your stories. Still, sp
 We're aware that the default Typescript story construct might seem outdated and could potentially introduce a less than ideal way of handling type safety and strictness and could be rewritten as such:
 
 ```ts
-// Button.stories.ts | tsx
+// Button.stories.ts|tsx
 
 import React from 'react';
 import type { ComponentStory, ComponentMeta } from '@storybook/react';
diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md
index 2fdc0b810eda..1d6789144fa5 100644
--- a/docs/sharing/design-integrations.md
+++ b/docs/sharing/design-integrations.md
@@ -75,6 +75,12 @@ Run the following command to install the addon.
 
 
 
+

+
+โ„น๏ธ This addon is still being converted to fully support Storybook 7.0. If you're adding this addon to a Storybook 7.0 instance or migrating from a previous version, you must install the `beta` version.
+
+

+
 Update your Storybook configuration (in `.storybook/main.js|ts`) to include the addon.
 
 
diff --git a/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx b/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx
index 659eb9c2c287..14b67ec5bec1 100644
--- a/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx
+++ b/docs/snippets/angular/button-story-argtypes-with-subcategories.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Button.stories.ts
 
-// Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
diff --git a/docs/snippets/angular/gizmo-story-controls-customization.ts.mdx b/docs/snippets/angular/gizmo-story-controls-customization.ts.mdx
index 7b51dd3dc680..6387a40f2c16 100644
--- a/docs/snippets/angular/gizmo-story-controls-customization.ts.mdx
+++ b/docs/snippets/angular/gizmo-story-controls-customization.ts.mdx
@@ -1,7 +1,6 @@
 ```ts
 // Gizmo.stories.ts
 
-// Replace your-framework with the name of your framework
 import type { Meta } from '@storybook/angular';
 
 import { Gizmo } from './Gizmo.component';
diff --git a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
index 21be95e9553c..b09592930ccc 100644
--- a/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.npm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-npm install --save-dev storybook-addon-designs
+npm install --save-dev storybook-addon-designs@beta
 ```
diff --git a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx b/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
index fc435e0191ba..deac368cc436 100644
--- a/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.pnpm.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-pnpm add --save-dev storybook-addon-designs
+pnpm add --save-dev storybook-addon-designs@beta
 ```
diff --git a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
index 849f8e50ddca..98c343b260ca 100644
--- a/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
+++ b/docs/snippets/common/storybook-figma-addon-install.yarn.js.mdx
@@ -1,3 +1,3 @@
 ```shell
-yarn add --dev storybook-addon-designs
+yarn add --dev storybook-addon-designs@beta
 ```
diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
new file mode 100644
index 000000000000..1956d047fd68
--- /dev/null
+++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.js.mdx
@@ -0,0 +1,21 @@
+```js
+// .storybook/main.js
+
+import path from 'path';
+
+const wrapForPnp = (packageName) =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+export default {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    //๐Ÿ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks
+    wrapForPnp('@storybook/addon-essentials'),
+  ],
+  framework: {
+    // Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
+    name: wrapForPnp('@storybook/your-framework'),
+    options: {},
+  },
+};
+```
diff --git a/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
new file mode 100644
index 000000000000..4ac45efe0cdd
--- /dev/null
+++ b/docs/snippets/common/storybook-main-pnpm-with-module-resolution.ts.mdx
@@ -0,0 +1,26 @@
+```ts
+// .storybook/main.ts
+
+// Replace your-framework with the framework you are using (e.g., react-webpack5, vue3-webpack5)
+import type { StorybookConfig } from '@storybook/your-framework';
+
+import path from 'path';
+
+const wrapForPnp = (packageName: string) =>
+  path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    //๐Ÿ‘‡ Use wrapForPnp when referencing Storybook's addons and frameworks
+    wrapForPnp('@storybook/addon-essentials'),
+  ],
+  framework: {
+    // Replace your-framework with the same one you've imported above.
+    name: wrapForPnp('@storybook/your-framework'),
+    options: {},
+  },
+};
+
+export default config;
+```
diff --git a/docs/snippets/common/storybook-theme-example-variables.ts.mdx b/docs/snippets/common/storybook-theme-example-variables.js.mdx
similarity index 98%
rename from docs/snippets/common/storybook-theme-example-variables.ts.mdx
rename to docs/snippets/common/storybook-theme-example-variables.js.mdx
index e37bfbb16a9a..c438b957216a 100644
--- a/docs/snippets/common/storybook-theme-example-variables.ts.mdx
+++ b/docs/snippets/common/storybook-theme-example-variables.js.mdx
@@ -1,4 +1,4 @@
-```ts
+```js
 // .storybook/YourTheme.js
 
 import { create } from '@storybook/theming/create';
diff --git a/docs/snippets/react/button-story.with-hooks.js.mdx b/docs/snippets/react/button-story.with-hooks.js.mdx
index 6c1f41e95d99..06c4cfec6cc6 100644
--- a/docs/snippets/react/button-story.with-hooks.js.mdx
+++ b/docs/snippets/react/button-story.with-hooks.js.mdx
@@ -1,5 +1,5 @@
 ```js
-// Button.stories.js|ts|jsx|tsx
+// Button.stories.js|jsx
 
 import React, { useState } from 'react';
 
diff --git a/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
new file mode 100644
index 000000000000..486cc3b59644
--- /dev/null
+++ b/docs/snippets/react/button-story.with-hooks.ts-4-9.mdx
@@ -0,0 +1,43 @@
+```tsx
+// Button.stories.ts|tsx
+
+import React, { useState } from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+const meta = {
+  /* ๐Ÿ‘‡ The title prop is optional.
+   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'Button',
+  component: Button,
+} satisfies Meta;
+export default meta;
+
+type Story = StoryObj;
+
+/*
+ * Example Button story with React Hooks.
+ * See note below related to this example.
+ */
+const ButtonWithHooks = () => {
+  // Sets the hooks for both the label and primary props
+  const [value, setValue] = useState('Secondary');
+  const [isPrimary, setIsPrimary] = useState(false);
+
+  // Sets a click handler to change the label's value
+  const handleOnChange = () => {
+    if (!isPrimary) {
+      setIsPrimary(true);
+      setValue('Primary');
+    }
+  };
+  return 

\ No newline at end of file
diff --git a/scripts/sandbox/utils/git.ts b/scripts/sandbox/utils/git.ts
index cbd1aa505e04..6fc148b657c6 100644
--- a/scripts/sandbox/utils/git.ts
+++ b/scripts/sandbox/utils/git.ts
@@ -1,23 +1,82 @@
+import fetch from 'node-fetch';
 import { execaCommand } from '../../utils/exec';
 // eslint-disable-next-line import/no-cycle
 import { logger } from '../publish';
 
-export async function commitAllToGit(cwd: string) {
+const getTheLastCommitHashThatUpdatedTheSandboxRepo = async (branch: string) => {
+  const owner = 'storybookjs';
+  const repo = 'sandboxes';
+
+  try {
+    const branchData = await (
+      await fetch(`https://api.github.com/repos/${owner}/${repo}/branches/${branch}`)
+    ).json();
+    const latestCommitSha = branchData.commit.sha;
+    const commitData = await (
+      await fetch(`https://api.github.com/repos/${owner}/${repo}/commits/${latestCommitSha}`)
+    ).json();
+    const latestCommitMessage = commitData.commit.message;
+    logger.log(
+      `Latest commit message of ${owner}/${repo} on branch ${branch}: ${latestCommitMessage}`
+    );
+    // The commit message will look like this: Update examples - Thu Apr 13 2023 - 97dbc82537c3
+    // the hash at the end relates to the monorepo commit that updated the sandboxes
+    return latestCommitMessage.split('\n')[0].split(' - ')[2];
+  } catch (error) {
+    logger.error(
+      `Error getting latest commit message of ${owner}/${repo} on branch ${branch}: ${error.message}`
+    );
+
+    throw error;
+  }
+};
+
+/**
+ * When commiting the changes to the sandboxes repo, we want to include the PRs that were merged since the last commit that updated the sandboxes.
+ * This might help us debug issues or changes that affected the sandboxes at some point in time.
+ */
+export async function commitAllToGit({ cwd, branch }: { cwd: string; branch: string }) {
   try {
     logger.log(`๐Ÿ’ช Committing everything to the repository`);
 
     await execaCommand('git add .', { cwd });
 
-    const currentCommitSHA = await execaCommand('git rev-parse HEAD');
-    await execaCommand(
-      `git commit -m "Update examples - ${new Date().toDateString()} - ${currentCommitSHA.stdout
+    const currentCommitHash = (await execaCommand('git rev-parse HEAD')).stdout
+      .toString()
+      .slice(0, 12);
+
+    let gitCommitCommand;
+
+    try {
+      const previousCommitHash = await getTheLastCommitHashThatUpdatedTheSandboxRepo(branch);
+      const mergeCommits = (
+        await execaCommand(
+          `git log ${previousCommitHash}..${currentCommitHash} --merges --pretty=%s`
+        )
+      ).stdout
         .toString()
-        .slice(0, 12)}"`,
-      {
-        shell: true,
-        cwd,
-      }
-    );
+        .split('\n')
+        .filter((s: string) => s.includes('pull request'));
+
+      const prLinks = mergeCommits.map((mergeCommit) => {
+        const prNumber = mergeCommit.match(/Merge pull request #(\d+)/)[1];
+        const branchName = mergeCommit.match(/from (.+)/)[1].replace('storybookjs/', '');
+        return `- https://github.com/storybookjs/storybook/pull/${prNumber} (${branchName})`;
+      });
+
+      const diffLink = `https://github.com/storybookjs/storybook/compare/${previousCommitHash}...${currentCommitHash}`;
+
+      const commitTitle = `Update sandboxes - ${new Date().toDateString()} - ${previousCommitHash}`;
+      const commitBody = [...prLinks, `\nCheck the diff here: ${diffLink}`].join('\n');
+      gitCommitCommand = `git commit -m "${commitTitle}" -m "${commitBody}"`;
+    } catch (err) {
+      gitCommitCommand = `git commit -m "Update sandboxes - ${new Date().toDateString()} - ${currentCommitHash}`;
+    }
+
+    await execaCommand(gitCommitCommand, {
+      shell: true,
+      cwd,
+    });
   } catch (e) {
     logger.log(
       `๐Ÿคท Git found no changes between previous versions so there is nothing to commit. Skipping publish!`
diff --git a/scripts/sandbox/utils/template.ts b/scripts/sandbox/utils/template.ts
index b5c75dcf1104..4cc3723827f0 100644
--- a/scripts/sandbox/utils/template.ts
+++ b/scripts/sandbox/utils/template.ts
@@ -9,7 +9,12 @@ export async function renderTemplate(templatePath: string, templateData: Record<
 
   const output = format(render(template, templateData), {
     parser: 'html',
-  }).replace(new RegExp('\\n\\n', 'g'), '\n');
+  })
+    // overly complicated regex replacements to fix prettier's bad formatting
+    .replace(new RegExp('\\n\\n', 'g'), '\n')
+    .replace(new RegExp('', 'g'), 'node=">')
+    .replace(new RegExp('/\\n/', 'g'), '');
   return output;
 }
 
diff --git a/scripts/tasks/e2e-tests-build.ts b/scripts/tasks/e2e-tests-build.ts
index b4f42239588d..a90670fa7258 100644
--- a/scripts/tasks/e2e-tests-build.ts
+++ b/scripts/tasks/e2e-tests-build.ts
@@ -15,13 +15,13 @@ export const e2eTestsBuild: Task & { port: number } = {
     if (process.env.DEBUG) {
       // eslint-disable-next-line no-console
       console.log(dedent`
-        Running e2e tests in Playwright debug mode for chromium only.
+        Running e2e tests in Playwright's ui mode for chromium only (for brevity sake).
         You can change the browser by changing the --project flag in the e2e-tests task file.
       `);
     }
 
     const playwrightCommand = process.env.DEBUG
-      ? 'PWDEBUG=1 yarn playwright test --project=chromium'
+      ? 'yarn playwright test --project=chromium --ui'
       : 'yarn playwright test';
 
     await exec(
diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts
index 798ef5d49378..6fc70ad26d99 100644
--- a/scripts/tasks/sandbox-parts.ts
+++ b/scripts/tasks/sandbox-parts.ts
@@ -1,7 +1,7 @@
 // This file requires many imports from `../code`, which requires both an install and bootstrap of
 // the repo to work properly. So we load it async in the task runner *after* those steps.
 
-/* eslint-disable no-restricted-syntax, no-await-in-loop, no-param-reassign */
+/* eslint-disable no-restricted-syntax, no-await-in-loop */
 import {
   copy,
   ensureSymlink,
diff --git a/scripts/utils/yarn.ts b/scripts/utils/yarn.ts
index 7c3443d227df..03b8f4198c31 100644
--- a/scripts/utils/yarn.ts
+++ b/scripts/utils/yarn.ts
@@ -24,8 +24,8 @@ export const addPackageResolutions = async ({ cwd, dryRun }: YarnOptions) => {
     ...storybookVersions,
     'enhanced-resolve': '~5.10.0', // TODO, remove this
     // this is for our CI test, ensure we use the same version as docker image, it should match version specified in `./code/package.json` and `.circleci/config.yml`
-    '@playwright/test': '1.31.1',
-    playwright: '1.31.1',
+    '@playwright/test': '1.32.3',
+    playwright: '1.32.3',
   };
   await writeJSON(packageJsonPath, packageJson, { spaces: 2 });
 };