diff --git a/CHANGELOG.md b/CHANGELOG.md index c1a25029e92c..918bef245067 100644 --- a/CHANGELOG.md +++ b/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)! diff --git a/code/builders/builder-webpack5/src/types.ts b/code/builders/builder-webpack5/src/types.ts index 93b2c3ad9caf..69ef6edf66bb 100644 --- a/code/builders/builder-webpack5/src/types.ts +++ b/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['typescript']; +type TypeScriptOptionsBase = Partial; /** * Options for TypeScript usage within Storybook. @@ -19,7 +20,7 @@ export interface TypescriptOptions extends TypeScriptOptionsBase { checkOptions?: ConstructorParameters[0]; } -export interface StorybookConfigWebpack extends Pick { +export interface StorybookConfigWebpack extends Omit { /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). diff --git a/code/frameworks/angular/src/preset.ts b/code/frameworks/angular/src/preset.ts index f093cb6cc8b8..9bf25db2a767 100644 --- a/code/frameworks/angular/src/preset.ts +++ b/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('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, diff --git a/code/frameworks/ember/src/preset.ts b/code/frameworks/ember/src/preset.ts index 6524132780e5..747cf0cecfae 100644 --- a/code/frameworks/ember/src/preset.ts +++ b/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('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, diff --git a/code/frameworks/html-vite/src/preset.ts b/code/frameworks/html-vite/src/preset.ts index 4ae871b6e589..965ba77956a0 100644 --- a/code/frameworks/html-vite/src/preset.ts +++ b/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(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'), }; diff --git a/code/frameworks/nextjs/src/preset.ts b/code/frameworks/nextjs/src/preset.ts index e4fdd7936fb9..1d6df2b1567c 100644 --- a/code/frameworks/nextjs/src/preset.ts +++ b/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 => { - const config = await options.presets.apply('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('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 { - // eslint-disable-next-line @typescript-eslint/no-shadow - const frameworkOptions = await options.presets.apply<{ options: FrameworkOptions }>( + const { builder, nextConfigPath } = await options.presets.apply( 'frameworkOptions' ); - const { options: { nextConfigPath, builder } = {} } = frameworkOptions; + const nextConfig = await configureConfig({ baseConfig, nextConfigPath, diff --git a/code/frameworks/preact-vite/src/preset.ts b/code/frameworks/preact-vite/src/preset.ts index 2d4e18d77e90..188ffcde2f5d 100644 --- a/code/frameworks/preact-vite/src/preset.ts +++ b/code/frameworks/preact-vite/src/preset.ts @@ -7,7 +7,7 @@ import type { StorybookConfig } from './types'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/react-vite/src/preset.ts b/code/frameworks/react-vite/src/preset.ts index 207f60988ebc..1d8584db4548 100644 --- a/code/frameworks/react-vite/src/preset.ts +++ b/code/frameworks/react-vite/src/preset.ts @@ -7,7 +7,7 @@ import type { StorybookConfig } from './types'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/react-webpack5/src/preset.ts b/code/frameworks/react-webpack5/src/preset.ts index 873d214c597c..d28fe9f6cf20 100644 --- a/code/frameworks/react-webpack5/src/preset.ts +++ b/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 = (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 => { - const config = await options.presets.apply('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('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'), diff --git a/code/frameworks/svelte-vite/src/preset.ts b/code/frameworks/svelte-vite/src/preset.ts index 220812cf7c5a..de3b5f2383e2 100644 --- a/code/frameworks/svelte-vite/src/preset.ts +++ b/code/frameworks/svelte-vite/src/preset.ts @@ -8,7 +8,7 @@ import { svelteDocgen } from './plugins/svelte-docgen'; const getAbsolutePath = (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'), }; diff --git a/code/frameworks/vue3-webpack5/src/preset.ts b/code/frameworks/vue3-webpack5/src/preset.ts index 1714cc16075e..3cbc05b096e7 100644 --- a/code/frameworks/vue3-webpack5/src/preset.ts +++ b/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 = (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('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, diff --git a/code/frameworks/web-components-vite/src/preset.ts b/code/frameworks/web-components-vite/src/preset.ts index a3bb7c4d66a2..2edf8f450c75 100644 --- a/code/frameworks/web-components-vite/src/preset.ts +++ b/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 = (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'), }; diff --git a/code/lib/cli/src/generators/REACT_NATIVE/index.ts b/code/lib/cli/src/generators/REACT_NATIVE/index.ts index c2d18fb84d82..bb245cd1839b 100644 --- a/code/lib/cli/src/generators/REACT_NATIVE/index.ts +++ b/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'; diff --git a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts index 16d66ba7f6b6..f69e6b520f96 100644 --- a/code/lib/preview-api/src/modules/preview-web/UrlStore.ts +++ b/code/lib/preview-api/src/modules/preview-web/UrlStore.ts @@ -65,7 +65,7 @@ const getFirstString = (v: ValueOf): 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; diff --git a/code/lib/preview-api/src/modules/preview-web/WebView.ts b/code/lib/preview-api/src/modules/preview-web/WebView.ts index 6f02568934c3..eefa4f007856 100644 --- a/code/lib/preview-api/src/modules/preview-web/WebView.ts +++ b/code/lib/preview-api/src/modules/preview-web/WebView.ts @@ -47,7 +47,7 @@ export class WebView implements View { 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__) { diff --git a/code/lib/types/src/modules/core-common.ts b/code/lib/types/src/modules/core-common.ts index 2f7077fc5d88..b11f673d0156 100644 --- a/code/lib/types/src/modules/core-common.ts +++ b/code/lib/types/src/modules/core-common.ts @@ -67,9 +67,9 @@ interface DirectoryMapping { export interface Presets { apply( extension: 'typescript', - config: TypescriptOptions, + config: Partial, args?: Options - ): Promise; + ): Promise>; apply(extension: 'framework', config?: {}, args?: any): Promise; apply(extension: 'babel', config?: {}, args?: any): Promise; apply(extension: 'swc', config?: {}, args?: any): Promise; diff --git a/code/package.json b/code/package.json index 98ae6df4db46..ee6bf8363bdd 100644 --- a/code/package.json +++ b/code/package.json @@ -329,5 +329,6 @@ "Dependency Upgrades" ] ] - } + }, + "deferredNextVersion": "7.6.13" } diff --git a/docs/versions/latest.json b/docs/versions/latest.json index 1f2574bd8083..454fbba1c4c0 100644 --- a/docs/versions/latest.json +++ b/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)!"}} diff --git a/docs/versions/next.json b/docs/versions/next.json index 5cafa5e5cdea..f183795f3f3e 100644 --- a/docs/versions/next.json +++ b/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)!"}}