Release: Prerelease 8.5.0-beta.8

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/addons/test/src/components/TestProviderRender.tsx

@@ -355,7 +355,8 @@ export const TestProviderRender: FC<
             icon={
               state.crashed ? (
                 <TestStatusIcon status="critical" aria-label="status: crashed" />
-              ) : status === 'unknown' ? (
+              ) : // @ts-expect-error: TODO: Fix types
+              status === 'unknown' ? (
                 <TestStatusIcon status="unknown" aria-label="status: unknown" />
               ) : (
                 <TestStatusIcon status={statusMap[status]} aria-label={`status: ${status}`} />

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);
 }

code/builders/builder-vite/src/vite-config.ts

@@ -53,18 +53,18 @@ export async function commonConfig(
 
   const { viteConfigPath } = await getBuilderOptions<BuilderOptions>(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),

code/builders/builder-webpack5/package.json

@@ -64,7 +64,6 @@
   },
   "dependencies": {
     "@storybook/core-webpack": "workspace:*",
-    "@types/node": "^22.0.0",
     "@types/semver": "^7.3.4",
     "browser-assert": "^1.2.1",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
@@ -90,6 +89,7 @@
     "webpack-virtual-modules": "^0.6.0"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "@types/pretty-hrtime": "^1.0.0",
     "@types/terser-webpack-plugin": "^5.2.0",
     "@types/webpack-hot-middleware": "^2.25.6",

code/core/src/manager/components/sidebar/SidebarBottom.tsx

@@ -56,12 +56,14 @@ const Content = styled.div(({ theme }) => ({
   bottom: 0,
   left: 0,
   right: 0,
-  padding: 12,
+  padding: '12px 0',
+  margin: '0 12px',
   display: 'flex',
   flexDirection: 'column',
   gap: 12,
   color: theme.color.defaultText,
   fontSize: theme.typography.size.s1,
+  overflow: 'hidden',
 
   '&:empty': {
     display: 'none',

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

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;

code/frameworks/angular/package.json

@@ -44,7 +44,6 @@
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
     "@storybook/theming": "workspace:*",
-    "@types/node": "^22.0.0",
     "@types/react": "^18.0.37",
     "@types/react-dom": "^18.0.11",
     "@types/semver": "^7.3.4",
@@ -73,6 +72,7 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@types/cross-spawn": "^6.0.2",
+    "@types/node": "^22.0.0",
     "@types/tmp": "^0.2.3",
     "cross-spawn": "^7.0.3",
     "tmp": "^0.2.1",

code/frameworks/experimental-nextjs-vite/package.json

@@ -103,7 +103,7 @@
     "vite-plugin-storybook-nextjs": "^1.1.0"
   },
   "devDependencies": {
-    "@types/node": "^18.0.0",
+    "@types/node": "^22.0.0",
     "next": "^15.0.3",
     "typescript": "^5.3.2"
   },

code/frameworks/html-webpack5/package.json

@@ -50,10 +50,10 @@
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/global": "^5.0.0",
     "@storybook/html": "workspace:*",
-    "@storybook/preset-html-webpack": "workspace:*",
-    "@types/node": "^22.0.0"
+    "@storybook/preset-html-webpack": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/frameworks/nextjs/package.json

@@ -148,7 +148,6 @@
     "@storybook/preset-react-webpack": "workspace:*",
     "@storybook/react": "workspace:*",
     "@storybook/test": "workspace:*",
-    "@types/node": "^22.0.0",
     "@types/semver": "^7.3.4",
     "babel-loader": "^9.1.3",
     "css-loader": "^6.7.3",
@@ -175,6 +174,7 @@
     "@types/babel__plugin-transform-runtime": "^7",
     "@types/babel__preset-env": "^7",
     "@types/loader-utils": "^2.0.5",
+    "@types/node": "^22.0.0",
     "@types/react-refresh": "^0",
     "next": "^15.0.3",
     "typescript": "^5.3.2",

code/frameworks/preact-webpack5/package.json

@@ -49,10 +49,10 @@
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preact": "workspace:*",
-    "@storybook/preset-preact-webpack": "workspace:*",
-    "@types/node": "^22.0.0"
+    "@storybook/preset-preact-webpack": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "preact": "^10.5.13",
     "typescript": "^5.3.2"
   },

code/frameworks/react-native-web-vite/package.json

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

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>('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')],
       },
     },

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<ReactOptions, 'babel'> & { babel?: BabelOptions };
+  pluginBabelOptions?: BabelPluginOptions & {
+    presetReact?: {
+      [key: string]: any;
+      runtime?: 'automatic' | 'classic';
+      importSource?: string;
+    };
+  };
 };
 
 type FrameworkName = CompatibleString<'@storybook/react-native-web-vite'>;

code/frameworks/react-webpack5/package.json

@@ -49,7 +49,9 @@
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-react-webpack": "workspace:*",
-    "@storybook/react": "workspace:*",
+    "@storybook/react": "workspace:*"
+  },
+  "devDependencies": {
     "@types/node": "^22.0.0"
   },
   "peerDependencies": {

code/frameworks/server-webpack5/package.json

@@ -49,10 +49,10 @@
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-server-webpack": "workspace:*",
-    "@storybook/server": "workspace:*",
-    "@types/node": "^22.0.0"
+    "@storybook/server": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "typescript": "^5.3.2"
   },
   "peerDependencies": {

code/frameworks/vue3-webpack5/package.json

@@ -49,10 +49,10 @@
   "dependencies": {
     "@storybook/builder-webpack5": "workspace:*",
     "@storybook/preset-vue3-webpack": "workspace:*",
-    "@storybook/vue3": "workspace:*",
-    "@types/node": "^22.0.0"
+    "@storybook/vue3": "workspace:*"
   },
   "devDependencies": {
+    "@types/node": "^22.0.0",
     "@vue/compiler-sfc": "3.0.0",
     "typescript": "^5.3.2",
     "vue": "3.0.0"