Merge pull request #25843 from storybookjs/version-patch-from-7.6.12

Release: Patch 7.6.13

CHANGELOG.md

@@ -1,3 +1,10 @@
+## 7.6.13
+
+- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!
+- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!
+- Webpack: Update StorybookConfig import in core-webpack types.ts - [#25740](https://github.com/storybookjs/storybook/pull/25740), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!
+
 ## 7.6.12
 
 - CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!

code/builders/builder-webpack5/src/types.ts

@@ -3,11 +3,12 @@ import type {
   Options,
   BuilderResult as BuilderResultBase,
   StorybookConfig,
+  TypescriptOptions as WebpackTypescriptOptions,
 } from '@storybook/core-webpack';
 
 import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
 
-type TypeScriptOptionsBase = Required<StorybookConfig>['typescript'];
+type TypeScriptOptionsBase = Partial<WebpackTypescriptOptions>;
 
 /**
  * Options for TypeScript usage within Storybook.
@@ -19,7 +20,7 @@ export interface TypescriptOptions extends TypeScriptOptionsBase {
   checkOptions?: ConstructorParameters<typeof ForkTsCheckerWebpackPlugin>[0];
 }
 
-export interface StorybookConfigWebpack extends Pick<StorybookConfig, 'webpack' | 'webpackFinal'> {
+export interface StorybookConfigWebpack extends Omit<StorybookConfig, 'webpack' | 'webpackFinal'> {
   /**
    * Modify or return a custom Webpack config after the Storybook's default configuration
    * has run (mostly used by addons).

code/frameworks/angular/src/preset.ts

@@ -25,8 +25,8 @@ export const previewAnnotations: StorybookConfig['previewAnnotations'] = (
   return annotations;
 };
 
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -37,7 +37,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => {
+export const typescript: PresetProperty<'typescript'> = async (config) => {
   return {
     ...config,
     skipBabel: true,

code/frameworks/ember/src/preset.ts

@@ -1,4 +1,6 @@
 import { dirname, join } from 'path';
+import { getVirtualModules } from '@storybook/builder-webpack5';
+import { getProjectRoot, resolvePathInStorybookCache } from '@storybook/core-common';
 import type { PresetProperty } from '@storybook/types';
 import type { StorybookConfig } from './types';
 
@@ -10,8 +12,39 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   require.resolve('./server/framework-preset-ember-docs'),
 ];
 
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
+  const { virtualModules } = await getVirtualModules(options);
+
+  const babelOptions = await options.presets.apply('babel', {}, options);
+  const typescriptOptions = await options.presets.apply('typescript', {}, options);
+
+  return {
+    ...baseConfig,
+    module: {
+      ...baseConfig.module,
+      rules: [
+        ...(baseConfig.module?.rules ?? []),
+        {
+          test: typescriptOptions.skipCompiler ? /\.((c|m)?jsx?)$/ : /\.((c|m)?(j|t)sx?)$/,
+          use: [
+            {
+              loader: require.resolve('babel-loader'),
+              options: {
+                cacheDirectory: resolvePathInStorybookCache('babel'),
+                ...babelOptions,
+              },
+            },
+          ],
+          include: [getProjectRoot()],
+          exclude: [/node_modules/, ...Object.keys(virtualModules)],
+        },
+      ],
+    },
+  };
+};
+
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,

code/frameworks/html-vite/src/preset.ts

@@ -1,12 +1,11 @@
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
-import type { StorybookConfig } from './types';
 
 function getAbsolutePath<I extends string>(value: I): I {
   return dirname(require.resolve(join(value, 'package.json'))) as any;
 }
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/html'),
 };

code/frameworks/nextjs/src/preset.ts

@@ -1,6 +1,6 @@
 // https://storybook.js.org/docs/react/addons/writing-presets
 import { dirname, join } from 'path';
-import type { Options, PresetProperty } from '@storybook/types';
+import type { PresetProperty } from '@storybook/types';
 import type { ConfigItem, PluginItem, TransformOptions } from '@babel/core';
 import { loadPartialConfig } from '@babel/core';
 import { getProjectRoot } from '@storybook/core-common';
@@ -23,38 +23,8 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   dirname(require.resolve(join('@storybook/preset-react-webpack', 'package.json'))),
 ];
 
-const defaultFrameworkOptions: FrameworkOptions = {};
-
-export const frameworkOptions = async (
-  _: never,
-  options: Options
-): Promise<StorybookConfig['framework']> => {
-  const config = await options.presets.apply<StorybookConfig['framework']>('framework');
-
-  if (typeof config === 'string') {
-    return {
-      name: config,
-      options: defaultFrameworkOptions,
-    };
-  }
-  if (typeof config === 'undefined') {
-    return {
-      name: require.resolve('@storybook/nextjs') as '@storybook/nextjs',
-      options: defaultFrameworkOptions,
-    };
-  }
-
-  return {
-    name: config.name,
-    options: {
-      ...defaultFrameworkOptions,
-      ...config.options,
-    },
-  };
-};
-
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -134,11 +104,10 @@ export const babel = async (baseConfig: TransformOptions): Promise<TransformOpti
 };
 
 export const webpackFinal: StorybookConfig['webpackFinal'] = async (baseConfig, options) => {
-  // eslint-disable-next-line @typescript-eslint/no-shadow
-  const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>(
+  const { builder, nextConfigPath } = await options.presets.apply<FrameworkOptions>(
     'frameworkOptions'
   );
-  const { options: { nextConfigPath, builder } = {} } = frameworkOptions;
+
   const nextConfig = await configureConfig({
     baseConfig,
     nextConfigPath,

code/frameworks/preact-vite/src/preset.ts

@@ -7,7 +7,7 @@ import type { StorybookConfig } from './types';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/preact'),
 };

code/frameworks/react-vite/src/preset.ts

@@ -7,7 +7,7 @@ import type { StorybookConfig } from './types';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/react'),
 };

code/frameworks/react-webpack5/src/preset.ts

@@ -1,8 +1,6 @@
-/* eslint-disable no-param-reassign */
-
 import { dirname, join } from 'path';
-import type { PresetProperty, Options } from '@storybook/types';
-import type { FrameworkOptions, StorybookConfig } from './types';
+import type { PresetProperty } from '@storybook/types';
+import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
@@ -11,40 +9,8 @@ export const addons: PresetProperty<'addons', StorybookConfig> = [
   getAbsolutePath('@storybook/preset-react-webpack'),
 ];
 
-const defaultFrameworkOptions: FrameworkOptions = {
-  legacyRootApi: true,
-};
-
-export const frameworkOptions = async (
-  _: never,
-  options: Options
-): Promise<StorybookConfig['framework']> => {
-  const config = await options.presets.apply<StorybookConfig['framework']>('framework');
-
-  if (typeof config === 'string') {
-    return {
-      name: config,
-      options: defaultFrameworkOptions,
-    };
-  }
-  if (typeof config === 'undefined') {
-    return {
-      name: getAbsolutePath('@storybook/react-webpack5'),
-      options: defaultFrameworkOptions,
-    };
-  }
-
-  return {
-    name: config.name,
-    options: {
-      ...defaultFrameworkOptions,
-      ...config.options,
-    },
-  };
-};
-
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -57,8 +23,10 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
 };
 
 export const webpack: StorybookConfig['webpack'] = async (config) => {
+  // eslint-disable-next-line no-param-reassign
   config.resolve = config.resolve || {};
 
+  // eslint-disable-next-line no-param-reassign
   config.resolve.alias = {
     ...config.resolve?.alias,
     '@storybook/react': getAbsolutePath('@storybook/react'),

code/frameworks/svelte-vite/src/preset.ts

@@ -8,7 +8,7 @@ import { svelteDocgen } from './plugins/svelte-docgen';
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/svelte'),
 };

code/frameworks/vue3-webpack5/src/preset.ts

@@ -1,16 +1,13 @@
 import { dirname, join } from 'path';
 import type { PresetProperty } from '@storybook/types';
-import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const addons: PresetProperty<'addons', StorybookConfig> = [
-  getAbsolutePath('@storybook/preset-vue3-webpack'),
-];
+export const addons: PresetProperty<'addons'> = [getAbsolutePath('@storybook/preset-vue3-webpack')];
 
-export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => {
-  const framework = await options.presets.apply<StorybookConfig['framework']>('framework');
+export const core: PresetProperty<'core'> = async (config, options) => {
+  const framework = await options.presets.apply('framework');
 
   return {
     ...config,
@@ -22,7 +19,7 @@ export const core: PresetProperty<'core', StorybookConfig> = async (config, opti
   };
 };
 
-export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => ({
+export const typescript: PresetProperty<'typescript'> = async (config) => ({
   ...config,
   skipBabel: true,
   skipCompiler: true,

code/frameworks/web-components-vite/src/preset.ts

@@ -1,11 +1,10 @@
 import type { PresetProperty } from '@storybook/types';
 import { dirname, join } from 'path';
-import type { StorybookConfig } from './types';
 
 const getAbsolutePath = <I extends string>(input: I): I =>
   dirname(require.resolve(join(input, 'package.json'))) as any;
 
-export const core: PresetProperty<'core', StorybookConfig> = {
+export const core: PresetProperty<'core'> = {
   builder: getAbsolutePath('@storybook/builder-vite'),
   renderer: getAbsolutePath('@storybook/web-components'),
 };

code/lib/cli/src/generators/REACT_NATIVE/index.ts

@@ -14,12 +14,15 @@ const generator = async (
 
   const reactVersion = packageJson.dependencies.react;
 
-  const packagesToResolve = [
-    // addon-ondevice-controls peer deps
+  const controlsPeerDependencies = [
     'react-native-safe-area-context',
     '@react-native-async-storage/async-storage',
     '@react-native-community/datetimepicker',
     '@react-native-community/slider',
+  ].filter((dep) => !packageJson.dependencies[dep] && !packageJson.devDependencies[dep]);
+
+  const packagesToResolve = [
+    ...controlsPeerDependencies,
     '@storybook/addon-ondevice-controls',
     '@storybook/addon-ondevice-actions',
     '@storybook/react-native',
@@ -47,7 +50,6 @@ const generator = async (
 
   packageManager.addScripts({
     'storybook-generate': 'sb-rn-get-stories',
-    'storybook-watch': 'sb-rn-watcher',
   });
 
   const storybookConfigFolder = '.storybook';

code/lib/preview-api/src/modules/preview-web/UrlStore.ts

@@ -65,7 +65,7 @@ const getFirstString = (v: ValueOf<qs.ParsedQs>): string | void => {
 };
 
 export const getSelectionSpecifierFromPath: () => SelectionSpecifier | null = () => {
-  const query = qs.parse(document.location.search, { ignoreQueryPrefix: true });
+  const query = qs.parse(document?.location?.search, { ignoreQueryPrefix: true });
   const args = typeof query.args === 'string' ? parseArgsParam(query.args) : undefined;
   const globals = typeof query.globals === 'string' ? parseArgsParam(query.globals) : undefined;
 

code/lib/preview-api/src/modules/preview-web/WebView.ts

@@ -47,7 +47,7 @@ export class WebView implements View<HTMLElement> {
   constructor() {
     // Special code for testing situations
     // eslint-disable-next-line @typescript-eslint/naming-convention
-    const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document.location.search, {
+    const { __SPECIAL_TEST_PARAMETER__ } = qs.parse(document?.location?.search, {
       ignoreQueryPrefix: true,
     });
     switch (__SPECIAL_TEST_PARAMETER__) {

code/lib/types/src/modules/core-common.ts

@@ -67,9 +67,9 @@ interface DirectoryMapping {
 export interface Presets {
   apply(
     extension: 'typescript',
-    config: TypescriptOptions,
+    config: Partial<TypescriptOptions>,
     args?: Options
-  ): Promise<TypescriptOptions>;
+  ): Promise<Partial<TypescriptOptions>>;
   apply(extension: 'framework', config?: {}, args?: any): Promise<Preset>;
   apply(extension: 'babel', config?: {}, args?: any): Promise<BabelOptions>;
   apply(extension: 'swc', config?: {}, args?: any): Promise<SWCOptions>;

code/package.json

@@ -329,5 +329,6 @@
         "Dependency Upgrades"
       ]
     ]
-  }
+  },
+  "deferredNextVersion": "7.6.13"
 }

docs/versions/latest.json

@@ -1 +1 @@
-{"version":"7.6.12","info":{"plain":"- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!"}}
+{"version":"7.6.13","info":{"plain":"- Next.js: Fix frameworkOptions resolution - [#25907](https://github.com/storybookjs/storybook/pull/25907), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!\n- React Native: Fix init fails when package is already installed - [#25908](https://github.com/storybookjs/storybook/pull/25908), thanks [@dannyhw](https://github.com/dannyhw)!\n- React Native: Remove watcher from init - [#25895](https://github.com/storybookjs/storybook/pull/25895), thanks [@dannyhw](https://github.com/dannyhw)!\n- Webpack: Update StorybookConfig import in core-webpack types.ts - [#25740](https://github.com/storybookjs/storybook/pull/25740), thanks [@valentinpalkovic](https://github.com/valentinpalkovic)!"}}

docs/versions/next.json

@@ -1 +1 @@
-{"version":"8.0.0-alpha.16","info":{"plain":"- CLI: Fix `upgrade` detecting the wrong version of existing Storybooks - [#25752](https://github.com/storybookjs/storybook/pull/25752), thanks [@JReinhold](https://github.com/JReinhold)!\n- CLI: Update init for react native v7 - [#25780](https://github.com/storybookjs/storybook/pull/25780), thanks [@dannyhw](https://github.com/dannyhw)!\n- UI: Improve how the addon panel work on mobile - [#25787](https://github.com/storybookjs/storybook/pull/25787), thanks [@cdedreuille](https://github.com/cdedreuille)!"}}
+{"version":"8.0.0-beta.0","info":{"plain":"- CLI: Add Visual Tests addon to `init` - [#25850](https://github.com/storybookjs/storybook/pull/25850), thanks [@shilman](https://github.com/shilman)!\n- CLI: Upgrade boxen library - [#25713](https://github.com/storybookjs/storybook/pull/25713), thanks [@yannbf](https://github.com/yannbf)!\n- UI: Fix custom tabs not showing in the manager - [#25792](https://github.com/storybookjs/storybook/pull/25792), thanks [@ndelangen](https://github.com/ndelangen)!"}}