Merge remote-tracking branch 'origin/valentin/a11y-refactorings' into…

… valentin/add-vitest-3-support

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!

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',

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",

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';

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: [],
     });

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

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",

code/addons/test/src/components/TestProviderRender.tsx

@@ -139,7 +139,7 @@ export const TestProviderRender: FC<TestProviderRenderProps> = ({
       return acc;
     }, new Set<Tag>());
 
-    if (allTags.has('a11ytest')) {
+    if (allTags.has('a11y-test')) {
       return true;
     }
 

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:

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',

code/addons/test/src/vitest-plugin/index.ts

@@ -224,7 +224,7 @@ export const storybookTest = async (options?: UserOptions): Promise<Plugin> => {
                   ? (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

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",

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",

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",

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": {

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 = {};

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<stri
 
   // We can then call toImportFn to create a function that can be used to load each story dynamically.
   // eslint-disable-next-line @typescript-eslint/return-await
-  return await toImportFn(options.projectRoot || process.cwd(), stories);
+  return await toImportFn(stories);
 }