diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md
index c10fb3b99635..d83e71323f92 100644
--- a/CHANGELOG.prerelease.md
+++ b/CHANGELOG.prerelease.md
@@ -1,3 +1,19 @@
+## 8.5.0-alpha.22
+
+- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!
+- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!
+- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!
+- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!
+- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!
+- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!
+- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!
+- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!
+- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!
+- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!
+- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!
+- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!
+- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!
+
## 8.5.0-alpha.21
- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!
diff --git a/MIGRATION.md b/MIGRATION.md
index 58b42f10c0aa..28b4bc5d6ddc 100644
--- a/MIGRATION.md
+++ b/MIGRATION.md
@@ -1,6 +1,7 @@
Migration
- [From version 8.4.x to 8.5.x](#from-version-84x-to-85x)
+ - [Added source code panel to docs](#added-source-code-panel-to-docs)
- [Addon-a11y: Component test integration](#addon-a11y-component-test-integration)
- [Addon-a11y: Deprecated `parameters.a11y.manual`](#addon-a11y-deprecated-parametersa11ymanual)
- [Indexing behavior of @storybook/experimental-addon-test is changed](#indexing-behavior-of-storybookexperimental-addon-test-is-changed)
@@ -425,6 +426,22 @@
## From version 8.4.x to 8.5.x
+### Added source code panel to docs
+
+Starting in 8.5, Storybook Docs (`@storybook/addon-docs`) automatically adds a new addon panel to stories that displays a source snippet beneath each story. This works similarly to the existing [source snippet doc block](https://storybook.js.org/docs/writing-docs/doc-blocks#source), but in the story view. It is intended to replace the [Storysource addon](https://storybook.js.org/addons/@storybook/addon-storysource).
+
+If you wish to disable this panel globally, add the following line to your `.storybook/preview.js` project configuration. You can also selectively disable/enable at the story level.
+
+```js
+export default {
+ parameters: {
+ docs: {
+ codePanel: false,
+ },
+ },
+};
+```
+
### Addon-a11y: Component test integration
In Storybook 8.4, we introduced the [Test addon](https://storybook.js.org/docs/writing-tests/test-addon) (`@storybook/experimental-addon-test`). Powered by Vitest under the hood, this addon lets you watch, run, and debug your component tests directly in Storybook.
diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json
index 67e5942522ea..871521c0bbb5 100644
--- a/code/addons/a11y/package.json
+++ b/code/addons/a11y/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-a11y",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Test component compliance with web accessibility standards",
"keywords": [
"a11y",
diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json
index 7fbcf17f65ca..cd465addf3f5 100644
--- a/code/addons/actions/package.json
+++ b/code/addons/actions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-actions",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Get UI feedback when an action is performed on an interactive element",
"keywords": [
"storybook",
diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json
index eb5029e0cf4f..64ddf7cbe09b 100644
--- a/code/addons/backgrounds/package.json
+++ b/code/addons/backgrounds/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-backgrounds",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Switch backgrounds to view components in different settings",
"keywords": [
"addon",
diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json
index 57f55867aab1..d7837a6dbb59 100644
--- a/code/addons/controls/package.json
+++ b/code/addons/controls/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-controls",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Interact with component inputs dynamically in the Storybook UI",
"keywords": [
"addon",
diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json
index e515eb363746..4e2a84bfd70a 100644
--- a/code/addons/docs/package.json
+++ b/code/addons/docs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-docs",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Document component usage and properties in Markdown",
"keywords": [
"addon",
@@ -71,7 +71,12 @@
"./angular": "./angular/index.js",
"./angular/index.js": "./angular/index.js",
"./web-components/index.js": "./web-components/index.js",
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./manager": {
+ "types": "./dist/manager.d.ts",
+ "import": "./dist/manager.mjs",
+ "require": "./dist/manager.js"
+ }
},
"main": "dist/index.js",
"module": "dist/index.mjs",
@@ -129,7 +134,11 @@
"./src/preview.ts",
"./src/blocks.ts",
"./src/shims/mdx-react-shim.ts",
- "./src/mdx-loader.ts"
+ "./src/mdx-loader.ts",
+ "./src/manager.tsx"
+ ],
+ "managerEntries": [
+ "./src/manager.tsx"
]
},
"gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16",
diff --git a/code/addons/docs/src/manager.tsx b/code/addons/docs/src/manager.tsx
new file mode 100644
index 000000000000..0b84cd6e36f8
--- /dev/null
+++ b/code/addons/docs/src/manager.tsx
@@ -0,0 +1,57 @@
+import React from 'react';
+
+import { AddonPanel, type SyntaxHighlighterFormatTypes } from 'storybook/internal/components';
+import { ADDON_ID, PANEL_ID, PARAM_KEY, SNIPPET_RENDERED } from 'storybook/internal/docs-tools';
+import { addons, types, useAddonState, useChannel } from 'storybook/internal/manager-api';
+
+import { Source } from '@storybook/blocks';
+
+addons.register(ADDON_ID, (api) => {
+ addons.add(PANEL_ID, {
+ title: 'Code',
+ type: types.PANEL,
+ paramKey: PARAM_KEY,
+ /**
+ * This code panel can be disabled by the user by adding this parameter:
+ *
+ * @example
+ *
+ * ```ts
+ * parameters: {
+ * docs: {
+ * codePanel: false,
+ * },
+ * },
+ * ```
+ */
+ disabled: (parameters) => {
+ return (
+ !!parameters &&
+ typeof parameters[PARAM_KEY] === 'object' &&
+ parameters[PARAM_KEY].codePanel === false
+ );
+ },
+ match: ({ viewMode }) => viewMode === 'story',
+ render: ({ active }) => {
+ const [codeSnippet, setSourceCode] = useAddonState<{
+ source: string;
+ format: SyntaxHighlighterFormatTypes;
+ }>(ADDON_ID, {
+ source: '',
+ format: 'html',
+ });
+
+ useChannel({
+ [SNIPPET_RENDERED]: ({ source, format }) => {
+ setSourceCode({ source, format });
+ },
+ });
+
+ return (
+
+
+
+ );
+ },
+ });
+});
diff --git a/code/addons/docs/template/stories/sourcePanel/index.stories.tsx b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
new file mode 100644
index 000000000000..9958096cb815
--- /dev/null
+++ b/code/addons/docs/template/stories/sourcePanel/index.stories.tsx
@@ -0,0 +1,23 @@
+export default {
+ component: globalThis.Components.Button,
+ tags: ['autodocs'],
+ parameters: {
+ chromatic: { disable: true },
+ docs: {
+ codePanel: false,
+ },
+ },
+};
+
+export const One = { args: { label: 'One' } };
+
+export const Two = { args: { label: 'Two' } };
+
+export const WithSource = {
+ args: { label: 'Three' },
+ parameters: {
+ docs: {
+ codePanel: true,
+ },
+ },
+};
diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json
index a8b609df935b..3fde9eab3744 100644
--- a/code/addons/essentials/package.json
+++ b/code/addons/essentials/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-essentials",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Curated addons to bring out the best of Storybook",
"keywords": [
"addon",
@@ -40,6 +40,7 @@
},
"./backgrounds/manager": "./dist/backgrounds/manager.js",
"./controls/manager": "./dist/controls/manager.js",
+ "./docs/manager": "./dist/docs/manager.js",
"./docs/preview": {
"types": "./dist/docs/preview.d.ts",
"import": "./dist/docs/preview.mjs",
@@ -114,10 +115,14 @@
"./src/docs/preset.ts",
"./src/docs/mdx-react-shim.ts"
],
+ "entries": [
+ "./src/docs/manager.ts"
+ ],
"managerEntries": [
"./src/actions/manager.ts",
"./src/backgrounds/manager.ts",
"./src/controls/manager.ts",
+ "./src/docs/manager.ts",
"./src/measure/manager.ts",
"./src/outline/manager.ts",
"./src/toolbars/manager.ts",
diff --git a/code/addons/essentials/src/docs/manager.ts b/code/addons/essentials/src/docs/manager.ts
new file mode 100644
index 000000000000..6101f7d79261
--- /dev/null
+++ b/code/addons/essentials/src/docs/manager.ts
@@ -0,0 +1,2 @@
+// @ts-expect-error (no types needed for this)
+export * from '@storybook/addon-docs/manager';
diff --git a/code/addons/essentials/src/index.ts b/code/addons/essentials/src/index.ts
index 5809420bc1b8..a72554227ba2 100644
--- a/code/addons/essentials/src/index.ts
+++ b/code/addons/essentials/src/index.ts
@@ -88,9 +88,9 @@ export function addons(options: PresetOptions) {
// NOTE: The order of these addons is important.
return [
- 'docs',
'controls',
'actions',
+ 'docs',
'backgrounds',
'viewport',
'toolbars',
diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json
index 050e23eee083..c4042cd7690a 100644
--- a/code/addons/gfm/package.json
+++ b/code/addons/gfm/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-mdx-gfm",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "GitHub Flavored Markdown in Storybook",
"keywords": [
"addon",
diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json
index 132725309900..f84dfd1ed338 100644
--- a/code/addons/highlight/package.json
+++ b/code/addons/highlight/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-highlight",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Highlight DOM nodes within your stories",
"keywords": [
"storybook-addons",
diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json
index 94616d18d0b2..b584e70801c4 100644
--- a/code/addons/interactions/package.json
+++ b/code/addons/interactions/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-interactions",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Automate, test and debug user interactions",
"keywords": [
"storybook-addons",
diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json
index 6cd0af1cf358..05197566dd86 100644
--- a/code/addons/jest/package.json
+++ b/code/addons/jest/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-jest",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "React storybook addon that show component jest report",
"keywords": [
"addon",
diff --git a/code/addons/links/package.json b/code/addons/links/package.json
index 400983200101..a5068e439214 100644
--- a/code/addons/links/package.json
+++ b/code/addons/links/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-links",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Link stories together to build demos and prototypes with your UI components",
"keywords": [
"storybook-addons",
diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json
index c3dc010a7a79..036809014573 100644
--- a/code/addons/measure/package.json
+++ b/code/addons/measure/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-measure",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Inspect layouts by visualizing the box model",
"keywords": [
"storybook-addons",
diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json
index da5be23da6de..496fdf643e76 100644
--- a/code/addons/onboarding/package.json
+++ b/code/addons/onboarding/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-onboarding",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Addon Onboarding - Introduces a new onboarding experience",
"keywords": [
"storybook-addons",
diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json
index 7a835eb493b4..404c69cb7c1d 100644
--- a/code/addons/outline/package.json
+++ b/code/addons/outline/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-outline",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Outline all elements with CSS to help with layout placement and alignment",
"keywords": [
"storybook-addons",
diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json
index edb6981d7fcf..46db49209197 100644
--- a/code/addons/storysource/package.json
+++ b/code/addons/storysource/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-storysource",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "View a story’s source code to see how it works and paste into your app",
"keywords": [
"addon",
diff --git a/code/addons/test/package.json b/code/addons/test/package.json
index e74a870c875a..9c96805ede79 100644
--- a/code/addons/test/package.json
+++ b/code/addons/test/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/experimental-addon-test",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Integrate Vitest with Storybook",
"keywords": [
"storybook-addons",
diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json
index 30ac3cda924c..9e788efc90cf 100644
--- a/code/addons/themes/package.json
+++ b/code/addons/themes/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-themes",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Switch between multiple themes for you components in Storybook",
"keywords": [
"css",
diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json
index 740f58f8ad96..21716863b7b6 100644
--- a/code/addons/toolbars/package.json
+++ b/code/addons/toolbars/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-toolbars",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Create your own toolbar items that control story rendering",
"keywords": [
"addon",
diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json
index 4202107ed176..dfe78a2799b1 100644
--- a/code/addons/viewport/package.json
+++ b/code/addons/viewport/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/addon-viewport",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Build responsive components by adjusting Storybook’s viewport size and orientation",
"keywords": [
"addon",
diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json
index 856346cc86a2..1a19730107ca 100644
--- a/code/builders/builder-vite/package.json
+++ b/code/builders/builder-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "A plugin to run and build Storybooks with Vite",
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme",
"bugs": {
diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json
index 387b808ae269..8dca343bbc1f 100644
--- a/code/builders/builder-webpack5/package.json
+++ b/code/builders/builder-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/core/package.json b/code/core/package.json
index ff9c6c9b3c3f..c0a6b170ff23 100644
--- a/code/core/package.json
+++ b/code/core/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts
index ddc0f5d2ed67..cd5bdcc85a13 100644
--- a/code/core/src/common/versions.ts
+++ b/code/core/src/common/versions.ts
@@ -1,88 +1,88 @@
// auto generated file, do not edit
export default {
- '@storybook/addon-a11y': '8.5.0-alpha.21',
- '@storybook/addon-actions': '8.5.0-alpha.21',
- '@storybook/addon-backgrounds': '8.5.0-alpha.21',
- '@storybook/addon-controls': '8.5.0-alpha.21',
- '@storybook/addon-docs': '8.5.0-alpha.21',
- '@storybook/addon-essentials': '8.5.0-alpha.21',
- '@storybook/addon-mdx-gfm': '8.5.0-alpha.21',
- '@storybook/addon-highlight': '8.5.0-alpha.21',
- '@storybook/addon-interactions': '8.5.0-alpha.21',
- '@storybook/addon-jest': '8.5.0-alpha.21',
- '@storybook/addon-links': '8.5.0-alpha.21',
- '@storybook/addon-measure': '8.5.0-alpha.21',
- '@storybook/addon-onboarding': '8.5.0-alpha.21',
- '@storybook/addon-outline': '8.5.0-alpha.21',
- '@storybook/addon-storysource': '8.5.0-alpha.21',
- '@storybook/experimental-addon-test': '8.5.0-alpha.21',
- '@storybook/addon-themes': '8.5.0-alpha.21',
- '@storybook/addon-toolbars': '8.5.0-alpha.21',
- '@storybook/addon-viewport': '8.5.0-alpha.21',
- '@storybook/builder-vite': '8.5.0-alpha.21',
- '@storybook/builder-webpack5': '8.5.0-alpha.21',
- '@storybook/core': '8.5.0-alpha.21',
- '@storybook/builder-manager': '8.5.0-alpha.21',
- '@storybook/channels': '8.5.0-alpha.21',
- '@storybook/client-logger': '8.5.0-alpha.21',
- '@storybook/components': '8.5.0-alpha.21',
- '@storybook/core-common': '8.5.0-alpha.21',
- '@storybook/core-events': '8.5.0-alpha.21',
- '@storybook/core-server': '8.5.0-alpha.21',
- '@storybook/csf-tools': '8.5.0-alpha.21',
- '@storybook/docs-tools': '8.5.0-alpha.21',
- '@storybook/manager': '8.5.0-alpha.21',
- '@storybook/manager-api': '8.5.0-alpha.21',
- '@storybook/node-logger': '8.5.0-alpha.21',
- '@storybook/preview': '8.5.0-alpha.21',
- '@storybook/preview-api': '8.5.0-alpha.21',
- '@storybook/router': '8.5.0-alpha.21',
- '@storybook/telemetry': '8.5.0-alpha.21',
- '@storybook/theming': '8.5.0-alpha.21',
- '@storybook/types': '8.5.0-alpha.21',
- '@storybook/angular': '8.5.0-alpha.21',
- '@storybook/ember': '8.5.0-alpha.21',
- '@storybook/experimental-nextjs-vite': '8.5.0-alpha.21',
- '@storybook/html-vite': '8.5.0-alpha.21',
- '@storybook/html-webpack5': '8.5.0-alpha.21',
- '@storybook/nextjs': '8.5.0-alpha.21',
- '@storybook/preact-vite': '8.5.0-alpha.21',
- '@storybook/preact-webpack5': '8.5.0-alpha.21',
- '@storybook/react-native-web-vite': '8.5.0-alpha.21',
- '@storybook/react-vite': '8.5.0-alpha.21',
- '@storybook/react-webpack5': '8.5.0-alpha.21',
- '@storybook/server-webpack5': '8.5.0-alpha.21',
- '@storybook/svelte-vite': '8.5.0-alpha.21',
- '@storybook/svelte-webpack5': '8.5.0-alpha.21',
- '@storybook/sveltekit': '8.5.0-alpha.21',
- '@storybook/vue3-vite': '8.5.0-alpha.21',
- '@storybook/vue3-webpack5': '8.5.0-alpha.21',
- '@storybook/web-components-vite': '8.5.0-alpha.21',
- '@storybook/web-components-webpack5': '8.5.0-alpha.21',
- '@storybook/blocks': '8.5.0-alpha.21',
- storybook: '8.5.0-alpha.21',
- sb: '8.5.0-alpha.21',
- '@storybook/cli': '8.5.0-alpha.21',
- '@storybook/codemod': '8.5.0-alpha.21',
- '@storybook/core-webpack': '8.5.0-alpha.21',
- 'create-storybook': '8.5.0-alpha.21',
- '@storybook/csf-plugin': '8.5.0-alpha.21',
- '@storybook/instrumenter': '8.5.0-alpha.21',
- '@storybook/react-dom-shim': '8.5.0-alpha.21',
- '@storybook/source-loader': '8.5.0-alpha.21',
- '@storybook/test': '8.5.0-alpha.21',
- '@storybook/preset-create-react-app': '8.5.0-alpha.21',
- '@storybook/preset-html-webpack': '8.5.0-alpha.21',
- '@storybook/preset-preact-webpack': '8.5.0-alpha.21',
- '@storybook/preset-react-webpack': '8.5.0-alpha.21',
- '@storybook/preset-server-webpack': '8.5.0-alpha.21',
- '@storybook/preset-svelte-webpack': '8.5.0-alpha.21',
- '@storybook/preset-vue3-webpack': '8.5.0-alpha.21',
- '@storybook/html': '8.5.0-alpha.21',
- '@storybook/preact': '8.5.0-alpha.21',
- '@storybook/react': '8.5.0-alpha.21',
- '@storybook/server': '8.5.0-alpha.21',
- '@storybook/svelte': '8.5.0-alpha.21',
- '@storybook/vue3': '8.5.0-alpha.21',
- '@storybook/web-components': '8.5.0-alpha.21',
+ '@storybook/addon-a11y': '8.5.0-alpha.22',
+ '@storybook/addon-actions': '8.5.0-alpha.22',
+ '@storybook/addon-backgrounds': '8.5.0-alpha.22',
+ '@storybook/addon-controls': '8.5.0-alpha.22',
+ '@storybook/addon-docs': '8.5.0-alpha.22',
+ '@storybook/addon-essentials': '8.5.0-alpha.22',
+ '@storybook/addon-mdx-gfm': '8.5.0-alpha.22',
+ '@storybook/addon-highlight': '8.5.0-alpha.22',
+ '@storybook/addon-interactions': '8.5.0-alpha.22',
+ '@storybook/addon-jest': '8.5.0-alpha.22',
+ '@storybook/addon-links': '8.5.0-alpha.22',
+ '@storybook/addon-measure': '8.5.0-alpha.22',
+ '@storybook/addon-onboarding': '8.5.0-alpha.22',
+ '@storybook/addon-outline': '8.5.0-alpha.22',
+ '@storybook/addon-storysource': '8.5.0-alpha.22',
+ '@storybook/experimental-addon-test': '8.5.0-alpha.22',
+ '@storybook/addon-themes': '8.5.0-alpha.22',
+ '@storybook/addon-toolbars': '8.5.0-alpha.22',
+ '@storybook/addon-viewport': '8.5.0-alpha.22',
+ '@storybook/builder-vite': '8.5.0-alpha.22',
+ '@storybook/builder-webpack5': '8.5.0-alpha.22',
+ '@storybook/core': '8.5.0-alpha.22',
+ '@storybook/builder-manager': '8.5.0-alpha.22',
+ '@storybook/channels': '8.5.0-alpha.22',
+ '@storybook/client-logger': '8.5.0-alpha.22',
+ '@storybook/components': '8.5.0-alpha.22',
+ '@storybook/core-common': '8.5.0-alpha.22',
+ '@storybook/core-events': '8.5.0-alpha.22',
+ '@storybook/core-server': '8.5.0-alpha.22',
+ '@storybook/csf-tools': '8.5.0-alpha.22',
+ '@storybook/docs-tools': '8.5.0-alpha.22',
+ '@storybook/manager': '8.5.0-alpha.22',
+ '@storybook/manager-api': '8.5.0-alpha.22',
+ '@storybook/node-logger': '8.5.0-alpha.22',
+ '@storybook/preview': '8.5.0-alpha.22',
+ '@storybook/preview-api': '8.5.0-alpha.22',
+ '@storybook/router': '8.5.0-alpha.22',
+ '@storybook/telemetry': '8.5.0-alpha.22',
+ '@storybook/theming': '8.5.0-alpha.22',
+ '@storybook/types': '8.5.0-alpha.22',
+ '@storybook/angular': '8.5.0-alpha.22',
+ '@storybook/ember': '8.5.0-alpha.22',
+ '@storybook/experimental-nextjs-vite': '8.5.0-alpha.22',
+ '@storybook/html-vite': '8.5.0-alpha.22',
+ '@storybook/html-webpack5': '8.5.0-alpha.22',
+ '@storybook/nextjs': '8.5.0-alpha.22',
+ '@storybook/preact-vite': '8.5.0-alpha.22',
+ '@storybook/preact-webpack5': '8.5.0-alpha.22',
+ '@storybook/react-native-web-vite': '8.5.0-alpha.22',
+ '@storybook/react-vite': '8.5.0-alpha.22',
+ '@storybook/react-webpack5': '8.5.0-alpha.22',
+ '@storybook/server-webpack5': '8.5.0-alpha.22',
+ '@storybook/svelte-vite': '8.5.0-alpha.22',
+ '@storybook/svelte-webpack5': '8.5.0-alpha.22',
+ '@storybook/sveltekit': '8.5.0-alpha.22',
+ '@storybook/vue3-vite': '8.5.0-alpha.22',
+ '@storybook/vue3-webpack5': '8.5.0-alpha.22',
+ '@storybook/web-components-vite': '8.5.0-alpha.22',
+ '@storybook/web-components-webpack5': '8.5.0-alpha.22',
+ '@storybook/blocks': '8.5.0-alpha.22',
+ storybook: '8.5.0-alpha.22',
+ sb: '8.5.0-alpha.22',
+ '@storybook/cli': '8.5.0-alpha.22',
+ '@storybook/codemod': '8.5.0-alpha.22',
+ '@storybook/core-webpack': '8.5.0-alpha.22',
+ 'create-storybook': '8.5.0-alpha.22',
+ '@storybook/csf-plugin': '8.5.0-alpha.22',
+ '@storybook/instrumenter': '8.5.0-alpha.22',
+ '@storybook/react-dom-shim': '8.5.0-alpha.22',
+ '@storybook/source-loader': '8.5.0-alpha.22',
+ '@storybook/test': '8.5.0-alpha.22',
+ '@storybook/preset-create-react-app': '8.5.0-alpha.22',
+ '@storybook/preset-html-webpack': '8.5.0-alpha.22',
+ '@storybook/preset-preact-webpack': '8.5.0-alpha.22',
+ '@storybook/preset-react-webpack': '8.5.0-alpha.22',
+ '@storybook/preset-server-webpack': '8.5.0-alpha.22',
+ '@storybook/preset-svelte-webpack': '8.5.0-alpha.22',
+ '@storybook/preset-vue3-webpack': '8.5.0-alpha.22',
+ '@storybook/html': '8.5.0-alpha.22',
+ '@storybook/preact': '8.5.0-alpha.22',
+ '@storybook/react': '8.5.0-alpha.22',
+ '@storybook/server': '8.5.0-alpha.22',
+ '@storybook/svelte': '8.5.0-alpha.22',
+ '@storybook/vue3': '8.5.0-alpha.22',
+ '@storybook/web-components': '8.5.0-alpha.22',
};
diff --git a/code/core/src/manager-api/lib/stories.ts b/code/core/src/manager-api/lib/stories.ts
index 59b59f070a10..28fbc190853b 100644
--- a/code/core/src/manager-api/lib/stories.ts
+++ b/code/core/src/manager-api/lib/stories.ts
@@ -342,6 +342,7 @@ export const transformStoryIndexToStoriesHash = (
.reduce(addItem, orphanHash);
};
+/** Now we need to patch in the existing prepared stories */
export const addPreparedStories = (newHash: API_IndexHash, oldHash?: API_IndexHash) => {
if (!oldHash) {
return newHash;
diff --git a/code/core/src/manager-api/modules/refs.ts b/code/core/src/manager-api/modules/refs.ts
index 166c04786adc..cb9b8916ce29 100644
--- a/code/core/src/manager-api/modules/refs.ts
+++ b/code/core/src/manager-api/modules/refs.ts
@@ -179,7 +179,15 @@ export const init: ModuleFn = (
},
changeRefVersion: async (id, url) => {
const { versions, title } = api.getRefs()[id];
- const ref: API_SetRefData = { id, url, versions, title, index: {}, expanded: true };
+ const ref: API_SetRefData = {
+ id,
+ url,
+ versions,
+ title,
+ index: {},
+ filteredIndex: {},
+ expanded: true,
+ };
await api.setRef(id, { ...ref, type: 'unknown' }, false);
await api.checkRef(ref);
@@ -292,6 +300,7 @@ export const init: ModuleFn = (
// eslint-disable-next-line @typescript-eslint/naming-convention
let internal_index: StoryIndex | undefined;
let index: API_IndexHash | undefined;
+ let filteredIndex: API_IndexHash | undefined;
const { filters } = store.getState();
const { storyMapper = defaultStoryMapper } = provider.getConfig();
const ref = api.getRefs()[id];
@@ -304,19 +313,28 @@ export const init: ModuleFn = (
: storyIndex;
// @ts-expect-error (could be undefined)
- index = transformStoryIndexToStoriesHash(storyIndex, {
+ filteredIndex = transformStoryIndexToStoriesHash(storyIndex, {
provider,
docsOptions,
filters,
status: {},
});
+ // @ts-expect-error (could be undefined)
+ index = transformStoryIndexToStoriesHash(storyIndex, {
+ provider,
+ docsOptions,
+ filters: {},
+ status: {},
+ });
}
if (index) {
index = addRefIds(index, ref);
}
-
- await api.updateRef(id, { ...ref, ...rest, index, internal_index });
+ if (filteredIndex) {
+ filteredIndex = addRefIds(filteredIndex, ref);
+ }
+ await api.updateRef(id, { ...ref, ...rest, index, filteredIndex, internal_index });
},
updateRef: async (id, data) => {
diff --git a/code/core/src/manager-api/modules/stories.ts b/code/core/src/manager-api/modules/stories.ts
index 3c5aac769c6a..fa295bc20567 100644
--- a/code/core/src/manager-api/modules/stories.ts
+++ b/code/core/src/manager-api/modules/stories.ts
@@ -568,41 +568,61 @@ export const init: ModuleFn = ({
// The story index we receive on fetchStoryIndex is not, but all the prepared fields are optional
// so we can cast one to the other easily enough
setIndex: async (input) => {
- const { index: oldHash, status, filters } = store.getState();
- const newHash = transformStoryIndexToStoriesHash(input, {
+ const { filteredIndex: oldFilteredHash, index: oldHash, status, filters } = store.getState();
+ const newFilteredHash = transformStoryIndexToStoriesHash(input, {
provider,
docsOptions,
status,
filters,
});
+ const newHash = transformStoryIndexToStoriesHash(input, {
+ provider,
+ docsOptions,
+ status,
+ filters: {},
+ });
- // Now we need to patch in the existing prepared stories
- const output = addPreparedStories(newHash, oldHash);
-
- await store.setState({ internal_index: input, index: output, indexError: undefined });
+ await store.setState({
+ internal_index: input,
+ filteredIndex: addPreparedStories(newFilteredHash, oldFilteredHash),
+ index: addPreparedStories(newHash, oldHash),
+ indexError: undefined,
+ });
},
+ // FIXME: is there a bug where filtered stories get added back in on updateStory???
updateStory: async (
storyId: StoryId,
update: StoryUpdate,
ref?: API_ComposedRef
): Promise => {
if (!ref) {
- const { index } = store.getState();
- if (!index) {
- return;
+ const { index, filteredIndex } = store.getState();
+ if (index) {
+ index[storyId] = {
+ ...index[storyId],
+ ...update,
+ } as API_StoryEntry;
+ }
+ if (filteredIndex) {
+ filteredIndex[storyId] = {
+ ...filteredIndex[storyId],
+ ...update,
+ } as API_StoryEntry;
+ }
+ if (index || filteredIndex) {
+ await store.setState({ index, filteredIndex });
}
+ } else {
+ const { id: refId, index, filteredIndex }: any = ref;
index[storyId] = {
...index[storyId],
...update,
} as API_StoryEntry;
- await store.setState({ index });
- } else {
- const { id: refId, index }: any = ref;
- index[storyId] = {
- ...index[storyId],
+ filteredIndex[storyId] = {
+ ...filteredIndex[storyId],
...update,
} as API_StoryEntry;
- await fullAPI.updateRef(refId, { index });
+ await fullAPI.updateRef(refId, { index, filteredIndex });
}
},
updateDocs: async (
@@ -611,22 +631,33 @@ export const init: ModuleFn = ({
ref?: API_ComposedRef
): Promise => {
if (!ref) {
- const { index } = store.getState();
- if (!index) {
- return;
+ const { index, filteredIndex } = store.getState();
+ if (index) {
+ index[docsId] = {
+ ...index[docsId],
+ ...update,
+ } as API_DocsEntry;
}
+ if (filteredIndex) {
+ filteredIndex[docsId] = {
+ ...filteredIndex[docsId],
+ ...update,
+ } as API_DocsEntry;
+ }
+ if (index || filteredIndex) {
+ await store.setState({ index, filteredIndex });
+ }
+ } else {
+ const { id: refId, index, filteredIndex }: any = ref;
index[docsId] = {
...index[docsId],
...update,
} as API_DocsEntry;
- await store.setState({ index });
- } else {
- const { id: refId, index }: any = ref;
- index[docsId] = {
- ...index[docsId],
+ filteredIndex[docsId] = {
+ ...filteredIndex[docsId],
...update,
} as API_DocsEntry;
- await fullAPI.updateRef(refId, { index });
+ await fullAPI.updateRef(refId, { index, filteredIndex });
}
},
setPreviewInitialized: async (ref) => {
diff --git a/code/core/src/manager-api/tests/refs.test.ts b/code/core/src/manager-api/tests/refs.test.ts
index c8d65baafc57..b9d39ee6a88b 100644
--- a/code/core/src/manager-api/tests/refs.test.ts
+++ b/code/core/src/manager-api/tests/refs.test.ts
@@ -291,6 +291,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": undefined,
"id": "fake",
"index": undefined,
"indexError": {
@@ -360,6 +361,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": undefined,
"id": "fake",
"index": undefined,
"indexError": {
@@ -504,6 +506,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -522,6 +525,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -601,6 +605,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -682,6 +687,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -763,6 +769,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": undefined,
"id": "fake",
"index": undefined,
"internal_index": undefined,
@@ -905,6 +912,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": undefined,
"id": "fake",
"index": undefined,
"internal_index": undefined,
@@ -987,6 +995,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -1068,6 +1077,7 @@ describe('Refs API', () => {
{
"refs": {
"fake": {
+ "filteredIndex": {},
"id": "fake",
"index": {},
"internal_index": {
@@ -1227,18 +1237,20 @@ describe('Refs API', () => {
},
};
+ const transformOptions = {
+ provider: provider as any,
+ docsOptions: {},
+ filters: {},
+ status: {},
+ };
const initialState: Partial = {
refs: {
fake: {
id: 'fake',
url: 'https://example.com',
previewInitialized: true,
- index: transformStoryIndexToStoriesHash(index, {
- provider: provider as any,
- docsOptions: {},
- filters: {},
- status: {},
- }),
+ index: transformStoryIndexToStoriesHash(index, transformOptions),
+ filteredIndex: transformStoryIndexToStoriesHash(index, transformOptions),
internal_index: index,
},
},
@@ -1261,10 +1273,10 @@ describe('Refs API', () => {
await api.setRef('fake', { storyIndex: index });
- await expect(api.getRefs().fake.index).toEqual(
+ await expect(api.getRefs().fake.filteredIndex).toEqual(
expect.objectContaining({ 'a--1': expect.anything() })
);
- await expect(api.getRefs().fake.index).not.toEqual(
+ await expect(api.getRefs().fake.filteredIndex).not.toEqual(
expect.objectContaining({ 'a--2': expect.anything() })
);
});
diff --git a/code/core/src/manager-api/tests/stories.test.ts b/code/core/src/manager-api/tests/stories.test.ts
index b652c87cd7a1..6f480061d9ec 100644
--- a/code/core/src/manager-api/tests/stories.test.ts
+++ b/code/core/src/manager-api/tests/stories.test.ts
@@ -765,10 +765,15 @@ describe('stories API', () => {
source: '',
sourceLocation: '',
type: '',
- ref: { id: 'refId', index: { 'a--1': { args: { a: 'b' } } } } as any,
+ ref: {
+ id: 'refId',
+ index: { 'a--1': { args: { a: 'b' } } },
+ filteredIndex: { 'a--1': { args: { a: 'b' } } },
+ } as any,
});
provider.channel.emit(STORY_ARGS_UPDATED, { storyId: 'a--1', args: { foo: 'bar' } });
expect(fullAPI.updateRef).toHaveBeenCalledWith('refId', {
+ filteredIndex: { 'a--1': { args: { foo: 'bar' } } },
index: { 'a--1': { args: { foo: 'bar' } } },
});
});
@@ -1539,6 +1544,7 @@ describe('stories API', () => {
})
);
});
+
it('updates state', async () => {
const moduleArgs = createMockModuleArgs({});
const { api } = initStories(moduleArgs as unknown as ModuleArgs);
@@ -1565,9 +1571,9 @@ describe('stories API', () => {
await api.setIndex({ v: 5, entries: navigationEntries });
await api.experimental_setFilter('myCustomFilter', (item: any) => item.id.startsWith('a'));
- const { index } = store.getState();
+ const { filteredIndex } = store.getState();
- expect(index).toMatchInlineSnapshot(`
+ expect(filteredIndex).toMatchInlineSnapshot(`
{
"a": {
"children": [
@@ -1624,7 +1630,7 @@ describe('stories API', () => {
);
// empty, because there are no stories with status
- expect(store.getState().index).toMatchInlineSnapshot('{}');
+ expect(store.getState().filteredIndex).toMatchInlineSnapshot('{}');
// setting status should update the index
await api.experimental_updateStatus('a-addon-id', {
@@ -1636,7 +1642,7 @@ describe('stories API', () => {
'a--2': { status: 'success', title: 'a addon title', description: '' },
});
- expect(store.getState().index).toMatchInlineSnapshot(`
+ expect(store.getState().filteredIndex).toMatchInlineSnapshot(`
{
"a": {
"children": [
@@ -1676,9 +1682,9 @@ describe('stories API', () => {
await api.setIndex({ v: 5, entries: navigationEntries });
- const { index } = store.getState();
+ const { filteredIndex } = store.getState();
- expect(index).toMatchInlineSnapshot(`
+ expect(filteredIndex).toMatchInlineSnapshot(`
{
"a": {
"children": [
diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts
index 0bba74f935f9..90c0bfd8e29f 100644
--- a/code/core/src/manager-api/version.ts
+++ b/code/core/src/manager-api/version.ts
@@ -1 +1 @@
-export const version = '8.5.0-alpha.21';
+export const version = '8.5.0-alpha.22';
diff --git a/code/core/src/manager/components/preview/Toolbar.tsx b/code/core/src/manager/components/preview/Toolbar.tsx
index 5dd460e80e69..05385487a804 100644
--- a/code/core/src/manager/components/preview/Toolbar.tsx
+++ b/code/core/src/manager/components/preview/Toolbar.tsx
@@ -92,7 +92,7 @@ export const createTabsTool = (tabs: Addon_BaseType[]): Addon_BaseType => ({
const isActive = rp.path.includes(`tab=${tab.id}`);
return (
{
rp.applyQueryParams({ tab: tabIdToApply });
@@ -146,7 +146,7 @@ export const ToolbarComp = React.memo(function ToolbarComp({
{tabs.map((tab, index) => {
return (
{
api.applyQueryParams({ tab: tab.id === 'canvas' ? undefined : tab.id });
diff --git a/code/core/src/manager/components/sidebar/Explorer.stories.tsx b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
index 908ead2be9f3..34adad0a32a0 100644
--- a/code/core/src/manager/components/sidebar/Explorer.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Explorer.stories.tsx
@@ -34,7 +34,7 @@ const simple: Record = {
url: 'iframe.html',
previewInitialized: true,
// @ts-expect-error (invalid input)
- index: mockDataset.withRoot,
+ filteredIndex: mockDataset.withRoot,
},
};
@@ -47,7 +47,7 @@ const withRefs: Record = {
previewInitialized: true,
type: 'auto-inject',
// @ts-expect-error (invalid input)
- index: mockDataset.noRoot,
+ filteredIndex: mockDataset.noRoot,
},
injected: {
id: 'injected',
@@ -56,7 +56,7 @@ const withRefs: Record = {
previewInitialized: false,
type: 'auto-inject',
// @ts-expect-error (invalid input)
- index: mockDataset.noRoot,
+ filteredIndex: mockDataset.noRoot,
},
unknown: {
id: 'unknown',
@@ -65,7 +65,7 @@ const withRefs: Record = {
previewInitialized: true,
type: 'unknown',
// @ts-expect-error (invalid input)
- index: mockDataset.noRoot,
+ filteredIndex: mockDataset.noRoot,
},
lazy: {
id: 'lazy',
@@ -74,7 +74,7 @@ const withRefs: Record = {
previewInitialized: false,
type: 'lazy',
// @ts-expect-error (invalid input)
- index: mockDataset.withRoot,
+ filteredIndex: mockDataset.withRoot,
},
};
diff --git a/code/core/src/manager/components/sidebar/Refs.stories.tsx b/code/core/src/manager/components/sidebar/Refs.stories.tsx
index a042970beadc..3b6e37efce50 100644
--- a/code/core/src/manager/components/sidebar/Refs.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.stories.tsx
@@ -37,11 +37,11 @@ export default {
};
const { menu } = standardHeaderData;
-const index = mockDataset.withRoot;
+const filteredIndex = mockDataset.withRoot;
const storyId = '1-12-121';
-export const simpleData = { menu, index, storyId };
-export const loadingData = { menu, index: {} };
+export const simpleData = { menu, filteredIndex, storyId };
+export const loadingData = { menu, filteredIndex: {} };
// @ts-expect-error (non strict)
const indexError: Error = (() => {
@@ -60,14 +60,14 @@ const refs: Record = {
previewInitialized: false,
type: 'lazy',
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
},
empty: {
id: 'empty',
title: 'It is empty because no stories were loaded',
url: 'https://example.com',
type: 'lazy',
- index: {},
+ filteredIndex: {},
previewInitialized: false,
},
startInjected_unknown: {
@@ -77,7 +77,7 @@ const refs: Record = {
type: 'unknown',
previewInitialized: false,
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
},
startInjected_loading: {
id: 'startInjected_loading',
@@ -86,7 +86,7 @@ const refs: Record = {
type: 'auto-inject',
previewInitialized: false,
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
},
startInjected_ready: {
id: 'startInjected_ready',
@@ -95,7 +95,7 @@ const refs: Record = {
type: 'auto-inject',
previewInitialized: true,
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
},
versions: {
id: 'versions',
@@ -103,7 +103,7 @@ const refs: Record = {
url: 'https://example.com',
type: 'lazy',
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com' },
previewInitialized: true,
},
@@ -113,7 +113,7 @@ const refs: Record = {
url: 'https://example.com',
type: 'lazy',
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
versions: { '1.0.0': 'https://example.com/v1', '2.0.0': 'https://example.com/v2' },
previewInitialized: true,
},
@@ -138,7 +138,7 @@ const refs: Record = {
title: 'This storybook has a very very long name for some reason',
url: 'https://example.com',
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
type: 'lazy',
versions: {
'111.111.888-new': 'https://example.com/new',
@@ -154,7 +154,7 @@ const refs: Record = {
previewInitialized: false,
type: 'lazy',
// @ts-expect-error (invalid input)
- index,
+ filteredIndex,
},
};
diff --git a/code/core/src/manager/components/sidebar/Refs.tsx b/code/core/src/manager/components/sidebar/Refs.tsx
index 7412a627e889..b4d2a79ca351 100644
--- a/code/core/src/manager/components/sidebar/Refs.tsx
+++ b/code/core/src/manager/components/sidebar/Refs.tsx
@@ -81,7 +81,7 @@ export const Ref: FC = React.
const { docsOptions } = useStorybookState();
const api = useStorybookApi();
const {
- index,
+ filteredIndex: index,
id: refId,
title = refId,
isLoading: isLoadingMain,
diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
index 53f22957f17d..0e2df01f6aed 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx
@@ -111,7 +111,7 @@ const refs: Record = {
title: 'This is a ref',
url: 'https://example.com',
type: 'lazy',
- index,
+ filteredIndex: index,
previewInitialized: true,
},
};
@@ -123,7 +123,7 @@ const refsError = {
optimized: {
...refs.optimized,
// @ts-expect-error (non strict)
- index: undefined as IndexHash,
+ filteredIndex: undefined as IndexHash,
indexError,
},
};
@@ -132,7 +132,7 @@ const refsEmpty = {
optimized: {
...refs.optimized,
// type: 'auto-inject',
- index: {} as IndexHash,
+ filteredIndex: {} as IndexHash,
},
};
diff --git a/code/core/src/manager/components/sidebar/Sidebar.tsx b/code/core/src/manager/components/sidebar/Sidebar.tsx
index d4784cc8c562..dfec7fba7826 100644
--- a/code/core/src/manager/components/sidebar/Sidebar.tsx
+++ b/code/core/src/manager/components/sidebar/Sidebar.tsx
@@ -93,6 +93,7 @@ const useCombination = (
() => ({
[DEFAULT_REF_ID]: {
index,
+ filteredIndex: index,
indexError,
previewInitialized,
status,
diff --git a/code/core/src/manager/container/Panel.tsx b/code/core/src/manager/container/Panel.tsx
index c81e489d8f68..f8cc2877cef0 100644
--- a/code/core/src/manager/container/Panel.tsx
+++ b/code/core/src/manager/container/Panel.tsx
@@ -32,6 +32,12 @@ const getPanels = (api: API) => {
if (paramKey && parameters && parameters[paramKey] && parameters[paramKey].disable) {
return;
}
+ if (
+ panel.disabled === true ||
+ (typeof panel.disabled === 'function' && panel.disabled(parameters))
+ ) {
+ return;
+ }
filteredPanels[id] = panel;
});
diff --git a/code/core/src/manager/container/Sidebar.tsx b/code/core/src/manager/container/Sidebar.tsx
index bc05d1713b59..723d9989ac10 100755
--- a/code/core/src/manager/container/Sidebar.tsx
+++ b/code/core/src/manager/container/Sidebar.tsx
@@ -27,7 +27,7 @@ const Sidebar = React.memo(function Sideber({ onMenuClick }: SidebarProps) {
// is actually the stories hash. We should fix this up and make it consistent.
// eslint-disable-next-line @typescript-eslint/naming-convention
internal_index,
- index,
+ filteredIndex: index,
status,
indexError,
previewInitialized,
diff --git a/code/core/src/types/modules/addons.ts b/code/core/src/types/modules/addons.ts
index 47f5aec6412b..b2c7b4ac2f3c 100644
--- a/code/core/src/types/modules/addons.ts
+++ b/code/core/src/types/modules/addons.ts
@@ -5,7 +5,7 @@ import type { TestProviderConfig, TestingModuleProgressReportProgress } from '..
import type { RenderData as RouterData } from '../../router/types';
import type { ThemeVars } from '../../theming/types';
import type { API_SidebarOptions } from './api';
-import type { API_HashEntry, API_StatusState, API_StatusUpdate } from './api-stories';
+import type { API_HashEntry, API_StoryEntry } from './api-stories';
import type {
Args,
ArgsStoryFn as ArgsStoryFnForFramework,
@@ -392,7 +392,7 @@ export interface Addon_BaseType {
/** @unstable */
paramKey?: string;
/** @unstable */
- disabled?: boolean;
+ disabled?: boolean | ((parameters: API_StoryEntry['parameters']) => boolean);
/** @unstable */
hidden?: boolean;
}
diff --git a/code/core/src/types/modules/api.ts b/code/core/src/types/modules/api.ts
index 30edbe36ad29..f5e2d6f32100 100644
--- a/code/core/src/types/modules/api.ts
+++ b/code/core/src/types/modules/api.ts
@@ -155,6 +155,7 @@ export type API_StoryMapper = (ref: API_ComposedRef, story: SetStoriesStory) =>
export interface API_LoadedRefData {
index?: API_IndexHash;
+ filteredIndex?: API_IndexHash;
indexError?: Error;
previewInitialized: boolean;
}
@@ -180,6 +181,7 @@ export type API_ComposedRefUpdate = Partial<
| 'type'
| 'expanded'
| 'index'
+ | 'filteredIndex'
| 'versions'
| 'loginUrl'
| 'version'
diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json
index 126dfe4c5815..fd71436811d1 100644
--- a/code/deprecated/builder-manager/package.json
+++ b/code/deprecated/builder-manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/builder-manager",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook manager builder",
"keywords": [
"storybook"
diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json
index 6c31fd448d6a..e0f982ac028b 100644
--- a/code/deprecated/channels/package.json
+++ b/code/deprecated/channels/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/channels",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json
index f32f09ca650a..d09c87e56926 100644
--- a/code/deprecated/client-logger/package.json
+++ b/code/deprecated/client-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/client-logger",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json
index 2928619eb576..469a51d0ebb5 100644
--- a/code/deprecated/components/package.json
+++ b/code/deprecated/components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/components",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json
index ea6f5f01af92..fe28424bb50b 100644
--- a/code/deprecated/core-common/package.json
+++ b/code/deprecated/core-common/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-common",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json
index ec7a6f10d658..9f6b683c3320 100644
--- a/code/deprecated/core-events/package.json
+++ b/code/deprecated/core-events/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-events",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Event names used in storybook core",
"keywords": [
"storybook"
diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json
index 9a9e140507e8..2ad77557ad53 100644
--- a/code/deprecated/core-server/package.json
+++ b/code/deprecated/core-server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-server",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json
index 6e1a317e6aef..58acc248335c 100644
--- a/code/deprecated/csf-tools/package.json
+++ b/code/deprecated/csf-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-tools",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Parse and manipulate CSF and Storybook config files",
"keywords": [
"storybook"
diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json
index 8ca8d5eca235..fe154c164db4 100644
--- a/code/deprecated/docs-tools/package.json
+++ b/code/deprecated/docs-tools/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/docs-tools",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Shared utility functions for frameworks to implement docs",
"keywords": [
"storybook"
diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json
index 8fa0294fa760..a0cb5ac6f9b6 100644
--- a/code/deprecated/manager-api/package.json
+++ b/code/deprecated/manager-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager-api",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook Manager API & Context",
"keywords": [
"storybook"
diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json
index d5df04c24258..941049b955b2 100644
--- a/code/deprecated/manager/package.json
+++ b/code/deprecated/manager/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/manager",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook UI",
"keywords": [
"storybook"
diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json
index 67784935f5e5..f1081b028213 100644
--- a/code/deprecated/node-logger/package.json
+++ b/code/deprecated/node-logger/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/node-logger",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json
index 2995ec342e9a..5c5d894f90af 100644
--- a/code/deprecated/preview-api/package.json
+++ b/code/deprecated/preview-api/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview-api",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json
index 27da2496c369..fa91ac524655 100644
--- a/code/deprecated/preview/package.json
+++ b/code/deprecated/preview/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preview",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json
index 7224c7ce0ce4..3b2e0b23416e 100644
--- a/code/deprecated/router/package.json
+++ b/code/deprecated/router/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/router",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook Router",
"keywords": [
"storybook"
diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json
index fd7a105320d8..c2a12b4fd4a9 100644
--- a/code/deprecated/telemetry/package.json
+++ b/code/deprecated/telemetry/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/telemetry",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Telemetry logging for crash reports and usage statistics",
"keywords": [
"storybook"
diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json
index db27fb520d9a..7d232d7d961a 100644
--- a/code/deprecated/theming/package.json
+++ b/code/deprecated/theming/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/theming",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook Components",
"keywords": [
"storybook"
diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json
index 6d4a568f68b6..d8aa8cf50e59 100644
--- a/code/deprecated/types/package.json
+++ b/code/deprecated/types/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/types",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Core Storybook TS Types",
"keywords": [
"storybook"
diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts
index 057dc91f715d..d9faad22939a 100644
--- a/code/e2e-tests/util.ts
+++ b/code/e2e-tests/util.ts
@@ -1,3 +1,4 @@
+/* eslint-disable local-rules/no-uncategorized-errors */
import { toId } from '@storybook/csf';
import type { Expect, Page } from '@playwright/test';
@@ -61,6 +62,7 @@ export class SbPage {
await this.expect(selected).toHaveAttribute('data-selected', 'true');
await this.previewRoot();
+ await this.waitUntilLoaded();
}
async navigateToUnattachedDocs(title: string, name = 'docs') {
@@ -80,7 +82,25 @@ export class SbPage {
const selected = storyLink;
await this.expect(selected).toHaveAttribute('data-selected', 'true');
- await this.previewRoot();
+ await this.waitForStoryLoaded();
+ }
+
+ async waitForStoryLoaded() {
+ try {
+ const root = this.previewRoot();
+ // Wait until there is at least one child (a story element) in the preview iframe
+ await root.locator(':scope > *').first().waitFor({
+ state: 'attached',
+ timeout: 10000,
+ });
+ } catch (error: any) {
+ if (error.name === 'TimeoutError') {
+ throw new Error(
+ 'The Storybook iframe did not have children within the specified timeout. Did the story load correctly?'
+ );
+ }
+ throw error;
+ }
}
async waitUntilLoaded() {
@@ -112,6 +132,8 @@ export class SbPage {
const storyLoadingPage = root.locator('.sb-preparing-story');
await docsLoadingPage.waitFor({ state: 'hidden' });
await storyLoadingPage.waitFor({ state: 'hidden' });
+
+ await this.waitForStoryLoaded();
}
previewIframe() {
@@ -143,6 +165,30 @@ export class SbPage {
getCanvasBodyElement() {
return this.previewIframe().locator('body');
}
+
+ // utility to try and decrease flake
+ async retryTimes(
+ fn: () => Promise,
+ options?: {
+ retries?: number;
+ delay?: number;
+ }
+ ): Promise {
+ let attempts = 0;
+ const { retries = 3, delay = 0 } = options || {};
+ while (attempts < retries) {
+ try {
+ await fn();
+ return;
+ } catch (error) {
+ attempts++;
+ if (attempts === retries) {
+ throw error;
+ }
+ await new Promise((resolve) => setTimeout(resolve, delay));
+ }
+ }
+ }
}
const templateName: keyof typeof allTemplates = process.env.STORYBOOK_TEMPLATE_NAME || ('' as any);
diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json
index 92eb88d21a34..7ac17f6c5506 100644
--- a/code/frameworks/angular/package.json
+++ b/code/frameworks/angular/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/angular",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.",
"keywords": [
"storybook",
diff --git a/code/frameworks/angular/src/builders/build-storybook/schema.json b/code/frameworks/angular/src/builders/build-storybook/schema.json
index 6d976bf5dd0d..9393f53d49b7 100644
--- a/code/frameworks/angular/src/builders/build-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/build-storybook/schema.json
@@ -67,16 +67,30 @@
"compodocArgs": {
"type": "array",
"description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
- "default": ["-e", "json"],
+ "default": [
+ "-e",
+ "json"
+ ],
"items": {
"type": "string"
}
},
"webpackStatsJson": {
- "type": ["boolean", "string"],
+ "type": [
+ "boolean",
+ "string"
+ ],
"description": "Write Webpack Stats JSON to disk",
"default": false
},
+ "statsJson": {
+ "type": [
+ "boolean",
+ "string"
+ ],
+ "description": "Write stats JSON to disk",
+ "default": false
+ },
"previewUrl": {
"type": "string",
"description": "Disables the default storybook preview and lets you use your own"
@@ -113,7 +127,10 @@
}
},
"sourceMap": {
- "type": ["boolean", "object"],
+ "type": [
+ "boolean",
+ "object"
+ ],
"description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
"default": false
}
@@ -151,7 +168,11 @@
}
},
"additionalProperties": false,
- "required": ["glob", "input", "output"]
+ "required": [
+ "glob",
+ "input",
+ "output"
+ ]
},
{
"type": "string"
@@ -179,7 +200,9 @@
}
},
"additionalProperties": false,
- "required": ["input"]
+ "required": [
+ "input"
+ ]
},
{
"type": "string",
@@ -188,4 +211,4 @@
]
}
}
-}
+}
\ No newline at end of file
diff --git a/code/frameworks/angular/src/builders/start-storybook/schema.json b/code/frameworks/angular/src/builders/start-storybook/schema.json
index 729c3ea5b724..da3b697867fd 100644
--- a/code/frameworks/angular/src/builders/start-storybook/schema.json
+++ b/code/frameworks/angular/src/builders/start-storybook/schema.json
@@ -94,7 +94,10 @@
"compodocArgs": {
"type": "array",
"description": "Compodoc options : https://compodoc.app/guides/options.html. Options `-p` with tsconfig path and `-d` with workspace root is always given.",
- "default": ["-e", "json"],
+ "default": [
+ "-e",
+ "json"
+ ],
"items": {
"type": "string"
}
@@ -135,10 +138,21 @@
"description": "URL path to be appended when visiting Storybook for the first time"
},
"webpackStatsJson": {
- "type": ["boolean", "string"],
+ "type": [
+ "boolean",
+ "string"
+ ],
"description": "Write Webpack Stats JSON to disk",
"default": false
},
+ "statsJson": {
+ "type": [
+ "boolean",
+ "string"
+ ],
+ "description": "Write stats JSON to disk",
+ "default": false
+ },
"previewUrl": {
"type": "string",
"description": "Disables the default storybook preview and lets you use your own"
@@ -149,7 +163,10 @@
"pattern": "(silly|verbose|info|warn|silent)"
},
"sourceMap": {
- "type": ["boolean", "object"],
+ "type": [
+ "boolean",
+ "object"
+ ],
"description": "Configure sourcemaps. See: https://angular.io/guide/workspace-config#source-map-configuration",
"default": false
}
@@ -187,7 +204,11 @@
}
},
"additionalProperties": false,
- "required": ["glob", "input", "output"]
+ "required": [
+ "glob",
+ "input",
+ "output"
+ ]
},
{
"type": "string"
@@ -215,7 +236,9 @@
}
},
"additionalProperties": false,
- "required": ["input"]
+ "required": [
+ "input"
+ ]
},
{
"type": "string",
@@ -224,4 +247,4 @@
]
}
}
-}
+}
\ No newline at end of file
diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json
index 13ce986ce29d..9b63281d1e21 100644
--- a/code/frameworks/ember/package.json
+++ b/code/frameworks/ember/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/ember",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.",
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember",
"bugs": {
diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json
index f5737d7c79f6..c8beb6e37803 100644
--- a/code/frameworks/experimental-nextjs-vite/package.json
+++ b/code/frameworks/experimental-nextjs-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/experimental-nextjs-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Next.js and Vite",
"keywords": [
"storybook",
diff --git a/code/frameworks/experimental-nextjs-vite/src/types.ts b/code/frameworks/experimental-nextjs-vite/src/types.ts
index 8de91a4430d9..0221787dccb6 100644
--- a/code/frameworks/experimental-nextjs-vite/src/types.ts
+++ b/code/frameworks/experimental-nextjs-vite/src/types.ts
@@ -1,9 +1,7 @@
-import type {
- CompatibleString,
- StorybookConfig as StorybookConfigBase,
-} from 'storybook/internal/types';
+import type { CompatibleString } from 'storybook/internal/types';
-import type { BuilderOptions, StorybookConfigVite } from '@storybook/builder-vite';
+import type { BuilderOptions } from '@storybook/builder-vite';
+import type { StorybookConfig as StorybookConfigReactVite } from '@storybook/react-vite';
type FrameworkName = CompatibleString<'@storybook/experimental-nextjs-vite'>;
type BuilderName = CompatibleString<'@storybook/builder-vite'>;
@@ -21,7 +19,7 @@ type StorybookConfigFramework = {
name: FrameworkName;
options: FrameworkOptions;
};
- core?: StorybookConfigBase['core'] & {
+ core?: StorybookConfigReactVite['core'] & {
builder?:
| BuilderName
| {
@@ -32,9 +30,5 @@ type StorybookConfigFramework = {
};
/** The interface for Storybook configuration in `main.ts` files. */
-export type StorybookConfig = Omit<
- StorybookConfigBase,
- keyof StorybookConfigVite | keyof StorybookConfigFramework
-> &
- StorybookConfigVite &
- StorybookConfigFramework & {};
+export type StorybookConfig = Omit &
+ StorybookConfigFramework;
diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json
index 4ebf99ebf5d1..f6e7d96701f6 100644
--- a/code/frameworks/html-vite/package.json
+++ b/code/frameworks/html-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json
index 98225ebcdc48..c6597bb17a64 100644
--- a/code/frameworks/html-webpack5/package.json
+++ b/code/frameworks/html-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json
index fb6f6a1d1f98..fe21d56ea6b9 100644
--- a/code/frameworks/nextjs/package.json
+++ b/code/frameworks/nextjs/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/nextjs",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Next.js",
"keywords": [
"storybook",
diff --git a/code/frameworks/nextjs/src/config/webpack.ts b/code/frameworks/nextjs/src/config/webpack.ts
index 76edac25c81c..4b10922c9df9 100644
--- a/code/frameworks/nextjs/src/config/webpack.ts
+++ b/code/frameworks/nextjs/src/config/webpack.ts
@@ -1,8 +1,7 @@
import type { NextConfig } from 'next';
import type { Configuration as WebpackConfig } from 'webpack';
-import { DefinePlugin } from 'webpack';
-import { addScopedAlias, resolveNextConfig, setAlias } from '../utils';
+import { addScopedAlias, resolveNextConfig } from '../utils';
const tryResolve = (path: string) => {
try {
@@ -48,12 +47,15 @@ export const configureConfig = async ({
addScopedAlias(baseConfig, 'react-dom/server', 'next/dist/compiled/react-dom/server');
}
- setupRuntimeConfig(baseConfig, nextConfig);
+ await setupRuntimeConfig(baseConfig, nextConfig);
return nextConfig;
};
-const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig): void => {
+const setupRuntimeConfig = async (
+ baseConfig: WebpackConfig,
+ nextConfig: NextConfig
+): Promise => {
const definePluginConfig: Record = {
// this mimics what nextjs does client side
// https://github.com/vercel/next.js/blob/57702cb2a9a9dba4b552e0007c16449cf36cfb44/packages/next/client/index.tsx#L101
@@ -67,5 +69,7 @@ const setupRuntimeConfig = (baseConfig: WebpackConfig, nextConfig: NextConfig):
definePluginConfig['process.env.__NEXT_NEW_LINK_BEHAVIOR'] = newNextLinkBehavior;
- baseConfig.plugins?.push(new DefinePlugin(definePluginConfig));
+ // Load DefinePlugin with a dynamic import to ensure that Next.js can first
+ // replace webpack with its own internal instance, and we get that here.
+ baseConfig.plugins?.push(new (await import('webpack')).default.DefinePlugin(definePluginConfig));
};
diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts
index 3463910175e1..6b90ae543a22 100644
--- a/code/frameworks/nextjs/src/preset.ts
+++ b/code/frameworks/nextjs/src/preset.ts
@@ -10,31 +10,29 @@ import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core';
import { loadPartialConfig } from '@babel/core';
import semver from 'semver';
-import { configureAliases } from './aliases/webpack';
-import { configureBabelLoader } from './babel/loader';
import nextBabelPreset from './babel/preset';
-import { configureCompatibilityAliases } from './compatibility/compatibility-map';
import { configureConfig } from './config/webpack';
-import { configureCss } from './css/webpack';
-import { configureNextExportMocks } from './export-mocks/webpack';
-import { configureFastRefresh } from './fastRefresh/webpack';
import TransformFontImports from './font/babel';
-import { configureNextFont } from './font/webpack/configureNextFont';
-import { configureImages } from './images/webpack';
-import { configureImports } from './imports/webpack';
-import { configureNodePolyfills } from './nodePolyfills/webpack';
-import { configureRSC } from './rsc/webpack';
-import { configureStyledJsx } from './styledJsx/webpack';
-import { configureSWCLoader } from './swc/loader';
import type { FrameworkOptions, StorybookConfig } from './types';
-import { configureRuntimeNextjsVersionResolution, getNextjsVersion } from './utils';
export const addons: PresetProperty<'addons'> = [
dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
];
export const core: PresetProperty<'core'> = async (config, options) => {
- const framework = await options.presets.apply('framework');
+ const framework = await options.presets.apply('framework');
+
+ // Load the Next.js configuration before we need it in webpackFinal (below).
+ // This gives Next.js an opportunity to override some of webpack's internals
+ // (see next/dist/server/config-utils.js) before @storybook/builder-webpack5
+ // starts to use it. Without this, webpack's file system cache (fsCache: true)
+ // does not work.
+ await configureConfig({
+ // Pass in a dummy webpack config object for now, since we don't want to
+ // modify the real one yet. We pass in the real one in webpackFinal.
+ baseConfig: {},
+ nextConfigPath: typeof framework === 'string' ? undefined : framework.options.nextConfigPath,
+ });
return {
...config,
@@ -144,6 +142,22 @@ export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig,
nextConfigPath,
});
+ // Use dynamic imports to ensure these modules that use webpack load after
+ // Next.js has been configured (above), and has replaced webpack with its precompiled
+ // version.
+ const { configureNextFont } = await import('./font/webpack/configureNextFont');
+ const { configureRuntimeNextjsVersionResolution, getNextjsVersion } = await import('./utils');
+ const { configureImports } = await import('./imports/webpack');
+ const { configureCss } = await import('./css/webpack');
+ const { configureImages } = await import('./images/webpack');
+ const { configureStyledJsx } = await import('./styledJsx/webpack');
+ const { configureNodePolyfills } = await import('./nodePolyfills/webpack');
+ const { configureAliases } = await import('./aliases/webpack');
+ const { configureFastRefresh } = await import('./fastRefresh/webpack');
+ const { configureRSC } = await import('./rsc/webpack');
+ const { configureSWCLoader } = await import('./swc/loader');
+ const { configureBabelLoader } = await import('./babel/loader');
+
const babelRCPath = join(getProjectRoot(), '.babelrc');
const babelConfigPath = join(getProjectRoot(), 'babel.config.js');
const hasBabelConfig = existsSync(babelRCPath) || existsSync(babelConfigPath);
diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json
index 1687b02e0230..94c8152f6308 100644
--- a/code/frameworks/preact-vite/package.json
+++ b/code/frameworks/preact-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json
index 17fc5dd05953..22a6956d8142 100644
--- a/code/frameworks/preact-webpack5/package.json
+++ b/code/frameworks/preact-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json
index 42847738ee1d..b256cf70d1b6 100644
--- a/code/frameworks/react-native-web-vite/package.json
+++ b/code/frameworks/react-native-web-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-native-web-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Develop react-native components an isolated web environment with hot reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json
index 6d07c52bfac8..c6a45266f22b 100644
--- a/code/frameworks/react-vite/package.json
+++ b/code/frameworks/react-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json
index bb74a3e7240a..8e564dffa63f 100644
--- a/code/frameworks/react-webpack5/package.json
+++ b/code/frameworks/react-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json
index 1de70d7f8b63..58ed15954906 100644
--- a/code/frameworks/server-webpack5/package.json
+++ b/code/frameworks/server-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json
index 83ffa79e2f8c..955e2206cfe9 100644
--- a/code/frameworks/svelte-vite/package.json
+++ b/code/frameworks/svelte-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json
index 065828177e41..6bc52a6b823c 100644
--- a/code/frameworks/svelte-webpack5/package.json
+++ b/code/frameworks/svelte-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json
index 69a794c5365a..77fb37cc5f03 100644
--- a/code/frameworks/sveltekit/package.json
+++ b/code/frameworks/sveltekit/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/sveltekit",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for SvelteKit",
"keywords": [
"storybook",
diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json
index 8e93d5775057..7bb0922259a9 100644
--- a/code/frameworks/vue3-vite/package.json
+++ b/code/frameworks/vue3-vite/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-vite",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json
index f05663bad9c6..4cc005ebf449 100644
--- a/code/frameworks/vue3-webpack5/package.json
+++ b/code/frameworks/vue3-webpack5/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3-webpack5",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json
index f367cc35ce05..e6fa38e1646a 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json
index faa2b6763fa3..58dfcaa0738b 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.",
"keywords": [
"lit",
diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json
index 430250ca9e3a..12504b248173 100644
--- a/code/lib/blocks/package.json
+++ b/code/lib/blocks/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/blocks",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Doc Blocks",
"keywords": [
"storybook"
diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json
index 858eaee4fcd8..3d9f74381e87 100644
--- a/code/lib/cli-sb/package.json
+++ b/code/lib/cli-sb/package.json
@@ -1,6 +1,6 @@
{
"name": "sb",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json
index 5164fbf92187..7e0d04ac274a 100644
--- a/code/lib/cli-storybook/package.json
+++ b/code/lib/cli-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/cli",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook CLI",
"keywords": [
"storybook"
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
index 71110733d896..7bd831d082b7 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts
@@ -141,7 +141,8 @@ describe('addonA11yAddonTest', () => {
`;
vi.mocked(readFileSync).mockReturnValue(source);
- const transformedCode = transformSetupFile(setupFile);
+ const s = readFileSync(setupFile, 'utf8');
+ const transformedCode = transformSetupFile(s);
expect(transformedCode).toMatchInlineSnapshot(`
"import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import { beforeAll } from 'vitest';
@@ -169,7 +170,35 @@ describe('addonA11yAddonTest', () => {
`;
vi.mocked(readFileSync).mockReturnValue(source);
- const transformedCode = transformSetupFile(setupFile);
+ const s = readFileSync(setupFile, 'utf8');
+ const transformedCode = transformSetupFile(s);
+ expect(transformedCode).toMatchInlineSnapshot(`
+ "import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+ import { beforeAll } from 'vitest';
+ import { setProjectAnnotations } from 'storybook';
+ import * as projectAnnotations from './preview';
+
+ const project = setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);
+
+ beforeAll(project.beforeAll);"
+ `);
+ });
+
+ it('should transform setup file correctly - project annotation is not an array', () => {
+ const setupFile = '/path/to/vitest.setup.ts';
+ const source = dedent`
+ import { beforeAll } from 'vitest';
+ import { setProjectAnnotations } from 'storybook';
+ import * as projectAnnotations from './preview';
+
+ const project = setProjectAnnotations(projectAnnotations);
+
+ beforeAll(project.beforeAll);
+ `;
+ vi.mocked(readFileSync).mockReturnValue(source);
+
+ const s = readFileSync(setupFile, 'utf8');
+ const transformedCode = transformSetupFile(s);
expect(transformedCode).toMatchInlineSnapshot(`
"import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
import { beforeAll } from 'vitest';
diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
index ae848cf57689..6b85146407f6 100644
--- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
+++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts
@@ -22,8 +22,7 @@ interface AddonA11yAddonTestOptions {
*/
export const addonA11yAddonTest: Fix = {
id: 'addonA11yAddonTest',
- // TODO: Change to the correct version after testing
- versionRange: ['<8.5.0', '*'],
+ versionRange: ['<8.5.0', '>=8.5.0'],
promptType(result) {
if (result.setupFile === null) {
@@ -53,7 +52,11 @@ export const addonA11yAddonTest: Fix = {
try {
if (vitestSetupFile) {
- const transformedSetupCode = transformSetupFile(vitestSetupFile);
+ const source = readFileSync(vitestSetupFile, 'utf8');
+ if (source.includes('@storybook/addon-a11y')) {
+ return null;
+ }
+ const transformedSetupCode = transformSetupFile(source);
return {
setupFile: vitestSetupFile,
transformedSetupCode,
@@ -124,8 +127,7 @@ export const addonA11yAddonTest: Fix = {
},
};
-export function transformSetupFile(setupFile: string) {
- const source = readFileSync(setupFile, 'utf8');
+export function transformSetupFile(source: string) {
const j = jscodeshift.withParser('ts');
const root = j(source);
@@ -148,9 +150,14 @@ export function transformSetupFile(setupFile: string) {
throw new Error('Could not find setProjectAnnotations call in vitest.setup file');
}
- // Add a11yAddonAnnotations to the annotations array
- setProjectAnnotationsCall.find(j.ArrayExpression).forEach((p) => {
- p.value.elements.unshift(j.identifier('a11yAddonAnnotations'));
+ // Add a11yAddonAnnotations to the annotations array or create a new array if argument is a string
+ setProjectAnnotationsCall.forEach((p) => {
+ if (p.value.arguments.length === 1 && p.value.arguments[0].type === 'ArrayExpression') {
+ p.value.arguments[0].elements.unshift(j.identifier('a11yAddonAnnotations'));
+ } else if (p.value.arguments.length === 1 && p.value.arguments[0].type === 'Identifier') {
+ const arg = p.value.arguments[0];
+ p.value.arguments[0] = j.arrayExpression([j.identifier('a11yAddonAnnotations'), arg]);
+ }
});
// Add the import declaration at the top
diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json
index 879f9fda1ed8..765a06c1f3d6 100644
--- a/code/lib/cli/package.json
+++ b/code/lib/cli/package.json
@@ -1,6 +1,6 @@
{
"name": "storybook",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook's CLI - install, dev, build, upgrade, and more",
"keywords": [
"cli",
diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json
index d0075f450f7a..b41d0290501c 100644
--- a/code/lib/codemod/package.json
+++ b/code/lib/codemod/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/codemod",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "A collection of codemod scripts written with JSCodeshift",
"keywords": [
"storybook"
diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json
index 5ac62b95195c..bb490874f2ba 100644
--- a/code/lib/core-webpack/package.json
+++ b/code/lib/core-webpack/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/core-webpack",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook framework-agnostic API",
"keywords": [
"storybook"
diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json
index 984e9d7df530..8916f1e56826 100644
--- a/code/lib/create-storybook/package.json
+++ b/code/lib/create-storybook/package.json
@@ -1,6 +1,6 @@
{
"name": "create-storybook",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Initialize Storybook into your project",
"homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook",
"bugs": {
diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json
index b05f5b11e303..21b0e8b1855f 100644
--- a/code/lib/csf-plugin/package.json
+++ b/code/lib/csf-plugin/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/csf-plugin",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Enrich CSF files via static analysis",
"keywords": [
"storybook"
diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json
index 6c15c502a711..a015da12f533 100644
--- a/code/lib/instrumenter/package.json
+++ b/code/lib/instrumenter/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/instrumenter",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json
index 8a17e18920d3..75818dcef25d 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json
index c52a0f92894f..a3073390d00d 100644
--- a/code/lib/source-loader/package.json
+++ b/code/lib/source-loader/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/source-loader",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Source loader",
"keywords": [
"lib",
diff --git a/code/lib/test/package.json b/code/lib/test/package.json
index f142e3644729..e1d356bdb570 100644
--- a/code/lib/test/package.json
+++ b/code/lib/test/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/test",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "",
"keywords": [
"storybook"
diff --git a/code/package.json b/code/package.json
index 50f1604dc814..80fb0fb2089f 100644
--- a/code/package.json
+++ b/code/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/root",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"private": true,
"description": "Storybook root",
"homepage": "https://storybook.js.org/",
diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json
index 6affbff09691..f0b9550cd8e1 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Create React App preset",
"keywords": [
"storybook"
diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json
index 7ae3edc465f6..0187f6af1adc 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json
index 13c9c5badaf4..45fe95cdc3c3 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Preact: Develop Preact Component in isolation.",
"keywords": [
"storybook"
diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json
index acfe5f3ea4e1..65bdb059fed4 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for React: Develop React Component in isolation with Hot Reloading",
"keywords": [
"storybook"
diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json
index a783568c9eff..e3e366850900 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json
index 6e4a595a9bb0..45448bf58dc0 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json
index 38d7ec940384..aedd88aff477 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": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.",
"keywords": [
"storybook"
diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json
index 056a860d6dde..817ba8045700 100644
--- a/code/renderers/html/package.json
+++ b/code/renderers/html/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/html",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook HTML renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json
index 921291e4fd75..b47e3cbd0164 100644
--- a/code/renderers/preact/package.json
+++ b/code/renderers/preact/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/preact",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Preact renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json
index 968b2be5d175..a58ef3d8dde8 100644
--- a/code/renderers/react/package.json
+++ b/code/renderers/react/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/react",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook React renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json
index 8f05da4f5759..232c064fbd58 100644
--- a/code/renderers/server/package.json
+++ b/code/renderers/server/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/server",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Server renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json
index c8a221096ee9..0e084a61dd4f 100644
--- a/code/renderers/svelte/package.json
+++ b/code/renderers/svelte/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/svelte",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Svelte renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json
index c57db46d9306..c5a70b1bf71f 100644
--- a/code/renderers/vue3/package.json
+++ b/code/renderers/vue3/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/vue3",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook Vue 3 renderer",
"keywords": [
"storybook"
diff --git a/code/renderers/vue3/src/docs/sourceDecorator.ts b/code/renderers/vue3/src/docs/sourceDecorator.ts
index 7eb8734305af..cc2f922f63f1 100644
--- a/code/renderers/vue3/src/docs/sourceDecorator.ts
+++ b/code/renderers/vue3/src/docs/sourceDecorator.ts
@@ -107,7 +107,6 @@ ${template}`;
* Checks if the source code generation should be skipped for the given Story context. Will be true
* if one of the following is true:
*
- * - View mode is not "docs"
* - Story is no arg story
* - Story has set custom source code via parameters.docs.source.code
* - Story has set source type to "code" via parameters.docs.source.type
@@ -120,13 +119,10 @@ export const shouldSkipSourceCodeGeneration = (context: StoryContext): boolean =
}
const isArgsStory = context?.parameters.__isArgsStory;
- const isDocsViewMode = context?.viewMode === 'docs';
// never render if the user is forcing the block to render code, or
// if the user provides code, or if it's not an args story.
- return (
- !isDocsViewMode || !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE
- );
+ return !isArgsStory || sourceParams?.code || sourceParams?.type === SourceType.CODE;
};
/**
diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json
index cfcdef31e344..3365415dccca 100644
--- a/code/renderers/web-components/package.json
+++ b/code/renderers/web-components/package.json
@@ -1,6 +1,6 @@
{
"name": "@storybook/web-components",
- "version": "8.5.0-alpha.21",
+ "version": "8.5.0-alpha.22",
"description": "Storybook web-components renderer",
"keywords": [
"lit",
diff --git a/docs/versions/next.json b/docs/versions/next.json
index c38c2352087f..8ba437344971 100644
--- a/docs/versions/next.json
+++ b/docs/versions/next.json
@@ -1 +1 @@
-{"version":"8.5.0-alpha.21","info":{"plain":"- Addon A11y: Add typesVersions support for TypeScript definitions in a11y package - [#30005](https://github.com/storybookjs/storybook/pull/30005), thanks @valentinpalkovic!\n- Addon A11y: Refactor environment variable handling for Vitest integration - [#30022](https://github.com/storybookjs/storybook/pull/30022), thanks @valentinpalkovic!\n- Addon A11y: Run the a11y automigration on postInstall - [#30004](https://github.com/storybookjs/storybook/pull/30004), thanks @kasperpeulen!\n- Addon A11y: Update accessibility status handling in TestProviderRender - [#30027](https://github.com/storybookjs/storybook/pull/30027), thanks @valentinpalkovic!\n- Addon Onboarding: Prebundle react-confetti - [#29996](https://github.com/storybookjs/storybook/pull/29996), thanks @yannbf!\n- Addon Test: Correctly stop Storybook when Vitest closes - [#30012](https://github.com/storybookjs/storybook/pull/30012), thanks @JReinhold!\n- Addon Test: Show sub test provider toggle state in main testing module - [#30019](https://github.com/storybookjs/storybook/pull/30019), thanks @ghengeveld!\n- Addon Test: Wrap sub-paths exported with `require.resolve` - [#30026](https://github.com/storybookjs/storybook/pull/30026), thanks @ndelangen!\n- Core: Fix bundling of React - [#30003](https://github.com/storybookjs/storybook/pull/30003), thanks @yannbf!"}}
+{"version":"8.5.0-alpha.22","info":{"plain":"- Addon Docs: Dynamically import rehype - [#29544](https://github.com/storybookjs/storybook/pull/29544), thanks @valentinpalkovic!\n- Addon Test: Fix duplicate `test.include` patterns - [#30029](https://github.com/storybookjs/storybook/pull/30029), thanks @JReinhold!\n- Addon Test: Fix environment variable for Vitest Storybook integration - [#30054](https://github.com/storybookjs/storybook/pull/30054), thanks @valentinpalkovic!\n- Addon Test: Use local storybook binary instead - [#30021](https://github.com/storybookjs/storybook/pull/30021), thanks @kasperpeulen!\n- Addon Test: Wait for 2 seconds before showing result mismatch warning - [#30002](https://github.com/storybookjs/storybook/pull/30002), thanks @ghengeveld!\n- Angular: Support statsJson in angular schemas - [#29233](https://github.com/storybookjs/storybook/pull/29233), thanks @yannbf!\n- Core: Fix `scrollIntoView` behavior and reimplement testing module time rendering - [#30044](https://github.com/storybookjs/storybook/pull/30044), thanks @ghengeveld!\n- Docs: Add code snippet to addons panel - [#29253](https://github.com/storybookjs/storybook/pull/29253), thanks @larsrickert!\n- Next.js: Fix webpack fsCache not working - [#29654](https://github.com/storybookjs/storybook/pull/29654), thanks @sentience!\n- Nextjs-Vite: Add TS docgen support - [#29824](https://github.com/storybookjs/storybook/pull/29824), thanks @yannbf!\n- Nextjs-Vite: Fix docgen types in main config - [#30042](https://github.com/storybookjs/storybook/pull/30042), thanks @yannbf!\n- React: Fix RSC compatibility with addon-themes and hooks - [#26243](https://github.com/storybookjs/storybook/pull/26243), thanks @shilman!\n- UI: Fix controls and parameters on tag-filtered stories - [#30038](https://github.com/storybookjs/storybook/pull/30038), thanks @shilman!"}}
diff --git a/docs/writing-tests/test-coverage.mdx b/docs/writing-tests/test-coverage.mdx
index bb150ef1af56..1b62f752dfbd 100644
--- a/docs/writing-tests/test-coverage.mdx
+++ b/docs/writing-tests/test-coverage.mdx
@@ -25,7 +25,7 @@ Coverage is included in the Test addon and, when enabled, will be calculated whe
-Before coverage can be calculated, you may be prompted to install a support package corresponding to your [coverage provider](#coverage-provider):
+Before coverage can be calculated, you may need to install a support package corresponding to your [coverage provider](#coverage-provider):
{/* prettier-ignore-start */}
@@ -192,7 +192,7 @@ When calculating coverage in the Storybook UI, the following options are always
#### Excluding stories from the coverage report
-Until Vitest 2.2.0 is released, the generated coverage report will include the stories files themselves. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:
+Until Vitest 3.0.0 is released, the generated coverage report will include the stories files themselves and output from your built Storybook application. This is misleading and they should be excluded. To do this, you can add the following to your Vitest config:
```ts title="vitest.config.ts"
import { coverageConfigDefaults, defineConfig } from 'vitest/config';
@@ -205,7 +205,9 @@ export default defineConfig({
exclude: [
...coverageConfigDefaults.exclude,
// This pattern must align with the `stories` property of your `.storybook/main.ts` config
- '**/*.stories.*', '**/*.story.*', '**/stories.*', '**/story.*'
+ '**/*.stories.*',
+ // This pattern must align with the output directory of `storybook build`
+ 'storybook-static/**',
],
}
}
diff --git a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
index 0a76f80b4d25..57b96d2e8d1e 100644
--- a/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
+++ b/test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts
@@ -12,9 +12,21 @@ const config: StorybookConfig = {
options: {},
},
core: {
- disableWhatsNewNotifications: true
+ disableWhatsNewNotifications: true,
},
- previewHead: (head = '') => `${head}
+ viteFinal: (config) => ({
+ ...config,
+ optimizeDeps: {
+ ...config.optimizeDeps,
+ include: [
+ ...(config.optimizeDeps?.include || []),
+ "react-dom/test-utils",
+ "@storybook/react/**",
+ "@storybook/experimental-addon-test/preview",
+ ],
+ },
+ }),
+ previewHead: (head = "") => `${head}