From ff6eb107ee310b344ab9cdf8967646049cc3025e Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Wed, 6 Aug 2025 12:39:20 +0000 Subject: [PATCH 01/14] Update ./docs/versions/next.json for v9.2.0-alpha.2 --- docs/versions/next.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/versions/next.json b/docs/versions/next.json index 47e250f0d12b..d708cc612ef3 100644 --- a/docs/versions/next.json +++ b/docs/versions/next.json @@ -1 +1 @@ -{"version":"9.2.0-alpha.1","info":{"plain":"- Addon Docs: Add `__STORYBOOK_UNSAFE_TOCBOT__` global - [#32176](https://github.com/storybookjs/storybook/pull/32176), thanks @yannbf!\n- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!\n- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!"}} +{"version":"9.2.0-alpha.2","info":{"plain":"- Onboarding: Tweak referral wording in survey - [#32185](https://github.com/storybookjs/storybook/pull/32185), thanks @shilman!"}} From 462d8ba485f9fe581b25d41b432d0ccba20fdb8e Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Mon, 9 Jun 2025 08:36:52 -0600 Subject: [PATCH 02/14] Docs: Fix incorrect @next version specifiers --- docs/_snippets/init-command.md | 6 +++--- docs/_snippets/storybook-upgrade.md | 6 +++--- docs/get-started/frameworks/angular.mdx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/_snippets/init-command.md b/docs/_snippets/init-command.md index db2da5924dfd..851b1da7192f 100644 --- a/docs/_snippets/init-command.md +++ b/docs/_snippets/init-command.md @@ -1,11 +1,11 @@ ```shell renderer="common" language="js" packageManager="npm" -npx storybook@next init +npx storybook@latest init ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpm dlx storybook@next init +pnpm dlx storybook@latest init ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn dlx storybook@next init +yarn dlx storybook@latest init ``` diff --git a/docs/_snippets/storybook-upgrade.md b/docs/_snippets/storybook-upgrade.md index 3b71ef4c4d98..7d1921e6bd44 100644 --- a/docs/_snippets/storybook-upgrade.md +++ b/docs/_snippets/storybook-upgrade.md @@ -1,11 +1,11 @@ ```shell renderer="common" language="js" packageManager="npm" -npx storybook@next upgrade +npx storybook@latest upgrade ``` ```shell renderer="common" language="js" packageManager="pnpm" -pnpm dlx storybook@next upgrade +pnpm dlx storybook@latest upgrade ``` ```shell renderer="common" language="js" packageManager="yarn" -yarn dlx storybook@next upgrade +yarn dlx storybook@latest upgrade ``` diff --git a/docs/get-started/frameworks/angular.mdx b/docs/get-started/frameworks/angular.mdx index 205d1733b142..6d4a2bce1a10 100644 --- a/docs/get-started/frameworks/angular.mdx +++ b/docs/get-started/frameworks/angular.mdx @@ -276,7 +276,7 @@ export const WithCustomProvider: Story = { The Storybook [Angular builder](https://angular.io/guide/glossary#builder) is a way to run Storybook in an Angular workspace. It is a drop-in replacement for running `storybook dev` and `storybook build` directly. -You can run `npx storybook@next automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually. +You can run `npx storybook@latest automigrate` to try letting Storybook detect and automatically fix your configuration. Otherwise, you can follow the next steps to adjust your configuration manually. #### Do you have only one Angular project in your workspace? From 629bdff66b9afd36c447853737af6192627fbca2 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 5 Aug 2025 11:30:11 -0600 Subject: [PATCH 03/14] Merge pull request #32156 from storybookjs/docs-after-each Docs: Add `afterEach` guidance (cherry picked from commit b6edefe36b8ee0c1d3270e5f322bfa220db396fb) --- docs/_snippets/after-each-in-meta.md | 185 +++++++++++++++++++++ docs/writing-tests/interaction-testing.mdx | 18 ++ 2 files changed, 203 insertions(+) create mode 100644 docs/_snippets/after-each-in-meta.md diff --git a/docs/_snippets/after-each-in-meta.md b/docs/_snippets/after-each-in-meta.md new file mode 100644 index 000000000000..e0868d17a206 --- /dev/null +++ b/docs/_snippets/after-each-in-meta.md @@ -0,0 +1,185 @@ +```ts filename="Page.stories.ts" renderer="angular" language="ts" +import type { Meta, StoryObj } from '@storybook/angular'; + +import { Page } from './Page'; + +const meta: Meta = { + component: Page, + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + async play({ canvas }) { + // ... + }, +}; +``` + +```svelte filename="Page.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF" + + + { + // ... + }} +/> +``` + +```js filename="Page.stories.js" renderer="svelte" language="js" tabTitle="CSF" +import Page from './Page.svelte'; + +export default { + component: Page, + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +}; + +export const Default = { + async play({ canvas }) { + // ... + }, +}; +``` + +```js filename="Page.stories.js" renderer="common" language="js" +import { Page } from './Page'; + +export default { + component: Page, + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +}; + +export const Default = { + async play({ canvas }) { + // ... + }, +}; +``` + +```svelte filename="Page.stories.svelte" renderer="svelte" language="ts" tabTitle="Svelte CSF" + + + { + // ... + }} +/> +``` + +```ts filename="Page.stories.ts" renderer="svelte" language="ts" tabTitle="CSF" +// Replace your-framework with svelte-vite or sveltekit +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import Page from './Page.svelte'; + +const meta = { + component: Page, + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + async play({ canvas }) { + // ... + }, +}; +``` + +```ts filename="Page.stories.ts" renderer="common" language="ts" +// Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc. +import type { Meta, StoryObj } from '@storybook/your-framework'; + +import { Page } from './Page'; + +const meta = { + component: Page, + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + async play({ canvas }) { + // ... + }, +}; +``` + +```js filename="Page.stories.js" renderer="web-components" language="js" +export default { + component: 'my-page', + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +}; + +export const Default = { + async play({ canvas }) { + // ... + }, +}; +``` + +```ts filename="Page.stories.ts" renderer="web-components" language="ts" +import type { Meta, StoryObj } from '@storybook/web-components-vite'; + +const meta: Meta = { + component: 'my-page', + // πŸ‘‡ Runs after each story in this file + async afterEach(context) { + console.log(`βœ… Tested ${context.name} story`); + }, +}; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + async play({ canvas }) { + // ... + }, +}; +``` diff --git a/docs/writing-tests/interaction-testing.mdx b/docs/writing-tests/interaction-testing.mdx index 2ae5b4ef4c81..a8974ccad840 100644 --- a/docs/writing-tests/interaction-testing.mdx +++ b/docs/writing-tests/interaction-testing.mdx @@ -239,6 +239,24 @@ It is _not_ necessary to restore `fn()` mocks, as Storybook will already do that +### Make assertions after interactions + +Sometimes, you may need to make assertions or run code after the component has been rendered and interacted with. + +#### `afterEach` + +`afterEach` runs after the story is rendered and the play function has completed. It can be used at the project level in the preview file (`.storybook/preview.js|ts`), at the component level in the component meta, or at the story level in the story definition. This is useful for making assertions after the component has been rendered and interacted with, such as running checks on the final rendered output or logging information. + +Like the `play` function, `afterEach` receives the `context` object, which contains the `args`, `canvas`, and other properties related to the story. You can use this to make assertions or run code after the story has been rendered. + + + + + +You should not use `afterEach` to reset state in your tests. Because it runs after the story, resetting state here could prevent you from seeing the correct end state of your story. Instead, use the [`beforeEach`'s returned cleanup function](#beforeeach) to reset state, which will run only when navigating between stories to preserve the end state. + + + ### Group interactions with the step function For complex flows, it can be worthwhile to group sets of related interactions together using the step function. This allows you to provide a custom label that describes a set of interactions: From e10f871ff4ccab0dcd2d0eda0287f581b46c4996 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Tue, 5 Aug 2025 15:32:34 -0600 Subject: [PATCH 04/14] Merge pull request #32198 from storybookjs/docs-bad-upgrading-link Docs: Fix broken link in migration guide (cherry picked from commit 8c8bdc548bec9e0dcaad765cf532e4ad1b58705d) --- docs/releases/migration-guide.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/releases/migration-guide.mdx b/docs/releases/migration-guide.mdx index b1deb6803f58..a730194cf058 100644 --- a/docs/releases/migration-guide.mdx +++ b/docs/releases/migration-guide.mdx @@ -56,7 +56,7 @@ You may wish to read the [full migration notes][full-migration-notes] before mig ## Automatic upgrade -To upgrade your Storybook, run the [upgrade](../configure/upgrading.mdx) command in the root of your repository: +To upgrade your Storybook, run the [upgrade](./upgrading.mdx) command in the root of your repository: {/* prettier-ignore-start */} From d73c1291f2eb88c91faacbba0cc52ba7f5f0de11 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Thu, 7 Aug 2025 11:55:57 +0200 Subject: [PATCH 05/14] Merge pull request #32108 from gingeekrishna/fix-storybook-webpack-32105 Angular: Inherit options from browserTarget (cherry picked from commit b0f9e0d517dd176c20fd4fadfcec5518da693689) --- .../framework-preset-angular-cli.test.ts | 299 ++++++++++++++++++ .../server/framework-preset-angular-cli.ts | 54 +++- 2 files changed, 343 insertions(+), 10 deletions(-) create mode 100644 code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts new file mode 100644 index 000000000000..572caaa653fa --- /dev/null +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.test.ts @@ -0,0 +1,299 @@ +import { vi, expect, describe, it, beforeEach } from 'vitest'; + +import { logger } from 'storybook/internal/node-logger'; + +import type { BuilderContext } from '@angular-devkit/architect'; +import { logging } from '@angular-devkit/core'; + +import { getBuilderOptions } from './framework-preset-angular-cli'; +import type { PresetOptions } from './preset-options'; + +// Mock all dependencies +vi.mock('storybook/internal/node-logger', () => ({ + logger: { + info: vi.fn(), + }, +})); + +vi.mock('storybook/internal/server-errors', () => ({ + AngularLegacyBuildOptionsError: class AngularLegacyBuildOptionsError extends Error { + constructor() { + super('AngularLegacyBuildOptionsError'); + this.name = 'AngularLegacyBuildOptionsError'; + } + }, +})); + +vi.mock('storybook/internal/common', () => ({ + getProjectRoot: vi.fn(), +})); + +vi.mock('@angular-devkit/architect', () => ({ + targetFromTargetString: vi.fn(), +})); + +vi.mock('find-up', () => ({ + findUp: vi.fn(), +})); + +vi.mock('./utils/module-is-available', () => ({ + moduleIsAvailable: vi.fn(), +})); + +vi.mock('./angular-cli-webpack', () => ({ + getWebpackConfig: vi.fn(), +})); + +vi.mock('./preset-options', () => ({ + PresetOptions: {}, +})); + +// Mock require.resolve for @angular/animations +vi.mock('@angular/animations', () => ({})); + +const mockedLogger = vi.mocked(logger); + +const mockedTargetFromTargetString = vi.mocked( + await import('@angular-devkit/architect') +).targetFromTargetString; +const mockedFindUp = vi.mocked(await import('find-up')).findUp; +const mockedGetProjectRoot = vi.mocked(await import('storybook/internal/common')).getProjectRoot; + +describe('framework-preset-angular-cli', () => { + beforeEach(() => { + vi.clearAllMocks(); + }); + + describe('getBuilderOptions', () => { + const mockBuilderContext: BuilderContext = { + target: { project: 'test-project', builder: 'test-builder', options: {} }, + workspaceRoot: '/test/workspace', + getProjectMetadata: vi.fn().mockResolvedValue({}), + getTargetOptions: vi.fn().mockResolvedValue({}), + logger: new logging.Logger('Test'), + } as unknown as BuilderContext; + + beforeEach(() => { + mockedGetProjectRoot.mockReturnValue('/test/project'); + mockedFindUp.mockResolvedValue('/test/tsconfig.json'); + }); + + it('should get browser target options when angularBrowserTarget is provided', async () => { + const mockTarget = { project: 'test-project', target: 'build', configuration: 'development' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build:development', + }; + + await getBuilderOptions(options, mockBuilderContext); + + expect(mockedTargetFromTargetString).toHaveBeenCalledWith('test-project:build:development'); + expect(mockedLogger.info).toHaveBeenCalledWith( + '=> Using angular browser target options from "test-project:build:development"' + ); + expect(mockBuilderContext.getTargetOptions).toHaveBeenCalledWith(mockTarget); + }); + + it('should merge browser target options with storybook options', async () => { + const mockTarget = { project: 'test-project', target: 'build' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const browserTargetOptions = { a: 1, nested: { x: 10 } }; + const storybookOptions = { b: 2, nested: { y: 20 } }; + + vi.mocked(mockBuilderContext.getTargetOptions).mockResolvedValue(browserTargetOptions); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build', + angularBuilderOptions: storybookOptions, + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(result).toEqual({ + a: 1, + b: 2, + nested: { x: 10, y: 20 }, + tsConfig: '/test/tsconfig.json', + }); + }); + + it('should use provided tsConfig when available', async () => { + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + tsConfig: '/custom/tsconfig.json', + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(result.tsConfig).toBe('/custom/tsconfig.json'); + expect(mockedLogger.info).toHaveBeenCalledWith( + '=> Using angular project with "tsConfig:/custom/tsconfig.json"' + ); + }); + + it('should find tsconfig.json when not provided', async () => { + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(mockedFindUp).toHaveBeenCalledWith('tsconfig.json', { + cwd: '/test/config', + stopAt: '/test/project', + }); + expect(result.tsConfig).toBe('/test/tsconfig.json'); + }); + + it('should use browser target tsConfig when no other tsConfig is available', async () => { + const mockTarget = { project: 'test-project', target: 'build' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + mockedFindUp.mockResolvedValue(null); + + const browserTargetOptions = { tsConfig: '/browser/tsconfig.json' }; + vi.mocked(mockBuilderContext.getTargetOptions).mockResolvedValue(browserTargetOptions); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build', + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(result.tsConfig).toBe('/browser/tsconfig.json'); + }); + + it('should handle case when no angularBrowserTarget is provided', async () => { + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(mockedTargetFromTargetString).not.toHaveBeenCalled(); + expect(mockBuilderContext.getTargetOptions).not.toHaveBeenCalled(); + expect(result).toEqual({ + tsConfig: '/test/tsconfig.json', + }); + }); + + it('should handle browser target without configuration', async () => { + const mockTarget = { project: 'test-project', target: 'build' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build', + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(mockedLogger.info).toHaveBeenCalledWith( + '=> Using angular browser target options from "test-project:build"' + ); + }); + + it('should handle browser target with configuration', async () => { + const mockTarget = { project: 'test-project', target: 'build', configuration: 'production' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build:production', + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(mockedLogger.info).toHaveBeenCalledWith( + '=> Using angular browser target options from "test-project:build:production"' + ); + }); + + it('should handle empty angularBuilderOptions', async () => { + const mockTarget = { project: 'test-project', target: 'build' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const browserTargetOptions = { a: 1, b: 2 }; + vi.mocked(mockBuilderContext.getTargetOptions).mockResolvedValue(browserTargetOptions); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build', + angularBuilderOptions: {}, + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(result).toEqual({ + a: 1, + b: 2, + tsConfig: '/test/tsconfig.json', + }); + }); + + it('should handle undefined angularBuilderOptions', async () => { + const mockTarget = { project: 'test-project', target: 'build' }; + mockedTargetFromTargetString.mockReturnValue(mockTarget); + + const browserTargetOptions = { a: 1, b: 2 }; + vi.mocked(mockBuilderContext.getTargetOptions).mockResolvedValue(browserTargetOptions); + + const options: PresetOptions = { + configType: 'DEVELOPMENT', + configDir: '/test/config', + presets: { + apply: vi.fn(), + } as any, + angularBrowserTarget: 'test-project:build', + }; + + const result = await getBuilderOptions(options, mockBuilderContext); + + expect(result).toEqual({ + a: 1, + b: 2, + tsConfig: '/test/tsconfig.json', + }); + }); + }); +}); diff --git a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts index a9a886450fb8..f9efa77f6427 100644 --- a/code/frameworks/angular/src/server/framework-preset-angular-cli.ts +++ b/code/frameworks/angular/src/server/framework-preset-angular-cli.ts @@ -80,8 +80,38 @@ function getBuilderContext(options: PresetOptions): BuilderContext { ); } +/** + * Deep merge function that properly handles nested objects. Preserves arrays and objects from + * source when they exist in target + * + * @internal - exported for testing purposes + */ +export function deepMerge(target: JsonObject, source: JsonObject): JsonObject { + const result = { ...target }; + + for (const key in source) { + if (source[key] !== undefined && source[key] !== null) { + if ( + typeof source[key] === 'object' && + !Array.isArray(source[key]) && + typeof target[key] === 'object' && + !Array.isArray(target[key]) && + target[key] !== null + ) { + // Deep merge nested objects + result[key] = deepMerge(target[key] as JsonObject, source[key] as JsonObject); + } else { + // Override with source value + result[key] = source[key]; + } + } + } + + return result; +} + /** Get builder options Merge target options from browser target and from storybook options */ -async function getBuilderOptions(options: PresetOptions, builderContext: BuilderContext) { +export async function getBuilderOptions(options: PresetOptions, builderContext: BuilderContext) { /** Get Browser Target options */ let browserTargetOptions: JsonObject = {}; if (options.angularBrowserTarget) { @@ -95,15 +125,19 @@ async function getBuilderOptions(options: PresetOptions, builderContext: Builder browserTargetOptions = await builderContext.getTargetOptions(browserTarget); } - /** Merge target options from browser target options and from storybook options */ - const builderOptions = { - ...browserTargetOptions, - ...options.angularBuilderOptions, - tsConfig: - options.tsConfig ?? - (await findUp('tsconfig.json', { cwd: options.configDir, stopAt: getProjectRoot() })) ?? - browserTargetOptions.tsConfig, - }; + /** + * Merge target options from browser target options and from storybook options Use deep merge to + * preserve nested properties like stylePreprocessorOptions.includePaths when they exist in + * browserTarget but not in storybook options + */ + const builderOptions = deepMerge(browserTargetOptions, options.angularBuilderOptions || {}); + + // Handle tsConfig separately to maintain existing logic + builderOptions.tsConfig = + options.tsConfig ?? + (await findUp('tsconfig.json', { cwd: options.configDir, stopAt: getProjectRoot() })) ?? + browserTargetOptions.tsConfig; + logger.info(`=> Using angular project with "tsConfig:${builderOptions.tsConfig}"`); return builderOptions; From bed61ea8df1cc849adb359fe9858fc1c36da7421 Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Fri, 8 Aug 2025 12:26:02 +0100 Subject: [PATCH 06/14] Merge pull request #32224 from storybookjs/docs_fix_essentials_references Docs: Fix essentials addon references (cherry picked from commit ee184ba389ed4507a6de1a7a63202aaf8719e553) --- docs/_snippets/button-story-click-handler-args.md | 2 +- docs/_snippets/nextjs-navigation-override-in-story.md | 6 ++---- docs/_snippets/nextjs-router-override-in-story.md | 6 ++---- docs/api/csf/index.mdx | 2 +- docs/api/doc-blocks/doc-block-controls.mdx | 4 ++-- docs/configure/user-interface/theming.mdx | 2 +- docs/get-started/frameworks/nextjs.mdx | 2 +- docs/get-started/whats-a-story.mdx | 6 +++--- docs/writing-docs/mdx.mdx | 4 +++- docs/writing-stories/args.mdx | 4 ++-- docs/writing-stories/index.mdx | 2 +- docs/writing-stories/parameters.mdx | 2 +- docs/writing-stories/stories-for-multiple-components.mdx | 2 +- 13 files changed, 21 insertions(+), 23 deletions(-) diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md index 47e0965b87c1..509d6e9651a9 100644 --- a/docs/_snippets/button-story-click-handler-args.md +++ b/docs/_snippets/button-story-click-handler-args.md @@ -19,7 +19,7 @@ export const Text: Story = { // The argsToTemplate helper function converts the args to property and event bindings. // You could also write the template in plain HTML and bind to the component's inputs and outputs yourself: // - // We don't recommend the latter since it can conflict with how Storybook applies arguments via its controls addon. + // We don't recommend the latter since it can conflict with how Storybook applies arguments via the Controls panel. // Binding to the component's inputs and outputs yourself will conflict with default values set inside the component's class. // In edge-case scenarios, you may need to define the template yourself, though. template: ``, diff --git a/docs/_snippets/nextjs-navigation-override-in-story.md b/docs/_snippets/nextjs-navigation-override-in-story.md index 74ccb78c7692..a7865b7185fa 100644 --- a/docs/_snippets/nextjs-navigation-override-in-story.md +++ b/docs/_snippets/nextjs-navigation-override-in-story.md @@ -10,8 +10,7 @@ export default { }, }; -// If you have the actions addon, -// you can interact with the links and see the route change events there +// Interact with the links to see the route change events in the Actions panel. export const Example = { parameters: { nextjs: { @@ -44,8 +43,7 @@ export default meta; type Story = StoryObj; -// If you have the actions addon, -// you can interact with the links and see the route change events there +// Interact with the links to see the route change events in the Actions panel. export const Example: Story = { parameters: { nextjs: { diff --git a/docs/_snippets/nextjs-router-override-in-story.md b/docs/_snippets/nextjs-router-override-in-story.md index 13018889da9d..42f5219d86e9 100644 --- a/docs/_snippets/nextjs-router-override-in-story.md +++ b/docs/_snippets/nextjs-router-override-in-story.md @@ -5,8 +5,7 @@ export default { component: RouterBasedComponent, }; -// If you have the actions addon, -// you can interact with the links and see the route change events there +// Interact with the links to see the route change events in the Actions panel. export const Example = { parameters: { nextjs: { @@ -35,8 +34,7 @@ const meta = { export default meta; type Story = StoryObj; -// If you have the actions addon, -// you can interact with the links and see the route change events there +// Interact with the links to see the route change events in the Actions panel. export const Example: Story = { parameters: { nextjs: { diff --git a/docs/api/csf/index.mdx b/docs/api/csf/index.mdx index 4534c50c12f3..f374658de685 100644 --- a/docs/api/csf/index.mdx +++ b/docs/api/csf/index.mdx @@ -91,7 +91,7 @@ Or even more simply: {/* prettier-ignore-end */} -Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions addon specifically. +Not only are these versions shorter and more accessible to write than their no-args counterparts, but they are also more portable since the code doesn't depend on the actions feature specifically. For more information on setting up [Docs](../../writing-docs/index.mdx) and [Actions](../../essentials/actions.mdx), see their respective documentation. diff --git a/docs/api/doc-blocks/doc-block-controls.mdx b/docs/api/doc-blocks/doc-block-controls.mdx index 0c4cf1a63e36..561cf8203dd9 100644 --- a/docs/api/doc-blocks/doc-block-controls.mdx +++ b/docs/api/doc-blocks/doc-block-controls.mdx @@ -66,8 +66,8 @@ import { Controls } from '@storybook/addon-docs/blocks'; - This API configures Controls blocks used within docs pages. To configure the Controls addon panel, see the [Controls addon docs](../../essentials/controls.mdx). To configure individual controls, you can specify [argTypes](../arg-types.mdx#control) for each. - + This API configures the `Controls` blocks used within docs pages. To configure the Controls panel, see the [feature documentation](../../essentials/controls.mdx). To configure individual controls, specify [argTypes](../arg-types.mdx#control) for each. + ### `exclude` diff --git a/docs/configure/user-interface/theming.mdx b/docs/configure/user-interface/theming.mdx index a6b97b360971..d1b78d791399 100644 --- a/docs/configure/user-interface/theming.mdx +++ b/docs/configure/user-interface/theming.mdx @@ -144,7 +144,7 @@ Here's how you might insert a custom `` block: Some addons require specific theme variables that a Storybook user must add. If you share your theme with the community, make sure to support the official API and other popular addons, so your users have a consistent experience. -For example, the popular Actions addon uses [react-inspector](https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx), which has themes of its own. Supply additional theme variables to style it like so: +For example, the popular Actions feature uses [react-inspector](https://github.com/storybookjs/react-inspector/blob/master/src/styles/themes/chromeLight.tsx), which has themes of its own. Supply additional theme variables to style it like so: {/* prettier-ignore-start */} diff --git a/docs/get-started/frameworks/nextjs.mdx b/docs/get-started/frameworks/nextjs.mdx index b33b409953a0..f27cd80795b5 100644 --- a/docs/get-started/frameworks/nextjs.mdx +++ b/docs/get-started/frameworks/nextjs.mdx @@ -252,7 +252,7 @@ module.exports = { ## Next.js routing -[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the Actions panel if you have the [Storybook actions addon](../../essentials/actions.mdx). +[Next.js's router](https://nextjs.org/docs/pages/building-your-application/routing) is automatically stubbed for you so that when the router is interacted with, all of its interactions are automatically logged to the [Actions panel](../../essentials/actions.mdx). You should only use `next/router` in the `pages` directory. In the `app` directory, it is necessary to use `next/navigation`. diff --git a/docs/get-started/whats-a-story.mdx b/docs/get-started/whats-a-story.mdx index 27f96f597588..c625b373b39c 100644 --- a/docs/get-started/whats-a-story.mdx +++ b/docs/get-started/whats-a-story.mdx @@ -33,10 +33,10 @@ When you installed Storybook, the CLI created example components that demonstrat ![Button story with args](../_assets/get-started/example-button-args.png) -View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.mdx) are used to render the component and match those represented in the [Controls](../essentials/controls.mdx) tab. Using `args` in your stories has additional benefits: +View the rendered `Button` by clicking on it in the Storybook sidebar. Note how the values specified in [`args`](../writing-stories/args.mdx) are used to render the component and match those represented in the [Controls](../essentials/controls.mdx) panel. Using `args` in your stories has additional benefits: -* `Button`'s callbacks are logged into the [Actions](../essentials/actions.mdx) tab. Click to try it. -* `Button`'s arguments are dynamically editable in the Controls tab. Adjust the controls. +* `Button`'s callbacks are logged into the [Actions](../essentials/actions.mdx) panel. Click to try it. +* `Button`'s arguments are dynamically editable in the Controls panel. Adjust the controls. ## Working with stories diff --git a/docs/writing-docs/mdx.mdx b/docs/writing-docs/mdx.mdx index ab945ee63311..ad8f89375ca2 100644 --- a/docs/writing-docs/mdx.mdx +++ b/docs/writing-docs/mdx.mdx @@ -239,7 +239,9 @@ However, cross-linking documentation isn't restricted to documentation pages. Yo {/*You can also use anchors to target a specific section of a page: */} - By applying this pattern with the Controls addon, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values. + +Applying this pattern with the [Controls](../essentials/controls.mdx) feature, all anchors will be ignored in Canvas based on how Storybook handles URLs to track the args values. + ## Troubleshooting diff --git a/docs/writing-stories/args.mdx b/docs/writing-stories/args.mdx index dc65ce3f0f0d..1a69d5c2c35a 100644 --- a/docs/writing-stories/args.mdx +++ b/docs/writing-stories/args.mdx @@ -115,13 +115,13 @@ You can use args in your stories to configure the component's appearance, simila ## Setting args through the URL -You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically you would use the [Controls addon](../essentials/controls.mdx) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL: +You can also override the set of initial args for the active story by adding an `args` query parameter to the URL. Typically, you would use [Controls](../essentials/controls.mdx) to handle this. For example, here's how you could set a `size` and `style` arg in the Storybook's URL: ``` ?path=/story/avatar--default&args=style:rounded;size:100 ``` -As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls addon and [within your story](#mapping-to-complex-arg-values). +As a safeguard against [XSS](https://owasp.org/www-community/attacks/xss/) attacks, the arg's keys and values provided in the URL are limited to alphanumeric characters, spaces, underscores, and dashes. Any other types will be ignored and removed from the URL, but you can still use them with the Controls panel and [within your story](#mapping-to-complex-arg-values). The `args` param is always a set of `key: value` pairs delimited with a semicolon `;`. Values will be coerced (cast) to their respective `argTypes` (which may have been automatically inferred). Objects and arrays are supported. Special values `null` and `undefined` can be set by prefixing with a bang `!`. For example, `args=obj.key:val;arr[0]:one;arr[1]:two;nil:!null` will be interpreted as: diff --git a/docs/writing-stories/index.mdx b/docs/writing-stories/index.mdx index 9b6b8be456de..5b142894a229 100644 --- a/docs/writing-stories/index.mdx +++ b/docs/writing-stories/index.mdx @@ -218,7 +218,7 @@ For instance, suppose you wanted to test your Button component against a differe ![Parameters background color](../_assets/writing-stories/parameters-background-colors.png) -This parameter would instruct the backgrounds addon to reconfigure itself whenever a Button story is selected. Most addons are configured via a parameter-based API and can be influenced at a [global](./parameters.mdx#global-parameters), [component](./parameters.mdx#component-parameters) and [story](./parameters.mdx#story-parameters) level. +This parameter would instruct the backgrounds feature to reconfigure itself whenever a Button story is selected. Most features and addons are configured via a parameter-based API and can be influenced at a [global](./parameters.mdx#global-parameters), [component](./parameters.mdx#component-parameters), and [story](./parameters.mdx#story-parameters) level. ### Using decorators diff --git a/docs/writing-stories/parameters.mdx b/docs/writing-stories/parameters.mdx index 44ebe83235cd..d7854de803f4 100644 --- a/docs/writing-stories/parameters.mdx +++ b/docs/writing-stories/parameters.mdx @@ -11,7 +11,7 @@ Parameters are a set of static, named metadata about a story, typically used to Available parameters are listed in the [parameters API reference](../api/parameters.mdx#available-parameters). -For example, let’s customize the backgrounds addon via a parameter. We’ll use `parameters.backgrounds` to define which backgrounds appear in the backgrounds toolbar when a story is selected. +For example, let’s customize the backgrounds feature via a parameter. We’ll use `parameters.backgrounds` to define which backgrounds appear in the backgrounds toolbar when a story is selected. ## Story parameters diff --git a/docs/writing-stories/stories-for-multiple-components.mdx b/docs/writing-stories/stories-for-multiple-components.mdx index 8dfae72d0c48..a5acad9a4e6d 100644 --- a/docs/writing-stories/stories-for-multiple-components.mdx +++ b/docs/writing-stories/stories-for-multiple-components.mdx @@ -82,4 +82,4 @@ Another option that is more β€œdata”-based is to create a special β€œstory-gen {/* prettier-ignore-end */} -This approach is a little more complex to setup, but it means you can more easily reuse the `args` to each story in a composite component. It also means that you can alter the args to the component with the Controls addon. +This approach is a little more complex to setup, but it means you can more easily reuse the `args` to each story in a composite component. It also means you can alter the args to the component with the [Controls panel](../essentials/controls.mdx). From 933b62649c9175803030ec9fbf7ada2123ba61dc Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Fri, 8 Aug 2025 14:19:41 +0200 Subject: [PATCH 07/14] Merge pull request #32220 from storybookjs/yann/fix-jsx-issue-2 Addon Docs: Fix Symbol conversion issue in docs page and controls panel (cherry picked from commit fef67c82cfc54e8fbb1a714fbf78724227ab1aa0) --- code/addons/a11y/package.json | 2 +- code/addons/docs/package.json | 2 +- .../react-editable-json-tree/JsonNodes.tsx | 20 +++++++++---------- code/addons/jest/package.json | 2 +- code/addons/links/package.json | 2 +- code/addons/themes/package.json | 2 +- code/builders/builder-vite/package.json | 2 +- code/builders/builder-webpack5/package.json | 2 +- code/e2e-tests/addon-controls.spec.ts | 13 +++++++++++- code/e2e-tests/addon-docs.spec.ts | 12 ++++++++++- code/e2e-tests/util.ts | 4 ++++ code/frameworks/angular/package.json | 2 +- code/frameworks/ember/package.json | 2 +- code/frameworks/html-vite/package.json | 2 +- code/frameworks/nextjs-vite/package.json | 2 +- code/frameworks/nextjs/package.json | 2 +- code/frameworks/preact-vite/package.json | 2 +- .../react-native-web-vite/package.json | 2 +- code/frameworks/react-vite/package.json | 2 +- code/frameworks/react-webpack5/package.json | 2 +- code/frameworks/server-webpack5/package.json | 2 +- code/frameworks/svelte-vite/package.json | 2 +- code/frameworks/sveltekit/package.json | 2 +- code/frameworks/vue3-vite/package.json | 2 +- .../web-components-vite/package.json | 2 +- code/lib/cli-sb/package.json | 2 +- code/lib/cli-storybook/package.json | 2 +- code/lib/codemod/package.json | 2 +- code/lib/core-webpack/package.json | 2 +- code/lib/create-storybook/package.json | 2 +- code/lib/csf-plugin/package.json | 2 +- code/lib/eslint-plugin/package.json | 2 +- code/lib/react-dom-shim/package.json | 2 +- code/presets/create-react-app/package.json | 2 +- code/presets/react-webpack/package.json | 2 +- code/presets/server-webpack/package.json | 2 +- code/renderers/html/package.json | 2 +- code/renderers/preact/package.json | 2 +- code/renderers/react/package.json | 2 +- .../template/stories/jsx-docgen.stories.tsx | 17 ++++++++++++++++ code/renderers/server/package.json | 2 +- code/renderers/svelte/package.json | 2 +- code/renderers/vue3/package.json | 2 +- code/renderers/web-components/package.json | 2 +- 44 files changed, 93 insertions(+), 51 deletions(-) create mode 100644 code/renderers/react/template/stories/jsx-docgen.stories.tsx diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 624cc63cc4ba..6b8b620a8cc5 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -100,7 +100,7 @@ "./src/postinstall.ts" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684", "storybook": { "displayName": "Accessibility", "icon": "https://user-images.githubusercontent.com/263385/101991665-47042f80-3c7c-11eb-8f00-64b5a18f498a.png", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index a37450f49f20..0e5b36685b96 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -162,7 +162,7 @@ "./src/manager.tsx" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684", "storybook": { "displayName": "Docs", "icon": "https://user-images.githubusercontent.com/263385/101991672-48355c80-3c7c-11eb-82d9-95fa12438f64.png", diff --git a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx index aa24783decb7..2e14e3cce627 100644 --- a/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx +++ b/code/addons/docs/src/blocks/controls/react-editable-json-tree/JsonNodes.tsx @@ -335,7 +335,7 @@ export class JsonArray extends Component { onClick: handleRemove, className: 'rejt-minus-menu', style: minus, - 'aria-label': `remove the array '${name}'`, + 'aria-label': `remove the array '${String(name)}'`, }); return ( @@ -379,7 +379,7 @@ export class JsonArray extends Component { onClick: this.handleAddMode, className: 'rejt-plus-menu', style: plus, - 'aria-label': `add a new item to the '${name}' array`, + 'aria-label': `add a new item to the '${String(name)}' array`, }); const removeItemButton = minusMenuElement && @@ -387,7 +387,7 @@ export class JsonArray extends Component { onClick: handleRemove, className: 'rejt-minus-menu', style: minus, - 'aria-label': `remove the array '${name}'`, + 'aria-label': `remove the array '${String(name)}'`, }); const onlyValue = true; @@ -670,8 +670,8 @@ export class JsonFunctionValue extends Component { onClick: handleRemove, className: 'rejt-minus-menu', style: minus, - 'aria-label': `remove the object '${name}'`, + 'aria-label': `remove the object '${String(name)}'`, }); return ( @@ -1268,7 +1268,7 @@ export class JsonObject extends Component { onClick: this.handleAddMode, className: 'rejt-plus-menu', style: plus, - 'aria-label': `add a new property to the object '${name}'`, + 'aria-label': `add a new property to the object '${String(name)}'`, }); const removeItemButton = minusMenuElement && @@ -1276,7 +1276,7 @@ export class JsonObject extends Component { onClick: handleRemove, className: 'rejt-minus-menu', style: minus, - 'aria-label': `remove the object '${name}'`, + 'aria-label': `remove the object '${String(name)}'`, }); const list = keyList.map((key) => ( @@ -1540,8 +1540,8 @@ export class JsonValue extends Component { onClick: handleRemove, className: 'rejt-minus-menu', style: style.minus, - 'aria-label': `remove the property '${name}' with value '${originalValue}'${ - parentPropertyName ? ` from '${parentPropertyName}'` : '' + 'aria-label': `remove the property '${String(name)}' with value '${String(originalValue)}'${ + String(parentPropertyName) ? ` from '${String(parentPropertyName)}'` : '' }`, }); diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index fdc464ff67c8..a4572397f9fe 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -76,7 +76,7 @@ "./src/manager.tsx" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684", "storybook": { "displayName": "Jest", "icon": "https://pbs.twimg.com/profile_images/821713465245102080/mMtKIMax_400x400.jpg", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index b59c65ebe78e..d8d61f531c0e 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -98,7 +98,7 @@ ], "post": "./scripts/fix-preview-api-reference.ts" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684", "storybook": { "displayName": "Links", "icon": "https://user-images.githubusercontent.com/263385/101991673-48355c80-3c7c-11eb-9b6e-b627c96a75f6.png", diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 533bf123fa52..f93efcccc424 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -91,7 +91,7 @@ "./src/preview.tsx" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16", + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684", "storybook": { "displayName": "Themes", "unsupportedFrameworks": [ diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 4b480af5c182..839ffbc844c5 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -71,5 +71,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index f085eb524079..edb791371d61 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -108,5 +108,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/e2e-tests/addon-controls.spec.ts b/code/e2e-tests/addon-controls.spec.ts index f090eae64c38..333a53c20096 100644 --- a/code/e2e-tests/addon-controls.spec.ts +++ b/code/e2e-tests/addon-controls.spec.ts @@ -1,7 +1,7 @@ import { expect, test } from '@playwright/test'; import process from 'process'; -import { SbPage } from './util'; +import { SbPage, isReactSandbox } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; @@ -103,4 +103,15 @@ test.describe('addon-controls', () => { await expect(page).toHaveURL(/.*multiSelect\[0]:double\+\+space.*/); }); + + // We want to avoid the controls panel crashing when JSX elements are part of args table + test('should show JSX elements in controls panel', async ({ page }) => { + test.skip(!isReactSandbox(templateName), 'This is a React only feature'); + await page.goto(`${storybookUrl}?path=/story/stories-renderers-react-jsx-docgen--default`); + + const sbPage = new SbPage(page, expect); + await sbPage.waitUntilLoaded(); + await sbPage.viewAddonPanel('Controls'); + await expect(sbPage.panelContent().getByText('children').first()).toBeVisible(); + }); }); diff --git a/code/e2e-tests/addon-docs.spec.ts b/code/e2e-tests/addon-docs.spec.ts index f4a5e4a857dc..8fd4c45e561b 100644 --- a/code/e2e-tests/addon-docs.spec.ts +++ b/code/e2e-tests/addon-docs.spec.ts @@ -5,7 +5,7 @@ import { expect, test } from '@playwright/test'; import process from 'process'; import { dedent } from 'ts-dedent'; -import { SbPage } from './util'; +import { SbPage, isReactSandbox } from './util'; const storybookUrl = process.env.STORYBOOK_URL || 'http://localhost:8001'; const templateName = process.env.STORYBOOK_TEMPLATE_NAME || ''; @@ -280,4 +280,14 @@ test.describe('addon-docs', () => { 'H 2 Content', ]); }); + + // We want to avoid the docs page crashing when JSX elements are part of args table + test('should show JSX elements in docs page', async ({ page }) => { + test.skip(!isReactSandbox(templateName), 'This is a React only feature'); + + const sbPage = new SbPage(page, expect); + await sbPage.navigateToStory('/stories/renderers/react/jsx-docgen', 'docs'); + const root = sbPage.previewRoot(); + await expect(root.getByText('children').first()).toBeVisible(); + }); }); diff --git a/code/e2e-tests/util.ts b/code/e2e-tests/util.ts index 1ecef0d1c498..e761e46166aa 100644 --- a/code/e2e-tests/util.ts +++ b/code/e2e-tests/util.ts @@ -205,6 +205,10 @@ export class SbPage { const templateName: keyof typeof allTemplates = process.env.STORYBOOK_TEMPLATE_NAME || ('' as any); const templates = allTemplates; + +export const isReactSandbox = (templateName: string) => + templates[templateName as keyof typeof templates]?.expected.renderer === '@storybook/react'; + export const hasVitestIntegration = !templates[templateName]?.skipTasks?.includes('vitest-integration'); diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 31703147d658..5c97cb77b0f3 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -169,5 +169,5 @@ "./src/builders/build-storybook/index.ts" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index d64e5079e08f..71b405ef1007 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -74,5 +74,5 @@ "access": "public" }, "bundler": {}, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index e37a2210dbbe..edc3d9f1eee8 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/nextjs-vite/package.json b/code/frameworks/nextjs-vite/package.json index 7aca5ff44dbc..47bb6f418224 100644 --- a/code/frameworks/nextjs-vite/package.json +++ b/code/frameworks/nextjs-vite/package.json @@ -153,5 +153,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 22b509598297..7cd395b3175c 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -224,5 +224,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index b9f81312f6ac..ac344f18b204 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 5608a46ba7d6..4b0ac00e0579 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -92,5 +92,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index ab5811a923b7..36db24af45b0 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -102,5 +102,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 0c0e4a19c9ca..a47669040a8a 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -86,5 +86,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index c64600aeb848..2894af14fd8e 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -79,5 +79,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index c7fd72304c83..37a11a27d96b 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -88,5 +88,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index f8d82e553feb..a8b042e699ed 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -95,5 +95,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 496fd516b192..376ba65d428e 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -92,5 +92,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index b7da21e94530..872d8b559b70 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -78,5 +78,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 959af635776a..c317507aefe1 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -26,5 +26,5 @@ "publishConfig": { "access": "public" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index bc71575b2a2b..03b9348f2dbf 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -82,5 +82,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index ef95615dc65d..5d714838e5e9 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -77,5 +77,5 @@ "cjs" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index 18f71aa4629f..2c85ae26f585 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -63,5 +63,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 432ad644781f..1c99a1c5b5e5 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -70,5 +70,5 @@ ], "types": false }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 9d8f768abf00..fb181312c0e4 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -74,5 +74,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/eslint-plugin/package.json b/code/lib/eslint-plugin/package.json index 7baf3db18333..c5d8a6a7bb97 100644 --- a/code/lib/eslint-plugin/package.json +++ b/code/lib/eslint-plugin/package.json @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 18c79175af92..41b6a45a3d22 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -71,5 +71,5 @@ "./src/react-18.tsx" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index 4c0f8a6fcffb..d6b45e1e4733 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -74,5 +74,5 @@ "cjs" ] }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index 8828427e7d3b..f28dd673a2ea 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -104,5 +104,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index 76a2a0904989..4cbc95a88504 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -80,5 +80,5 @@ ], "platform": "node" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 1cc97714fd17..49a312962f85 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -70,5 +70,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index c2ba7a74c976..4f4cc935ba9a 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -72,5 +72,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index 38bed98a258c..35842cc72cad 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -125,5 +125,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/react/template/stories/jsx-docgen.stories.tsx b/code/renderers/react/template/stories/jsx-docgen.stories.tsx new file mode 100644 index 000000000000..6d99b1625b93 --- /dev/null +++ b/code/renderers/react/template/stories/jsx-docgen.stories.tsx @@ -0,0 +1,17 @@ +import React, { type FC } from 'react'; + +const Component: FC<{ children: React.ReactNode }> = ({ children }) => { + return
{children}
; +}; + +export default { + component: Component, + tags: ['autodocs'], +}; + +// This story is used to test whether JSX elements render correctly in autodocs and controls panel +export const Default = { + args: { + children:
Test
, + }, +}; diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index c05028a13282..dc8da8b9bd98 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -69,5 +69,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index 89de023ecc6c..85613b664cfc 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -89,5 +89,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 9250ed33d124..042ef8d0f7e1 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -92,5 +92,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index 10e3f3c8cf07..612b705ccc9b 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -84,5 +84,5 @@ ], "platform": "browser" }, - "gitHead": "e6a7fd8a655c69780bc20b9749c2699e44beae16" + "gitHead": "ce6a1e4a8d5ad69c699021a0b183df89cfc7b684" } From b53a9e197577ba53c136ac4dd8f229877a94d978 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Fri, 8 Aug 2025 22:53:20 +0800 Subject: [PATCH 08/14] Merge pull request #32218 from storybookjs/shilman/fix-cancel-telemetry Telemetry: Improve dev cancellation handling (cherry picked from commit a65cd6bbd0a7d22546fdcdfab0ba31ae3d81e80d) --- code/core/src/core-server/dev-server.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/code/core/src/core-server/dev-server.ts b/code/core/src/core-server/dev-server.ts index 69675f08f93b..7039977cee05 100644 --- a/code/core/src/core-server/dev-server.ts +++ b/code/core/src/core-server/dev-server.ts @@ -151,6 +151,7 @@ export async function storybookDevServer(options: Options) { if (!core?.disableTelemetry) { process.on('SIGINT', cancelTelemetry); + process.on('SIGTERM', cancelTelemetry); } return { previewResult, managerResult, address, networkAddress }; From 9c44db6bc80160e509d7c01def991f6727af3ae7 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 11 Aug 2025 10:09:17 +0200 Subject: [PATCH 09/14] Merge pull request #32230 from sk-pub/bugfix/32229 Angular: Fix `entry.polyfills` undefined error (cherry picked from commit 9f75bbb12c7ec1c1e8592162e23519a0535ac2bb) --- code/frameworks/angular/src/server/angular-cli-webpack.js | 1 + 1 file changed, 1 insertion(+) diff --git a/code/frameworks/angular/src/server/angular-cli-webpack.js b/code/frameworks/angular/src/server/angular-cli-webpack.js index 5e0062bc4841..778b92d1eec0 100644 --- a/code/frameworks/angular/src/server/angular-cli-webpack.js +++ b/code/frameworks/angular/src/server/angular-cli-webpack.js @@ -158,6 +158,7 @@ exports.getWebpackConfig = async (baseConfig, { builderOptions, builderContext } ); if (!builderOptions.experimentalZoneless && !cliConfig.entry.polyfills?.includes('zone.js')) { + cliConfig.entry.polyfills ??= []; cliConfig.entry.polyfills.push('zone.js'); } From bbf1e77887cb00d63fd004968f8853f51799c181 Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 11 Aug 2025 13:28:02 +0200 Subject: [PATCH 10/14] Merge pull request #31937 from mrginglymus/fix-addon-detection-windows Core: Improve addon detection in automigrations on windows (cherry picked from commit 70fff63bbc2b86f91579059babb3d1e73fcc974c) --- code/core/src/common/utils/get-addon-names.test.ts | 12 ++++++++++++ code/core/src/common/utils/get-addon-names.ts | 5 +++++ 2 files changed, 17 insertions(+) diff --git a/code/core/src/common/utils/get-addon-names.test.ts b/code/core/src/common/utils/get-addon-names.test.ts index 7cfd1db63849..182426948dfe 100644 --- a/code/core/src/common/utils/get-addon-names.test.ts +++ b/code/core/src/common/utils/get-addon-names.test.ts @@ -42,6 +42,18 @@ describe('getAddonNames', () => { expect(result).toEqual(['@storybook/addon-highlight', '@storybook/addon-outline']); }); + it('should extract addon names from windows absolute paths', () => { + const config = { + stories: [], + addons: [ + '\\sandbox\\react-vite-default-ts\\node_modules\\@storybook\\addon-highlight', + '\\sandbox\\react-vite-default-ts\\node_modules\\@storybook\\addon-outline', + ], + }; + const result = getAddonNames(config); + expect(result).toEqual(['@storybook/addon-highlight', '@storybook/addon-outline']); + }); + it('should extract addon names from pnpm paths', () => { const config = { stories: [], diff --git a/code/core/src/common/utils/get-addon-names.ts b/code/core/src/common/utils/get-addon-names.ts index 0c763cf5b271..98d0f3b9ee1a 100644 --- a/code/core/src/common/utils/get-addon-names.ts +++ b/code/core/src/common/utils/get-addon-names.ts @@ -1,5 +1,7 @@ import type { StorybookConfig } from 'storybook/internal/types'; +import { normalizePath } from './normalize-path'; + export const getAddonNames = (mainConfig: StorybookConfig): string[] => { const addons = mainConfig.addons || []; const addonList = addons.map((addon) => { @@ -14,6 +16,9 @@ export const getAddonNames = (mainConfig: StorybookConfig): string[] => { return undefined; } + // Ensure posix paths for plugin name sniffing + name = normalizePath(name); + // For absolute paths, pnpm and yarn pnp, // Remove everything before and including "node_modules/" name = name.replace(/.*node_modules\//, ''); From 190ceefd251a981ccaec1db3a07b61b17ed7442e Mon Sep 17 00:00:00 2001 From: Valentin Palkovic Date: Mon, 11 Aug 2025 14:44:42 +0200 Subject: [PATCH 11/14] Merge pull request #32131 from JulioJ11/fix/nextjs-15-link-component Next.js: Return mocked router instead of actual router in useRouter (cherry picked from commit f0d9efe4e0f542dfddbac07b908e1f4341b2b5b3) --- .../nextjs/src/export-mocks/navigation/index.ts | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts index 6bb5f1780b62..e7acaee34415 100644 --- a/code/frameworks/nextjs/src/export-mocks/navigation/index.ts +++ b/code/frameworks/nextjs/src/export-mocks/navigation/index.ts @@ -83,7 +83,14 @@ export const useSelectedLayoutSegment = fn(actual.useSelectedLayoutSegment).mock export const useSelectedLayoutSegments = fn(actual.useSelectedLayoutSegments).mockName( 'next/navigation::useSelectedLayoutSegments' ); -export const useRouter = fn(actual.useRouter).mockName('next/navigation::useRouter'); +export const useRouter = fn(() => { + if (!navigationAPI) { + throw new NextjsRouterMocksNotAvailable({ + importType: 'next/navigation', + }); + } + return navigationAPI; +}).mockName('next/navigation::useRouter'); export const useServerInsertedHTML = fn(actual.useServerInsertedHTML).mockName( 'next/navigation::useServerInsertedHTML' ); From 947682701bb96d9a61ed375fd2eda09fd886a7e3 Mon Sep 17 00:00:00 2001 From: Michael Shilman Date: Tue, 12 Aug 2025 00:04:21 +0800 Subject: [PATCH 12/14] Merge pull request #31928 from kachurun/SolidJS Solid: Update links and docs for framework/renderer package (cherry picked from commit f763c86f55e1bfaaf69ce764a4a659ad8b91d5c4) --- README.md | 2 +- code/core/src/cli/project_types.ts | 7 ++++++- code/core/src/common/utils/get-storybook-info.ts | 2 +- code/lib/cli-storybook/src/sandbox-templates.ts | 8 ++------ docs/_snippets/addon-viewport-configuration-in-meta.md | 2 +- docs/_snippets/button-group-story.md | 2 +- docs/_snippets/button-story-click-handler-args.md | 2 +- .../_snippets/button-story-click-handler-simplificated.md | 2 +- docs/_snippets/button-story-click-handler.md | 2 +- docs/_snippets/button-story-component-args-primary.md | 2 +- docs/_snippets/button-story-component-decorator.md | 2 +- docs/_snippets/button-story-decorator.md | 2 +- .../button-story-default-export-with-component.md | 2 +- docs/_snippets/button-story-rename-story.md | 2 +- docs/_snippets/button-story-using-args.md | 2 +- docs/_snippets/button-story-with-addon-example.md | 2 +- docs/_snippets/button-story-with-args.md | 2 +- docs/_snippets/button-story-with-emojis.md | 2 +- docs/_snippets/button-story.md | 4 ++-- docs/_snippets/component-story-custom-args-complex.md | 2 +- docs/_snippets/component-story-figma-integration.md | 2 +- docs/_snippets/component-story-static-asset-cdn.md | 2 +- .../_snippets/component-story-static-asset-with-import.md | 2 +- .../component-story-static-asset-without-import.md | 2 +- .../component-story-with-custom-render-function.md | 2 +- docs/_snippets/csf-2-example-starter.md | 2 +- docs/_snippets/csf-3-example-starter.md | 2 +- docs/_snippets/decorator-parameterized-in-preview.md | 2 +- docs/_snippets/histogram-story.md | 2 +- docs/_snippets/list-story-expanded.md | 2 +- docs/_snippets/list-story-reuse-data.md | 2 +- docs/_snippets/list-story-starter.md | 2 +- docs/_snippets/list-story-template.md | 2 +- docs/_snippets/list-story-unchecked.md | 2 +- docs/_snippets/list-story-with-subcomponents.md | 2 +- docs/_snippets/list-story-with-unchecked-children.md | 2 +- docs/_snippets/loader-story.md | 2 +- docs/_snippets/login-form-with-play-function.md | 2 +- docs/_snippets/my-component-story-basic-and-props.md | 2 +- docs/_snippets/my-component-story-use-globaltype.md | 2 +- docs/_snippets/my-component-story-with-nonstory.md | 2 +- docs/_snippets/page-story-slots.md | 2 +- docs/_snippets/page-story.md | 2 +- docs/_snippets/storybook-preview-global-decorator.md | 2 +- .../storybook-preview-with-styled-components-decorator.md | 2 +- docs/_snippets/tags-combo-example.md | 2 +- docs/_snippets/your-component-with-decorator.md | 2 +- docs/_snippets/your-component.md | 2 +- docs/get-started/install.mdx | 2 +- 49 files changed, 56 insertions(+), 55 deletions(-) diff --git a/README.md b/README.md index b36f3c60b0f8..bb7a55352958 100644 --- a/README.md +++ b/README.md @@ -108,7 +108,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/ | [Svelte](code/renderers/svelte) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/) | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte) | | [Preact](code/renderers/preact) | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/) | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact) | | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/) | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) | -| [SolidJS](https://github.com/storybookjs/solidjs) | [![](https://img.shields.io/npm/v/storybook-solidjs/latest?style=flat-square&color=blue&label)](/) | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs?style=flat-square&color=eee)](https://github.com/storybookjs/solidjs) | +| [SolidJS](https://github.com/solidjs-community/storybook) | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/) | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook) | | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/) | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native) | ### Addons diff --git a/code/core/src/cli/project_types.ts b/code/core/src/cli/project_types.ts index 49c78486b4f9..7a75f0c9f327 100644 --- a/code/core/src/cli/project_types.ts +++ b/code/core/src/cli/project_types.ts @@ -20,7 +20,12 @@ export type ExternalFramework = { export const externalFrameworks: ExternalFramework[] = [ { name: 'qwik', packageName: 'storybook-framework-qwik' }, - { name: 'solid', frameworks: ['storybook-solidjs-vite'], renderer: 'storybook-solidjs' }, + { + name: 'solid', + packageName: 'storybook-solidjs-vite', + frameworks: ['storybook-solidjs-vite'], + renderer: 'storybook-solidjs-vite', + }, { name: 'nuxt', packageName: '@storybook-vue/nuxt', diff --git a/code/core/src/common/utils/get-storybook-info.ts b/code/core/src/common/utils/get-storybook-info.ts index 1c18fa9cd6a7..3cf0639721e5 100644 --- a/code/core/src/common/utils/get-storybook-info.ts +++ b/code/core/src/common/utils/get-storybook-info.ts @@ -21,7 +21,7 @@ export const rendererPackages: Record = { // community (outside of monorepo) 'storybook-framework-qwik': 'qwik', - 'storybook-solidjs': 'solid', + 'storybook-solidjs-vite': 'solid', /** @deprecated This is deprecated. */ '@storybook/vue': 'vue', diff --git a/code/lib/cli-storybook/src/sandbox-templates.ts b/code/lib/cli-storybook/src/sandbox-templates.ts index 06194ff8e535..1a581489dedd 100644 --- a/code/lib/cli-storybook/src/sandbox-templates.ts +++ b/code/lib/cli-storybook/src/sandbox-templates.ts @@ -378,11 +378,9 @@ export const baseTemplates = { script: 'npx degit solidjs/templates/js {{beforeDir}}', expected: { framework: 'storybook-solidjs-vite', - renderer: 'storybook-solidjs', + renderer: 'storybook-solidjs-vite', builder: '@storybook/builder-vite', }, - // TODO: remove this once solid-vite framework is released - inDevelopment: true, skipTasks: ['e2e-tests', 'bench', 'vitest-integration'], }, 'solid-vite/default-ts': { @@ -390,11 +388,9 @@ export const baseTemplates = { script: 'npx degit solidjs/templates/ts {{beforeDir}}', expected: { framework: 'storybook-solidjs-vite', - renderer: 'storybook-solidjs', + renderer: 'storybook-solidjs-vite', builder: '@storybook/builder-vite', }, - // TODO: remove this once solid-vite framework is released - inDevelopment: true, skipTasks: ['e2e-tests', 'bench'], }, 'vue3-vite/default-js': { diff --git a/docs/_snippets/addon-viewport-configuration-in-meta.md b/docs/_snippets/addon-viewport-configuration-in-meta.md index 25ce41de6773..227c83573ec5 100644 --- a/docs/_snippets/addon-viewport-configuration-in-meta.md +++ b/docs/_snippets/addon-viewport-configuration-in-meta.md @@ -15,7 +15,7 @@ export default { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" tabTitle="Without globals API" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { INITIAL_VIEWPORTS } from 'storybook/viewport'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/button-group-story.md b/docs/_snippets/button-group-story.md index 408340ff6e6d..b1471d6daffd 100644 --- a/docs/_snippets/button-group-story.md +++ b/docs/_snippets/button-group-story.md @@ -93,7 +93,7 @@ export const Pair = { ``` ```tsx filename="ButtonGroup.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { ButtonGroup } from '../ButtonGroup'; diff --git a/docs/_snippets/button-story-click-handler-args.md b/docs/_snippets/button-story-click-handler-args.md index 509d6e9651a9..927d9251bb79 100644 --- a/docs/_snippets/button-story-click-handler-args.md +++ b/docs/_snippets/button-story-click-handler-args.md @@ -92,7 +92,7 @@ export const Text = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { action } from 'storybook/actions'; diff --git a/docs/_snippets/button-story-click-handler-simplificated.md b/docs/_snippets/button-story-click-handler-simplificated.md index 2c765c5b7147..53773e175930 100644 --- a/docs/_snippets/button-story-click-handler-simplificated.md +++ b/docs/_snippets/button-story-click-handler-simplificated.md @@ -58,7 +58,7 @@ export const Text = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-click-handler.md b/docs/_snippets/button-story-click-handler.md index afa2d9fe2a83..8f4e70190185 100644 --- a/docs/_snippets/button-story-click-handler.md +++ b/docs/_snippets/button-story-click-handler.md @@ -72,7 +72,7 @@ export const Text = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { action } from 'storybook/actions'; diff --git a/docs/_snippets/button-story-component-args-primary.md b/docs/_snippets/button-story-component-args-primary.md index 6270995c9779..d50be32d8dad 100644 --- a/docs/_snippets/button-story-component-args-primary.md +++ b/docs/_snippets/button-story-component-args-primary.md @@ -72,7 +72,7 @@ export default { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta } from 'storybook-solidjs'; +import type { Meta } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-component-decorator.md b/docs/_snippets/button-story-component-decorator.md index 4be6b7e3b0ba..b204637d23fe 100644 --- a/docs/_snippets/button-story-component-decorator.md +++ b/docs/_snippets/button-story-component-decorator.md @@ -134,7 +134,7 @@ export default { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta } from 'storybook-solidjs'; +import type { Meta } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-decorator.md b/docs/_snippets/button-story-decorator.md index 2b8f0142e582..309658bdf34b 100644 --- a/docs/_snippets/button-story-decorator.md +++ b/docs/_snippets/button-story-decorator.md @@ -91,7 +91,7 @@ export const Primary = { ``` ```ts filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-default-export-with-component.md b/docs/_snippets/button-story-default-export-with-component.md index 1b21ad17d98f..0184082ce8a1 100644 --- a/docs/_snippets/button-story-default-export-with-component.md +++ b/docs/_snippets/button-story-default-export-with-component.md @@ -54,7 +54,7 @@ export default { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta } from 'storybook-solidjs'; +import type { Meta } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-rename-story.md b/docs/_snippets/button-story-rename-story.md index 1ab61b30426a..977f167a27b5 100644 --- a/docs/_snippets/button-story-rename-story.md +++ b/docs/_snippets/button-story-rename-story.md @@ -117,7 +117,7 @@ export const Primary = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-using-args.md b/docs/_snippets/button-story-using-args.md index 3f566957d584..4d474abbf15e 100644 --- a/docs/_snippets/button-story-using-args.md +++ b/docs/_snippets/button-story-using-args.md @@ -212,7 +212,7 @@ export const Tertiary = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-with-addon-example.md b/docs/_snippets/button-story-with-addon-example.md index fdff6d84dc2a..d2d6823ee58e 100644 --- a/docs/_snippets/button-story-with-addon-example.md +++ b/docs/_snippets/button-story-with-addon-example.md @@ -116,7 +116,7 @@ export const Basic = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-with-args.md b/docs/_snippets/button-story-with-args.md index b891d1815b74..d9939ce1466d 100644 --- a/docs/_snippets/button-story-with-args.md +++ b/docs/_snippets/button-story-with-args.md @@ -166,7 +166,7 @@ export const Primary = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story-with-emojis.md b/docs/_snippets/button-story-with-emojis.md index 337ada56197a..6f321d990442 100644 --- a/docs/_snippets/button-story-with-emojis.md +++ b/docs/_snippets/button-story-with-emojis.md @@ -162,7 +162,7 @@ export const Tertiary: Story = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/button-story.md b/docs/_snippets/button-story.md index 7d0bda94f5d0..49c836938b34 100644 --- a/docs/_snippets/button-story.md +++ b/docs/_snippets/button-story.md @@ -239,7 +239,7 @@ export const Primary = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; @@ -294,7 +294,7 @@ export const Primary = { ``` ```tsx filename="Button.stories.ts|tsx" renderer="solid" language="ts" tabTitle="with-hooks" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { createSignal } from 'solid-js'; diff --git a/docs/_snippets/component-story-custom-args-complex.md b/docs/_snippets/component-story-custom-args-complex.md index 9049e6654144..75fe6f35cecc 100644 --- a/docs/_snippets/component-story-custom-args-complex.md +++ b/docs/_snippets/component-story-custom-args-complex.md @@ -160,7 +160,7 @@ export const ExampleStory = { ``` ```tsx filename="YourComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { createSignal, createEffect } from 'solid-js'; diff --git a/docs/_snippets/component-story-figma-integration.md b/docs/_snippets/component-story-figma-integration.md index a125c1d5df9d..bff33c487c9a 100644 --- a/docs/_snippets/component-story-figma-integration.md +++ b/docs/_snippets/component-story-figma-integration.md @@ -81,7 +81,7 @@ export const Example = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/component-story-static-asset-cdn.md b/docs/_snippets/component-story-static-asset-cdn.md index a5efa7c6355b..32249fe32b68 100644 --- a/docs/_snippets/component-story-static-asset-cdn.md +++ b/docs/_snippets/component-story-static-asset-cdn.md @@ -69,7 +69,7 @@ export const WithAnImage = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/component-story-static-asset-with-import.md b/docs/_snippets/component-story-static-asset-with-import.md index e13e0ae16712..d2c1abd5fe0c 100644 --- a/docs/_snippets/component-story-static-asset-with-import.md +++ b/docs/_snippets/component-story-static-asset-with-import.md @@ -92,7 +92,7 @@ export const WithAnImage = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import imageFile from './static/image.png'; diff --git a/docs/_snippets/component-story-static-asset-without-import.md b/docs/_snippets/component-story-static-asset-without-import.md index 17941edee00b..3dcd3c3dddcb 100644 --- a/docs/_snippets/component-story-static-asset-without-import.md +++ b/docs/_snippets/component-story-static-asset-without-import.md @@ -67,7 +67,7 @@ export const WithAnImage = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/component-story-with-custom-render-function.md b/docs/_snippets/component-story-with-custom-render-function.md index c8907f8d2510..4db70d88ec1c 100644 --- a/docs/_snippets/component-story-with-custom-render-function.md +++ b/docs/_snippets/component-story-with-custom-render-function.md @@ -147,7 +147,7 @@ export const Example = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Layout } from './Layout'; diff --git a/docs/_snippets/csf-2-example-starter.md b/docs/_snippets/csf-2-example-starter.md index f088e217f038..bdbfec644982 100644 --- a/docs/_snippets/csf-2-example-starter.md +++ b/docs/_snippets/csf-2-example-starter.md @@ -54,7 +54,7 @@ Primary.args = { primary: true }; ``` ```tsx filename="CSF 2 - Button.stories.ts|tsx" renderer="solid" language="ts" -import { ComponentStory, ComponentMeta } from 'storybook-solidjs'; +import { ComponentStory, ComponentMeta } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/csf-3-example-starter.md b/docs/_snippets/csf-3-example-starter.md index 4c96b6a73736..32b449c19c2f 100644 --- a/docs/_snippets/csf-3-example-starter.md +++ b/docs/_snippets/csf-3-example-starter.md @@ -36,7 +36,7 @@ export const Primary: Story = { args: { primary: true } }; ``` ```ts filename="CSF 3 - Button.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/decorator-parameterized-in-preview.md b/docs/_snippets/decorator-parameterized-in-preview.md index 5f04cf8c5a06..dfa8e5844148 100644 --- a/docs/_snippets/decorator-parameterized-in-preview.md +++ b/docs/_snippets/decorator-parameterized-in-preview.md @@ -125,7 +125,7 @@ export default { ``` ```tsx filename=".storybook/preview.tsx" renderer="solid" language="ts" -import type { Preview } from 'storybook-solidjs'; +import type { Preview } from 'storybook-solidjs-vite'; const preview: Preview = { decorators: [ diff --git a/docs/_snippets/histogram-story.md b/docs/_snippets/histogram-story.md index e7c2c3985c43..d3f9da147bd1 100644 --- a/docs/_snippets/histogram-story.md +++ b/docs/_snippets/histogram-story.md @@ -163,7 +163,7 @@ export const Default = { ``` ```ts filename="Histogram.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Histogram } from './Histogram'; diff --git a/docs/_snippets/list-story-expanded.md b/docs/_snippets/list-story-expanded.md index 3f8c699b9229..24c1111fdf69 100644 --- a/docs/_snippets/list-story-expanded.md +++ b/docs/_snippets/list-story-expanded.md @@ -243,7 +243,7 @@ export const ManyItems = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; import { ListItem } from './ListItem'; diff --git a/docs/_snippets/list-story-reuse-data.md b/docs/_snippets/list-story-reuse-data.md index 02badd6d889f..82f84f7831ca 100644 --- a/docs/_snippets/list-story-reuse-data.md +++ b/docs/_snippets/list-story-reuse-data.md @@ -166,7 +166,7 @@ export const ManyItems = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; import { ListItem } from './ListItem'; diff --git a/docs/_snippets/list-story-starter.md b/docs/_snippets/list-story-starter.md index 561fb578ff63..cf07b3f1366e 100644 --- a/docs/_snippets/list-story-starter.md +++ b/docs/_snippets/list-story-starter.md @@ -108,7 +108,7 @@ export const Empty = {}; ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; diff --git a/docs/_snippets/list-story-template.md b/docs/_snippets/list-story-template.md index 0c26a0ca57ab..36e60ce96331 100644 --- a/docs/_snippets/list-story-template.md +++ b/docs/_snippets/list-story-template.md @@ -207,7 +207,7 @@ export const OneItem = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; import { ListItem } from './ListItem'; diff --git a/docs/_snippets/list-story-unchecked.md b/docs/_snippets/list-story-unchecked.md index 49139da49a89..662e324b4405 100644 --- a/docs/_snippets/list-story-unchecked.md +++ b/docs/_snippets/list-story-unchecked.md @@ -128,7 +128,7 @@ export const OneItem = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; diff --git a/docs/_snippets/list-story-with-subcomponents.md b/docs/_snippets/list-story-with-subcomponents.md index ce01ab5a1c05..ecd8c5966e43 100644 --- a/docs/_snippets/list-story-with-subcomponents.md +++ b/docs/_snippets/list-story-with-subcomponents.md @@ -113,7 +113,7 @@ export const OneItem = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; import { ListItem } from './ListItem'; diff --git a/docs/_snippets/list-story-with-unchecked-children.md b/docs/_snippets/list-story-with-unchecked-children.md index 28d7ece4fd37..0ddf4b6a927d 100644 --- a/docs/_snippets/list-story-with-unchecked-children.md +++ b/docs/_snippets/list-story-with-unchecked-children.md @@ -71,7 +71,7 @@ export const OneItem = { ``` ```tsx filename="List.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { List } from './List'; diff --git a/docs/_snippets/loader-story.md b/docs/_snippets/loader-story.md index e9691575e75f..0a5dc8a56cb2 100644 --- a/docs/_snippets/loader-story.md +++ b/docs/_snippets/loader-story.md @@ -113,7 +113,7 @@ export const Primary = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { TodoItem } from './TodoItem'; diff --git a/docs/_snippets/login-form-with-play-function.md b/docs/_snippets/login-form-with-play-function.md index cac55b079a0f..01f853dbead4 100644 --- a/docs/_snippets/login-form-with-play-function.md +++ b/docs/_snippets/login-form-with-play-function.md @@ -134,7 +134,7 @@ export const FilledForm = { ``` ```tsx filename="LoginForm.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { expect } from 'storybook/test'; diff --git a/docs/_snippets/my-component-story-basic-and-props.md b/docs/_snippets/my-component-story-basic-and-props.md index b57b22b92349..5b3d14825e13 100644 --- a/docs/_snippets/my-component-story-basic-and-props.md +++ b/docs/_snippets/my-component-story-basic-and-props.md @@ -70,7 +70,7 @@ export const WithProp = { ``` ```tsx filename="MyComponent.story.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/my-component-story-use-globaltype.md b/docs/_snippets/my-component-story-use-globaltype.md index e6ac0a20e100..2798345e04f0 100644 --- a/docs/_snippets/my-component-story-use-globaltype.md +++ b/docs/_snippets/my-component-story-use-globaltype.md @@ -132,7 +132,7 @@ export const StoryWithLocale = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/my-component-story-with-nonstory.md b/docs/_snippets/my-component-story-with-nonstory.md index 8e404c9096f8..e39a9ab702df 100644 --- a/docs/_snippets/my-component-story-with-nonstory.md +++ b/docs/_snippets/my-component-story-with-nonstory.md @@ -119,7 +119,7 @@ export const ComplexStory = { ``` ```tsx filename="MyComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { MyComponent } from './MyComponent'; diff --git a/docs/_snippets/page-story-slots.md b/docs/_snippets/page-story-slots.md index 5ca5b7ef1c22..cfcd6856ff3f 100644 --- a/docs/_snippets/page-story-slots.md +++ b/docs/_snippets/page-story-slots.md @@ -95,7 +95,7 @@ export const CustomFooter = { ```tsx filename="Page.stories.ts|tsx" renderer="solid" language="ts" import type { ComponentProps } from 'solid-js'; -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Page } from './Page'; diff --git a/docs/_snippets/page-story.md b/docs/_snippets/page-story.md index 191b7bc97f7c..8e24c7c16c90 100644 --- a/docs/_snippets/page-story.md +++ b/docs/_snippets/page-story.md @@ -90,7 +90,7 @@ export const LoggedIn = { ``` ```tsx filename="Page.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Page } from './Page'; diff --git a/docs/_snippets/storybook-preview-global-decorator.md b/docs/_snippets/storybook-preview-global-decorator.md index d514fb2eed13..ed8c05c5618f 100644 --- a/docs/_snippets/storybook-preview-global-decorator.md +++ b/docs/_snippets/storybook-preview-global-decorator.md @@ -57,7 +57,7 @@ export default { ``` ```js filename=".storybook/preview.tsx" renderer="solid" language="ts" -import type { Preview } from 'storybook-solidjs'; +import type { Preview } from 'storybook-solidjs-vite'; const preview: Preview = { decorators: [ diff --git a/docs/_snippets/storybook-preview-with-styled-components-decorator.md b/docs/_snippets/storybook-preview-with-styled-components-decorator.md index 46a2a6eaf84e..d0176a9d836e 100644 --- a/docs/_snippets/storybook-preview-with-styled-components-decorator.md +++ b/docs/_snippets/storybook-preview-with-styled-components-decorator.md @@ -85,7 +85,7 @@ export const decorators = [ ``` ```tsx filename=".storybook/preview.tsx" renderer="solid" language="ts" -import type { Preview } from 'storybook-solidjs'; +import type { Preview } from 'storybook-solidjs-vite'; import { ThemeProvider, DefaultTheme } from 'solid-styled-components'; diff --git a/docs/_snippets/tags-combo-example.md b/docs/_snippets/tags-combo-example.md index 76363ccdc5f8..0aea919b2ef4 100644 --- a/docs/_snippets/tags-combo-example.md +++ b/docs/_snippets/tags-combo-example.md @@ -136,7 +136,7 @@ export const Combo = { ``` ```tsx filename="Button.stories.tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { Button } from './Button'; diff --git a/docs/_snippets/your-component-with-decorator.md b/docs/_snippets/your-component-with-decorator.md index b5048a4338a2..8e14872ef37b 100644 --- a/docs/_snippets/your-component-with-decorator.md +++ b/docs/_snippets/your-component-with-decorator.md @@ -67,7 +67,7 @@ export default { ``` ```tsx filename="YourComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta } from 'storybook-solidjs'; +import type { Meta } from 'storybook-solidjs-vite'; import { YourComponent } from './YourComponent'; diff --git a/docs/_snippets/your-component.md b/docs/_snippets/your-component.md index f3d7d9084c27..79be92e4ddbb 100644 --- a/docs/_snippets/your-component.md +++ b/docs/_snippets/your-component.md @@ -149,7 +149,7 @@ export const FirstStory = { ``` ```tsx filename="YourComponent.stories.ts|tsx" renderer="solid" language="ts" -import type { Meta, StoryObj } from 'storybook-solidjs'; +import type { Meta, StoryObj } from 'storybook-solidjs-vite'; import { YourComponent } from './YourComponent'; diff --git a/docs/get-started/install.mdx b/docs/get-started/install.mdx index e26eed122dc6..d33a5b017e3f 100644 --- a/docs/get-started/install.mdx +++ b/docs/get-started/install.mdx @@ -285,7 +285,7 @@ There are some noteworthy items here: - * [Storybook's SolidJS README](https://github.com/storybookjs/solidjs) for more information on how to set up Storybook in your SolidJS project. + * [Storybook's SolidJS README](https://github.com/solidjs-community/storybook) for more information on how to set up Storybook in your SolidJS project. * [Storybook's help documentation](https://storybook.js.org/community#support) to contact the community and ask for help. From b5bbb766c83887cb308e19cbb6decc6f4a310c6b Mon Sep 17 00:00:00 2001 From: Yann Braga Date: Mon, 11 Aug 2025 18:46:23 +0200 Subject: [PATCH 13/14] Merge pull request #32240 from storybookjs/yann/fix-e2e-tests Build: Fix react native expo e2e tests (cherry picked from commit 383baef37bcb4c7261a997e37a7c6cd9466736f9) --- scripts/tasks/sandbox-parts.ts | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/scripts/tasks/sandbox-parts.ts b/scripts/tasks/sandbox-parts.ts index d7d90ec58f16..b1464781e9e8 100644 --- a/scripts/tasks/sandbox-parts.ts +++ b/scripts/tasks/sandbox-parts.ts @@ -7,6 +7,7 @@ import { ensureDir, ensureSymlink, existsSync, + mkdir, pathExists, readFile, readFileSync, @@ -157,6 +158,13 @@ export const init: Task['run'] = async ( extra = { type: 'react_native_web' }; } + switch (template.expected.framework) { + case '@storybook/react-native-web-vite': + await prepareReactNativeWebSandbox(cwd); + break; + default: + } + await executeCLIStep(steps.init, { cwd, optionValues: { debug, yes: true, 'skip-install': true, ...extra }, @@ -841,6 +849,14 @@ export async function setImportMap(cwd: string) { await writeJson(join(cwd, 'package.json'), packageJson, { spaces: 2 }); } +async function prepareReactNativeWebSandbox(cwd: string) { + // Make it so that RN sandboxes have stories in src/stories similar to + // other react sandboxes, for consistency. + if (!(await pathExists(join(cwd, 'src')))) { + await mkdir(join(cwd, 'src')); + } +} + async function prepareAngularSandbox(cwd: string, templateName: string) { const angularJson = await readJson(join(cwd, 'angular.json')); From fb9266cff0538d6716a1ebe004c1bf6f64245bb6 Mon Sep 17 00:00:00 2001 From: storybook-bot <32066757+storybook-bot@users.noreply.github.com> Date: Mon, 11 Aug 2025 16:48:54 +0000 Subject: [PATCH 14/14] Write changelog for 9.1.2 [skip ci] --- CHANGELOG.md | 9 +++++++++ code/package.json | 3 ++- docs/versions/latest.json | 2 +- 3 files changed, 12 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7a3d4a5410ad..e19d2eef13a1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 9.1.2 + +- Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf! +- Angular: Fix `entry.polyfills` undefined error - [#32230](https://github.com/storybookjs/storybook/pull/32230), thanks @sk-pub! +- Angular: Inherit options from browserTarget - [#32108](https://github.com/storybookjs/storybook/pull/32108), thanks @gingeekrishna! +- Core: Improve addon detection in automigrations on windows - [#31937](https://github.com/storybookjs/storybook/pull/31937), thanks @mrginglymus! +- Next.js: Return mocked router instead of actual router in useRouter - [#32131](https://github.com/storybookjs/storybook/pull/32131), thanks @JulioJ11! +- Telemetry: Improve dev cancellation handling - [#32218](https://github.com/storybookjs/storybook/pull/32218), thanks @shilman! + ## 9.1.1 - CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold! diff --git a/code/package.json b/code/package.json index 0a88d93dd53a..cce7b6b87d24 100644 --- a/code/package.json +++ b/code/package.json @@ -285,5 +285,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "9.1.2" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 0fa594378e57..abee66bccdda 100644 --- a/docs/versions/latest.json +++ b/docs/versions/latest.json @@ -1 +1 @@ -{"version":"9.1.1","info":{"plain":"- CLI: Fix throwing in readonly environments - [#31785](https://github.com/storybookjs/storybook/pull/31785), thanks @JReinhold!\n- Onboarding: Tweak referral wording in survey - [#32185](https://github.com/storybookjs/storybook/pull/32185), thanks @shilman!\n- Telemetry: Send index stats on dev exit - [#32168](https://github.com/storybookjs/storybook/pull/32168), thanks @shilman!"}} +{"version":"9.1.2","info":{"plain":"- Addon Docs: Fix Symbol conversion issue in docs page and controls panel - [#32220](https://github.com/storybookjs/storybook/pull/32220), thanks @yannbf!\n- Angular: Fix `entry.polyfills` undefined error - [#32230](https://github.com/storybookjs/storybook/pull/32230), thanks @sk-pub!\n- Angular: Inherit options from browserTarget - [#32108](https://github.com/storybookjs/storybook/pull/32108), thanks @gingeekrishna!\n- Core: Improve addon detection in automigrations on windows - [#31937](https://github.com/storybookjs/storybook/pull/31937), thanks @mrginglymus!\n- Next.js: Return mocked router instead of actual router in useRouter - [#32131](https://github.com/storybookjs/storybook/pull/32131), thanks @JulioJ11!\n- Telemetry: Improve dev cancellation handling - [#32218](https://github.com/storybookjs/storybook/pull/32218), thanks @shilman!"}}