Merge pull request #1035 from storybookjs/next

Create a new pull request by comparing changes across two branches

Author: GulajavaMinistudio

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

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