diff --git a/CHANGELOG.md b/CHANGELOG.md index e836b81e7ad..60adcc476fb 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,12 @@ +## 8.4.6 + +- Addon Test: Use pathe for better windows support - [#29676](https://github.com/storybookjs/storybook/pull/29676), thanks @yannbf! +- Angular: Default to standalone components in Angular v19 - [#29677](https://github.com/storybookjs/storybook/pull/29677), thanks @ingowagner! +- Frameworks: Add Vite 6 support - [#29710](https://github.com/storybookjs/storybook/pull/29710), thanks @yannbf! +- Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf! +- React: Upgrade react-docgen-typescript to support Vite 6 - [#29724](https://github.com/storybookjs/storybook/pull/29724), thanks @yannbf! +- Svelte: Support `@sveltejs/vite-plugin-svelte` v5 - [#29731](https://github.com/storybookjs/storybook/pull/29731), thanks @JReinhold! + ## 8.4.5 - Angular: Support v19 - [#29659](https://github.com/storybookjs/storybook/pull/29659), thanks @leosvelperez! diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index ea140d28b0a..0505eaff38a 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,8 @@ +## 8.5.0-alpha.14 + +- RNW-Vite: Add built-in Flow support - [#29756](https://github.com/storybookjs/storybook/pull/29756), thanks @dannyhw! +- Test: Add coverage feature - [#29713](https://github.com/storybookjs/storybook/pull/29713), thanks @ndelangen! + ## 8.5.0-alpha.13 - Portable stories: Support multiple annotation notations from preview - [#29733](https://github.com/storybookjs/storybook/pull/29733), thanks @yannbf! diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index 777da54f36f..e6576c85147 100644 --- a/code/addons/a11y/package.json +++ b/code/addons/a11y/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-a11y", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 89a6bb0f92d..68fe2fda22f 100644 --- a/code/addons/actions/package.json +++ b/code/addons/actions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-actions", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Get UI feedback when an action is performed on an interactive element", "keywords": [ "storybook", diff --git a/code/addons/backgrounds/package.json b/code/addons/backgrounds/package.json index 9d949852c39..f1224d522d5 100644 --- a/code/addons/backgrounds/package.json +++ b/code/addons/backgrounds/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-backgrounds", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Switch backgrounds to view components in different settings", "keywords": [ "addon", diff --git a/code/addons/controls/package.json b/code/addons/controls/package.json index 1a26c1be5ea..390cfe2c4b3 100644 --- a/code/addons/controls/package.json +++ b/code/addons/controls/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-controls", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Interact with component inputs dynamically in the Storybook UI", "keywords": [ "addon", diff --git a/code/addons/docs/package.json b/code/addons/docs/package.json index 6fe9d92e2b2..f045776c0c5 100644 --- a/code/addons/docs/package.json +++ b/code/addons/docs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-docs", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Document component usage and properties in Markdown", "keywords": [ "addon", diff --git a/code/addons/essentials/package.json b/code/addons/essentials/package.json index 819febeab97..bbc2e38241d 100644 --- a/code/addons/essentials/package.json +++ b/code/addons/essentials/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-essentials", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Curated addons to bring out the best of Storybook", "keywords": [ "addon", diff --git a/code/addons/gfm/package.json b/code/addons/gfm/package.json index 47aad8f8075..fde63ba9d04 100644 --- a/code/addons/gfm/package.json +++ b/code/addons/gfm/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-mdx-gfm", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index b94b2d6937f..094cd9665f2 100644 --- a/code/addons/highlight/package.json +++ b/code/addons/highlight/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-highlight", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Highlight DOM nodes within your stories", "keywords": [ "storybook-addons", diff --git a/code/addons/interactions/package.json b/code/addons/interactions/package.json index 1041ab18172..2a15b8ec400 100644 --- a/code/addons/interactions/package.json +++ b/code/addons/interactions/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-interactions", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Automate, test and debug user interactions", "keywords": [ "storybook-addons", diff --git a/code/addons/jest/package.json b/code/addons/jest/package.json index 05a9643ce79..adedd69200e 100644 --- a/code/addons/jest/package.json +++ b/code/addons/jest/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-jest", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "React storybook addon that show component jest report", "keywords": [ "addon", diff --git a/code/addons/links/package.json b/code/addons/links/package.json index dc18ea0d61a..abe5add1f31 100644 --- a/code/addons/links/package.json +++ b/code/addons/links/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-links", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Link stories together to build demos and prototypes with your UI components", "keywords": [ "storybook-addons", diff --git a/code/addons/measure/package.json b/code/addons/measure/package.json index 75914fc636a..ad37bfc0a5c 100644 --- a/code/addons/measure/package.json +++ b/code/addons/measure/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-measure", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Inspect layouts by visualizing the box model", "keywords": [ "storybook-addons", diff --git a/code/addons/onboarding/package.json b/code/addons/onboarding/package.json index ba2cfd39bc8..f47cb92576c 100644 --- a/code/addons/onboarding/package.json +++ b/code/addons/onboarding/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-onboarding", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Addon Onboarding - Introduces a new onboarding experience", "keywords": [ "storybook-addons", diff --git a/code/addons/outline/package.json b/code/addons/outline/package.json index ce422787270..a13e3df9550 100644 --- a/code/addons/outline/package.json +++ b/code/addons/outline/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-outline", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Outline all elements with CSS to help with layout placement and alignment", "keywords": [ "storybook-addons", diff --git a/code/addons/storysource/package.json b/code/addons/storysource/package.json index d0d23dde852..c5068f29755 100644 --- a/code/addons/storysource/package.json +++ b/code/addons/storysource/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-storysource", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "View a story’s source code to see how it works and paste into your app", "keywords": [ "addon", diff --git a/code/addons/test/package.json b/code/addons/test/package.json index 06ea13ddacb..071173230ea 100644 --- a/code/addons/test/package.json +++ b/code/addons/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-addon-test", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", @@ -48,6 +48,11 @@ "import": "./dist/vitest-plugin/test-utils.mjs", "require": "./dist/vitest-plugin/test-utils.js" }, + "./internal/coverage-reporter": { + "types": "./dist/node/coverage-reporter.d.ts", + "import": "./dist/node/coverage-reporter.mjs", + "require": "./dist/node/coverage-reporter.js" + }, "./preview": { "types": "./dist/preview.d.ts", "import": "./dist/preview.mjs", @@ -87,7 +92,7 @@ }, "devDependencies": { "@devtools-ds/object-inspector": "^1.1.2", - "@storybook/icons": "^1.2.12", + "@types/istanbul-lib-report": "^3.0.3", "@types/node": "^22.0.0", "@types/semver": "^7", "@vitest/browser": "^2.1.3", @@ -98,6 +103,7 @@ "execa": "^8.0.1", "find-up": "^7.0.0", "formik": "^2.2.9", + "istanbul-lib-report": "^3.0.1", "pathe": "^1.1.2", "picocolors": "^1.1.0", "react": "^18.2.0", @@ -146,7 +152,8 @@ "./src/vitest-plugin/index.ts", "./src/vitest-plugin/global-setup.ts", "./src/postinstall.ts", - "./src/node/vitest.ts" + "./src/node/vitest.ts", + "./src/node/coverage-reporter.ts" ] }, "storybook": { diff --git a/code/addons/test/src/components/TestProviderRender.stories.tsx b/code/addons/test/src/components/TestProviderRender.stories.tsx index 13a9e9bd3f3..fbdb3d488c7 100644 --- a/code/addons/test/src/components/TestProviderRender.stories.tsx +++ b/code/addons/test/src/components/TestProviderRender.stories.tsx @@ -124,29 +124,83 @@ export const Running: Story = { }, }; -export const EnableA11y: Story = { +export const Watching: Story = { + args: { + state: { + ...config, + ...baseState, + watching: true, + }, + }, +}; + +export const WithCoverageNegative: Story = { args: { state: { ...config, ...baseState, details: { testResults: [], + coverageSummary: { + percentage: 20, + status: 'negative', + }, }, config: { - a11y: true, - coverage: false, + a11y: false, + coverage: true, }, }, }, }; -export const EnableEditing: Story = { +export const WithCoverageWarning: Story = { args: { state: { ...config, ...baseState, + details: { + testResults: [], + coverageSummary: { + percentage: 50, + status: 'warning', + }, + }, config: { - a11y: true, + a11y: false, + coverage: true, + }, + }, + }, +}; + +export const WithCoveragePositive: Story = { + args: { + state: { + ...config, + ...baseState, + details: { + testResults: [], + coverageSummary: { + percentage: 80, + status: 'positive', + }, + }, + config: { + a11y: false, + coverage: true, + }, + }, + }, +}; + +export const Editing: Story = { + args: { + state: { + ...config, + ...baseState, + config: { + a11y: false, coverage: false, }, details: { @@ -161,3 +215,21 @@ export const EnableEditing: Story = { screen.getByLabelText(/Open settings/).click(); }, }; + +export const EditingAndWatching: Story = { + args: { + state: { + ...config, + ...baseState, + watching: true, + config: { + a11y: true, + coverage: true, // should be automatically disabled in the UI + }, + details: { + testResults: [], + }, + }, + }, + play: Editing.play, +}; diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx index 588523f89ad..ca6be687c88 100644 --- a/code/addons/test/src/components/TestProviderRender.tsx +++ b/code/addons/test/src/components/TestProviderRender.tsx @@ -77,6 +77,7 @@ export const TestProviderRender: FC<{ const title = state.crashed || state.failed ? 'Local tests failed' : 'Run local tests'; const errorMessage = state.error?.message; + const coverageSummary = state.details?.coverageSummary; const [config, updateConfig] = useConfig( api, @@ -159,8 +160,8 @@ export const TestProviderRender: FC<{ right={ updateConfig({ coverage: !config.coverage })} /> } @@ -185,11 +186,27 @@ export const TestProviderRender: FC<{ title="Component tests" icon={} /> - } - right={`60%`} - /> + {coverageSummary ? ( + + } + right={`${coverageSummary.percentage}%`} + /> + ) : ( + } + /> + )} } diff --git a/code/addons/test/src/constants.ts b/code/addons/test/src/constants.ts index 838594e212a..0453930e375 100644 --- a/code/addons/test/src/constants.ts +++ b/code/addons/test/src/constants.ts @@ -10,6 +10,8 @@ export const DOCUMENTATION_LINK = 'writing-tests/test-addon'; export const DOCUMENTATION_DISCREPANCY_LINK = `${DOCUMENTATION_LINK}#what-happens-when-there-are-different-test-results-in-multiple-environments`; export const DOCUMENTATION_FATAL_ERROR_LINK = `${DOCUMENTATION_LINK}#what-happens-if-vitest-itself-has-an-error`; +export const COVERAGE_DIRECTORY = 'coverage'; + export interface Config { coverage: boolean; a11y: boolean; @@ -17,4 +19,8 @@ export interface Config { export type Details = { testResults: TestResult[]; + coverageSummary?: { + status: 'positive' | 'warning' | 'negative' | 'unknown'; + percentage: number; + }; }; diff --git a/code/addons/test/src/node/boot-test-runner.ts b/code/addons/test/src/node/boot-test-runner.ts index 0771604861d..9cf4880ec35 100644 --- a/code/addons/test/src/node/boot-test-runner.ts +++ b/code/addons/test/src/node/boot-test-runner.ts @@ -3,6 +3,7 @@ import { type ChildProcess } from 'node:child_process'; import type { Channel } from 'storybook/internal/channels'; import { TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, + TESTING_MODULE_CONFIG_CHANGE, TESTING_MODULE_CRASH_REPORT, TESTING_MODULE_RUN_REQUEST, TESTING_MODULE_WATCH_MODE_REQUEST, @@ -43,11 +44,14 @@ const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: a child?.send({ args, from: 'server', type: TESTING_MODULE_WATCH_MODE_REQUEST }); const forwardCancel = (...args: any[]) => child?.send({ args, from: 'server', type: TESTING_MODULE_CANCEL_TEST_RUN_REQUEST }); + const forwardConfigChange = (...args: any[]) => + child?.send({ args, from: 'server', type: TESTING_MODULE_CONFIG_CHANGE }); const killChild = () => { channel.off(TESTING_MODULE_RUN_REQUEST, forwardRun); channel.off(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode); channel.off(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel); + channel.off(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange); child?.kill(); child = null; }; @@ -86,6 +90,7 @@ const bootTestRunner = async (channel: Channel, initEvent?: string, initArgs?: a channel.on(TESTING_MODULE_RUN_REQUEST, forwardRun); channel.on(TESTING_MODULE_WATCH_MODE_REQUEST, forwardWatchMode); channel.on(TESTING_MODULE_CANCEL_TEST_RUN_REQUEST, forwardCancel); + channel.on(TESTING_MODULE_CONFIG_CHANGE, forwardConfigChange); resolve(); } else if (result.type === 'error') { diff --git a/code/addons/test/src/node/coverage-reporter.ts b/code/addons/test/src/node/coverage-reporter.ts new file mode 100644 index 00000000000..452643cd9d6 --- /dev/null +++ b/code/addons/test/src/node/coverage-reporter.ts @@ -0,0 +1,53 @@ +import type { ResolvedCoverageOptions } from 'vitest/node'; + +import type { ReportNode, Visitor } from 'istanbul-lib-report'; +import { ReportBase } from 'istanbul-lib-report'; + +import { type Details, TEST_PROVIDER_ID } from '../constants'; +import type { TestManager } from './test-manager'; + +export type StorybookCoverageReporterOptions = { + testManager: TestManager; + coverageOptions: ResolvedCoverageOptions<'v8'>; +}; + +export default class StorybookCoverageReporter extends ReportBase implements Partial { + #testManager: StorybookCoverageReporterOptions['testManager']; + + #coverageOptions: StorybookCoverageReporterOptions['coverageOptions']; + + constructor(opts: StorybookCoverageReporterOptions) { + super(); + this.#testManager = opts.testManager; + this.#coverageOptions = opts.coverageOptions; + } + + onSummary(node: ReportNode) { + if (!node.isRoot()) { + return; + } + const coverageSummary = node.getCoverageSummary(false); + + const percentage = Math.round(coverageSummary.data.statements.pct); + + // Fallback to Vitest's default watermarks https://vitest.dev/config/#coverage-watermarks + const [lowWatermark = 50, highWatermark = 80] = + this.#coverageOptions.watermarks?.statements ?? []; + + const coverageDetails: Details['coverageSummary'] = { + percentage, + status: + percentage < lowWatermark + ? 'negative' + : percentage < highWatermark + ? 'warning' + : 'positive', + }; + this.#testManager.sendProgressReport({ + providerId: TEST_PROVIDER_ID, + details: { + coverageSummary: coverageDetails, + }, + }); + } +} diff --git a/code/addons/test/src/node/test-manager.ts b/code/addons/test/src/node/test-manager.ts index 62491677205..3660081de58 100644 --- a/code/addons/test/src/node/test-manager.ts +++ b/code/addons/test/src/node/test-manager.ts @@ -12,7 +12,7 @@ import { type TestingModuleWatchModeRequestPayload, } from 'storybook/internal/core-events'; -import { TEST_PROVIDER_ID } from '../constants'; +import { type Config, TEST_PROVIDER_ID } from '../constants'; import { VitestManager } from './vitest-manager'; export class TestManager { @@ -20,6 +20,8 @@ export class TestManager { watchMode = false; + coverage = false; + constructor( private channel: Channel, private options: { @@ -27,7 +29,7 @@ export class TestManager { onReady?: () => void; } = {} ) { - this.vitestManager = new VitestManager(channel, this); + this.vitestManager = new VitestManager(this); this.channel.on(TESTING_MODULE_RUN_REQUEST, this.handleRunRequest.bind(this)); this.channel.on(TESTING_MODULE_CONFIG_CHANGE, this.handleConfigChange.bind(this)); @@ -37,21 +39,29 @@ export class TestManager { this.vitestManager.startVitest().then(() => options.onReady?.()); } - async restartVitest(watchMode = false) { + async restartVitest({ watchMode, coverage }: { watchMode: boolean; coverage: boolean }) { await this.vitestManager.vitest?.runningPromise; await this.vitestManager.closeVitest(); - await this.vitestManager.startVitest(watchMode); + await this.vitestManager.startVitest({ watchMode, coverage }); } - async handleConfigChange(payload: TestingModuleConfigChangePayload) { - // TODO do something with the config - const config = payload.config; + async handleConfigChange( + payload: TestingModuleConfigChangePayload<{ coverage: boolean; a11y: boolean }> + ) { + if (payload.providerId !== TEST_PROVIDER_ID) { + return; + } + if (this.coverage !== payload.config.coverage) { + try { + this.coverage = payload.config.coverage; + await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage }); + } catch (e) { + this.reportFatalError('Failed to change coverage mode', e); + } + } } async handleWatchModeRequest(payload: TestingModuleWatchModeRequestPayload) { - // TODO do something with the config - const config = payload.config; - try { if (payload.providerId !== TEST_PROVIDER_ID) { return; @@ -59,20 +69,45 @@ export class TestManager { if (this.watchMode !== payload.watchMode) { this.watchMode = payload.watchMode; - await this.restartVitest(this.watchMode); + await this.restartVitest({ watchMode: this.watchMode, coverage: false }); } } catch (e) { this.reportFatalError('Failed to change watch mode', e); } } - async handleRunRequest(payload: TestingModuleRunRequestPayload) { + async handleRunRequest(payload: TestingModuleRunRequestPayload) { try { if (payload.providerId !== TEST_PROVIDER_ID) { return; } + if (payload.config && this.coverage !== payload.config.coverage) { + this.coverage = payload.config.coverage; + } + + const allTestsRun = (payload.storyIds ?? []).length === 0; + if (this.coverage) { + /* + If we have coverage enabled and we're running all stories, + we have to restart Vitest AND disable watch mode otherwise the coverage report will be incorrect, + Vitest behaves wonky when re-using the same Vitest instance but with watch mode disabled, + among other things it causes the coverage report to be incorrect and stale. + + If we're only running a subset of stories, we have to temporarily disable coverage, + as a coverage report for a subset of stories is not useful. + */ + await this.restartVitest({ + watchMode: allTestsRun ? false : this.watchMode, + coverage: allTestsRun, + }); + } await this.vitestManager.runTests(payload); + + if (this.coverage && !allTestsRun) { + // Re-enable coverage if it was temporarily disabled because of a subset of stories was run + await this.restartVitest({ watchMode: this.watchMode, coverage: this.coverage }); + } } catch (e) { this.reportFatalError('Failed to run tests', e); } diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index b14da16ecce..59aba03e7c7 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -1,8 +1,15 @@ import { existsSync } from 'node:fs'; -import type { TestProject, TestSpecification, Vitest, WorkspaceProject } from 'vitest/node'; - -import type { Channel } from 'storybook/internal/channels'; +import type { + CoverageOptions, + ResolvedCoverageOptions, + TestProject, + TestSpecification, + Vitest, + WorkspaceProject, +} from 'vitest/node'; + +import { resolvePathInStorybookCache } from 'storybook/internal/common'; import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-events'; import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types'; @@ -10,7 +17,9 @@ import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/typ import path, { normalize } from 'pathe'; import slash from 'slash'; +import { COVERAGE_DIRECTORY, type Config } from '../constants'; import { log } from '../logger'; +import type { StorybookCoverageReporterOptions } from './coverage-reporter'; import { StorybookReporter } from './reporter'; import type { TestManager } from './test-manager'; @@ -27,14 +36,31 @@ export class VitestManager { storyCountForCurrentRun: number = 0; - constructor( - private channel: Channel, - private testManager: TestManager - ) {} + constructor(private testManager: TestManager) {} - async startVitest(watchMode = false) { + async startVitest({ watchMode = false, coverage = false } = {}) { const { createVitest } = await import('vitest/node'); + const storybookCoverageReporter: [string, StorybookCoverageReporterOptions] = [ + '@storybook/experimental-addon-test/internal/coverage-reporter', + { + testManager: this.testManager, + coverageOptions: this.vitest?.config?.coverage as ResolvedCoverageOptions<'v8'>, + }, + ]; + const coverageOptions = ( + coverage + ? { + enabled: true, + clean: false, + cleanOnRerun: !watchMode, + reportOnFailure: true, + reporter: [['html', {}], storybookCoverageReporter], + reportsDirectory: resolvePathInStorybookCache(COVERAGE_DIRECTORY), + } + : { enabled: false } + ) as CoverageOptions; + this.vitest = await createVitest('test', { watch: watchMode, passWithNoTests: false, @@ -45,19 +71,20 @@ export class VitestManager { // find a way to just show errors and warnings for example // Otherwise it might be hard for the user to discover Storybook related logs reporters: ['default', new StorybookReporter(this.testManager)], - // @ts-expect-error we just want to disable coverage, not specify a provider - coverage: { - enabled: false, - }, + coverage: coverageOptions, }); if (this.vitest) { this.vitest.onCancel(() => { - // TODO: handle cancelation + // TODO: handle cancellation }); } - await this.vitest.init(); + try { + await this.vitest.init(); + } catch (e) { + this.testManager.reportFatalError('Failed to init Vitest', e); + } if (watchMode) { await this.setupWatchers(); @@ -110,10 +137,11 @@ export class VitestManager { return true; } - async runTests(requestPayload: TestingModuleRunRequestPayload) { + async runTests(requestPayload: TestingModuleRunRequestPayload) { if (!this.vitest) { await this.startVitest(); } + this.resetTestNamePattern(); const stories = await this.fetchStories(requestPayload.indexUrl, requestPayload.storyIds); @@ -242,7 +270,7 @@ export class VitestManager { if (triggerAffectedTests.length) { await this.vitest.cancelCurrentRun('keyboard-input'); await this.vitest.runningPromise; - await this.vitest.runFiles(triggerAffectedTests, true); + await this.vitest.runFiles(triggerAffectedTests, false); } } diff --git a/code/addons/test/src/preset.ts b/code/addons/test/src/preset.ts index a1a6e1233fa..30b0e9da7b3 100644 --- a/code/addons/test/src/preset.ts +++ b/code/addons/test/src/preset.ts @@ -1,19 +1,26 @@ import { readFileSync } from 'node:fs'; +import { mkdir } from 'node:fs/promises'; import type { Channel } from 'storybook/internal/channels'; -import { checkAddonOrder, getFrameworkName, serverRequire } from 'storybook/internal/common'; import { + checkAddonOrder, + getFrameworkName, + resolvePathInStorybookCache, + serverRequire, +} from 'storybook/internal/common'; +import { + TESTING_MODULE_CONFIG_CHANGE, TESTING_MODULE_RUN_REQUEST, TESTING_MODULE_WATCH_MODE_REQUEST, } from 'storybook/internal/core-events'; import { oneWayHash, telemetry } from 'storybook/internal/telemetry'; -import type { Options, PresetProperty, StoryId } from 'storybook/internal/types'; +import type { Options, PresetProperty, PresetPropertyFn, StoryId } from 'storybook/internal/types'; import { isAbsolute, join } from 'pathe'; import picocolors from 'picocolors'; import { dedent } from 'ts-dedent'; -import { STORYBOOK_ADDON_TEST_CHANNEL } from './constants'; +import { COVERAGE_DIRECTORY, STORYBOOK_ADDON_TEST_CHANNEL, TEST_PROVIDER_ID } from './constants'; import { log } from './logger'; import { runTestRunner } from './node/boot-test-runner'; @@ -64,7 +71,9 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti const execute = (eventName: string) => (...args: any[]) => { - runTestRunner(channel, eventName, args); + if (args[0]?.providerId === TEST_PROVIDER_ID) { + runTestRunner(channel, eventName, args); + } }; channel.on(TESTING_MODULE_RUN_REQUEST, execute(TESTING_MODULE_RUN_REQUEST)); @@ -73,6 +82,7 @@ export const experimental_serverChannel = async (channel: Channel, options: Opti execute(TESTING_MODULE_WATCH_MODE_REQUEST)(payload); } }); + channel.on(TESTING_MODULE_CONFIG_CHANGE, execute(TESTING_MODULE_CONFIG_CHANGE)); if (!core.disableTelemetry) { const packageJsonPath = require.resolve('@storybook/experimental-addon-test/package.json'); @@ -126,3 +136,19 @@ export const managerEntries: PresetProperty<'managerEntries'> = async (entry = [ // for whatever reason seems like the return type of managerEntries is not correct (it expects never instead of string[]) return entry as never; }; + +export const staticDirs: PresetPropertyFn<'staticDirs'> = async (values = [], options) => { + if (options.configType === 'PRODUCTION') { + return values; + } + + const coverageDirectory = resolvePathInStorybookCache(COVERAGE_DIRECTORY); + await mkdir(coverageDirectory, { recursive: true }); + return [ + { + from: coverageDirectory, + to: '/coverage', + }, + ...values, + ]; +}; diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 0dbd8c971da..e9332849239 100644 --- a/code/addons/themes/package.json +++ b/code/addons/themes/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-themes", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Switch between multiple themes for you components in Storybook", "keywords": [ "css", diff --git a/code/addons/toolbars/package.json b/code/addons/toolbars/package.json index 975e457ad70..580eea8e064 100644 --- a/code/addons/toolbars/package.json +++ b/code/addons/toolbars/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-toolbars", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Create your own toolbar items that control story rendering", "keywords": [ "addon", diff --git a/code/addons/viewport/package.json b/code/addons/viewport/package.json index bd9581f1e8f..1c0c3cedbdd 100644 --- a/code/addons/viewport/package.json +++ b/code/addons/viewport/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/addon-viewport", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Build responsive components by adjusting Storybook’s viewport size and orientation", "keywords": [ "addon", diff --git a/code/builders/builder-vite/package.json b/code/builders/builder-vite/package.json index 4c5b8939238..0a28a75f4dc 100644 --- a/code/builders/builder-vite/package.json +++ b/code/builders/builder-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "A plugin to run and build Storybooks with Vite", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme", "bugs": { diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 4c4c13e321a..3601f5fa8c3 100644 --- a/code/builders/builder-webpack5/package.json +++ b/code/builders/builder-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index d9e1bdbdf3e..2181ac1aded 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index e1f717e8247..9b056f27023 100644 --- a/code/core/src/common/versions.ts +++ b/code/core/src/common/versions.ts @@ -1,88 +1,88 @@ // auto generated file, do not edit export default { - '@storybook/addon-a11y': '8.5.0-alpha.13', - '@storybook/addon-actions': '8.5.0-alpha.13', - '@storybook/addon-backgrounds': '8.5.0-alpha.13', - '@storybook/addon-controls': '8.5.0-alpha.13', - '@storybook/addon-docs': '8.5.0-alpha.13', - '@storybook/addon-essentials': '8.5.0-alpha.13', - '@storybook/addon-mdx-gfm': '8.5.0-alpha.13', - '@storybook/addon-highlight': '8.5.0-alpha.13', - '@storybook/addon-interactions': '8.5.0-alpha.13', - '@storybook/addon-jest': '8.5.0-alpha.13', - '@storybook/addon-links': '8.5.0-alpha.13', - '@storybook/addon-measure': '8.5.0-alpha.13', - '@storybook/addon-onboarding': '8.5.0-alpha.13', - '@storybook/addon-outline': '8.5.0-alpha.13', - '@storybook/addon-storysource': '8.5.0-alpha.13', - '@storybook/experimental-addon-test': '8.5.0-alpha.13', - '@storybook/addon-themes': '8.5.0-alpha.13', - '@storybook/addon-toolbars': '8.5.0-alpha.13', - '@storybook/addon-viewport': '8.5.0-alpha.13', - '@storybook/builder-vite': '8.5.0-alpha.13', - '@storybook/builder-webpack5': '8.5.0-alpha.13', - '@storybook/core': '8.5.0-alpha.13', - '@storybook/builder-manager': '8.5.0-alpha.13', - '@storybook/channels': '8.5.0-alpha.13', - '@storybook/client-logger': '8.5.0-alpha.13', - '@storybook/components': '8.5.0-alpha.13', - '@storybook/core-common': '8.5.0-alpha.13', - '@storybook/core-events': '8.5.0-alpha.13', - '@storybook/core-server': '8.5.0-alpha.13', - '@storybook/csf-tools': '8.5.0-alpha.13', - '@storybook/docs-tools': '8.5.0-alpha.13', - '@storybook/manager': '8.5.0-alpha.13', - '@storybook/manager-api': '8.5.0-alpha.13', - '@storybook/node-logger': '8.5.0-alpha.13', - '@storybook/preview': '8.5.0-alpha.13', - '@storybook/preview-api': '8.5.0-alpha.13', - '@storybook/router': '8.5.0-alpha.13', - '@storybook/telemetry': '8.5.0-alpha.13', - '@storybook/theming': '8.5.0-alpha.13', - '@storybook/types': '8.5.0-alpha.13', - '@storybook/angular': '8.5.0-alpha.13', - '@storybook/ember': '8.5.0-alpha.13', - '@storybook/experimental-nextjs-vite': '8.5.0-alpha.13', - '@storybook/html-vite': '8.5.0-alpha.13', - '@storybook/html-webpack5': '8.5.0-alpha.13', - '@storybook/nextjs': '8.5.0-alpha.13', - '@storybook/preact-vite': '8.5.0-alpha.13', - '@storybook/preact-webpack5': '8.5.0-alpha.13', - '@storybook/react-native-web-vite': '8.5.0-alpha.13', - '@storybook/react-vite': '8.5.0-alpha.13', - '@storybook/react-webpack5': '8.5.0-alpha.13', - '@storybook/server-webpack5': '8.5.0-alpha.13', - '@storybook/svelte-vite': '8.5.0-alpha.13', - '@storybook/svelte-webpack5': '8.5.0-alpha.13', - '@storybook/sveltekit': '8.5.0-alpha.13', - '@storybook/vue3-vite': '8.5.0-alpha.13', - '@storybook/vue3-webpack5': '8.5.0-alpha.13', - '@storybook/web-components-vite': '8.5.0-alpha.13', - '@storybook/web-components-webpack5': '8.5.0-alpha.13', - '@storybook/blocks': '8.5.0-alpha.13', - storybook: '8.5.0-alpha.13', - sb: '8.5.0-alpha.13', - '@storybook/cli': '8.5.0-alpha.13', - '@storybook/codemod': '8.5.0-alpha.13', - '@storybook/core-webpack': '8.5.0-alpha.13', - 'create-storybook': '8.5.0-alpha.13', - '@storybook/csf-plugin': '8.5.0-alpha.13', - '@storybook/instrumenter': '8.5.0-alpha.13', - '@storybook/react-dom-shim': '8.5.0-alpha.13', - '@storybook/source-loader': '8.5.0-alpha.13', - '@storybook/test': '8.5.0-alpha.13', - '@storybook/preset-create-react-app': '8.5.0-alpha.13', - '@storybook/preset-html-webpack': '8.5.0-alpha.13', - '@storybook/preset-preact-webpack': '8.5.0-alpha.13', - '@storybook/preset-react-webpack': '8.5.0-alpha.13', - '@storybook/preset-server-webpack': '8.5.0-alpha.13', - '@storybook/preset-svelte-webpack': '8.5.0-alpha.13', - '@storybook/preset-vue3-webpack': '8.5.0-alpha.13', - '@storybook/html': '8.5.0-alpha.13', - '@storybook/preact': '8.5.0-alpha.13', - '@storybook/react': '8.5.0-alpha.13', - '@storybook/server': '8.5.0-alpha.13', - '@storybook/svelte': '8.5.0-alpha.13', - '@storybook/vue3': '8.5.0-alpha.13', - '@storybook/web-components': '8.5.0-alpha.13', + '@storybook/addon-a11y': '8.5.0-alpha.14', + '@storybook/addon-actions': '8.5.0-alpha.14', + '@storybook/addon-backgrounds': '8.5.0-alpha.14', + '@storybook/addon-controls': '8.5.0-alpha.14', + '@storybook/addon-docs': '8.5.0-alpha.14', + '@storybook/addon-essentials': '8.5.0-alpha.14', + '@storybook/addon-mdx-gfm': '8.5.0-alpha.14', + '@storybook/addon-highlight': '8.5.0-alpha.14', + '@storybook/addon-interactions': '8.5.0-alpha.14', + '@storybook/addon-jest': '8.5.0-alpha.14', + '@storybook/addon-links': '8.5.0-alpha.14', + '@storybook/addon-measure': '8.5.0-alpha.14', + '@storybook/addon-onboarding': '8.5.0-alpha.14', + '@storybook/addon-outline': '8.5.0-alpha.14', + '@storybook/addon-storysource': '8.5.0-alpha.14', + '@storybook/experimental-addon-test': '8.5.0-alpha.14', + '@storybook/addon-themes': '8.5.0-alpha.14', + '@storybook/addon-toolbars': '8.5.0-alpha.14', + '@storybook/addon-viewport': '8.5.0-alpha.14', + '@storybook/builder-vite': '8.5.0-alpha.14', + '@storybook/builder-webpack5': '8.5.0-alpha.14', + '@storybook/core': '8.5.0-alpha.14', + '@storybook/builder-manager': '8.5.0-alpha.14', + '@storybook/channels': '8.5.0-alpha.14', + '@storybook/client-logger': '8.5.0-alpha.14', + '@storybook/components': '8.5.0-alpha.14', + '@storybook/core-common': '8.5.0-alpha.14', + '@storybook/core-events': '8.5.0-alpha.14', + '@storybook/core-server': '8.5.0-alpha.14', + '@storybook/csf-tools': '8.5.0-alpha.14', + '@storybook/docs-tools': '8.5.0-alpha.14', + '@storybook/manager': '8.5.0-alpha.14', + '@storybook/manager-api': '8.5.0-alpha.14', + '@storybook/node-logger': '8.5.0-alpha.14', + '@storybook/preview': '8.5.0-alpha.14', + '@storybook/preview-api': '8.5.0-alpha.14', + '@storybook/router': '8.5.0-alpha.14', + '@storybook/telemetry': '8.5.0-alpha.14', + '@storybook/theming': '8.5.0-alpha.14', + '@storybook/types': '8.5.0-alpha.14', + '@storybook/angular': '8.5.0-alpha.14', + '@storybook/ember': '8.5.0-alpha.14', + '@storybook/experimental-nextjs-vite': '8.5.0-alpha.14', + '@storybook/html-vite': '8.5.0-alpha.14', + '@storybook/html-webpack5': '8.5.0-alpha.14', + '@storybook/nextjs': '8.5.0-alpha.14', + '@storybook/preact-vite': '8.5.0-alpha.14', + '@storybook/preact-webpack5': '8.5.0-alpha.14', + '@storybook/react-native-web-vite': '8.5.0-alpha.14', + '@storybook/react-vite': '8.5.0-alpha.14', + '@storybook/react-webpack5': '8.5.0-alpha.14', + '@storybook/server-webpack5': '8.5.0-alpha.14', + '@storybook/svelte-vite': '8.5.0-alpha.14', + '@storybook/svelte-webpack5': '8.5.0-alpha.14', + '@storybook/sveltekit': '8.5.0-alpha.14', + '@storybook/vue3-vite': '8.5.0-alpha.14', + '@storybook/vue3-webpack5': '8.5.0-alpha.14', + '@storybook/web-components-vite': '8.5.0-alpha.14', + '@storybook/web-components-webpack5': '8.5.0-alpha.14', + '@storybook/blocks': '8.5.0-alpha.14', + storybook: '8.5.0-alpha.14', + sb: '8.5.0-alpha.14', + '@storybook/cli': '8.5.0-alpha.14', + '@storybook/codemod': '8.5.0-alpha.14', + '@storybook/core-webpack': '8.5.0-alpha.14', + 'create-storybook': '8.5.0-alpha.14', + '@storybook/csf-plugin': '8.5.0-alpha.14', + '@storybook/instrumenter': '8.5.0-alpha.14', + '@storybook/react-dom-shim': '8.5.0-alpha.14', + '@storybook/source-loader': '8.5.0-alpha.14', + '@storybook/test': '8.5.0-alpha.14', + '@storybook/preset-create-react-app': '8.5.0-alpha.14', + '@storybook/preset-html-webpack': '8.5.0-alpha.14', + '@storybook/preset-preact-webpack': '8.5.0-alpha.14', + '@storybook/preset-react-webpack': '8.5.0-alpha.14', + '@storybook/preset-server-webpack': '8.5.0-alpha.14', + '@storybook/preset-svelte-webpack': '8.5.0-alpha.14', + '@storybook/preset-vue3-webpack': '8.5.0-alpha.14', + '@storybook/html': '8.5.0-alpha.14', + '@storybook/preact': '8.5.0-alpha.14', + '@storybook/react': '8.5.0-alpha.14', + '@storybook/server': '8.5.0-alpha.14', + '@storybook/svelte': '8.5.0-alpha.14', + '@storybook/vue3': '8.5.0-alpha.14', + '@storybook/web-components': '8.5.0-alpha.14', }; diff --git a/code/core/src/core-events/data/testing-module.ts b/code/core/src/core-events/data/testing-module.ts index 80edea66aa6..ad843450723 100644 --- a/code/core/src/core-events/data/testing-module.ts +++ b/code/core/src/core-events/data/testing-module.ts @@ -11,12 +11,14 @@ export type TestProviderState< export type TestProviders = Record; -export type TestingModuleRunRequestPayload = { +export type TestingModuleRunRequestPayload< + Config extends { [key: string]: any } = NonNullable, +> = { providerId: TestProviderId; // TODO: Avoid needing to do a fetch request server-side to retrieve the index indexUrl: string; // e.g. http://localhost:6006/index.json storyIds?: string[]; // ['button--primary', 'button--secondary'] - config?: TestProviderState['config']; + config?: Config; }; export type TestingModuleProgressReportPayload = @@ -37,6 +39,10 @@ export type TestingModuleProgressReportPayload = message: string; stack?: string; }; + } + | { + providerId: TestProviderId; + details: { [key: string]: any }; }; export type TestingModuleCrashReportPayload = { @@ -71,13 +77,17 @@ export type TestingModuleCancelTestRunResponsePayload = message: string; }; -export type TestingModuleWatchModeRequestPayload = { +export type TestingModuleWatchModeRequestPayload< + Config extends { [key: string]: any } = NonNullable, +> = { providerId: TestProviderId; watchMode: boolean; - config?: TestProviderState['config']; + config?: Config; }; -export type TestingModuleConfigChangePayload = { +export type TestingModuleConfigChangePayload< + Config extends { [key: string]: any } = NonNullable, +> = { providerId: TestProviderId; - config: TestProviderState['config']; + config: Config; }; diff --git a/code/core/src/core-server/presets/common-preset.ts b/code/core/src/core-server/presets/common-preset.ts index 7bd893d0daf..fe5f7db4f53 100644 --- a/code/core/src/core-server/presets/common-preset.ts +++ b/code/core/src/core-server/presets/common-preset.ts @@ -303,26 +303,27 @@ export const experimental_serverChannel = async ( channel.on( TESTING_MODULE_PROGRESS_REPORT, async (payload: TestingModuleProgressReportPayload) => { - if ( - (payload.status === 'success' || payload.status === 'cancelled') && - payload.progress?.finishedAt - ) { + const status = 'status' in payload ? payload.status : undefined; + const progress = 'progress' in payload ? payload.progress : undefined; + const error = 'error' in payload ? payload.error : undefined; + + if ((status === 'success' || status === 'cancelled') && progress?.finishedAt) { await telemetry('testing-module-completed-report', { provider: payload.providerId, - duration: payload.progress.finishedAt - payload.progress.startedAt, - numTotalTests: payload.progress.numTotalTests, - numFailedTests: payload.progress.numFailedTests, - numPassedTests: payload.progress.numPassedTests, - status: payload.status, + duration: progress?.finishedAt - progress?.startedAt, + numTotalTests: progress?.numTotalTests, + numFailedTests: progress?.numFailedTests, + numPassedTests: progress?.numPassedTests, + status, }); } - if (payload.status === 'failed') { + if (status === 'failed') { await telemetry('testing-module-completed-report', { provider: payload.providerId, status: 'failed', ...(options.enableCrashReports && { - error: sanitizeError(payload.error), + error: error && sanitizeError(error), }), }); } diff --git a/code/core/src/manager-api/modules/experimental_testmodule.ts b/code/core/src/manager-api/modules/experimental_testmodule.ts index 289ffe51c81..6b33f04c2e4 100644 --- a/code/core/src/manager-api/modules/experimental_testmodule.ts +++ b/code/core/src/manager-api/modules/experimental_testmodule.ts @@ -57,7 +57,19 @@ export const init: ModuleFn = ({ store, fullAPI }) => { updateTestProviderState(id, update) { return store.setState( ({ testProviders }) => { - return { testProviders: { ...testProviders, [id]: { ...testProviders[id], ...update } } }; + return { + testProviders: { + ...testProviders, + [id]: { + ...testProviders[id], + ...update, + details: { + ...(testProviders[id].details || {}), + ...(update.details || {}), + }, + }, + }, + }; }, { persistence: 'session' } ); diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 831f5f05f41..c9839cd86c4 100644 --- a/code/core/src/manager-api/version.ts +++ b/code/core/src/manager-api/version.ts @@ -1 +1 @@ -export const version = '8.5.0-alpha.13'; +export const version = '8.5.0-alpha.14'; diff --git a/code/core/src/manager/components/sidebar/SidebarBottom.tsx b/code/core/src/manager/components/sidebar/SidebarBottom.tsx index ba64b4e500a..89b89ca7d59 100644 --- a/code/core/src/manager/components/sidebar/SidebarBottom.tsx +++ b/code/core/src/manager/components/sidebar/SidebarBottom.tsx @@ -122,7 +122,7 @@ export const SidebarBottomBase = ({ useEffect(() => { const onCrashReport = ({ providerId, ...details }: TestingModuleCrashReportPayload) => { api.updateTestProviderState(providerId, { - details, + error: { name: 'Crashed!', message: details.error.message }, running: false, crashed: true, watching: false, @@ -130,10 +130,12 @@ export const SidebarBottomBase = ({ }; const onProgressReport = ({ providerId, ...result }: TestingModuleProgressReportPayload) => { - if (result.status === 'failed') { + const statusResult = 'status' in result ? result.status : undefined; + + if (statusResult === 'failed') { api.updateTestProviderState(providerId, { ...result, running: false, failed: true }); } else { - const update = { ...result, running: result.status === 'pending' }; + const update = { ...result, running: statusResult === 'pending' }; api.updateTestProviderState(providerId, update); const { mapStatusUpdate, ...state } = testProviders[providerId]; diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 475c5ce9fe9..2f8777b2e96 100644 --- a/code/deprecated/builder-manager/package.json +++ b/code/deprecated/builder-manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/builder-manager", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index 138ef2aace7..6aec2a0eec8 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index f910ac88b90..783c0ad54a7 100644 --- a/code/deprecated/client-logger/package.json +++ b/code/deprecated/client-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/client-logger", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 2657a3921ec..9bd3276e0dc 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 02826425c73..70059b1e082 100644 --- a/code/deprecated/core-common/package.json +++ b/code/deprecated/core-common/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-common", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index e54c4272f03..aa7f8bb61fc 100644 --- a/code/deprecated/core-events/package.json +++ b/code/deprecated/core-events/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-events", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Event names used in storybook core", "keywords": [ "storybook" diff --git a/code/deprecated/core-server/package.json b/code/deprecated/core-server/package.json index 7ffa336ca91..8edcd672595 100644 --- a/code/deprecated/core-server/package.json +++ b/code/deprecated/core-server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-server", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index d0888698557..62d70dc9465 100644 --- a/code/deprecated/csf-tools/package.json +++ b/code/deprecated/csf-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-tools", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Parse and manipulate CSF and Storybook config files", "keywords": [ "storybook" diff --git a/code/deprecated/docs-tools/package.json b/code/deprecated/docs-tools/package.json index 16c4f0d1eed..721a54e9785 100644 --- a/code/deprecated/docs-tools/package.json +++ b/code/deprecated/docs-tools/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/docs-tools", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Shared utility functions for frameworks to implement docs", "keywords": [ "storybook" diff --git a/code/deprecated/manager-api/package.json b/code/deprecated/manager-api/package.json index 2114ce49c73..58d7cd5fd11 100644 --- a/code/deprecated/manager-api/package.json +++ b/code/deprecated/manager-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager-api", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index dfa9313178e..8a4e0bbbdda 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 36b43bae667..3c1519a750c 100644 --- a/code/deprecated/node-logger/package.json +++ b/code/deprecated/node-logger/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/node-logger", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index ea404f6ee15..b1a4d2bfe9c 100644 --- a/code/deprecated/preview-api/package.json +++ b/code/deprecated/preview-api/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview-api", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index f34cce5f224..251f227108c 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index a1dcf81cef1..0fc913c69b3 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 2348ebc8617..b68bb5d824e 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Telemetry logging for crash reports and usage statistics", "keywords": [ "storybook" diff --git a/code/deprecated/theming/package.json b/code/deprecated/theming/package.json index 48ce128086b..6cebd135a7b 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index f7702f973c1..63fb7825230 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index dd9f177afba..2d20d773b4e 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Angular: Develop Angular components in isolation with hot reloading.", "keywords": [ "storybook", diff --git a/code/frameworks/ember/package.json b/code/frameworks/ember/package.json index 9382278ce30..17c4926a5c0 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Ember: Develop Ember Component in isolation with Hot Reloading.", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/frameworks/ember", "bugs": { diff --git a/code/frameworks/experimental-nextjs-vite/package.json b/code/frameworks/experimental-nextjs-vite/package.json index 65ebb937683..24f9ef99c5e 100644 --- a/code/frameworks/experimental-nextjs-vite/package.json +++ b/code/frameworks/experimental-nextjs-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/experimental-nextjs-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Next.js and Vite", "keywords": [ "storybook", diff --git a/code/frameworks/html-vite/package.json b/code/frameworks/html-vite/package.json index 8eedfc19863..0f65450ab1d 100644 --- a/code/frameworks/html-vite/package.json +++ b/code/frameworks/html-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for HTML and Vite: Develop HTML in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/html-webpack5/package.json b/code/frameworks/html-webpack5/package.json index 53940d35c92..d6dfa2d2078 100644 --- a/code/frameworks/html-webpack5/package.json +++ b/code/frameworks/html-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/nextjs/package.json b/code/frameworks/nextjs/package.json index 5326d2dd0a7..7ff8d462c0a 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index c8943cb85a1..fd8cb8b3748 100644 --- a/code/frameworks/preact-vite/package.json +++ b/code/frameworks/preact-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Preact and Vite: Develop Preact components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/preact-webpack5/package.json b/code/frameworks/preact-webpack5/package.json index bd37cf6fc85..d612b0da438 100644 --- a/code/frameworks/preact-webpack5/package.json +++ b/code/frameworks/preact-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/frameworks/react-native-web-vite/package.json b/code/frameworks/react-native-web-vite/package.json index 0aba8948e71..e0dd851c534 100644 --- a/code/frameworks/react-native-web-vite/package.json +++ b/code/frameworks/react-native-web-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-native-web-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" @@ -53,6 +53,7 @@ "prep": "jiti ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@bunchtogether/vite-plugin-flow": "^1.0.2", "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index 852d69af2ce..8e3d7d6b58a 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -1,8 +1,9 @@ // @ts-expect-error FIXME import { viteFinal as reactViteFinal } from '@storybook/react-vite/preset'; +import { esbuildFlowPlugin, flowPlugin } from '@bunchtogether/vite-plugin-flow'; import react from '@vitejs/plugin-react'; -import type { PluginOption } from 'vite'; +import type { InlineConfig, PluginOption } from 'vite'; import type { FrameworkOptions, StorybookConfig } from './types'; @@ -61,13 +62,19 @@ export function reactNativeWeb(): PluginOption { } export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { + const { mergeConfig } = await import('vite'); + const { pluginReactOptions = {} } = await options.presets.apply('frameworkOptions'); const reactConfig = await reactViteFinal(config, options); + const { plugins = [] } = reactConfig; plugins.unshift( + flowPlugin({ + exclude: [], + }), react({ babel: { babelrc: false, @@ -77,9 +84,16 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = ...pluginReactOptions, }) ); + plugins.push(reactNativeWeb()); - return reactConfig; + return mergeConfig(reactConfig, { + optimizeDeps: { + esbuildOptions: { + plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')], + }, + }, + } satisfies InlineConfig); }; export const core = { diff --git a/code/frameworks/react-native-web-vite/src/typings.d.ts b/code/frameworks/react-native-web-vite/src/typings.d.ts new file mode 100644 index 00000000000..8aed0ac76f1 --- /dev/null +++ b/code/frameworks/react-native-web-vite/src/typings.d.ts @@ -0,0 +1 @@ +declare module '@bunchtogether/vite-plugin-flow'; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 3d9030cdc1b..c1e9459ad0d 100644 --- a/code/frameworks/react-vite/package.json +++ b/code/frameworks/react-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for React and Vite: Develop React components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/react-webpack5/package.json b/code/frameworks/react-webpack5/package.json index 872da850c81..91d745aadcd 100644 --- a/code/frameworks/react-webpack5/package.json +++ b/code/frameworks/react-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/server-webpack5/package.json b/code/frameworks/server-webpack5/package.json index 92aeeab9a76..a3e285e945e 100644 --- a/code/frameworks/server-webpack5/package.json +++ b/code/frameworks/server-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-vite/package.json b/code/frameworks/svelte-vite/package.json index cd80d1c8ffb..b6c63815cb1 100644 --- a/code/frameworks/svelte-vite/package.json +++ b/code/frameworks/svelte-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Svelte and Vite: Develop Svelte components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/svelte-webpack5/package.json b/code/frameworks/svelte-webpack5/package.json index 0d1c24d6ab2..7966131cd08 100644 --- a/code/frameworks/svelte-webpack5/package.json +++ b/code/frameworks/svelte-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/sveltekit/package.json b/code/frameworks/sveltekit/package.json index 25314a3aec1..bac4d328c03 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index d1fe6badd22..e4afa8feb1b 100644 --- a/code/frameworks/vue3-vite/package.json +++ b/code/frameworks/vue3-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Vue3 and Vite: Develop Vue3 components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/vue3-webpack5/package.json b/code/frameworks/vue3-webpack5/package.json index 15b41172555..9f134a1e1d3 100644 --- a/code/frameworks/vue3-webpack5/package.json +++ b/code/frameworks/vue3-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-vite/package.json b/code/frameworks/web-components-vite/package.json index 9fa3c692a49..46552357a55 100644 --- a/code/frameworks/web-components-vite/package.json +++ b/code/frameworks/web-components-vite/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-vite", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for web-components and Vite: Develop Web Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/frameworks/web-components-webpack5/package.json b/code/frameworks/web-components-webpack5/package.json index 52ebdbcff0a..b5ba65b1df1 100644 --- a/code/frameworks/web-components-webpack5/package.json +++ b/code/frameworks/web-components-webpack5/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components-webpack5", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for web-components: View web components snippets in isolation with Hot Reloading.", "keywords": [ "lit", diff --git a/code/lib/blocks/package.json b/code/lib/blocks/package.json index 9569e81842d..cadcdc1e2fe 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 8a3cfd8d335..de782f73bb7 100644 --- a/code/lib/cli-sb/package.json +++ b/code/lib/cli-sb/package.json @@ -1,6 +1,6 @@ { "name": "sb", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index f5717c8bcae..4c0bb4c23cd 100644 --- a/code/lib/cli-storybook/package.json +++ b/code/lib/cli-storybook/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/cli", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 7497984ec91..749d1603110 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook's CLI - install, dev, build, upgrade, and more", "keywords": [ "cli", diff --git a/code/lib/codemod/package.json b/code/lib/codemod/package.json index 5985ee8c3bd..a9873e076f4 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "A collection of codemod scripts written with JSCodeshift", "keywords": [ "storybook" diff --git a/code/lib/core-webpack/package.json b/code/lib/core-webpack/package.json index f28e16001a6..ce3f2c2e8d6 100644 --- a/code/lib/core-webpack/package.json +++ b/code/lib/core-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index 24aa1f8eeb7..0ae17b3cef9 100644 --- a/code/lib/create-storybook/package.json +++ b/code/lib/create-storybook/package.json @@ -1,6 +1,6 @@ { "name": "create-storybook", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Initialize Storybook into your project", "homepage": "https://github.com/storybookjs/storybook/tree/next/code/lib/create-storybook", "bugs": { diff --git a/code/lib/csf-plugin/package.json b/code/lib/csf-plugin/package.json index 78e5df191c6..7a6d659752e 100644 --- a/code/lib/csf-plugin/package.json +++ b/code/lib/csf-plugin/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/csf-plugin", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index 73279c993f5..bfe7c0795e9 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index 30ce043b12f..361fee21a03 100644 --- a/code/lib/react-dom-shim/package.json +++ b/code/lib/react-dom-shim/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react-dom-shim", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 17f994e3929..8dc1f14e60a 100644 --- a/code/lib/source-loader/package.json +++ b/code/lib/source-loader/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/source-loader", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index d92ba8ec4f8..93cdce9767c 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 24b54cd5168..de5c32d777b 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "private": true, "description": "Storybook root", "homepage": "https://storybook.js.org/", diff --git a/code/presets/create-react-app/package.json b/code/presets/create-react-app/package.json index ac724c3d8d8..5e16b785364 100644 --- a/code/presets/create-react-app/package.json +++ b/code/presets/create-react-app/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-create-react-app", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Create React App preset", "keywords": [ "storybook" diff --git a/code/presets/html-webpack/package.json b/code/presets/html-webpack/package.json index 97318dcf73f..7d5fc1d11b9 100644 --- a/code/presets/html-webpack/package.json +++ b/code/presets/html-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-html-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for HTML: View HTML snippets in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/preact-webpack/package.json b/code/presets/preact-webpack/package.json index 53d5e288a3c..53a1c0083b2 100644 --- a/code/presets/preact-webpack/package.json +++ b/code/presets/preact-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-preact-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Preact: Develop Preact Component in isolation.", "keywords": [ "storybook" diff --git a/code/presets/react-webpack/package.json b/code/presets/react-webpack/package.json index e698f812d47..3c81107bb12 100644 --- a/code/presets/react-webpack/package.json +++ b/code/presets/react-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-react-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for React: Develop React Component in isolation with Hot Reloading", "keywords": [ "storybook" diff --git a/code/presets/server-webpack/package.json b/code/presets/server-webpack/package.json index b73f557a14e..88f656750ba 100644 --- a/code/presets/server-webpack/package.json +++ b/code/presets/server-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-server-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Server: View HTML snippets from a server in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/svelte-webpack/package.json b/code/presets/svelte-webpack/package.json index 023572c54b5..547e419613d 100644 --- a/code/presets/svelte-webpack/package.json +++ b/code/presets/svelte-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-svelte-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Svelte: Develop Svelte Component in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/presets/vue3-webpack/package.json b/code/presets/vue3-webpack/package.json index d8400064895..e1054e63647 100644 --- a/code/presets/vue3-webpack/package.json +++ b/code/presets/vue3-webpack/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preset-vue3-webpack", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook for Vue 3: Develop Vue 3 Components in isolation with Hot Reloading.", "keywords": [ "storybook" diff --git a/code/renderers/html/package.json b/code/renderers/html/package.json index 891a3c5a54a..2d7daef0df8 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index 75cd73b5535..d9f2b71c4bb 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index bade5ec8e5e..5fd3e709615 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 9832e49c6a6..95a5c6efb2d 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index a3f946b4856..ca8907f0b73 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index feddf2168fd..7db0b8bba48 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index ab41c612fbb..597062f50ea 100644 --- a/code/renderers/web-components/package.json +++ b/code/renderers/web-components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/web-components", - "version": "8.5.0-alpha.13", + "version": "8.5.0-alpha.14", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/yarn.lock b/code/yarn.lock index 6623d2309c3..42fd2346902 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -2501,6 +2501,16 @@ __metadata: languageName: node linkType: hard +"@bunchtogether/vite-plugin-flow@npm:^1.0.2": + version: 1.0.2 + resolution: "@bunchtogether/vite-plugin-flow@npm:1.0.2" + dependencies: + flow-remove-types: "npm:^2.158.0" + rollup-pluginutils: "npm:^2.8.2" + checksum: 10c0/84faf014977196470bbeae686b4e167de2805777389f8a0da88647484df7cf39db3da91907d75ea810ea77175c0cdd40a9a3ad92b7c7c44681b0cd1f4156c7b8 + languageName: node + linkType: hard + "@bundled-es-modules/cookie@npm:^2.0.0": version: 2.0.0 resolution: "@bundled-es-modules/cookie@npm:2.0.0" @@ -6600,6 +6610,7 @@ __metadata: "@storybook/instrumenter": "workspace:*" "@storybook/test": "workspace:*" "@storybook/theming": "workspace:*" + "@types/istanbul-lib-report": "npm:^3.0.3" "@types/node": "npm:^22.0.0" "@types/semver": "npm:^7" "@vitest/browser": "npm:^2.1.3" @@ -6610,6 +6621,7 @@ __metadata: execa: "npm:^8.0.1" find-up: "npm:^7.0.0" formik: "npm:^2.2.9" + istanbul-lib-report: "npm:^3.0.1" pathe: "npm:^1.1.2" picocolors: "npm:^1.1.0" polished: "npm:^4.2.2" @@ -7097,6 +7109,7 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" dependencies: + "@bunchtogether/vite-plugin-flow": "npm:^1.0.2" "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" "@storybook/builder-vite": "workspace:*" "@storybook/react": "workspace:*" @@ -8358,6 +8371,13 @@ __metadata: languageName: node linkType: hard +"@types/istanbul-lib-coverage@npm:*": + version: 2.0.6 + resolution: "@types/istanbul-lib-coverage@npm:2.0.6" + checksum: 10c0/3948088654f3eeb45363f1db158354fb013b362dba2a5c2c18c559484d5eb9f6fd85b23d66c0a7c2fcfab7308d0a585b14dadaca6cc8bf89ebfdc7f8f5102fb7 + languageName: node + linkType: hard + "@types/istanbul-lib-coverage@npm:^2.0.1": version: 2.0.4 resolution: "@types/istanbul-lib-coverage@npm:2.0.4" @@ -8365,6 +8385,15 @@ __metadata: languageName: node linkType: hard +"@types/istanbul-lib-report@npm:^3.0.3": + version: 3.0.3 + resolution: "@types/istanbul-lib-report@npm:3.0.3" + dependencies: + "@types/istanbul-lib-coverage": "npm:*" + checksum: 10c0/247e477bbc1a77248f3c6de5dadaae85ff86ac2d76c5fc6ab1776f54512a745ff2a5f791d22b942e3990ddbd40f3ef5289317c4fca5741bedfaa4f01df89051c + languageName: node + linkType: hard + "@types/js-yaml@npm:^4.0.5": version: 4.0.9 resolution: "@types/js-yaml@npm:4.0.9" @@ -15299,6 +15328,13 @@ __metadata: languageName: node linkType: hard +"estree-walker@npm:^0.6.1": + version: 0.6.1 + resolution: "estree-walker@npm:0.6.1" + checksum: 10c0/6dabc855faa04a1ffb17b6a9121b6008ba75ab5a163ad9dc3d7fca05cfda374c5f5e91418d783496620ca75e99a73c40874d8b75f23b4117508cc8bde78e7b41 + languageName: node + linkType: hard + "estree-walker@npm:^2.0.1, estree-walker@npm:^2.0.2": version: 2.0.2 resolution: "estree-walker@npm:2.0.2" @@ -16010,6 +16046,20 @@ __metadata: languageName: node linkType: hard +"flow-remove-types@npm:^2.158.0": + version: 2.255.0 + resolution: "flow-remove-types@npm:2.255.0" + dependencies: + hermes-parser: "npm:0.25.1" + pirates: "npm:^3.0.2" + vlq: "npm:^0.2.1" + bin: + flow-node: flow-node + flow-remove-types: flow-remove-types + checksum: 10c0/080cfab76259e313ac77ebd911528fdc9423446d0c4503b95c9f0beb57fde1143657ac3388110382ddbfdb9b7e8ebc20fe903b14a7de374f53d44d6365e26ae1 + languageName: node + linkType: hard + "flush-promises@npm:^1.0.2": version: 1.0.2 resolution: "flush-promises@npm:1.0.2" @@ -17233,6 +17283,22 @@ __metadata: languageName: node linkType: hard +"hermes-estree@npm:0.25.1": + version: 0.25.1 + resolution: "hermes-estree@npm:0.25.1" + checksum: 10c0/48be3b2fa37a0cbc77a112a89096fa212f25d06de92781b163d67853d210a8a5c3784fac23d7d48335058f7ed283115c87b4332c2a2abaaccc76d0ead1a282ac + languageName: node + linkType: hard + +"hermes-parser@npm:0.25.1": + version: 0.25.1 + resolution: "hermes-parser@npm:0.25.1" + dependencies: + hermes-estree: "npm:0.25.1" + checksum: 10c0/3abaa4c6f1bcc25273f267297a89a4904963ea29af19b8e4f6eabe04f1c2c7e9abd7bfc4730ddb1d58f2ea04b6fee74053d8bddb5656ec6ebf6c79cc8d14202c + languageName: node + linkType: hard + "highlight.js@npm:^10.4.1, highlight.js@npm:~10.7.0": version: 10.7.3 resolution: "highlight.js@npm:10.7.3" @@ -21879,6 +21945,13 @@ __metadata: languageName: node linkType: hard +"node-modules-regexp@npm:^1.0.0": + version: 1.0.0 + resolution: "node-modules-regexp@npm:1.0.0" + checksum: 10c0/d4a9b6425a18e9fadd38f21a7f7820b3bfda4663c7d3b9f80043e3f5f7e27a0a1e04f524077b00a15ae77148cd81319da5772900229d89541062f7e876b36763 + languageName: node + linkType: hard + "node-polyfill-webpack-plugin@npm:^2.0.1": version: 2.0.1 resolution: "node-polyfill-webpack-plugin@npm:2.0.1" @@ -23138,6 +23211,15 @@ __metadata: languageName: node linkType: hard +"pirates@npm:^3.0.2": + version: 3.0.2 + resolution: "pirates@npm:3.0.2" + dependencies: + node-modules-regexp: "npm:^1.0.0" + checksum: 10c0/f71519f64abff750ad00398e7a0f724e7d3af0ce14c0cf149a47dd9e1fae5e9aea24cb3a63b4ce8dce8b051f7d44531af6743078e33f72cb8602c5a7365185d1 + languageName: node + linkType: hard + "pirates@npm:^4.0.5": version: 4.0.6 resolution: "pirates@npm:4.0.6" @@ -25514,6 +25596,15 @@ __metadata: languageName: node linkType: hard +"rollup-pluginutils@npm:^2.8.2": + version: 2.8.2 + resolution: "rollup-pluginutils@npm:2.8.2" + dependencies: + estree-walker: "npm:^0.6.1" + checksum: 10c0/20947bec5a5dd68b5c5c8423911e6e7c0ad834c451f1a929b1f4e2bc08836ad3f1a722ef2bfcbeca921870a0a283f13f064a317dc7a6768496e98c9a641ba290 + languageName: node + linkType: hard + "rollup@npm:^3.27.1": version: 3.29.4 resolution: "rollup@npm:3.29.4" @@ -29203,6 +29294,13 @@ __metadata: languageName: node linkType: hard +"vlq@npm:^0.2.1": + version: 0.2.3 + resolution: "vlq@npm:0.2.3" + checksum: 10c0/d1557b404353ca75c7affaaf403d245a3273a7d1c6b3380ed7f04ae3f080e4658f41ac700d6f48acb3cd4875fe7bc7da4924b3572cd5584a5de83b35b1de5e12 + languageName: node + linkType: hard + "vm-browserify@npm:^1.1.2": version: 1.1.2 resolution: "vm-browserify@npm:1.1.2" diff --git a/docs/_snippets/test-runner-custom-page-viewport.md b/docs/_snippets/test-runner-custom-page-viewport.md index bc6342e0d86..058dcc4a255 100644 --- a/docs/_snippets/test-runner-custom-page-viewport.md +++ b/docs/_snippets/test-runner-custom-page-viewport.md @@ -29,7 +29,7 @@ module.exports = { }; ``` -```ts filename=".storybook/test-runner.js" renderer="common" language="ts" +```ts filename=".storybook/test-runner.ts" renderer="common" language="ts" import type { TestRunnerConfig } from '@storybook/test-runner'; import { getStoryContext } from '@storybook/test-runner'; diff --git a/docs/addons/addon-knowledge-base.mdx b/docs/addons/addon-knowledge-base.mdx index ab0ef1268d5..763ce53ee3b 100644 --- a/docs/addons/addon-knowledge-base.mdx +++ b/docs/addons/addon-knowledge-base.mdx @@ -7,7 +7,7 @@ sidebar: Once you understand the basics of writing addons, there are a variety of common enhancements to make your addon better. This page details additional information about addon creation. Use it as a quick reference guide when creating your own addons. -### Disable the addon panel +## Disable the addon panel It’s possible to disable the addon panel for a particular story. @@ -27,14 +27,14 @@ Then when adding a story, you can pass a disabled parameter. {/* prettier-ignore-end */} -### Style your addon +## Style your addon Storybook uses [Emotion](https://emotion.sh/docs/introduction) for styling. Alongside with a theme that you can customize! We recommend using Emotion to style your addon’s UI components. That allows you to use the active Storybook theme to deliver a seamless developer experience. If you don’t want to use Emotion, you can use inline styles or another css-in-js lib. You can receive the theme as a prop by using Emotion's `withTheme` HOC. [Read more about theming](../configure/user-interface/theming.mdx). -### Storybook components +## Storybook components Addon authors can develop their UIs using any React library. But we recommend using Storybook’s UI components in `@storybook/components` to build addons faster. When you use Storybook components, you get: @@ -75,7 +75,7 @@ Complementing the components, also included is a set of UI primitives. Use the c -### Build system +## Build system When you're developing your addon as a package, you can’t use `npm link` to add it to your project. List your addon as a local dependency into your package.json: @@ -91,11 +91,11 @@ When you're developing your addon as a package, you can’t use `npm link` to ad Run either `yarn` or `npm install` to install the addon. -### Hot module replacement +## Hot module replacement While developing your addon, you can configure HMR (hot module replacement) to reflect the changes made. -### Standalone Storybook addons +## Standalone Storybook addons If you're developing a standalone addon, add a new script to `package.json` with the following: @@ -107,11 +107,11 @@ If you're developing a standalone addon, add a new script to `package.json` with } ``` -#### Local Storybook addons +### Local Storybook addons If you're developing a local Storybook addon built on top of an existing Storybook installation, HMR (hot module replacement) is available out of the box. -### Composing addons in presets +## Composing addons in presets If you're working on a preset that loads third-party addons, which you don't have control over, and you need access to certain features (e.g., decorators) or provide additional configurations. In that case, you'll need to update your preset to the following to allow you to load and configure the other addons: diff --git a/docs/configure/environment-variables.mdx b/docs/configure/environment-variables.mdx index f1b14c9a4c5..894c5b60e20 100644 --- a/docs/configure/environment-variables.mdx +++ b/docs/configure/environment-variables.mdx @@ -40,7 +40,7 @@ You can also access these variables in your custom ``/`` using the s If using the environment variables as attributes or values in JavaScript, you may need to add quotes, as the value will be inserted directly, for example: ``. -### Using .env files +## Using .env files You can also use `.env` files to change Storybook's behavior in different modes. For example, if you add a `.env` file to your project with the following: @@ -57,7 +57,7 @@ Then you can access this environment variable anywhere, even within your stories {/* prettier-ignore-end */} - #### With Vite + ### With Vite Out of the box, Storybook provides a [Vite builder](../builders/vite.mdx), which does not output Node.js globals like `process.env`. To access environment variables in Storybook (e.g., `STORYBOOK_`, `VITE_`), you can use `import.meta.env`. For example: @@ -76,7 +76,7 @@ You can also pass these environment variables when you are [building your Storyb Then they'll be hardcoded to the static version of your Storybook. -### Using Storybook configuration +## Using Storybook configuration Additionally, you can extend your Storybook configuration file (i.e., [`.storybook/main.js|.ts`](../configure/index.mdx#configure-story-rendering)) and provide a configuration field that you can use to define specific variables (e.g., API URLs). For example: @@ -94,7 +94,7 @@ When Storybook loads, it will enable you to access them in your stories similar {/* prettier-ignore-end */} -### Using environment variables to choose the browser +## Using environment variables to choose the browser Storybook allows you to choose the browser you want to preview your stories. Either through a `.env` file entry or directly in your `storybook` script. diff --git a/docs/configure/integration/images-and-assets.mdx b/docs/configure/integration/images-and-assets.mdx index 5d125c16d41..9e0130ae383 100644 --- a/docs/configure/integration/images-and-assets.mdx +++ b/docs/configure/integration/images-and-assets.mdx @@ -7,7 +7,7 @@ sidebar: Components often rely on images, videos, fonts, and other assets to render as the user expects. There are many ways to use these assets in your story files. -### Import assets into stories +## Import assets into stories You can import any media assets by importing (or requiring) them. It works out of the box with our default config. But, if you are using a custom webpack config, you’ll need to add the [file loader](https://webpack.js.org/loaders/) to handle the required files. @@ -19,7 +19,7 @@ Afterward, you can use any asset in your stories: {/* prettier-ignore-end */} -### Serving static files via Storybook Configuration +## Serving static files via Storybook Configuration We recommend serving static files via Storybook to ensure that your components always have the assets they need to load. We recommend this technique for assets that your components often use, like logos, fonts, and icons. @@ -55,7 +55,7 @@ Or even use a configuration object to define the directories: {/* prettier-ignore-end */} -### Reference assets from a CDN +## Reference assets from a CDN Upload your files to an online CDN and reference them. In this example, we’re using a placeholder image service. @@ -65,7 +65,7 @@ Upload your files to an online CDN and reference them. In this example, we’re {/* prettier-ignore-end */} -### Absolute versus relative paths +## Absolute versus relative paths Sometimes, you may want to deploy your Storybook into a subpath, like `https://example.com/storybook`. @@ -75,7 +75,7 @@ If you load static content via importing, this is automatic, and you do not have Suppose you are serving assets in a [static directory](#serving-static-files-via-storybook-configuration) along with your Storybook. In that case, you need to use relative paths to load images or use the base element. -### Referencing Fonts in Stories +## Referencing Fonts in Stories After configuring Storybook to serve assets from your static folder, you can reference those assets in Storybook. For example, you can reference and apply a custom font to your stories. To do this, create a [`preview-head.html`](../story-rendering.mdx) file inside the configuration directory (i.e., `.storybook`) and add a `` tag to reference your font. diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index 59215b00805..83130883f47 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -19,7 +19,7 @@ The breadth of modern frontends overwhelm existing workflows. Developers must co ## The solution -#### Build UIs in isolation +### Build UIs in isolation Every piece of UI is now a [component](https://www.componentdriven.org/). The superpower of components is that you don't need to spin up the whole app just to see how they render. You can render a specific variation in isolation by passing in props, mocking data, or faking events. @@ -27,7 +27,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost