diff --git a/CHANGELOG.prerelease.md b/CHANGELOG.prerelease.md index cfca4a3569c0..a91d0dfb9a79 100644 --- a/CHANGELOG.prerelease.md +++ b/CHANGELOG.prerelease.md @@ -1,3 +1,13 @@ +## 8.5.0-beta.8 + +- Automigrations: Skip vite config file migration for react native web - [#30190](https://github.com/storybookjs/storybook/pull/30190), thanks @dannyhw! +- Maintenance: Move `@types/node` to `devDeps` consistently - [#30163](https://github.com/storybookjs/storybook/pull/30163), thanks @ndelangen! +- Manager: Optimize getPanels function with memoization - [#30192](https://github.com/storybookjs/storybook/pull/30192), thanks @valentinpalkovic! +- RNW-Vite: Fix reanimated support with babel plugin for node_modules - [#30188](https://github.com/storybookjs/storybook/pull/30188), thanks @dannyhw! +- React: Force act running always in sequence - [#30191](https://github.com/storybookjs/storybook/pull/30191), thanks @valentinpalkovic! +- UI: Fix overlapping shadow of testing module on scrollbar - [#30132](https://github.com/storybookjs/storybook/pull/30132), thanks @valentinpalkovic! +- Vite: Fix wrong import paths when configDir is not in project root - [#30206](https://github.com/storybookjs/storybook/pull/30206), thanks @JReinhold! + ## 8.5.0-beta.7 - Addon Test: Context menu updates - [#30107](https://github.com/storybookjs/storybook/pull/30107), thanks @ghengeveld! diff --git a/code/.storybook/main.ts b/code/.storybook/main.ts index 9870741de29e..48109681b6b0 100644 --- a/code/.storybook/main.ts +++ b/code/.storybook/main.ts @@ -160,6 +160,12 @@ const config: StorybookConfig = { // disable sourcemaps in CI to not run out of memory sourcemap: process.env.CI !== 'true', }, + server: { + watch: { + // Something odd happens with tsconfig and nx which causes Storybook to keep reloading, so we ignore them + ignored: ['**/.nx/cache/**', '**/tsconfig.json'], + }, + }, } satisfies typeof viteConfig); }, // logLevel: 'debug', diff --git a/code/addons/a11y/package.json b/code/addons/a11y/package.json index ec3b29d1b990..6fbfce6961a2 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-beta.7", + "version": "8.5.0-beta.8", "description": "Test component compliance with web accessibility standards", "keywords": [ "a11y", diff --git a/code/addons/a11y/src/constants.ts b/code/addons/a11y/src/constants.ts index e7c1c319df06..2e3e1a06fc1f 100755 --- a/code/addons/a11y/src/constants.ts +++ b/code/addons/a11y/src/constants.ts @@ -14,4 +14,4 @@ export const TEST_PROVIDER_ID = 'storybook/addon-a11y/test-provider'; export const EVENTS = { RESULT, REQUEST, RUNNING, ERROR, MANUAL }; -export const A11Y_TEST_TAG = 'a11ytest'; +export const A11Y_TEST_TAG = 'a11y-test'; diff --git a/code/addons/a11y/src/preview.test.tsx b/code/addons/a11y/src/preview.test.tsx index d09ba89462ed..0ee4ebba829e 100644 --- a/code/addons/a11y/src/preview.test.tsx +++ b/code/addons/a11y/src/preview.test.tsx @@ -156,7 +156,7 @@ describe('afterEach', () => { }); }); - it('should run accessibility checks if "a11ytest" flag is not available and is not running in Vitest', async () => { + it('should run accessibility checks if "a11y-test" flag is not available and is not running in Vitest', async () => { const context = createContext({ tags: [], }); diff --git a/code/addons/actions/package.json b/code/addons/actions/package.json index 5f754a88570a..61e9280405d3 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-beta.7", + "version": "8.5.0-beta.8", "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 a28244df0bff..3316c41ab07b 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-beta.7", + "version": "8.5.0-beta.8", "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 8f9a8054c096..2c3ffcc8f059 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-beta.7", + "version": "8.5.0-beta.8", "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 3d7cc601058d..48895f6b125f 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-beta.7", + "version": "8.5.0-beta.8", "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 eb43c219ea1b..a6e4369bbd84 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-beta.7", + "version": "8.5.0-beta.8", "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 49e29e97d6c8..c7955709e7f8 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-beta.7", + "version": "8.5.0-beta.8", "description": "GitHub Flavored Markdown in Storybook", "keywords": [ "addon", diff --git a/code/addons/highlight/package.json b/code/addons/highlight/package.json index 5004106ab830..eee34658601e 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-beta.7", + "version": "8.5.0-beta.8", "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 ed4301330a92..5dc506cacefe 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-beta.7", + "version": "8.5.0-beta.8", "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 a4e5740be545..c430cc01f426 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-beta.7", + "version": "8.5.0-beta.8", "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 b7f5f3a2361b..a06b74fb612d 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-beta.7", + "version": "8.5.0-beta.8", "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 80d00c68bb74..0064f269ad2b 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-beta.7", + "version": "8.5.0-beta.8", "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 25029ef82ffe..fc46c773b3f4 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-beta.7", + "version": "8.5.0-beta.8", "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 fb278a8610b9..2283bd6d5587 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-beta.7", + "version": "8.5.0-beta.8", "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 2e99e8125aaa..562b05a869c2 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-beta.7", + "version": "8.5.0-beta.8", "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 e48ff8ba3345..415bf9bb37c9 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-beta.7", + "version": "8.5.0-beta.8", "description": "Integrate Vitest with Storybook", "keywords": [ "storybook-addons", diff --git a/code/addons/test/src/components/TestProviderRender.tsx b/code/addons/test/src/components/TestProviderRender.tsx index 49e3a0a44127..f861ecac7848 100644 --- a/code/addons/test/src/components/TestProviderRender.tsx +++ b/code/addons/test/src/components/TestProviderRender.tsx @@ -139,7 +139,7 @@ export const TestProviderRender: FC = ({ return acc; }, new Set()); - if (allTags.has('a11ytest')) { + if (allTags.has('a11y-test')) { return true; } diff --git a/code/addons/test/src/node/vitest-manager.ts b/code/addons/test/src/node/vitest-manager.ts index abddad6cebd2..abcc4254134b 100644 --- a/code/addons/test/src/node/vitest-manager.ts +++ b/code/addons/test/src/node/vitest-manager.ts @@ -16,6 +16,7 @@ import type { TestingModuleRunRequestPayload } from 'storybook/internal/core-eve import type { DocsIndexEntry, StoryIndex, StoryIndexEntry } from '@storybook/types'; +import { findUp } from 'find-up'; import path, { dirname, join, normalize } from 'pathe'; import { satisfies } from 'semver'; import slash from 'slash'; @@ -27,6 +28,9 @@ import type { StorybookCoverageReporterOptions } from './coverage-reporter'; import { StorybookReporter } from './reporter'; import type { TestManager } from './test-manager'; +const VITEST_CONFIG_FILE_EXTENSIONS = ['mts', 'mjs', 'cts', 'cjs', 'ts', 'tsx', 'js', 'jsx']; +const VITEST_WORKSPACE_FILE_EXTENSION = ['ts', 'js', 'json']; + type TagsFilter = { include: string[]; exclude: string[]; @@ -78,7 +82,13 @@ export class VitestManager { : { enabled: false } ) as CoverageOptions; + const vitestWorkspaceConfig = await findUp([ + ...VITEST_WORKSPACE_FILE_EXTENSION.map((ext) => `vitest.workspace.${ext}`), + ...VITEST_CONFIG_FILE_EXTENSIONS.map((ext) => `vitest.config.${ext}`), + ]); + this.vitest = await createVitest('test', { + root: vitestWorkspaceConfig ? dirname(vitestWorkspaceConfig) : process.cwd(), watch: true, passWithNoTests: false, // TODO: diff --git a/code/addons/test/src/postinstall.ts b/code/addons/test/src/postinstall.ts index 6ba56f014f9a..b8b0ee4cd142 100644 --- a/code/addons/test/src/postinstall.ts +++ b/code/addons/test/src/postinstall.ts @@ -145,6 +145,16 @@ export default async function postInstall(options: PostinstallOptions) { `); } + const mswVersionSpecifier = await packageManager.getInstalledVersion('msw'); + const coercedMswVersion = mswVersionSpecifier ? coerce(mswVersionSpecifier) : null; + + if (coercedMswVersion && !satisfies(coercedMswVersion, '>=2.0.0')) { + reasons.push(dedent` + β€’ The addon uses Vitest behind the scenes, which supports only version 2 and above of MSW. However, we have detected version ${picocolors.bold(coercedMswVersion.version)} in this project. + Please update the 'msw' package and try again. + `); + } + if (info.frameworkPackageName === '@storybook/nextjs') { const nextVersion = await packageManager.getInstalledVersion('next'); if (!nextVersion) { @@ -159,6 +169,7 @@ export default async function postInstall(options: PostinstallOptions) { reasons.unshift( `Storybook Test's automated setup failed due to the following package incompatibilities:` ); + reasons.push('--------------------------------'); reasons.push( dedent` You can fix these issues and rerun the command to reinstall. If you wish to roll back the installation, remove ${picocolors.bold(colors.pink(ADDON_NAME))} from the "addons" array @@ -453,6 +464,12 @@ export default async function postInstall(options: PostinstallOptions) { dedent` import { defineWorkspace } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport} + import path from 'node:path'; + import { fileURLToPath } from 'node:url'; + + const dirname = typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)); // More info at: https://storybook.js.org/docs/writing-tests/test-addon export default defineWorkspace([ @@ -462,7 +479,7 @@ export default async function postInstall(options: PostinstallOptions) { plugins: [ // The plugin will run tests for the stories defined in your Storybook config // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest - storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', @@ -488,13 +505,19 @@ export default async function postInstall(options: PostinstallOptions) { dedent` import { defineConfig } from 'vitest/config'; import { storybookTest } from '@storybook/experimental-addon-test/vitest-plugin';${vitestInfo.frameworkPluginImport} + import path from 'node:path'; + import { fileURLToPath } from 'node:url'; + + const dirname = typeof __dirname !== 'undefined' + ? __dirname + : path.dirname(fileURLToPath(import.meta.url)); // More info at: https://storybook.js.org/docs/writing-tests/test-addon export default defineConfig({ plugins: [ // The plugin will run tests for the stories defined in your Storybook config // See options at: https://storybook.js.org/docs/writing-tests/test-addon#storybooktest - storybookTest({ configDir: '${options.configDir}' }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} + storybookTest({ configDir: path.join(dirname, '${options.configDir}') }),${vitestInfo.frameworkPluginDocs + vitestInfo.frameworkPluginCall} ], test: { name: 'storybook', diff --git a/code/addons/test/src/vitest-plugin/index.ts b/code/addons/test/src/vitest-plugin/index.ts index a72326390abb..ed45052f6fcd 100644 --- a/code/addons/test/src/vitest-plugin/index.ts +++ b/code/addons/test/src/vitest-plugin/index.ts @@ -224,7 +224,7 @@ export const storybookTest = async (options?: UserOptions): Promise => { ? (envConfig.a11y ?? false) : false; - return shouldSetTag ? ['a11ytest'] : []; + return shouldSetTag ? ['a11y-test'] : []; }, }, // if there is a test.browser config AND test.browser.screenshotFailures is not explicitly set, we set it to false diff --git a/code/addons/themes/package.json b/code/addons/themes/package.json index 1e5268bd2e4c..8c96f0efb52d 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-beta.7", + "version": "8.5.0-beta.8", "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 9929d0089191..77c54f3641ee 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-beta.7", + "version": "8.5.0-beta.8", "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 63e60206b061..fc3a982e402c 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-beta.7", + "version": "8.5.0-beta.8", "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 90380018411d..3a40ea5fda50 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-beta.7", + "version": "8.5.0-beta.8", "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-vite/src/codegen-importfn-script.test.ts b/code/builders/builder-vite/src/codegen-importfn-script.test.ts index 4d3ce5bcb79a..da0e15c2154d 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.test.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.test.ts @@ -1,13 +1,14 @@ -import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { describe, expect, it, vi } from 'vitest'; import { toImportFn } from './codegen-importfn-script'; describe('toImportFn', () => { it('should correctly map story paths to import functions for absolute paths on Linux', async () => { - const root = '/absolute/path'; + vi.spyOn(process, 'cwd').mockReturnValue('/absolute/path'); + const stories = ['/absolute/path/to/story1.js', '/absolute/path/to/story2.js']; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = { @@ -22,10 +23,10 @@ describe('toImportFn', () => { }); it('should correctly map story paths to import functions for absolute paths on Windows', async () => { - const root = 'C:\\absolute\\path'; + vi.spyOn(process, 'cwd').mockReturnValue('C:\\absolute\\path'); const stories = ['C:\\absolute\\path\\to\\story1.js', 'C:\\absolute\\path\\to\\story2.js']; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = { @@ -43,7 +44,7 @@ describe('toImportFn', () => { const root = '/absolute/path'; const stories: string[] = []; - const result = await toImportFn(root, stories); + const result = await toImportFn(stories); expect(result).toMatchInlineSnapshot(` "const importers = {}; diff --git a/code/builders/builder-vite/src/codegen-importfn-script.ts b/code/builders/builder-vite/src/codegen-importfn-script.ts index 4b118ad9cc51..dc485c88f74d 100644 --- a/code/builders/builder-vite/src/codegen-importfn-script.ts +++ b/code/builders/builder-vite/src/codegen-importfn-script.ts @@ -29,9 +29,9 @@ function toImportPath(relativePath: string) { * * @param stories An array of absolute story paths. */ -export async function toImportFn(root: string, stories: string[]) { +export async function toImportFn(stories: string[]) { const objectEntries = stories.map((file) => { - const relativePath = relative(root, file); + const relativePath = relative(process.cwd(), file); return [toImportPath(relativePath), genDynamicImport(normalize(file))] as [string, string]; }); @@ -51,5 +51,5 @@ export async function generateImportFnScriptCode(options: Options): Promise(options); - options.projectRoot = options.projectRoot || resolve(options.configDir, '..'); + const projectRoot = resolve(options.configDir, '..'); // I destructure away the `build` property from the user's config object // I do this because I can contain config that breaks storybook, such as we had in a lit project. // If the user needs to configure the `build` they need to do so in the viteFinal function in main.js. const { config: { build: buildProperty = undefined, ...userConfig } = {} } = - (await loadConfigFromFile(configEnv, viteConfigPath, options.projectRoot)) ?? {}; + (await loadConfigFromFile(configEnv, viteConfigPath, projectRoot)) ?? {}; const sbConfig: InlineConfig = { configFile: false, cacheDir: resolvePathInStorybookCache('sb-vite', options.cacheKey), - root: options.projectRoot, + root: projectRoot, // Allow storybook deployed as subfolder. See https://github.com/storybookjs/builder-vite/issues/238 base: './', plugins: await pluginConfig(options), diff --git a/code/builders/builder-webpack5/package.json b/code/builders/builder-webpack5/package.json index 8bca8e722eb2..d6e5115bd305 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/package.json b/code/core/package.json index db2394d2401b..ddfeef74bcb5 100644 --- a/code/core/package.json +++ b/code/core/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/core", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/core/src/common/versions.ts b/code/core/src/common/versions.ts index a422b03fabdd..8ff2861951fe 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-beta.7', - '@storybook/addon-actions': '8.5.0-beta.7', - '@storybook/addon-backgrounds': '8.5.0-beta.7', - '@storybook/addon-controls': '8.5.0-beta.7', - '@storybook/addon-docs': '8.5.0-beta.7', - '@storybook/addon-essentials': '8.5.0-beta.7', - '@storybook/addon-mdx-gfm': '8.5.0-beta.7', - '@storybook/addon-highlight': '8.5.0-beta.7', - '@storybook/addon-interactions': '8.5.0-beta.7', - '@storybook/addon-jest': '8.5.0-beta.7', - '@storybook/addon-links': '8.5.0-beta.7', - '@storybook/addon-measure': '8.5.0-beta.7', - '@storybook/addon-onboarding': '8.5.0-beta.7', - '@storybook/addon-outline': '8.5.0-beta.7', - '@storybook/addon-storysource': '8.5.0-beta.7', - '@storybook/experimental-addon-test': '8.5.0-beta.7', - '@storybook/addon-themes': '8.5.0-beta.7', - '@storybook/addon-toolbars': '8.5.0-beta.7', - '@storybook/addon-viewport': '8.5.0-beta.7', - '@storybook/builder-vite': '8.5.0-beta.7', - '@storybook/builder-webpack5': '8.5.0-beta.7', - '@storybook/core': '8.5.0-beta.7', - '@storybook/builder-manager': '8.5.0-beta.7', - '@storybook/channels': '8.5.0-beta.7', - '@storybook/client-logger': '8.5.0-beta.7', - '@storybook/components': '8.5.0-beta.7', - '@storybook/core-common': '8.5.0-beta.7', - '@storybook/core-events': '8.5.0-beta.7', - '@storybook/core-server': '8.5.0-beta.7', - '@storybook/csf-tools': '8.5.0-beta.7', - '@storybook/docs-tools': '8.5.0-beta.7', - '@storybook/manager': '8.5.0-beta.7', - '@storybook/manager-api': '8.5.0-beta.7', - '@storybook/node-logger': '8.5.0-beta.7', - '@storybook/preview': '8.5.0-beta.7', - '@storybook/preview-api': '8.5.0-beta.7', - '@storybook/router': '8.5.0-beta.7', - '@storybook/telemetry': '8.5.0-beta.7', - '@storybook/theming': '8.5.0-beta.7', - '@storybook/types': '8.5.0-beta.7', - '@storybook/angular': '8.5.0-beta.7', - '@storybook/ember': '8.5.0-beta.7', - '@storybook/experimental-nextjs-vite': '8.5.0-beta.7', - '@storybook/html-vite': '8.5.0-beta.7', - '@storybook/html-webpack5': '8.5.0-beta.7', - '@storybook/nextjs': '8.5.0-beta.7', - '@storybook/preact-vite': '8.5.0-beta.7', - '@storybook/preact-webpack5': '8.5.0-beta.7', - '@storybook/react-native-web-vite': '8.5.0-beta.7', - '@storybook/react-vite': '8.5.0-beta.7', - '@storybook/react-webpack5': '8.5.0-beta.7', - '@storybook/server-webpack5': '8.5.0-beta.7', - '@storybook/svelte-vite': '8.5.0-beta.7', - '@storybook/svelte-webpack5': '8.5.0-beta.7', - '@storybook/sveltekit': '8.5.0-beta.7', - '@storybook/vue3-vite': '8.5.0-beta.7', - '@storybook/vue3-webpack5': '8.5.0-beta.7', - '@storybook/web-components-vite': '8.5.0-beta.7', - '@storybook/web-components-webpack5': '8.5.0-beta.7', - '@storybook/blocks': '8.5.0-beta.7', - storybook: '8.5.0-beta.7', - sb: '8.5.0-beta.7', - '@storybook/cli': '8.5.0-beta.7', - '@storybook/codemod': '8.5.0-beta.7', - '@storybook/core-webpack': '8.5.0-beta.7', - 'create-storybook': '8.5.0-beta.7', - '@storybook/csf-plugin': '8.5.0-beta.7', - '@storybook/instrumenter': '8.5.0-beta.7', - '@storybook/react-dom-shim': '8.5.0-beta.7', - '@storybook/source-loader': '8.5.0-beta.7', - '@storybook/test': '8.5.0-beta.7', - '@storybook/preset-create-react-app': '8.5.0-beta.7', - '@storybook/preset-html-webpack': '8.5.0-beta.7', - '@storybook/preset-preact-webpack': '8.5.0-beta.7', - '@storybook/preset-react-webpack': '8.5.0-beta.7', - '@storybook/preset-server-webpack': '8.5.0-beta.7', - '@storybook/preset-svelte-webpack': '8.5.0-beta.7', - '@storybook/preset-vue3-webpack': '8.5.0-beta.7', - '@storybook/html': '8.5.0-beta.7', - '@storybook/preact': '8.5.0-beta.7', - '@storybook/react': '8.5.0-beta.7', - '@storybook/server': '8.5.0-beta.7', - '@storybook/svelte': '8.5.0-beta.7', - '@storybook/vue3': '8.5.0-beta.7', - '@storybook/web-components': '8.5.0-beta.7', + '@storybook/addon-a11y': '8.5.0-beta.8', + '@storybook/addon-actions': '8.5.0-beta.8', + '@storybook/addon-backgrounds': '8.5.0-beta.8', + '@storybook/addon-controls': '8.5.0-beta.8', + '@storybook/addon-docs': '8.5.0-beta.8', + '@storybook/addon-essentials': '8.5.0-beta.8', + '@storybook/addon-mdx-gfm': '8.5.0-beta.8', + '@storybook/addon-highlight': '8.5.0-beta.8', + '@storybook/addon-interactions': '8.5.0-beta.8', + '@storybook/addon-jest': '8.5.0-beta.8', + '@storybook/addon-links': '8.5.0-beta.8', + '@storybook/addon-measure': '8.5.0-beta.8', + '@storybook/addon-onboarding': '8.5.0-beta.8', + '@storybook/addon-outline': '8.5.0-beta.8', + '@storybook/addon-storysource': '8.5.0-beta.8', + '@storybook/experimental-addon-test': '8.5.0-beta.8', + '@storybook/addon-themes': '8.5.0-beta.8', + '@storybook/addon-toolbars': '8.5.0-beta.8', + '@storybook/addon-viewport': '8.5.0-beta.8', + '@storybook/builder-vite': '8.5.0-beta.8', + '@storybook/builder-webpack5': '8.5.0-beta.8', + '@storybook/core': '8.5.0-beta.8', + '@storybook/builder-manager': '8.5.0-beta.8', + '@storybook/channels': '8.5.0-beta.8', + '@storybook/client-logger': '8.5.0-beta.8', + '@storybook/components': '8.5.0-beta.8', + '@storybook/core-common': '8.5.0-beta.8', + '@storybook/core-events': '8.5.0-beta.8', + '@storybook/core-server': '8.5.0-beta.8', + '@storybook/csf-tools': '8.5.0-beta.8', + '@storybook/docs-tools': '8.5.0-beta.8', + '@storybook/manager': '8.5.0-beta.8', + '@storybook/manager-api': '8.5.0-beta.8', + '@storybook/node-logger': '8.5.0-beta.8', + '@storybook/preview': '8.5.0-beta.8', + '@storybook/preview-api': '8.5.0-beta.8', + '@storybook/router': '8.5.0-beta.8', + '@storybook/telemetry': '8.5.0-beta.8', + '@storybook/theming': '8.5.0-beta.8', + '@storybook/types': '8.5.0-beta.8', + '@storybook/angular': '8.5.0-beta.8', + '@storybook/ember': '8.5.0-beta.8', + '@storybook/experimental-nextjs-vite': '8.5.0-beta.8', + '@storybook/html-vite': '8.5.0-beta.8', + '@storybook/html-webpack5': '8.5.0-beta.8', + '@storybook/nextjs': '8.5.0-beta.8', + '@storybook/preact-vite': '8.5.0-beta.8', + '@storybook/preact-webpack5': '8.5.0-beta.8', + '@storybook/react-native-web-vite': '8.5.0-beta.8', + '@storybook/react-vite': '8.5.0-beta.8', + '@storybook/react-webpack5': '8.5.0-beta.8', + '@storybook/server-webpack5': '8.5.0-beta.8', + '@storybook/svelte-vite': '8.5.0-beta.8', + '@storybook/svelte-webpack5': '8.5.0-beta.8', + '@storybook/sveltekit': '8.5.0-beta.8', + '@storybook/vue3-vite': '8.5.0-beta.8', + '@storybook/vue3-webpack5': '8.5.0-beta.8', + '@storybook/web-components-vite': '8.5.0-beta.8', + '@storybook/web-components-webpack5': '8.5.0-beta.8', + '@storybook/blocks': '8.5.0-beta.8', + storybook: '8.5.0-beta.8', + sb: '8.5.0-beta.8', + '@storybook/cli': '8.5.0-beta.8', + '@storybook/codemod': '8.5.0-beta.8', + '@storybook/core-webpack': '8.5.0-beta.8', + 'create-storybook': '8.5.0-beta.8', + '@storybook/csf-plugin': '8.5.0-beta.8', + '@storybook/instrumenter': '8.5.0-beta.8', + '@storybook/react-dom-shim': '8.5.0-beta.8', + '@storybook/source-loader': '8.5.0-beta.8', + '@storybook/test': '8.5.0-beta.8', + '@storybook/preset-create-react-app': '8.5.0-beta.8', + '@storybook/preset-html-webpack': '8.5.0-beta.8', + '@storybook/preset-preact-webpack': '8.5.0-beta.8', + '@storybook/preset-react-webpack': '8.5.0-beta.8', + '@storybook/preset-server-webpack': '8.5.0-beta.8', + '@storybook/preset-svelte-webpack': '8.5.0-beta.8', + '@storybook/preset-vue3-webpack': '8.5.0-beta.8', + '@storybook/html': '8.5.0-beta.8', + '@storybook/preact': '8.5.0-beta.8', + '@storybook/react': '8.5.0-beta.8', + '@storybook/server': '8.5.0-beta.8', + '@storybook/svelte': '8.5.0-beta.8', + '@storybook/vue3': '8.5.0-beta.8', + '@storybook/web-components': '8.5.0-beta.8', }; diff --git a/code/core/src/manager-api/version.ts b/code/core/src/manager-api/version.ts index 70c53d79d69a..03b2ede34ed8 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-beta.7'; +export const version = '8.5.0-beta.8'; diff --git a/code/core/src/manager/container/Panel.tsx b/code/core/src/manager/container/Panel.tsx index f8cc2877cef0..25292bd50769 100644 --- a/code/core/src/manager/container/Panel.tsx +++ b/code/core/src/manager/container/Panel.tsx @@ -16,7 +16,7 @@ const createPanelActions = memoize(1)((api) => ({ togglePosition: () => api.togglePanelPosition(), })); -const getPanels = (api: API) => { +const getPanels = memoize(1)((api: API) => { const allPanels = api.getElements(Addon_TypesEnum.PANEL); const story = api.getCurrentStoryData(); @@ -42,7 +42,7 @@ const getPanels = (api: API) => { }); return filteredPanels; -}; +}); const mapper = ({ state, api }: Combo) => ({ panels: getPanels(api), diff --git a/code/core/src/types/modules/core-common.ts b/code/core/src/types/modules/core-common.ts index 2b4624a0564b..08d9be50e64f 100644 --- a/code/core/src/types/modules/core-common.ts +++ b/code/core/src/types/modules/core-common.ts @@ -195,7 +195,6 @@ export interface BuilderOptions { ignorePreview?: boolean; cache?: FileSystemCache; configDir: string; - projectRoot?: string; docsMode?: boolean; features?: StorybookConfigRaw['features']; versionCheck?: VersionCheck; diff --git a/code/core/template/stories/tags-add.stories.ts b/code/core/template/stories/tags-add.stories.ts index edb70171eba1..5e6c64b1caef 100644 --- a/code/core/template/stories/tags-add.stories.ts +++ b/code/core/template/stories/tags-add.stories.ts @@ -19,9 +19,9 @@ export const Inheritance = { tags: ['story-one', '!vitest'], play: async ({ canvasElement, tags }: PlayFunctionContext) => { const canvas = within(canvasElement); - if (tags.includes('a11ytest')) { + if (tags.includes('a11y-test')) { await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ - tags: ['a11ytest', 'story-one'], + tags: ['a11y-test', 'story-one'], }); } else { await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ diff --git a/code/core/template/stories/tags-config.stories.ts b/code/core/template/stories/tags-config.stories.ts index a57a70390ce1..5d6a1faacf0f 100644 --- a/code/core/template/stories/tags-config.stories.ts +++ b/code/core/template/stories/tags-config.stories.ts @@ -19,12 +19,12 @@ export const Inheritance = { tags: ['story-one', '!vitest'], play: async ({ canvasElement, tags }: PlayFunctionContext) => { const canvas = within(canvasElement); - if (tags.includes('a11ytest')) { + if (tags.includes('a11y-test')) { await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ tags: [ 'dev', 'test', - 'a11ytest', + 'a11y-test', 'component-one', 'component-two', 'autodocs', diff --git a/code/core/template/stories/tags-remove.stories.ts b/code/core/template/stories/tags-remove.stories.ts index 468f99614aa0..a2db33287754 100644 --- a/code/core/template/stories/tags-remove.stories.ts +++ b/code/core/template/stories/tags-remove.stories.ts @@ -19,9 +19,9 @@ export const Inheritance = { tags: ['story-one', '!vitest'], play: async ({ canvasElement, tags }: PlayFunctionContext) => { const canvas = within(canvasElement); - if (tags.includes('a11ytest')) { + if (tags.includes('a11y-test')) { await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ - tags: ['dev', 'test', 'a11ytest', 'component-one', 'autodocs', 'story-one'], + tags: ['dev', 'test', 'a11y-test', 'component-one', 'autodocs', 'story-one'], }); } else { await expect(JSON.parse(canvas.getByTestId('pre').innerText)).toEqual({ diff --git a/code/deprecated/builder-manager/package.json b/code/deprecated/builder-manager/package.json index 14816d4588ad..202e21a1260e 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook manager builder", "keywords": [ "storybook" diff --git a/code/deprecated/channels/package.json b/code/deprecated/channels/package.json index c89f4d389258..089476594d15 100644 --- a/code/deprecated/channels/package.json +++ b/code/deprecated/channels/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/channels", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/client-logger/package.json b/code/deprecated/client-logger/package.json index 03e83f1d858c..b6bf391b87c2 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-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/components/package.json b/code/deprecated/components/package.json index 16c7adf66e29..538d782d4113 100644 --- a/code/deprecated/components/package.json +++ b/code/deprecated/components/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/components", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/core-common/package.json b/code/deprecated/core-common/package.json index 2376f1c37bff..8f97ed391917 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/core-events/package.json b/code/deprecated/core-events/package.json index f110a9371cde..dab32c435567 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-beta.7", + "version": "8.5.0-beta.8", "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 0704f03435ef..bfa4eb4d0d25 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/deprecated/csf-tools/package.json b/code/deprecated/csf-tools/package.json index d248f0949d8e..b81dc2ba904e 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-beta.7", + "version": "8.5.0-beta.8", "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 79bed48a279d..382b9fa1018b 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-beta.7", + "version": "8.5.0-beta.8", "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 c3430be5921b..a82593445638 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-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Manager API & Context", "keywords": [ "storybook" diff --git a/code/deprecated/manager/package.json b/code/deprecated/manager/package.json index 0e9576a41508..ee6941c38202 100644 --- a/code/deprecated/manager/package.json +++ b/code/deprecated/manager/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/manager", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook UI", "keywords": [ "storybook" diff --git a/code/deprecated/node-logger/package.json b/code/deprecated/node-logger/package.json index 2f4889b30171..da32b9929f09 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-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview-api/package.json b/code/deprecated/preview-api/package.json index 1d775331188c..27b6659d6def 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-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/preview/package.json b/code/deprecated/preview/package.json index 4cf97be32ab4..244c4b094a82 100644 --- a/code/deprecated/preview/package.json +++ b/code/deprecated/preview/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preview", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/deprecated/router/package.json b/code/deprecated/router/package.json index 07442651deb1..ff64f031095a 100644 --- a/code/deprecated/router/package.json +++ b/code/deprecated/router/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/router", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Router", "keywords": [ "storybook" diff --git a/code/deprecated/telemetry/package.json b/code/deprecated/telemetry/package.json index 5b44a000d776..35c2fae233dd 100644 --- a/code/deprecated/telemetry/package.json +++ b/code/deprecated/telemetry/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/telemetry", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 f8207df59dff..7b730df30037 100644 --- a/code/deprecated/theming/package.json +++ b/code/deprecated/theming/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/theming", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook Components", "keywords": [ "storybook" diff --git a/code/deprecated/types/package.json b/code/deprecated/types/package.json index 13562792fd46..d9fcb254a8ef 100644 --- a/code/deprecated/types/package.json +++ b/code/deprecated/types/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/types", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Core Storybook TS Types", "keywords": [ "storybook" diff --git a/code/frameworks/angular/package.json b/code/frameworks/angular/package.json index 1062db342d0e..6057a177bddb 100644 --- a/code/frameworks/angular/package.json +++ b/code/frameworks/angular/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/angular", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 428b3a225738..6d47505db37d 100644 --- a/code/frameworks/ember/package.json +++ b/code/frameworks/ember/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/ember", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 ae9732bc6d66..7b6c3af9002b 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-beta.7", + "version": "8.5.0-beta.8", "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 9bbd937f8757..3c78bcf4c102 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-beta.7", + "version": "8.5.0-beta.8", "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 d91ab9f8e76a..61df0f20e357 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-beta.7", + "version": "8.5.0-beta.8", "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 7f0d31d0a0eb..c6f4cc82ab56 100644 --- a/code/frameworks/nextjs/package.json +++ b/code/frameworks/nextjs/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/nextjs", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for Next.js", "keywords": [ "storybook", diff --git a/code/frameworks/preact-vite/package.json b/code/frameworks/preact-vite/package.json index 5a1e2e40b51b..a450956debe1 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-beta.7", + "version": "8.5.0-beta.8", "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 f15a94420578..233cf1eccc99 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-beta.7", + "version": "8.5.0-beta.8", "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 62852daf4eaf..d471569ed250 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-beta.7", + "version": "8.5.0-beta.8", "description": "Develop react-native components an isolated web environment with hot reloading.", "keywords": [ "storybook" @@ -53,12 +53,15 @@ "prep": "jiti ../../../scripts/prepare/bundle.ts" }, "dependencies": { + "@babel/plugin-transform-modules-commonjs": "^7.26.3", + "@babel/preset-react": "^7.26.3", "@bunchtogether/vite-plugin-flow": "^1.0.2", "@joshwooding/vite-plugin-react-docgen-typescript": "0.4.2", "@storybook/builder-vite": "workspace:*", "@storybook/react": "workspace:*", "@storybook/react-vite": "workspace:*", "@vitejs/plugin-react": "^4.3.2", + "vite-plugin-babel": "^1.3.0", "vite-tsconfig-paths": "^5.1.4" }, "devDependencies": { diff --git a/code/frameworks/react-native-web-vite/src/preset.ts b/code/frameworks/react-native-web-vite/src/preset.ts index 44e847171dda..40e275b5bbb1 100644 --- a/code/frameworks/react-native-web-vite/src/preset.ts +++ b/code/frameworks/react-native-web-vite/src/preset.ts @@ -3,6 +3,7 @@ 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 { InlineConfig, PluginOption } from 'vite'; +import babel from 'vite-plugin-babel'; import tsconfigPaths from 'vite-tsconfig-paths'; import type { FrameworkOptions, StorybookConfig } from './types'; @@ -64,25 +65,68 @@ export function reactNativeWeb(): PluginOption { export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) => { const { mergeConfig } = await import('vite'); - const { pluginReactOptions = {} } = + const { pluginReactOptions = {}, pluginBabelOptions = {} } = await options.presets.apply('frameworkOptions'); + const isDevelopment = options.configType !== 'PRODUCTION'; + const reactConfig = await reactViteFinal(config, options); const { plugins = [] } = reactConfig; plugins.unshift( tsconfigPaths(), + + // fix for react native packages shipping with flow types untranspiled flowPlugin({ exclude: [/node_modules\/(?!react-native|@react-native)/], }), react({ + ...pluginReactOptions, + jsxRuntime: pluginReactOptions.jsxRuntime || 'automatic', babel: { babelrc: false, configFile: false, + ...pluginReactOptions.babel, + }, + }), + + // we need to add this extra babel config because the react plugin doesn't allow + // for transpiling node_modules. We need this because many react native packages are un-transpiled. + // see this pr for more context: https://github.com/vitejs/vite-plugin-react/pull/306 + // However we keep the react plugin to get the fast refresh and the other stuff its doing + babel({ + ...pluginBabelOptions, + include: pluginBabelOptions.include || [/node_modules\/(react-native|@react-native)/], + exclude: pluginBabelOptions.exclude, + babelConfig: { + ...pluginBabelOptions.babelConfig, + babelrc: false, + configFile: false, + presets: [ + [ + '@babel/preset-react', + { + development: isDevelopment, + runtime: 'automatic', + ...(pluginBabelOptions.presetReact || {}), + }, + ], + ...(pluginBabelOptions.babelConfig?.presets || []), + ], + plugins: [ + [ + // this is a fix for reanimated not working in production + '@babel/plugin-transform-modules-commonjs', + { + strict: false, + strictMode: false, // prevent "use strict" injections + allowTopLevelThis: true, // dont rewrite global `this` -> `undefined` + }, + ], + ...(pluginBabelOptions.babelConfig?.plugins || []), + ], }, - jsxRuntime: 'automatic', - ...pluginReactOptions, }) ); @@ -91,6 +135,7 @@ export const viteFinal: StorybookConfig['viteFinal'] = async (config, options) = return mergeConfig(reactConfig, { optimizeDeps: { esbuildOptions: { + // fix for react native packages shipping with flow types untranspiled plugins: [esbuildFlowPlugin(new RegExp(/\.(flow|jsx?)$/), (_path: string) => 'jsx')], }, }, diff --git a/code/frameworks/react-native-web-vite/src/types.ts b/code/frameworks/react-native-web-vite/src/types.ts index c82c79771a1b..5558722e03d7 100644 --- a/code/frameworks/react-native-web-vite/src/types.ts +++ b/code/frameworks/react-native-web-vite/src/types.ts @@ -6,9 +6,17 @@ import type { } from '@storybook/react-vite'; import type { BabelOptions, Options as ReactOptions } from '@vitejs/plugin-react'; +import type { BabelPluginOptions } from 'vite-plugin-babel'; export type FrameworkOptions = FrameworkOptionsBase & { pluginReactOptions?: Omit & { babel?: BabelOptions }; + pluginBabelOptions?: BabelPluginOptions & { + presetReact?: { + [key: string]: any; + runtime?: 'automatic' | 'classic'; + importSource?: string; + }; + }; }; type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>; diff --git a/code/frameworks/react-vite/package.json b/code/frameworks/react-vite/package.json index 4a0bdc30f996..20a201631ad8 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-beta.7", + "version": "8.5.0-beta.8", "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 eeb8d54be428..847a74648bc3 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-beta.7", + "version": "8.5.0-beta.8", "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 232ef3b1dd32..c01ff58cb31e 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-beta.7", + "version": "8.5.0-beta.8", "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 43c32f61a45e..a84c99459479 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-beta.7", + "version": "8.5.0-beta.8", "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 fc0dd1cdffc5..20da51d82cdc 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-beta.7", + "version": "8.5.0-beta.8", "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 a22f6e9ed0e8..ae7a40fa802f 100644 --- a/code/frameworks/sveltekit/package.json +++ b/code/frameworks/sveltekit/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/sveltekit", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook for SvelteKit", "keywords": [ "storybook", diff --git a/code/frameworks/vue3-vite/package.json b/code/frameworks/vue3-vite/package.json index 3f67c456b985..291a41981721 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-beta.7", + "version": "8.5.0-beta.8", "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 80fb627f57be..223742483fa7 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-beta.7", + "version": "8.5.0-beta.8", "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 2cdbe1efecfb..ae2bd6f7b142 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-beta.7", + "version": "8.5.0-beta.8", "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 619aa92693d1..46a6974f7e54 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-beta.7", + "version": "8.5.0-beta.8", "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 cd7e33e93060..e54255595b4e 100644 --- a/code/lib/blocks/package.json +++ b/code/lib/blocks/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/blocks", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Doc Blocks", "keywords": [ "storybook" diff --git a/code/lib/cli-sb/package.json b/code/lib/cli-sb/package.json index 4e31b9076754..2c41b8a58c9b 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/package.json b/code/lib/cli-storybook/package.json index 568ab9f4ccd4..cfeb93c24679 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook CLI", "keywords": [ "storybook" diff --git a/code/lib/cli-storybook/src/add.ts b/code/lib/cli-storybook/src/add.ts index d8df0813905d..8ba600883e7e 100644 --- a/code/lib/cli-storybook/src/add.ts +++ b/code/lib/cli-storybook/src/add.ts @@ -111,17 +111,19 @@ export async function add( let shouldAddToMain = true; if (checkInstalled(addonName, requireMain(configDir))) { - const { shouldForceInstall } = await prompts({ - type: 'confirm', - name: 'shouldForceInstall', - message: `The Storybook addon "${addonName}" is already present in ${mainConfig}. Do you wish to install it again?`, - }); - - if (!shouldForceInstall) { - return; - } - shouldAddToMain = false; + if (!yes) { + logger.log(`The Storybook addon "${addonName}" is already present in ${mainConfig}.`); + const { shouldForceInstall } = await prompts({ + type: 'confirm', + name: 'shouldForceInstall', + message: `Do you wish to install it again?`, + }); + + if (!shouldForceInstall) { + return; + } + } } const main = await readConfig(mainConfig); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap b/code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap index 508306a1987f..5a567a94671f 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap +++ b/code/lib/cli-storybook/src/automigrate/fixes/__snapshots__/addon-a11y-addon-test.test.ts.snap @@ -23,7 +23,7 @@ Please manually update your .storybook/preview. file to include the follo export default { ... -+ tags: ["a11ytest"], ++ tags: ["a11y-test"], } For more information, please refer to the accessibility addon documentation: @@ -88,9 +88,113 @@ Please manually update your .storybook/preview. file to include the follo export default { ... -+ tags: ["a11ytest"], ++ tags: ["a11y-test"], } For more information, please refer to the accessibility addon documentation: https://storybook.js.org/docs/writing-tests/accessibility-testing#test-addon-integration" `; + +exports[`addonA11yAddonTest > transformPreviewFile > should add a new tags property if it does not exist 1`] = ` +"import type { Preview } from '@storybook/react'; + +const preview: Preview = { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, + + // a11y-test tag controls whether accessibility tests are run as part of a standalone Vitest test run + // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing + tags: [/*'a11y-test'*/] +}; + +export default preview;" +`; + +exports[`addonA11yAddonTest > transformPreviewFile > should add a new tags property if it does not exist and a default export does not exist 1`] = ` +"export const parameters = { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, +} +export const tags = ["a11y-test"];" +`; + +exports[`addonA11yAddonTest > transformPreviewFile > should extend the existing tags property 1`] = ` +"import type { Preview } from "@storybook/react"; + +const preview: Preview = { + // a11y-test tag controls whether accessibility tests are run as part of a standalone Vitest test run + // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing + tags: ["existingTag"/*, "a11y-test"*/], + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview;" +`; + +exports[`addonA11yAddonTest > transformPreviewFile > should extend the existing tags property without type annotations 1`] = ` +"export default { + // a11y-test tag controls whether accessibility tests are run as part of a standalone Vitest test run + // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing + tags: ["existingTag"/*, "a11y-test"*/], + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +};" +`; + +exports[`addonA11yAddonTest > transformPreviewFile > should handle the default export without type annotations 1`] = ` +"export default { + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, + + // a11y-test tag controls whether accessibility tests are run as part of a standalone Vitest test run + // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing + tags: [/*"a11y-test"*/] +};" +`; + +exports[`addonA11yAddonTest > transformPreviewFile > should not add a11y-test if it already exists in the tags property 1`] = ` +"import type { Preview } from "@storybook/react"; + +const preview: Preview = { + tags: ["a11y-test"], + parameters: { + controls: { + matchers: { + color: /(background|color)$/i, + date: /Date$/i, + }, + }, + }, +}; + +export default preview;" +`; diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts index dd400e18bb80..e4f9906534a9 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.test.ts @@ -1,5 +1,9 @@ import { beforeEach, describe, expect, it, vi } from 'vitest'; +import { formatFileContent } from '@storybook/core/common'; + +import { formatConfig, loadConfig } from '@storybook/core/csf-tools'; + import { existsSync, readFileSync, writeFileSync } from 'fs'; import * as jscodeshift from 'jscodeshift'; import path from 'path'; @@ -107,7 +111,7 @@ describe('addonA11yAddonTest', () => { } else { return ` export default { - tags: ['a11ytest'], + tags: ['a11y-test'], } `; } @@ -286,7 +290,7 @@ describe('addonA11yAddonTest', () => { } else { return ` export default { - tags: ['a11ytest'], + tags: ['a11y-test'], } `; } @@ -542,7 +546,7 @@ describe('addonA11yAddonTest', () => { const s = readFileSync(setupFile, 'utf8'); const transformedCode = transformSetupFile(s); - expect(transformedCode).toMatchInlineSnapshot(` + expect(transformedCode).toMatchInlineSnapshot(dedent` "import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview"; import { beforeAll } from 'vitest'; import { setProjectAnnotations } from 'storybook'; @@ -556,28 +560,10 @@ describe('addonA11yAddonTest', () => { }); describe('transformPreviewFile', () => { - it('should add a new tags property if it does not exist', () => { - const source = ` + it('should add a new tags property if it does not exist', async () => { + const source = dedent` import type { Preview } from '@storybook/react'; - - const preview: Preview = { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, - }; - - export default preview; - `; - const transformed = transformPreviewFile(source); - const expected = ` - import type { Preview } from '@storybook/react'; - const preview: Preview = { parameters: { controls: { @@ -587,20 +573,18 @@ describe('addonA11yAddonTest', () => { }, }, }, - - // a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run - // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing - tags: ['a11ytest'] }; - + export default preview; `; - expect(transformed).toBe(expected); + const transformed = await transformPreviewFile(source, process.cwd()); + + expect(transformed).toMatchSnapshot(); }); - it('should add a new tags property if it does not exist and a default export does not exist', () => { - const source = ` + it('should add a new tags property if it does not exist and a default export does not exist', async () => { + const source = dedent` export const parameters = { controls: { matchers: { @@ -611,49 +595,17 @@ describe('addonA11yAddonTest', () => { } `; - const transformed = transformPreviewFile(source); - const expected = ` - export const parameters = { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - } - export const tags = ["a11ytest"]; - `; + const transformed = await transformPreviewFile(source, process.cwd()); - expect(transformed).toBe(expected); + expect(transformed).toMatchSnapshot(); }); - it('should extend the existing tags property', () => { - const source = ` - import type { Preview } from '@storybook/react'; - - const preview: Preview = { - tags: ['existingTag'], - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, - }; - - export default preview; - `; + it('should extend the existing tags property', async () => { + const source = dedent` + import type { Preview } from "@storybook/react"; - const transformed = transformPreviewFile(source); - const expected = ` - import type { Preview } from '@storybook/react'; - const preview: Preview = { - // a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run - // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing - tags: ['existingTag', 'a11ytest'], + tags: ["existingTag"], parameters: { controls: { matchers: { @@ -663,19 +615,21 @@ describe('addonA11yAddonTest', () => { }, }, }; - + export default preview; `; - expect(transformed).toBe(j(expected).toSource()); + const transformed = await transformPreviewFile(source, process.cwd()); + + expect(transformed).toMatchSnapshot(); }); - it('should not add a11ytest if it already exists in the tags property', () => { - const source = ` - import type { Preview } from '@storybook/react'; - + it('should not add a11y-test if it already exists in the tags property', async () => { + const source = dedent` + import type { Preview } from "@storybook/react"; + const preview: Preview = { - tags: ['a11ytest'], + tags: ["a11y-test"], parameters: { controls: { matchers: { @@ -685,17 +639,17 @@ describe('addonA11yAddonTest', () => { }, }, }; - + export default preview; `; - const transformed = transformPreviewFile(source); + const transformed = await transformPreviewFile(source, process.cwd()); - expect(transformed).toBe(source); + expect(transformed).toMatchSnapshot(); }); - it('should handle the default export without type annotations', () => { - const source = ` + it('should handle the default export without type annotations', async () => { + const source = dedent` export default { parameters: { controls: { @@ -708,31 +662,15 @@ describe('addonA11yAddonTest', () => { }; `; - const transformed = transformPreviewFile(source); - const expected = ` - export default { - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, - - // a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run - // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing - tags: ["a11ytest"] - }; - `; + const transformed = await transformPreviewFile(source, process.cwd()); - expect(transformed).toBe(expected); + expect(transformed).toMatchSnapshot(); }); - it('should extend the existing tags property without type annotations', () => { - const source = ` + it('should extend the existing tags property without type annotations', async () => { + const source = dedent` export default { - tags: ['existingTag'], + tags: ["existingTag"], parameters: { controls: { matchers: { @@ -744,24 +682,9 @@ describe('addonA11yAddonTest', () => { }; `; - const transformed = transformPreviewFile(source); - const expected = ` - export default { - // a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run - // For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing - tags: ['existingTag', 'a11ytest'], - parameters: { - controls: { - matchers: { - color: /(background|color)$/i, - date: /Date$/i, - }, - }, - }, - }; - `; + const transformed = await transformPreviewFile(source, process.cwd()); - expect(transformed).toBe(expected); + expect(transformed).toMatchSnapshot(); }); }); }); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts index 8f6ca6d6b5bc..30fd3dcc8f04 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/addon-a11y-addon-test.ts @@ -1,6 +1,7 @@ -import { rendererPackages } from 'storybook/internal/common'; +import { formatFileContent, rendererPackages } from 'storybook/internal/common'; import { formatConfig, loadConfig } from 'storybook/internal/csf-tools'; +import { type ArrayExpression } from '@babel/types'; import { existsSync, readFileSync, writeFileSync } from 'fs'; import * as jscodeshift from 'jscodeshift'; import path from 'path'; @@ -100,7 +101,7 @@ export const addonA11yAddonTest: Fix = { const previewSetupSource = readFileSync(previewFile, 'utf8'); skipVitestSetupTransformation = vitestSetupSource.includes('@storybook/addon-a11y'); - skipPreviewTransformation = previewSetupSource.includes('a11ytest'); + skipPreviewTransformation = previewSetupSource.includes('a11y-test'); if (skipVitestSetupTransformation && skipPreviewTransformation) { return null; @@ -120,14 +121,14 @@ export const addonA11yAddonTest: Fix = { } }; - const getTransformedPreviewCode = () => { + const getTransformedPreviewCode = async () => { if (!previewFile || skipPreviewTransformation) { return null; } try { const previewSetupSource = readFileSync(previewFile, 'utf8'); - return transformPreviewFile(previewSetupSource); + return await transformPreviewFile(previewSetupSource, previewFile); } catch (e) { return null; } @@ -137,7 +138,7 @@ export const addonA11yAddonTest: Fix = { setupFile: vitestSetupFile, previewFile: previewFile, transformedSetupCode: getTransformedSetupCode(), - transformedPreviewCode: getTransformedPreviewCode(), + transformedPreviewCode: await getTransformedPreviewCode(), skipVitestSetupTransformation, skipPreviewTransformation, }; @@ -194,7 +195,7 @@ export const addonA11yAddonTest: Fix = { ${picocolors.gray('export default {')} ${picocolors.gray('...')} - ${picocolors.green('+ tags: ["a11ytest"],')} + ${picocolors.green('+ tags: ["a11y-test"],')} ${picocolors.gray('}')} `); } else { @@ -270,16 +271,41 @@ export function transformSetupFile(source: string) { return root.toSource(); } -export function transformPreviewFile(source: string) { +export async function transformPreviewFile(source: string, filePath: string) { const previewConfig = loadConfig(source).parse(); const tags = previewConfig.getFieldNode(['tags']); + const tagsNode = previewConfig.getFieldNode(['tags']) as ArrayExpression; const tagsValue = previewConfig.getFieldValue(['tags']) ?? []; - if (tags && tagsValue && (tagsValue.includes('a11ytest') || tagsValue.includes('!a11ytest'))) { + if (tags && tagsValue && (tagsValue.includes('a11y-test') || tagsValue.includes('!a11y-test'))) { return source; } - previewConfig.setFieldValue(['tags'], [...tagsValue, 'a11ytest']); + if (tagsNode) { + const tagsElementsLength = (tagsNode as ArrayExpression).elements.length; + const lastTagElement = tagsNode.elements[tagsElementsLength - 1]; + + if (lastTagElement) { + // t.addComment(lastTagElement, 'trailing', ", 'a11y-test'"); + // @ts-expect-error The commented line above would be the proper way of how to add a trailing comment but it is not supported by recast. + // https://github.com/benjamn/recast/issues/572 + lastTagElement.comments = [ + { + type: 'CommentBlock', + leading: false, + trailing: true, + value: ', "a11y-test"', + }, + ]; + previewConfig.setFieldNode(['tags'], tagsNode); + } + } else { + // t.addComment(newTagsNode, 'inner', 'a11y-test'); + // The commented line above would be the proper way of how to add a trailing comment but innercomments are not supported by recast. + // https://github.com/benjamn/recast/issues/1417 + // This case will be handled later by parsing the source code and editing it later. + previewConfig.setFieldValue(['tags'], ['a11y-test']); + } const formattedPreviewConfig = formatConfig(previewConfig); const lines = formattedPreviewConfig.split('\n'); @@ -291,12 +317,13 @@ export function transformPreviewFile(source: string) { } // Determine the indentation level of the "tags" property - const tagsLine = lines[tagsLineIndex]; - const indentation = tagsLine?.match(/^\s*/)?.[0]; + lines[tagsLineIndex] = lines[tagsLineIndex].replace("['a11y-test']", "[/*'a11y-test'*/]"); + lines[tagsLineIndex] = lines[tagsLineIndex].replace('["a11y-test"]', '[/*"a11y-test"*/]'); + const indentation = lines[tagsLineIndex]?.match(/^\s*/)?.[0]; // Add the comment with the same indentation level - const comment = `${indentation}// a11ytest tag controls whether accessibility tests are run as part of a standalone Vitest test run\n${indentation}// For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing`; + const comment = `${indentation}// a11y-test tag controls whether accessibility tests are run as part of a standalone Vitest test run\n${indentation}// For more information please visit: https://storybook.js.org/docs/writing-tests/accessibility-testing`; lines.splice(tagsLineIndex, 0, comment); - return lines.join('\n'); + return formatFileContent(filePath, lines.join('\n')); } diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.test.ts b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.test.ts new file mode 100644 index 000000000000..377e754e6b9b --- /dev/null +++ b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.test.ts @@ -0,0 +1,48 @@ +import { describe, expect, it } from 'vitest'; + +import type { StorybookConfig } from 'storybook/internal/types'; + +import { viteConfigFile } from './vite-config-file'; + +const check = async ({ + packageManager, + main: mainConfig, + storybookVersion = '8.0.0', +}: { + packageManager: any; + main: Partial & Record; + storybookVersion?: string; +}) => { + return viteConfigFile.check({ + packageManager, + configDir: '', + mainConfig: mainConfig as any, + storybookVersion, + }); +}; + +describe('no-ops', () => { + it('skips when react-native-web-vite', async () => { + await expect( + check({ + packageManager: {}, + main: { + framework: '@storybook/react-native-web-vite', + }, + }) + ).resolves.toBeFalsy(); + }); +}); + +describe('continue', () => { + it('executes for vite framework', async () => { + await expect( + check({ + packageManager: {}, + main: { + framework: '@storybook/react-vite', + }, + }) + ).resolves.toBeTruthy(); + }); +}); diff --git a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts index 84201fd64852..4d1389c41e7d 100644 --- a/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts +++ b/code/lib/cli-storybook/src/automigrate/fixes/vite-config-file.ts @@ -42,6 +42,12 @@ export const viteConfigFile = { return null; } const frameworkName = frameworkPackages[frameworkPackageName]; + + if (frameworkName === 'react-native-web-vite') { + // we don't expect a vite config file for this framework + return null; + } + const isUsingViteBuilder = mainConfig.core?.builder === 'vite' || frameworkPackageName?.includes('vite') || diff --git a/code/lib/cli/package.json b/code/lib/cli/package.json index 9aa43e3a444a..2cf67eda0677 100644 --- a/code/lib/cli/package.json +++ b/code/lib/cli/package.json @@ -1,6 +1,6 @@ { "name": "storybook", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 99f6ebf2f4cf..2381a68ce2e6 100644 --- a/code/lib/codemod/package.json +++ b/code/lib/codemod/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/codemod", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 7dfaaf240fa9..196ddbae1ddb 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook framework-agnostic API", "keywords": [ "storybook" diff --git a/code/lib/create-storybook/package.json b/code/lib/create-storybook/package.json index a6fee64b315d..cf7af42367b6 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-beta.7", + "version": "8.5.0-beta.8", "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 3253dc28239e..97b965d8f08a 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-beta.7", + "version": "8.5.0-beta.8", "description": "Enrich CSF files via static analysis", "keywords": [ "storybook" diff --git a/code/lib/instrumenter/package.json b/code/lib/instrumenter/package.json index cd316cd52134..f1979e323bec 100644 --- a/code/lib/instrumenter/package.json +++ b/code/lib/instrumenter/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/instrumenter", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/react-dom-shim/package.json b/code/lib/react-dom-shim/package.json index c9ad8a1eb7dd..971dab959df3 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-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/lib/source-loader/package.json b/code/lib/source-loader/package.json index 4d4f05f81d2b..e72b99b17367 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-beta.7", + "version": "8.5.0-beta.8", "description": "Source loader", "keywords": [ "lib", diff --git a/code/lib/test/package.json b/code/lib/test/package.json index 98cfa19ab2db..52fdb5b9bdc6 100644 --- a/code/lib/test/package.json +++ b/code/lib/test/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/test", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "", "keywords": [ "storybook" diff --git a/code/package.json b/code/package.json index 56c396a10768..88658890e5ee 100644 --- a/code/package.json +++ b/code/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/root", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "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 e724f600b146..75ed59d206f3 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-beta.7", + "version": "8.5.0-beta.8", "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 364622c88c30..814f38e474f6 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-beta.7", + "version": "8.5.0-beta.8", "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 fd11d3dcfca9..27ad6b2dbfc3 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-beta.7", + "version": "8.5.0-beta.8", "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 b796c751951a..bc2aa69c9b4f 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-beta.7", + "version": "8.5.0-beta.8", "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 fb8088a49370..48fc48630ad1 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-beta.7", + "version": "8.5.0-beta.8", "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 6eba44003f64..cd00d25c9446 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-beta.7", + "version": "8.5.0-beta.8", "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 8e4d59581507..df5ef39bb248 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-beta.7", + "version": "8.5.0-beta.8", "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 351e398be33e..719860934f21 100644 --- a/code/renderers/html/package.json +++ b/code/renderers/html/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/html", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook HTML renderer", "keywords": [ "storybook" diff --git a/code/renderers/preact/package.json b/code/renderers/preact/package.json index b0a1170483bb..b43e222db6a8 100644 --- a/code/renderers/preact/package.json +++ b/code/renderers/preact/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/preact", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Preact renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/package.json b/code/renderers/react/package.json index e863f283dc37..0b4f91da93a8 100644 --- a/code/renderers/react/package.json +++ b/code/renderers/react/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/react", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook React renderer", "keywords": [ "storybook" diff --git a/code/renderers/react/src/__test__/portable-stories.test.tsx b/code/renderers/react/src/__test__/portable-stories.test.tsx index e6156727c4d9..fcb278628b7b 100644 --- a/code/renderers/react/src/__test__/portable-stories.test.tsx +++ b/code/renderers/react/src/__test__/portable-stories.test.tsx @@ -67,7 +67,7 @@ describe('renders', () => { }); it('should throw error when rendering a component with a render error', async () => { - await expect(() => ThrowsError.run()).rejects.toThrowError('Error in render'); + await expect(ThrowsError.run()).rejects.toThrowError('Error in render'); }); it('should render component mounted in play function', async () => { @@ -78,7 +78,7 @@ describe('renders', () => { }); it('should throw an error in play function', async () => { - await expect(() => MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play'); + await expect(MountInPlayFunctionThrow.run()).rejects.toThrowError('Error thrown in play'); }); it('should call and compose loaders data', async () => { diff --git a/code/renderers/react/src/renderToCanvas.tsx b/code/renderers/react/src/renderToCanvas.tsx index 4ae1acbb7fe9..57c1086cee1b 100644 --- a/code/renderers/react/src/renderToCanvas.tsx +++ b/code/renderers/react/src/renderToCanvas.tsx @@ -45,6 +45,23 @@ class ErrorBoundary extends ReactComponent<{ const Wrapper = FRAMEWORK_OPTIONS?.strictMode ? StrictMode : Fragment; +const actQueue: (() => Promise)[] = []; +let isActing = false; + +const processActQueue = async () => { + if (isActing || actQueue.length === 0) { + return; + } + + isActing = true; + const actTask = actQueue.shift(); + if (actTask) { + await actTask(); + } + isActing = false; + processActQueue(); +}; + export async function renderToCanvas( { storyContext, @@ -81,8 +98,18 @@ export async function renderToCanvas( unmountElement(canvasElement); } - await act(async () => { - await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions); + await new Promise(async (resolve, reject) => { + actQueue.push(async () => { + try { + await act(async () => { + await renderElement(element, canvasElement, storyContext?.parameters?.react?.rootOptions); + }); + resolve(); + } catch (e) { + reject(e); + } + }); + processActQueue(); }); return async () => { diff --git a/code/renderers/server/package.json b/code/renderers/server/package.json index 27fdcc129183..b69376f406c5 100644 --- a/code/renderers/server/package.json +++ b/code/renderers/server/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/server", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Server renderer", "keywords": [ "storybook" diff --git a/code/renderers/svelte/package.json b/code/renderers/svelte/package.json index dacb64a582fb..41a5d33b3bf0 100644 --- a/code/renderers/svelte/package.json +++ b/code/renderers/svelte/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/svelte", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Svelte renderer", "keywords": [ "storybook" diff --git a/code/renderers/vue3/package.json b/code/renderers/vue3/package.json index 836049329bef..e071df26236c 100644 --- a/code/renderers/vue3/package.json +++ b/code/renderers/vue3/package.json @@ -1,6 +1,6 @@ { "name": "@storybook/vue3", - "version": "8.5.0-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook Vue 3 renderer", "keywords": [ "storybook" diff --git a/code/renderers/web-components/package.json b/code/renderers/web-components/package.json index b5936cdfcc06..0e3c09544430 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-beta.7", + "version": "8.5.0-beta.8", "description": "Storybook web-components renderer", "keywords": [ "lit", diff --git a/code/yarn.lock b/code/yarn.lock index 6bc43dc1194d..d4fb161df454 100644 --- a/code/yarn.lock +++ b/code/yarn.lock @@ -508,6 +508,15 @@ __metadata: languageName: node linkType: hard +"@babel/helper-annotate-as-pure@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/helper-annotate-as-pure@npm:7.25.9" + dependencies: + "@babel/types": "npm:^7.25.9" + checksum: 10c0/095b6ba50489d797733abebc4596a81918316a99e3632755c9f02508882912b00c2ae5e468532a25a5c2108d109ddbe9b7da78333ee7cc13817fc50c00cf06fe + languageName: node + linkType: hard + "@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.24.7": version: 7.24.7 resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.24.7" @@ -1064,6 +1073,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-syntax-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-syntax-jsx@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/d56597aff4df39d3decda50193b6dfbe596ca53f437ff2934622ce19a743bf7f43492d3fb3308b0289f5cee2b825d99ceb56526a2b9e7b68bf04901546c5618c + languageName: node + linkType: hard + "@babel/plugin-syntax-logical-assignment-operators@npm:^7.10.4": version: 7.10.4 resolution: "@babel/plugin-syntax-logical-assignment-operators@npm:7.10.4" @@ -1495,6 +1515,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-modules-commonjs@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/plugin-transform-modules-commonjs@npm:7.26.3" + dependencies: + "@babel/helper-module-transforms": "npm:^7.26.0" + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/82e59708f19f36da29531a64a7a94eabbf6ff46a615e0f5d9b49f3f59e8ef10e2bac607d749091508d3fa655146c9e5647c3ffeca781060cdabedb4c7a33c6f2 + languageName: node + linkType: hard + "@babel/plugin-transform-modules-systemjs@npm:^7.23.9, @babel/plugin-transform-modules-systemjs@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-modules-systemjs@npm:7.24.7" @@ -1689,6 +1721,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-display-name@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-display-name@npm:7.25.9" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/63a0f962d64e71baf87c212755419e25c637d2d95ea6fdc067df26b91e606ae186442ae815b99a577eca9bf5404d9577ecad218a3cf42d0e9e286ca7b003a992 + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-development@npm:^7.22.5": version: 7.22.5 resolution: "@babel/plugin-transform-react-jsx-development@npm:7.22.5" @@ -1700,6 +1743,17 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx-development@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx-development@npm:7.25.9" + dependencies: + "@babel/plugin-transform-react-jsx": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/c0b92ff9eb029620abf320ff74aae182cea87524723d740fb48a4373d0d16bddf5edbe1116e7ba341332a5337e55c2ceaee8b8cad5549e78af7f4b3cfe77debb + languageName: node + linkType: hard + "@babel/plugin-transform-react-jsx-self@npm:^7.24.7": version: 7.25.9 resolution: "@babel/plugin-transform-react-jsx-self@npm:7.25.9" @@ -1737,6 +1791,21 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-jsx@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-jsx@npm:7.25.9" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.25.9" + "@babel/helper-module-imports": "npm:^7.25.9" + "@babel/helper-plugin-utils": "npm:^7.25.9" + "@babel/plugin-syntax-jsx": "npm:^7.25.9" + "@babel/types": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/5c9947e8ed141f7606f54da3e05eea1074950c5b8354c39df69cb7f43cb5a83c6c9d7973b24bc3d89341c8611f8ad50830a98ab10d117d850e6bdd8febdce221 + languageName: node + linkType: hard + "@babel/plugin-transform-react-pure-annotations@npm:^7.24.1": version: 7.24.1 resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.24.1" @@ -1749,6 +1818,18 @@ __metadata: languageName: node linkType: hard +"@babel/plugin-transform-react-pure-annotations@npm:^7.25.9": + version: 7.25.9 + resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.25.9" + dependencies: + "@babel/helper-annotate-as-pure": "npm:^7.25.9" + "@babel/helper-plugin-utils": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/7c8eac04644ad19dcd71bb8e949b0ae22b9e548fa4a58e545d3d0342f647fb89db7f8789a7c5b8074d478ce6d3d581eaf47dd4b36027e16fd68211c383839abc + languageName: node + linkType: hard + "@babel/plugin-transform-regenerator@npm:^7.23.3, @babel/plugin-transform-regenerator@npm:^7.24.1": version: 7.24.7 resolution: "@babel/plugin-transform-regenerator@npm:7.24.7" @@ -2154,6 +2235,22 @@ __metadata: languageName: node linkType: hard +"@babel/preset-react@npm:^7.26.3": + version: 7.26.3 + resolution: "@babel/preset-react@npm:7.26.3" + dependencies: + "@babel/helper-plugin-utils": "npm:^7.25.9" + "@babel/helper-validator-option": "npm:^7.25.9" + "@babel/plugin-transform-react-display-name": "npm:^7.25.9" + "@babel/plugin-transform-react-jsx": "npm:^7.25.9" + "@babel/plugin-transform-react-jsx-development": "npm:^7.25.9" + "@babel/plugin-transform-react-pure-annotations": "npm:^7.25.9" + peerDependencies: + "@babel/core": ^7.0.0-0 + checksum: 10c0/b470dcba11032ef6c832066f4af5c75052eaed49feb0f445227231ef1b5c42aacd6e216988c0bd469fd5728cd27b6b059ca307c9ecaa80c6bb5da4bf1c833e12 + languageName: node + linkType: hard + "@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.22.5, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.1": version: 7.24.1 resolution: "@babel/preset-typescript@npm:7.24.1" @@ -6859,6 +6956,8 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/react-native-web-vite@workspace:frameworks/react-native-web-vite" dependencies: + "@babel/plugin-transform-modules-commonjs": "npm:^7.26.3" + "@babel/preset-react": "npm:^7.26.3" "@bunchtogether/vite-plugin-flow": "npm:^1.0.2" "@joshwooding/vite-plugin-react-docgen-typescript": "npm:0.4.2" "@storybook/builder-vite": "workspace:*" @@ -6867,6 +6966,7 @@ __metadata: "@types/node": "npm:^22.0.0" "@vitejs/plugin-react": "npm:^4.3.2" typescript: "npm:^5.3.2" + vite-plugin-babel: "npm:^1.3.0" vite-tsconfig-paths: "npm:^5.1.4" peerDependencies: react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta @@ -29098,6 +29198,16 @@ __metadata: languageName: node linkType: hard +"vite-plugin-babel@npm:^1.3.0": + version: 1.3.0 + resolution: "vite-plugin-babel@npm:1.3.0" + peerDependencies: + "@babel/core": ^7.0.0 + vite: ^2.7.0 || ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 + checksum: 10c0/1613c45ee220ffbad18aeacbbe395d4d346cbe7c971c7469b0cd96df422bd9d617821a40bacf3b6ea3e7c4ded43e6ccdfd17ec3c0899fee2835f56e8971c6b57 + languageName: node + linkType: hard + "vite-plugin-inspect@npm:^0.8.5": version: 0.8.9 resolution: "vite-plugin-inspect@npm:0.8.9" diff --git a/docs/_snippets/addon-a11y-meta-tag.md b/docs/_snippets/addon-a11y-meta-tag.md index 3ef18124964e..58de99af555f 100644 --- a/docs/_snippets/addon-a11y-meta-tag.md +++ b/docs/_snippets/addon-a11y-meta-tag.md @@ -5,8 +5,8 @@ import { Button } from './button.component'; const meta: Meta