From 37e814a8be48aabf0fac07f03ddef3e0efcb98dd Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Jun 2022 16:24:35 +0200 Subject: [PATCH 01/34] let's structure out framework types and presets. They cascade into each other Also map framework.options.builder into core.builder.options --- frameworks/angular/src/preset.ts | 30 ++++---- frameworks/angular/src/types.ts | 54 +++++++++++--- frameworks/ember/src/preset.ts | 17 ++++- frameworks/ember/src/types.ts | 49 +++++++++++++ frameworks/html-webpack5/src/preset.ts | 21 ++++-- frameworks/html-webpack5/src/types.ts | 45 ++++++++++++ frameworks/preact-webpack5/src/preset.ts | 21 ++++-- frameworks/preact-webpack5/src/types.ts | 45 ++++++++++++ frameworks/react-webpack5/src/preset.ts | 18 +++-- frameworks/react-webpack5/src/types.ts | 73 +++++++++---------- frameworks/server-webpack5/src/preset.ts | 21 ++++-- frameworks/server-webpack5/src/types.ts | 45 ++++++++++++ frameworks/svelte-webpack5/src/preset.ts | 21 ++++-- frameworks/svelte-webpack5/src/types.ts | 45 ++++++++++++ frameworks/vue-webpack5/src/index.ts | 1 + frameworks/vue-webpack5/src/preset.ts | 21 ++++-- frameworks/vue-webpack5/src/types.ts | 45 ++++++++++++ frameworks/vue3-webpack5/src/preset.ts | 21 ++++-- frameworks/vue3-webpack5/src/types.ts | 45 ++++++++++++ .../web-components-webpack5/src/preset.ts | 21 ++++-- .../web-components-webpack5/src/types.ts | 43 ++++++++++- .../src/preview/base-webpack.config.ts | 8 +- lib/builder-webpack5/src/types.ts | 26 ++++--- lib/core-common/src/types.ts | 42 +++++------ lib/core-webpack/src/merge-webpack-config.ts | 2 +- lib/core-webpack/src/types.ts | 24 +++--- presets/html-webpack/src/index.ts | 4 +- presets/html-webpack/src/types.ts | 12 +++ presets/preact-webpack/src/index.ts | 4 +- presets/preact-webpack/src/types.ts | 12 +++ .../src/framework-preset-react.ts | 4 +- presets/react-webpack/src/types.ts | 29 ++------ presets/server-webpack/src/index.ts | 6 +- presets/server-webpack/src/types.ts | 12 +++ presets/svelte-webpack/src/index.ts | 4 +- presets/svelte-webpack/src/types.ts | 12 +++ presets/vue-webpack/src/index.ts | 4 +- presets/vue-webpack/src/types.ts | 12 +++ presets/vue3-webpack/src/index.ts | 4 +- presets/vue3-webpack/src/types.ts | 12 +++ presets/web-components-webpack/src/types.ts | 8 +- 41 files changed, 744 insertions(+), 199 deletions(-) create mode 100644 frameworks/ember/src/types.ts create mode 100644 frameworks/html-webpack5/src/types.ts create mode 100644 frameworks/preact-webpack5/src/types.ts create mode 100644 frameworks/server-webpack5/src/types.ts create mode 100644 frameworks/svelte-webpack5/src/types.ts create mode 100644 frameworks/vue-webpack5/src/types.ts create mode 100644 frameworks/vue3-webpack5/src/types.ts create mode 100644 presets/html-webpack/src/types.ts create mode 100644 presets/preact-webpack/src/types.ts create mode 100644 presets/server-webpack/src/types.ts create mode 100644 presets/svelte-webpack/src/types.ts create mode 100644 presets/vue-webpack/src/types.ts create mode 100644 presets/vue3-webpack/src/types.ts diff --git a/frameworks/angular/src/preset.ts b/frameworks/angular/src/preset.ts index 0aa9bc0af645..471763718e6b 100644 --- a/frameworks/angular/src/preset.ts +++ b/frameworks/angular/src/preset.ts @@ -1,30 +1,34 @@ import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; import { StorybookConfig } from './types'; -export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ - ...entries, - require.resolve('./client/preview/config'), -]; - -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-angular'), require.resolve('./server/framework-preset-angular-cli'), require.resolve('./server/framework-preset-angular-ivy'), require.resolve('./server/framework-preset-angular-docs'), ]; -export const core = async (config: StorybookConfig['core']) => { +export const previewAnnotations: StorybookConfig['previewAnnotations'] = (entries = []) => [ + ...entries, + require.resolve('./client/preview/config'), +]; + +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: path.dirname( - require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) - ), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; -export const typescript = async ( - config: StorybookConfig['typescript'] -): Promise => { +export const typescript: PresetProperty<'typescript', StorybookConfig> = async (config) => { return { ...config, skipBabel: true, diff --git a/frameworks/angular/src/types.ts b/frameworks/angular/src/types.ts index a7dca6ee1ce0..1f92cd78c3f2 100644 --- a/frameworks/angular/src/types.ts +++ b/frameworks/angular/src/types.ts @@ -1,17 +1,49 @@ -import type { StorybookConfig as BaseConfig } from '@storybook/core-common'; +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/core-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -export interface AngularOptions { - enableIvy: boolean; -} +type FrameworkName = '@storybook/react-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; -/** - * The interface for Storybook configuration in `main.ts` files. - */ -export interface StorybookConfig extends BaseConfig { +export type FrameworkOptions = AngularOptions & { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { framework: - | string + | FrameworkName | { - name: '@storybook/angular'; - options: AngularOptions; + name: FrameworkName; + options: FrameworkOptions; }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; + +export interface AngularOptions { + enableIvy: boolean; } diff --git a/frameworks/ember/src/preset.ts b/frameworks/ember/src/preset.ts index 576a6101279e..422f2a750758 100644 --- a/frameworks/ember/src/preset.ts +++ b/frameworks/ember/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ require.resolve('./server/framework-preset-babel-ember'), require.resolve('./server/framework-preset-ember-docs'), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts new file mode 100644 index 000000000000..78a870c98f6e --- /dev/null +++ b/frameworks/ember/src/types.ts @@ -0,0 +1,49 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/core-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/ember-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = AngularOptions & { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; + +export interface AngularOptions { + enableIvy: boolean; +} diff --git a/frameworks/html-webpack5/src/preset.ts b/frameworks/html-webpack5/src/preset.ts index db11d82a2235..8bec5e5d2428 100644 --- a/frameworks/html-webpack5/src/preset.ts +++ b/frameworks/html-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-html-webpack', - '@storybook/html', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-html-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/html', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/html-webpack5/src/types.ts b/frameworks/html-webpack5/src/types.ts new file mode 100644 index 000000000000..2360ef4ac9e6 --- /dev/null +++ b/frameworks/html-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-html-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/html-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/preact-webpack5/src/preset.ts b/frameworks/preact-webpack5/src/preset.ts index 051cf6499c74..82aee136ba32 100644 --- a/frameworks/preact-webpack5/src/preset.ts +++ b/frameworks/preact-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-preact-webpack', - '@storybook/preact', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-preact-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/preact', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/preact-webpack5/src/types.ts b/frameworks/preact-webpack5/src/types.ts new file mode 100644 index 000000000000..2d66b8576166 --- /dev/null +++ b/frameworks/preact-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-preact-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/preact-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/react-webpack5/src/preset.ts b/frameworks/react-webpack5/src/preset.ts index 67f02b764f90..2d45fcac0e4b 100644 --- a/frameworks/react-webpack5/src/preset.ts +++ b/frameworks/react-webpack5/src/preset.ts @@ -1,17 +1,23 @@ -import type { StorybookConfig } from '@storybook/preset-react-webpack'; import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ +export const addons: PresetProperty<'addons', StorybookConfig> = [ path.dirname(require.resolve(path.join('@storybook/preset-react-webpack', 'package.json'))), path.dirname(require.resolve(path.join('@storybook/react', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: path.dirname( - require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) - ), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/react-webpack5/src/types.ts b/frameworks/react-webpack5/src/types.ts index da42bb496949..7e50ef23aba4 100644 --- a/frameworks/react-webpack5/src/types.ts +++ b/frameworks/react-webpack5/src/types.ts @@ -1,49 +1,46 @@ -import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { Configuration } from 'webpack'; +import type { + ReactOptions, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-react-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -import type { StorybookConfig as BaseStorybookConfig } from '@storybook/preset-react-webpack'; +type FrameworkName = '@storybook/react-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; -export type { BuilderResult } from '@storybook/preset-react-webpack'; - -/** - * Options for TypeScript usage within Storybook. - */ -export type TypescriptOptions = BaseStorybookConfig['typescript'] & { - /** - * Configures `fork-ts-checker-webpack-plugin` - */ - checkOptions: ForkTsCheckerWebpackPlugin['options']; +export type FrameworkOptions = ReactOptions & { + builder?: BuilderOptions; }; -export interface StorybookTypescriptConfig { - typescript?: Partial; -} - -export interface ReactOptions { - fastRefresh?: boolean; - strictMode?: boolean; - /** - * Use React's legacy root API to mount components - * @description - * React has introduced a new root API with React 18.x to enable a whole set of new features (e.g. concurrent features) - * If this flag is true, the legacy Root API is used to mount components to make it easier to migrate step by step to React 18. - * @default false - */ - legacyRootApi?: boolean; -} - -export interface StorybookReactConfig { +type StorybookConfigFramework = { framework: - | string + | FrameworkName | { - name: '@storybook/react-webpack5'; - options: ReactOptions; + name: FrameworkName; + options: FrameworkOptions; }; -} + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; /** * The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = BaseStorybookConfig & - StorybookReactConfig & - StorybookTypescriptConfig; +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/server-webpack5/src/preset.ts b/frameworks/server-webpack5/src/preset.ts index 83f04f5bf4ed..d65800229c43 100644 --- a/frameworks/server-webpack5/src/preset.ts +++ b/frameworks/server-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-server-webpack', - '@storybook/server', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-server-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/server', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/server-webpack5/src/types.ts b/frameworks/server-webpack5/src/types.ts new file mode 100644 index 000000000000..63ecb28ab897 --- /dev/null +++ b/frameworks/server-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-server-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/server-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/svelte-webpack5/src/preset.ts b/frameworks/svelte-webpack5/src/preset.ts index bc7fd8430897..28a722442e99 100644 --- a/frameworks/svelte-webpack5/src/preset.ts +++ b/frameworks/svelte-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-svelte-webpack', - '@storybook/svelte', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-svelte-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/svelte', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/svelte-webpack5/src/types.ts b/frameworks/svelte-webpack5/src/types.ts new file mode 100644 index 000000000000..0a91a311d498 --- /dev/null +++ b/frameworks/svelte-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-svelte-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/svelte-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/vue-webpack5/src/index.ts b/frameworks/vue-webpack5/src/index.ts index 12ce4f50a71a..e9de1f241dd5 100644 --- a/frameworks/vue-webpack5/src/index.ts +++ b/frameworks/vue-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/vue'; +export * from './types'; diff --git a/frameworks/vue-webpack5/src/preset.ts b/frameworks/vue-webpack5/src/preset.ts index 7c1ad1aa9ec4..07ee35af0511 100644 --- a/frameworks/vue-webpack5/src/preset.ts +++ b/frameworks/vue-webpack5/src/preset.ts @@ -1,14 +1,23 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-vue-webpack', - '@storybook/vue', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-vue-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/vue', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/vue-webpack5/src/types.ts b/frameworks/vue-webpack5/src/types.ts new file mode 100644 index 000000000000..7a1c993d8791 --- /dev/null +++ b/frameworks/vue-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-vue-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/vue-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/vue3-webpack5/src/preset.ts b/frameworks/vue3-webpack5/src/preset.ts index f4aa25353a41..7babf251a76d 100644 --- a/frameworks/vue3-webpack5/src/preset.ts +++ b/frameworks/vue3-webpack5/src/preset.ts @@ -1,13 +1,22 @@ -import type { StorybookConfig } from '@storybook/core-common'; +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; +import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-vue3-webpack', - '@storybook/vue3', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname(require.resolve(path.join('@storybook/preset-vue3-webpack', 'package.json'))), + path.dirname(require.resolve(path.join('@storybook/vue3', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/vue3-webpack5/src/types.ts b/frameworks/vue3-webpack5/src/types.ts new file mode 100644 index 000000000000..bdae08526600 --- /dev/null +++ b/frameworks/vue3-webpack5/src/types.ts @@ -0,0 +1,45 @@ +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsReact, +} from '@storybook/preset-vue3-webpack'; +import type { + StorybookConfigWebpack, + BuilderOptions, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; + +type FrameworkName = '@storybook/vue3-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; + +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; + +/** + * The interface for Storybook configuration in `main.ts` files. + */ +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/frameworks/web-components-webpack5/src/preset.ts b/frameworks/web-components-webpack5/src/preset.ts index 493946ec636d..310c48ec7aec 100644 --- a/frameworks/web-components-webpack5/src/preset.ts +++ b/frameworks/web-components-webpack5/src/preset.ts @@ -1,13 +1,24 @@ +import path from 'path'; +import type { PresetProperty } from '@storybook/core-common'; import type { StorybookConfig } from './types'; -export const addons: StorybookConfig['addons'] = [ - '@storybook/preset-web-components-webpack', - '@storybook/web-components', +export const addons: PresetProperty<'addons', StorybookConfig> = [ + path.dirname( + require.resolve(path.join('@storybook/preset-web-components-webpack', 'package.json')) + ), + path.dirname(require.resolve(path.join('@storybook/web-components', 'package.json'))), ]; -export const core = async (config: StorybookConfig['core']) => { +export const core: PresetProperty<'core', StorybookConfig> = async (config, options) => { + const framework = await options.presets.apply('framework'); + return { ...config, - builder: require.resolve('@storybook/builder-webpack5'), + builder: { + name: path.dirname( + require.resolve(path.join('@storybook/builder-webpack5', 'package.json')) + ) as '@storybook/builder-webpack5', + options: typeof framework === 'string' ? {} : framework.options.builder || {}, + }, }; }; diff --git a/frameworks/web-components-webpack5/src/types.ts b/frameworks/web-components-webpack5/src/types.ts index 6ff16fef86bd..d39175fa711f 100644 --- a/frameworks/web-components-webpack5/src/types.ts +++ b/frameworks/web-components-webpack5/src/types.ts @@ -1,10 +1,45 @@ -import type { Configuration } from 'webpack'; +import type { + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsWebComponents, +} from '@storybook/preset-web-components-webpack'; +import type { + BuilderOptions, + StorybookConfigWebpack, + TypescriptOptions as TypescriptOptionsBuilder, +} from '@storybook/builder-webpack5'; -import type { StorybookConfig as BaseStorybookConfig } from '@storybook/preset-web-components-webpack'; +type FrameworkName = '@storybook/react-webpack5'; +type BuilderName = '@storybook/builder-webpack5'; -export type { BuilderResult } from '@storybook/preset-web-components-webpack'; +export type FrameworkOptions = { + builder?: BuilderOptions; +}; + +type StorybookConfigFramework = { + framework: + | FrameworkName + | { + name: FrameworkName; + options: FrameworkOptions; + }; + core?: StorybookConfigBase['core'] & { + builder?: + | BuilderName + | { + name: BuilderName; + options: BuilderOptions; + }; + }; + typescript?: Partial & + StorybookConfigBase['typescript']; +}; /** * The interface for Storybook configuration in `main.ts` files. */ -export type StorybookConfig = BaseStorybookConfig; +export type StorybookConfig = Omit< + StorybookConfigBase, + keyof StorybookConfigWebpack | keyof StorybookConfigFramework +> & + StorybookConfigWebpack & + StorybookConfigFramework; diff --git a/lib/builder-webpack5/src/preview/base-webpack.config.ts b/lib/builder-webpack5/src/preview/base-webpack.config.ts index 6a85c2a67112..26e871ca0c20 100644 --- a/lib/builder-webpack5/src/preview/base-webpack.config.ts +++ b/lib/builder-webpack5/src/preview/base-webpack.config.ts @@ -1,6 +1,7 @@ import { logger } from '@storybook/node-logger'; -import type { Options, CoreConfig, Webpack5BuilderConfig } from '@storybook/core-common'; +import type { Options, CoreConfig } from '@storybook/core-common'; import type { Configuration } from 'webpack'; +import type { BuilderOptions } from '../types'; export async function createDefaultWebpackConfig( storybookBaseConfig: Configuration, @@ -45,7 +46,10 @@ export async function createDefaultWebpackConfig( const isProd = storybookBaseConfig.mode !== 'development'; const coreOptions = await options.presets.apply('core'); - const builderOptions = (coreOptions.builder as Webpack5BuilderConfig)?.options || {}; + const builderOptions: BuilderOptions = + typeof coreOptions.builder === 'string' + ? {} + : coreOptions.builder?.options || ({} as BuilderOptions); const cacheConfig = builderOptions.fsCache ? { cache: { type: 'filesystem' as const } } : {}; const lazyCompilationConfig = builderOptions.lazyCompilation && !isProd ? { lazyCompilation: { entries: false } } : {}; diff --git a/lib/builder-webpack5/src/types.ts b/lib/builder-webpack5/src/types.ts index 69b7e67ea8e4..42d9dad5c707 100644 --- a/lib/builder-webpack5/src/types.ts +++ b/lib/builder-webpack5/src/types.ts @@ -1,16 +1,19 @@ -import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { PluginOptions } from '@storybook/react-docgen-typescript-plugin'; import type { Configuration, Stats } from 'webpack'; import type { Options, - TypescriptOptions as BaseTypescriptOptions, - BuilderResult as BaseBuilderResult, -} from '@storybook/core-common'; + BuilderResult as BuilderResultBase, + StorybookConfig, +} from '@storybook/core-webpack'; + +import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; +import type { PluginOptions as DocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin'; + +type TypeScriptOptionsBase = Required['typescript']; /** * Options for TypeScript usage within Storybook. */ -export interface TypescriptOptions extends BaseTypescriptOptions { +export interface TypescriptOptions extends TypeScriptOptionsBase { /** * Configures `fork-ts-checker-webpack-plugin` */ @@ -27,10 +30,10 @@ export interface TypescriptOptions extends BaseTypescriptOptions { * @default * @see https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack5/src/config/defaults.js#L4-L6 */ - reactDocgenTypescriptOptions: PluginOptions; + reactDocgenTypescriptOptions: DocgenTypescriptOptions; } -export interface StorybookWebpackConfig { +export interface StorybookConfigWebpack extends Pick { /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). @@ -46,6 +49,11 @@ export interface StorybookWebpackConfig { ) => Configuration | Promise; } -export interface BuilderResult extends BaseBuilderResult { +export type BuilderOptions = { + fsCache?: boolean; + lazyCompilation?: boolean; +}; + +export interface BuilderResult extends BuilderResultBase { stats?: Stats; } diff --git a/lib/core-common/src/types.ts b/lib/core-common/src/types.ts index 3f06092a6773..4726da6fa4f2 100644 --- a/lib/core-common/src/types.ts +++ b/lib/core-common/src/types.ts @@ -10,31 +10,13 @@ import { FileSystemCache } from './utils/file-cache'; export type BuilderName = 'webpack5' | '@storybook/builder-webpack5' | string; -export type BuilderConfigObject = { - name: BuilderName; - options?: Record; -}; - -export interface Webpack5BuilderConfig extends BuilderConfigObject { - name: '@storybook/builder-webpack5'; - options?: { - fsCache?: boolean; - lazyCompilation?: boolean; - }; -} - -export interface Webpack4BuilderConfig extends BuilderConfigObject { - name: '@storybook/builder-webpack5'; -} - -export type BuilderConfig = - | BuilderName - | BuilderConfigObject - | Webpack4BuilderConfig - | Webpack5BuilderConfig; - export interface CoreConfig { - builder?: BuilderConfig; + builder?: + | BuilderName + | { + name: BuilderName; + options?: Record; + }; disableWebpackDefaults?: boolean; channelOptions?: Partial; /** @@ -72,6 +54,7 @@ export interface Presets { config: TypescriptOptions, args?: Options ): Promise; + apply(extension: 'framework', config: {}, args: any): Promise; apply(extension: 'babel', config: {}, args: any): Promise; apply(extension: 'entries', config: [], args: any): Promise; apply(extension: 'stories', config: [], args: any): Promise; @@ -439,3 +422,14 @@ export interface StorybookConfig { */ storyIndexers?: (indexers: StoryIndexer[], options: Options) => StoryIndexer[]; } + +export type PresetProperty = + | TStorybookConfig[K extends keyof TStorybookConfig ? K : never] + | PresetPropertyFn; + +export type PresetPropertyFn = ( + config: TStorybookConfig[K extends keyof TStorybookConfig ? K : never], + options: Options & TOptions +) => + | TStorybookConfig[K extends keyof TStorybookConfig ? K : never] + | Promise; diff --git a/lib/core-webpack/src/merge-webpack-config.ts b/lib/core-webpack/src/merge-webpack-config.ts index f7b13a78e28f..b3a1afa51085 100644 --- a/lib/core-webpack/src/merge-webpack-config.ts +++ b/lib/core-webpack/src/merge-webpack-config.ts @@ -1,5 +1,5 @@ import type { - CommonWebpackConfiguration as Configuration, + WebpackConfiguration as Configuration, ModuleConfig, ResolveConfig, RulesConfig, diff --git a/lib/core-webpack/src/types.ts b/lib/core-webpack/src/types.ts index 825b49e93dc5..d7819b0f995f 100644 --- a/lib/core-webpack/src/types.ts +++ b/lib/core-webpack/src/types.ts @@ -1,4 +1,4 @@ -import type { Options, StorybookConfig as BaseStorybookConfig } from '@storybook/core-common'; +import type { Options, StorybookConfig as StorybookConfigBase } from '@storybook/core-common'; export type { Options, Preset, BuilderResult, TypescriptOptions } from '@storybook/core-common'; @@ -10,33 +10,33 @@ export type ModuleConfig = { export type ResolveConfig = { extensions?: string[]; - mainFields?: string[] | string[][]; + mainFields?: (string | string[])[] | undefined; alias?: any; }; -export interface CommonWebpackConfiguration { +export interface WebpackConfiguration { plugins?: any[]; module?: ModuleConfig; resolve?: ResolveConfig; optimization?: any; - devtool?: boolean | string; + devtool?: false | string; } -export interface StorybookWebpackConfig { +export type StorybookConfig = StorybookConfigBase & { /** * Modify or return a custom Webpack config after the Storybook's default configuration * has run (mostly used by addons). */ - webpack?: (config: TConfiguration, options: Options) => TConfiguration | Promise; + webpack?: ( + config: TWebpackConfiguration, + options: Options + ) => TWebpackConfiguration | Promise; /** * Modify or return a custom Webpack config after every addon has run. */ webpackFinal?: ( - config: TConfiguration, + config: TWebpackConfiguration, options: Options - ) => TConfiguration | Promise; -} - -export type StorybookConfig = - BaseStorybookConfig & StorybookWebpackConfig; + ) => TWebpackConfiguration | Promise; +}; diff --git a/presets/html-webpack/src/index.ts b/presets/html-webpack/src/index.ts index 67a7f56f17e2..8d1693b45d46 100644 --- a/presets/html-webpack/src/index.ts +++ b/presets/html-webpack/src/index.ts @@ -1,4 +1,6 @@ -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const webpack: StorybookConfig['webpack'] = (config) => { const rules = [ diff --git a/presets/html-webpack/src/types.ts b/presets/html-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/html-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/preact-webpack/src/index.ts b/presets/preact-webpack/src/index.ts index feda087f1876..fb3c24140dc1 100644 --- a/presets/preact-webpack/src/index.ts +++ b/presets/preact-webpack/src/index.ts @@ -1,5 +1,7 @@ import path from 'path'; -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const babelDefault: StorybookConfig['babelDefault'] = (config) => { return { diff --git a/presets/preact-webpack/src/types.ts b/presets/preact-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/preact-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/react-webpack/src/framework-preset-react.ts b/presets/react-webpack/src/framework-preset-react.ts index b49408eaf9a5..9e2d2da520d9 100644 --- a/presets/react-webpack/src/framework-preset-react.ts +++ b/presets/react-webpack/src/framework-preset-react.ts @@ -3,8 +3,8 @@ import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; import { logger } from '@storybook/node-logger'; -import type { StorybookConfig, Options, Preset } from '@storybook/core-webpack'; -import type { ReactOptions } from './types'; +import type { Options, Preset } from '@storybook/core-webpack'; +import type { StorybookConfig, ReactOptions } from './types'; const useFastRefresh = async (options: Options) => { const isDevelopment = options.configType === 'DEVELOPMENT'; diff --git a/presets/react-webpack/src/types.ts b/presets/react-webpack/src/types.ts index 6d288e7b0ed0..3582aea5d7b2 100644 --- a/presets/react-webpack/src/types.ts +++ b/presets/react-webpack/src/types.ts @@ -1,7 +1,7 @@ import type { - CommonWebpackConfiguration, - StorybookConfig as BaseStorybookConfig, - TypescriptOptions as BaseTypescriptOptions, + WebpackConfiguration as WebpackConfigurationBase, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as TypescriptOptionsBase, } from '@storybook/core-webpack'; import type { PluginOptions as ReactDocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin'; @@ -20,19 +20,7 @@ export interface ReactOptions { legacyRootApi?: boolean; } -/** - * The interface for Storybook configuration in `main.ts` files. - */ -export interface ReactConfig { - framework: - | string - | { - name: '@storybook/react'; - options: ReactOptions; - }; -} - -export type TypescriptOptions = BaseTypescriptOptions & { +export type TypescriptOptions = TypescriptOptionsBase & { /** * Sets the type of Docgen when working with React and TypeScript * @@ -48,8 +36,7 @@ export type TypescriptOptions = BaseTypescriptOptions & { reactDocgenTypescriptOptions: ReactDocgenTypescriptOptions; }; -export type StorybookConfig = - BaseStorybookConfig & - ReactConfig & { - typescript?: Partial; - }; +export type StorybookConfig = + StorybookConfigBase & { + typescript?: Partial; + }; diff --git a/presets/server-webpack/src/index.ts b/presets/server-webpack/src/index.ts index 94cf6318259d..0ddd78ab54aa 100644 --- a/presets/server-webpack/src/index.ts +++ b/presets/server-webpack/src/index.ts @@ -1,5 +1,7 @@ import path from 'path'; -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const webpack: StorybookConfig['webpack'] = (config) => { const rules = [ @@ -13,7 +15,7 @@ export const webpack: StorybookConfig['webpack'] = (config) => { { type: 'javascript/auto', test: /\.stories\.ya?ml/, - use: [path.resolve(__dirname, './loader.js'), 'yaml-loader'], + use: [path.resolve(__dirname, './loader.js'), require.resolve('yaml-loader')], }, ]; diff --git a/presets/server-webpack/src/types.ts b/presets/server-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/server-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/svelte-webpack/src/index.ts b/presets/svelte-webpack/src/index.ts index 239989b09098..5d70d467479d 100644 --- a/presets/svelte-webpack/src/index.ts +++ b/presets/svelte-webpack/src/index.ts @@ -1,4 +1,6 @@ -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const addons: StorybookConfig['addons'] = [ require.resolve('./framework-preset-svelte'), diff --git a/presets/svelte-webpack/src/types.ts b/presets/svelte-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/svelte-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/vue-webpack/src/index.ts b/presets/vue-webpack/src/index.ts index 8dbe2d361d90..6a2c58ee98ea 100644 --- a/presets/vue-webpack/src/index.ts +++ b/presets/vue-webpack/src/index.ts @@ -1,4 +1,6 @@ -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const addons: StorybookConfig['addons'] = [ require.resolve('./framework-preset-vue'), diff --git a/presets/vue-webpack/src/types.ts b/presets/vue-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/vue-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/vue3-webpack/src/index.ts b/presets/vue3-webpack/src/index.ts index e2abb85db7cb..4ea6619420a9 100644 --- a/presets/vue3-webpack/src/index.ts +++ b/presets/vue3-webpack/src/index.ts @@ -1,4 +1,6 @@ -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { StorybookConfig } from './types'; + +export * from './types'; export const addons: StorybookConfig['addons'] = [ require.resolve('./framework-preset-vue3'), diff --git a/presets/vue3-webpack/src/types.ts b/presets/vue3-webpack/src/types.ts new file mode 100644 index 000000000000..92e5026facb9 --- /dev/null +++ b/presets/vue3-webpack/src/types.ts @@ -0,0 +1,12 @@ +import type { + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, + TypescriptOptions as BaseTypescriptOptions, +} from '@storybook/core-webpack'; + +export type { BuilderResult } from '@storybook/core-webpack'; + +export type TypescriptOptions = BaseTypescriptOptions; + +export type StorybookConfig = + StorybookConfigBase; diff --git a/presets/web-components-webpack/src/types.ts b/presets/web-components-webpack/src/types.ts index d61adf3bfcc7..92e5026facb9 100644 --- a/presets/web-components-webpack/src/types.ts +++ b/presets/web-components-webpack/src/types.ts @@ -1,6 +1,6 @@ import type { - CommonWebpackConfiguration, - StorybookConfig as BaseStorybookConfig, + WebpackConfiguration, + StorybookConfig as StorybookConfigBase, TypescriptOptions as BaseTypescriptOptions, } from '@storybook/core-webpack'; @@ -8,5 +8,5 @@ export type { BuilderResult } from '@storybook/core-webpack'; export type TypescriptOptions = BaseTypescriptOptions; -export type StorybookConfig = - BaseStorybookConfig; +export type StorybookConfig = + StorybookConfigBase; From c942de44f3dd2cac8469e1263a5ba121cde14c56 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Fri, 17 Jun 2022 17:12:56 +0200 Subject: [PATCH 02/34] remove react specific webpack plugin from builder-webpack5, should be in preset-react-webpack (it already was) --- lib/builder-webpack5/src/types.ts | 14 -------------- 1 file changed, 14 deletions(-) diff --git a/lib/builder-webpack5/src/types.ts b/lib/builder-webpack5/src/types.ts index 42d9dad5c707..6b13b02adf99 100644 --- a/lib/builder-webpack5/src/types.ts +++ b/lib/builder-webpack5/src/types.ts @@ -6,7 +6,6 @@ import type { } from '@storybook/core-webpack'; import type ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin'; -import type { PluginOptions as DocgenTypescriptOptions } from '@storybook/react-docgen-typescript-plugin'; type TypeScriptOptionsBase = Required['typescript']; @@ -18,19 +17,6 @@ export interface TypescriptOptions extends TypeScriptOptionsBase { * Configures `fork-ts-checker-webpack-plugin` */ checkOptions?: ForkTsCheckerWebpackPlugin['options']; - /** - * Sets the type of Docgen when working with React and TypeScript - * - * @default `'react-docgen-typescript'` - */ - reactDocgen: 'react-docgen-typescript' | 'react-docgen' | false; - /** - * Configures `react-docgen-typescript-plugin` - * - * @default - * @see https://github.com/storybookjs/storybook/blob/next/lib/builder-webpack5/src/config/defaults.js#L4-L6 - */ - reactDocgenTypescriptOptions: DocgenTypescriptOptions; } export interface StorybookConfigWebpack extends Pick { From 7f65c7b370fd2197d15dbb5df8c1caa95d45079a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:09:37 +0200 Subject: [PATCH 03/34] migrate examples to use main.ts (typescript),they import the correct interface and ensure those types are there and work --- docs/faq.md | 14 ++++++++--- ...torybook-vite-builder-svelte-plugin.js.mdx | 2 +- .../.storybook/{main.js => main.ts} | 5 +++- .../.storybook/{main.js => main.ts} | 23 +++++++++++------ examples/cra-ts-essentials/.storybook/main.ts | 20 +++++++++------ .../cra-ts-kitchen-sink/.storybook/main.ts | 25 +++++++++++-------- .../.storybook/{main.js => main.ts} | 6 ++++- .../.storybook/{main.js => main.ts} | 14 +++++++++-- examples/react-ts/.storybook/main.ts | 7 ------ .../.storybook/{main.js => main.ts} | 6 ++++- .../.storybook/{main.js => main.ts} | 16 ++++++++---- .../vue-3-cli/.storybook/{main.js => main.ts} | 8 +++--- .../vue-cli/.storybook/{main.js => main.ts} | 6 ++++- .../.storybook/{main.js => main.ts} | 9 ++++--- frameworks/angular/src/types.ts | 2 +- frameworks/angular/types.d.ts | 1 + frameworks/html-webpack5/src/index.ts | 1 + frameworks/html-webpack5/types.d.ts | 1 + frameworks/preact-webpack5/src/index.ts | 1 + frameworks/preact-webpack5/types.d.ts | 1 + frameworks/server-webpack5/src/index.ts | 1 + frameworks/server-webpack5/types.d.ts | 1 + frameworks/svelte-webpack5/src/index.ts | 1 + frameworks/svelte-webpack5/types.d.ts | 1 + frameworks/vue-webpack5/types.d.ts | 1 + frameworks/vue3-webpack5/src/index.ts | 1 + frameworks/vue3-webpack5/types.d.ts | 1 + lib/cli/src/generators/REACT_SCRIPTS/index.ts | 20 +++++++++------ lib/cli/src/generators/SVELTE/index.ts | 16 ++++-------- lib/cli/src/generators/baseGenerator.ts | 3 ++- lib/cli/src/generators/types.ts | 1 + .../src/framework-preset-svelte-docs.ts | 8 +++--- .../src/framework-preset-svelte.ts | 14 +++++------ .../src/svelte-docgen-loader.ts | 1 - presets/svelte-webpack/src/types.ts | 2 ++ 35 files changed, 153 insertions(+), 87 deletions(-) rename examples/angular-cli/.storybook/{main.js => main.ts} (91%) rename examples/cra-kitchen-sink/.storybook/{main.js => main.ts} (59%) rename examples/html-kitchen-sink/.storybook/{main.js => main.ts} (89%) rename examples/preact-kitchen-sink/.storybook/{main.js => main.ts} (68%) rename examples/server-kitchen-sink/.storybook/{main.js => main.ts} (74%) rename examples/svelte-kitchen-sink/.storybook/{main.js => main.ts} (80%) rename examples/vue-3-cli/.storybook/{main.js => main.ts} (69%) rename examples/vue-cli/.storybook/{main.js => main.ts} (77%) rename examples/vue-kitchen-sink/.storybook/{main.js => main.ts} (80%) create mode 100644 frameworks/angular/types.d.ts create mode 100644 frameworks/html-webpack5/types.d.ts create mode 100644 frameworks/preact-webpack5/types.d.ts create mode 100644 frameworks/server-webpack5/types.d.ts create mode 100644 frameworks/svelte-webpack5/types.d.ts create mode 100644 frameworks/vue-webpack5/types.d.ts create mode 100644 frameworks/vue3-webpack5/types.d.ts diff --git a/docs/faq.md b/docs/faq.md index f05062edf05e..172f474ae97b 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -73,8 +73,11 @@ FAST_REFRESH=true ```js module.exports = { - reactOptions: { - fastRefresh: true, + framework: { + name: '@storybook/react-webpack5', + options: { + fastRefresh: true, + }, }, }; ``` @@ -91,8 +94,11 @@ You can opt-out from the new React Root API by setting the following property in ```js module.exports = { - reactOptions: { - legacyRootApi: true, + framework: { + name: '@storybook/react-webpack5', + options: { + legacyRootApi: true, + }, }, }; ``` diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx index 3ec43e4e035e..847027786a12 100644 --- a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx @@ -13,7 +13,7 @@ module.exports = { // Customize the Vite config here return config; }, - svelteOptions: { + framework: '@storybook/svelte-webpack5', { preprocess: preprocess({ typescript: true, postcss: true, diff --git a/examples/angular-cli/.storybook/main.js b/examples/angular-cli/.storybook/main.ts similarity index 91% rename from examples/angular-cli/.storybook/main.js rename to examples/angular-cli/.storybook/main.ts index 42d4cf30f8c2..416e84643958 100644 --- a/examples/angular-cli/.storybook/main.js +++ b/examples/angular-cli/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/angular/types'; + +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -50,3 +52,4 @@ module.exports = { }, }, }; +module.exports = mainConfig; diff --git a/examples/cra-kitchen-sink/.storybook/main.js b/examples/cra-kitchen-sink/.storybook/main.ts similarity index 59% rename from examples/cra-kitchen-sink/.storybook/main.js rename to examples/cra-kitchen-sink/.storybook/main.ts index 6bc29a56762f..8809f7c45ad4 100644 --- a/examples/cra-kitchen-sink/.storybook/main.js +++ b/examples/cra-kitchen-sink/.storybook/main.ts @@ -1,6 +1,8 @@ +import type { StorybookConfig } from '@storybook/react-webpack5/types'; + const path = require('path'); -module.exports = { +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -17,13 +19,18 @@ module.exports = { '@storybook/addon-a11y', '@storybook/addon-jest', ], + // add monorepo root as a valid directory to import modules from webpackFinal: (config) => { - // add monorepo root as a valid directory to import modules from - config.resolve.plugins.forEach((p) => { - if (Array.isArray(p.appSrcs)) { - p.appSrcs.push(path.join(__dirname, '..', '..', '..')); - } - }); + const resolvePlugins = config.resolve?.plugins; + if (Array.isArray(resolvePlugins)) { + resolvePlugins.forEach((p) => { + // @ts-ignore + const appSrcs = p.appSrcs as unknown as string[]; + if (Array.isArray(appSrcs)) { + appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + } return config; }, core: { @@ -40,3 +47,5 @@ module.exports = { options: { fastRefresh: true }, }, }; + +module.exports = mainConfig; diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts index 3bb18a69080b..0ade83b8345b 100644 --- a/examples/cra-ts-essentials/.storybook/main.ts +++ b/examples/cra-ts-essentials/.storybook/main.ts @@ -14,13 +14,18 @@ const mainConfig: StorybookConfig = { }, ], logLevel: 'debug', - webpackFinal: async (config) => { - // add monorepo root as a valid directory to import modules from - config.resolve?.plugins?.forEach((p: any) => { - if (Array.isArray(p.appSrcs)) { - p.appSrcs.push(path.join(__dirname, '..', '..', '..')); - } - }); + // add monorepo root as a valid directory to import modules from + webpackFinal: (config) => { + const resolvePlugins = config.resolve?.plugins; + if (Array.isArray(resolvePlugins)) { + resolvePlugins.forEach((p) => { + // @ts-ignore + const appSrcs = p.appSrcs as unknown as string[]; + if (Array.isArray(appSrcs)) { + appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + } return config; }, core: { @@ -34,4 +39,5 @@ const mainConfig: StorybookConfig = { }, framework: '@storybook/react-webpack5', }; + module.exports = mainConfig; diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index 023c4cb2d110..ab1ada857a95 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -1,8 +1,8 @@ -import type { Configuration } from 'webpack'; +import type { StorybookConfig } from '@storybook/react-webpack5/types'; const path = require('path'); -module.exports = { +const mainConfig: StorybookConfig = { stories: ['../src/components', '../src/stories'], logLevel: 'debug', addons: [ @@ -14,15 +14,18 @@ module.exports = { './localAddon/manager.tsx', './localAddon/preset.ts', ], - webpackFinal: (config: Configuration) => { - // add monorepo root as a valid directory to import modules from - config.resolve.plugins.forEach((p) => { - // @ts-ignore - if (Array.isArray(p.appSrcs)) { + // add monorepo root as a valid directory to import modules from + webpackFinal: (config) => { + const resolvePlugins = config.resolve?.plugins; + if (Array.isArray(resolvePlugins)) { + resolvePlugins.forEach((p) => { // @ts-ignore - p.appSrcs.push(path.join(__dirname, '..', '..', '..')); - } - }); + const appSrcs = p.appSrcs as unknown as string[]; + if (Array.isArray(appSrcs)) { + appSrcs.push(path.join(__dirname, '..', '..', '..')); + } + }); + } return config; }, core: { @@ -36,3 +39,5 @@ module.exports = { }, framework: '@storybook/react-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/html-kitchen-sink/.storybook/main.js b/examples/html-kitchen-sink/.storybook/main.ts similarity index 89% rename from examples/html-kitchen-sink/.storybook/main.js rename to examples/html-kitchen-sink/.storybook/main.ts index e8f14ce4057d..01ba45ff39c1 100644 --- a/examples/html-kitchen-sink/.storybook/main.js +++ b/examples/html-kitchen-sink/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/html-webpack5/types'; + +const mainConfig: StorybookConfig = { // this dirname is because we run tests from project root stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', @@ -41,3 +43,5 @@ module.exports = { // }, framework: '@storybook/html-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/preact-kitchen-sink/.storybook/main.js b/examples/preact-kitchen-sink/.storybook/main.ts similarity index 68% rename from examples/preact-kitchen-sink/.storybook/main.js rename to examples/preact-kitchen-sink/.storybook/main.ts index 2db9c5faa51c..8613ab7478d2 100644 --- a/examples/preact-kitchen-sink/.storybook/main.js +++ b/examples/preact-kitchen-sink/.storybook/main.ts @@ -1,6 +1,8 @@ +import type { StorybookConfig } from '@storybook/preact-webpack5/types'; + const path = require('path'); -module.exports = { +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -13,12 +15,18 @@ module.exports = { '@storybook/addon-a11y', ], webpackFinal: (config) => { - config.module.rules.push({ + const rules = config.module?.rules || []; + rules.push({ test: [/\.stories\.js$/], use: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); + + // eslint-disable-next-line no-param-reassign + config.module = config.module || {}; + // eslint-disable-next-line no-param-reassign + config.module.rules = rules; return config; }, core: { @@ -32,3 +40,5 @@ module.exports = { }, framework: '@storybook/preact-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts index 3f489885636c..bde9bf48edd4 100644 --- a/examples/react-ts/.storybook/main.ts +++ b/examples/react-ts/.storybook/main.ts @@ -44,12 +44,5 @@ const config: StorybookConfig = { breakingChangesV7: true, }, framework: '@storybook/react-webpack5', - // core: (c: any = {}) => { - // return { - // channelOptions: { allowFunction: false, maxDepth: 10 }, - // disableTelemetry: true, - // ...c, - // }; - // }, }; module.exports = config; diff --git a/examples/server-kitchen-sink/.storybook/main.js b/examples/server-kitchen-sink/.storybook/main.ts similarity index 74% rename from examples/server-kitchen-sink/.storybook/main.js rename to examples/server-kitchen-sink/.storybook/main.ts index 93805a262bea..099561a19828 100644 --- a/examples/server-kitchen-sink/.storybook/main.js +++ b/examples/server-kitchen-sink/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/server-webpack5/types'; + +const mainConfig: StorybookConfig = { stories: ['../stories/**/*.stories.@(json|yaml|yml)'], logLevel: 'debug', addons: [ @@ -17,3 +19,5 @@ module.exports = { }, framework: '@storybook/server-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/svelte-kitchen-sink/.storybook/main.js b/examples/svelte-kitchen-sink/.storybook/main.ts similarity index 80% rename from examples/svelte-kitchen-sink/.storybook/main.js rename to examples/svelte-kitchen-sink/.storybook/main.ts index 95c93e52984b..964001ed3b7c 100644 --- a/examples/svelte-kitchen-sink/.storybook/main.js +++ b/examples/svelte-kitchen-sink/.storybook/main.ts @@ -1,13 +1,12 @@ +import type { StorybookConfig } from '@storybook/svelte-webpack5/types'; + const sveltePreprocess = require('svelte-preprocess'); const path = require('path'); -module.exports = { +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx||mdx|svelte)'], logLevel: 'debug', - svelteOptions: { - preprocess: sveltePreprocess(), - }, addons: [ '@storybook/addon-storysource', '@storybook/addon-actions', @@ -41,5 +40,12 @@ module.exports = { features: { breakingChangesV7: true, }, - framework: '@storybook/svelte-webpack5', + framework: { + name: '@storybook/svelte-webpack5', + options: { + preprocess: sveltePreprocess(), + }, + }, }; + +module.exports = mainConfig; diff --git a/examples/vue-3-cli/.storybook/main.js b/examples/vue-3-cli/.storybook/main.ts similarity index 69% rename from examples/vue-3-cli/.storybook/main.js rename to examples/vue-3-cli/.storybook/main.ts index f04e4b70086e..886a8324b577 100644 --- a/examples/vue-3-cli/.storybook/main.js +++ b/examples/vue-3-cli/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/vue3-webpack5/types'; + +const mainConfig: StorybookConfig = { stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'], addons: [ '@storybook/addon-links', @@ -7,9 +9,9 @@ module.exports = { ], core: { disableTelemetry: true, - }, - features: { channelOptions: { allowFunction: false, maxDepth: 10 }, }, framework: '@storybook/vue3-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/vue-cli/.storybook/main.js b/examples/vue-cli/.storybook/main.ts similarity index 77% rename from examples/vue-cli/.storybook/main.js rename to examples/vue-cli/.storybook/main.ts index cadb725291fc..584c25f35618 100644 --- a/examples/vue-cli/.storybook/main.js +++ b/examples/vue-cli/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/vue-webpack5/types'; + +const mainConfig: StorybookConfig = { stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -18,3 +20,5 @@ module.exports = { }, framework: '@storybook/vue-webpack5', }; + +module.exports = mainConfig; diff --git a/examples/vue-kitchen-sink/.storybook/main.js b/examples/vue-kitchen-sink/.storybook/main.ts similarity index 80% rename from examples/vue-kitchen-sink/.storybook/main.js rename to examples/vue-kitchen-sink/.storybook/main.ts index 163d23ca9b6f..77c61ec047bf 100644 --- a/examples/vue-kitchen-sink/.storybook/main.js +++ b/examples/vue-kitchen-sink/.storybook/main.ts @@ -1,4 +1,6 @@ -module.exports = { +import type { StorybookConfig } from '@storybook/vue-webpack5/types'; + +const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ @@ -17,8 +19,7 @@ module.exports = { disableTelemetry: true, }, staticDirs: ['../public'], - features: { - channelOptions: { allowFunction: false, maxDepth: 10 }, - }, framework: '@storybook/vue-webpack5', }; + +module.exports = mainConfig; diff --git a/frameworks/angular/src/types.ts b/frameworks/angular/src/types.ts index 1f92cd78c3f2..26d68a283a57 100644 --- a/frameworks/angular/src/types.ts +++ b/frameworks/angular/src/types.ts @@ -8,7 +8,7 @@ import type { TypescriptOptions as TypescriptOptionsBuilder, } from '@storybook/builder-webpack5'; -type FrameworkName = '@storybook/react-webpack5'; +type FrameworkName = '@storybook/angular'; type BuilderName = '@storybook/builder-webpack5'; export type FrameworkOptions = AngularOptions & { diff --git a/frameworks/angular/types.d.ts b/frameworks/angular/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/angular/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/html-webpack5/src/index.ts b/frameworks/html-webpack5/src/index.ts index 512c806bd022..a5fd712c4ce5 100644 --- a/frameworks/html-webpack5/src/index.ts +++ b/frameworks/html-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/html'; +export * from './types'; diff --git a/frameworks/html-webpack5/types.d.ts b/frameworks/html-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/html-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/preact-webpack5/src/index.ts b/frameworks/preact-webpack5/src/index.ts index 6b5d05231731..6a07f64e6833 100644 --- a/frameworks/preact-webpack5/src/index.ts +++ b/frameworks/preact-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/preact'; +export * from './types'; diff --git a/frameworks/preact-webpack5/types.d.ts b/frameworks/preact-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/preact-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/server-webpack5/src/index.ts b/frameworks/server-webpack5/src/index.ts index 39e64100851f..098058fdbc0e 100644 --- a/frameworks/server-webpack5/src/index.ts +++ b/frameworks/server-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/server'; +export * from './types'; diff --git a/frameworks/server-webpack5/types.d.ts b/frameworks/server-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/server-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/svelte-webpack5/src/index.ts b/frameworks/svelte-webpack5/src/index.ts index 8c3b8d3c0b7b..07de4359ae11 100644 --- a/frameworks/svelte-webpack5/src/index.ts +++ b/frameworks/svelte-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/svelte'; +export * from './types'; diff --git a/frameworks/svelte-webpack5/types.d.ts b/frameworks/svelte-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/svelte-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/vue-webpack5/types.d.ts b/frameworks/vue-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/vue-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/frameworks/vue3-webpack5/src/index.ts b/frameworks/vue3-webpack5/src/index.ts index cf9a0c07e407..034adb8b02a6 100644 --- a/frameworks/vue3-webpack5/src/index.ts +++ b/frameworks/vue3-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/vue3'; +export * from './types'; diff --git a/frameworks/vue3-webpack5/types.d.ts b/frameworks/vue3-webpack5/types.d.ts new file mode 100644 index 000000000000..b74be4c5a234 --- /dev/null +++ b/frameworks/vue3-webpack5/types.d.ts @@ -0,0 +1 @@ +export * from './dist/types/index.d'; diff --git a/lib/cli/src/generators/REACT_SCRIPTS/index.ts b/lib/cli/src/generators/REACT_SCRIPTS/index.ts index 423e69eb0a4d..62b96d5ac442 100644 --- a/lib/cli/src/generators/REACT_SCRIPTS/index.ts +++ b/lib/cli/src/generators/REACT_SCRIPTS/index.ts @@ -11,14 +11,18 @@ const generator: Generator = async (packageManager, npmOptions, options) => { const extraMain = options.linkable ? { webpackFinal: `%%(config) => { - // add monorepo root as a valid directory to import modules from - config.resolve.plugins.forEach((p) => { - if (Array.isArray(p.appSrcs)) { - p.appSrcs.push('${monorepoRootPath}'); - } - }); - return config; - } + const resolvePlugins = config.resolve?.plugins; + if (Array.isArray(resolvePlugins)) { + resolvePlugins.forEach((p) => { + // @ts-ignore + const appSrcs = p.appSrcs as unknown as string[]; + if (Array.isArray(appSrcs)) { + appSrcs.push(${monorepoRootPath}); + } + }); + } + return config; + } %%`, } : {}; diff --git a/lib/cli/src/generators/SVELTE/index.ts b/lib/cli/src/generators/SVELTE/index.ts index e0e03035c287..9968141c254c 100644 --- a/lib/cli/src/generators/SVELTE/index.ts +++ b/lib/cli/src/generators/SVELTE/index.ts @@ -5,39 +5,33 @@ import { baseGenerator } from '../baseGenerator'; import { Generator } from '../types'; const generator: Generator = async (packageManager, npmOptions, options) => { - let extraMain; + let svelteOptions; let commonJs = false; // svelte.config.js ? if (fse.existsSync('./svelte.config.js')) { logger.info("Configuring preprocessor from 'svelte.config.js'"); - extraMain = { - svelteOptions: { preprocess: '%%require("../svelte.config.js").preprocess%%' }, - }; + svelteOptions = { preprocess: '%%require("../svelte.config.js").preprocess%%' }; } else if (fse.existsSync('./svelte.config.cjs')) { logger.info("Configuring preprocessor from 'svelte.config.cjs'"); commonJs = true; - extraMain = { - svelteOptions: { preprocess: '%%require("../svelte.config.cjs").preprocess%%' }, - }; + svelteOptions = { preprocess: '%%require("../svelte.config.cjs").preprocess%%' }; } else { // svelte-preprocess dependencies ? const packageJson = packageManager.retrievePackageJson(); if (packageJson.devDependencies && packageJson.devDependencies['svelte-preprocess']) { logger.info("Configuring preprocessor with 'svelte-preprocess'"); - extraMain = { - svelteOptions: { preprocess: '%%require("svelte-preprocess")()%%' }, - }; + svelteOptions = { preprocess: '%%require("svelte-preprocess")()%%' }; } } await baseGenerator(packageManager, npmOptions, options, 'svelte', { extraPackages: ['svelte', 'svelte-loader'], extensions: ['js', 'jsx', 'ts', 'tsx', 'svelte'], - extraMain, + framework: svelteOptions, commonJs, }); }; diff --git a/lib/cli/src/generators/baseGenerator.ts b/lib/cli/src/generators/baseGenerator.ts index 36cb27c8b240..7151a03cb69c 100644 --- a/lib/cli/src/generators/baseGenerator.ts +++ b/lib/cli/src/generators/baseGenerator.ts @@ -18,6 +18,7 @@ const defaultOptions: FrameworkOptions = { addBabel: true, addESLint: false, extraMain: undefined, + framework: undefined, extensions: undefined, commonJs: false, }; @@ -186,7 +187,7 @@ export async function baseGenerator( await fse.ensureDir('./.storybook'); await configureMain({ - framework: { name: frameworkInclude, options: {} }, + framework: { name: frameworkInclude, options: options.framework || {} }, addons: pnp ? addons.map(wrapForPnp) : addons, extensions, commonJs: options.commonJs, diff --git a/lib/cli/src/generators/types.ts b/lib/cli/src/generators/types.ts index 9c662ac1b819..23e818ac6c34 100644 --- a/lib/cli/src/generators/types.ts +++ b/lib/cli/src/generators/types.ts @@ -19,6 +19,7 @@ export interface FrameworkOptions { addESLint?: boolean; extraMain?: any; extensions?: string[]; + framework?: Record; commonJs?: boolean; } diff --git a/presets/svelte-webpack/src/framework-preset-svelte-docs.ts b/presets/svelte-webpack/src/framework-preset-svelte-docs.ts index e1d3c2044665..c18f34486ba3 100644 --- a/presets/svelte-webpack/src/framework-preset-svelte-docs.ts +++ b/presets/svelte-webpack/src/framework-preset-svelte-docs.ts @@ -1,8 +1,10 @@ import path from 'path'; -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { Preset } from '@storybook/core-webpack'; +import type { StorybookConfig, SvelteOptions } from './types'; -export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, options) => { - const svelteOptions = await options.presets.apply('svelteOptions', {} as any, options); +export const webpackFinal: StorybookConfig['webpackFinal'] = async (config, { presets }) => { + const framework = await presets.apply('framework'); + const svelteOptions = (typeof framework === 'object' ? framework.options : {}) as SvelteOptions; const rules = [ ...(config.module?.rules || []), diff --git a/presets/svelte-webpack/src/framework-preset-svelte.ts b/presets/svelte-webpack/src/framework-preset-svelte.ts index 16a954e1445a..48d20ce60d79 100644 --- a/presets/svelte-webpack/src/framework-preset-svelte.ts +++ b/presets/svelte-webpack/src/framework-preset-svelte.ts @@ -1,11 +1,9 @@ -import type { StorybookConfig } from '@storybook/core-webpack'; +import type { Preset } from '@storybook/core-common'; +import type { StorybookConfig, SvelteOptions } from './types'; -export const webpack: StorybookConfig['webpack'] = async (config, options) => { - const { preprocess = undefined, loader = {} } = await options.presets.apply( - 'svelteOptions', - {} as any, - options - ); +export const webpack: StorybookConfig['webpack'] = async (config, { presets }) => { + const framework = await presets.apply('framework'); + const svelteOptions = (typeof framework === 'object' ? framework.options : {}) as SvelteOptions; const mainFields = (config.resolve?.mainFields as string[]) || ['browser', 'module', 'main']; @@ -18,7 +16,7 @@ export const webpack: StorybookConfig['webpack'] = async (config, options) => { { test: /\.(svelte|html)$/, loader: require.resolve('svelte-loader'), - options: { preprocess, ...loader }, + options: { loader: {}, ...svelteOptions }, }, ], }, diff --git a/presets/svelte-webpack/src/svelte-docgen-loader.ts b/presets/svelte-webpack/src/svelte-docgen-loader.ts index ab738d7f1145..5146972ac28b 100644 --- a/presets/svelte-webpack/src/svelte-docgen-loader.ts +++ b/presets/svelte-webpack/src/svelte-docgen-loader.ts @@ -49,7 +49,6 @@ function getNameFromFilename(filename: string) { export default async function svelteDocgen(this: any, source: string) { // eslint-disable-next-line no-underscore-dangle const { resource } = this._module; - // This is webpack5 only const svelteOptions: any = this.getOptions(); const { preprocess: preprocessOptions, logDocgen = false } = svelteOptions; diff --git a/presets/svelte-webpack/src/types.ts b/presets/svelte-webpack/src/types.ts index 92e5026facb9..00b21f25cbc8 100644 --- a/presets/svelte-webpack/src/types.ts +++ b/presets/svelte-webpack/src/types.ts @@ -10,3 +10,5 @@ export type TypescriptOptions = BaseTypescriptOptions; export type StorybookConfig = StorybookConfigBase; + +export type SvelteOptions = {}; From 93433a98845216c9371f5c03159b0934c8ac70cd Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:14:11 +0200 Subject: [PATCH 04/34] improve --- docs/faq.md | 7 +++++-- .../storybook-vite-builder-svelte-plugin.js.mdx | 15 +++++++++------ 2 files changed, 14 insertions(+), 8 deletions(-) diff --git a/docs/faq.md b/docs/faq.md index 172f474ae97b..4dd9e124450f 100644 --- a/docs/faq.md +++ b/docs/faq.md @@ -16,8 +16,11 @@ module.exports = { addons: [ /* ... */ ], - angularOptions: { - enableIvy: false, + framework: { + name: '@storybook/angular', + options: { + enableIvy: false, + } }, }; ``` diff --git a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx index 847027786a12..8d4a2eeda43a 100644 --- a/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx +++ b/docs/snippets/common/storybook-vite-builder-svelte-plugin.js.mdx @@ -13,12 +13,15 @@ module.exports = { // Customize the Vite config here return config; }, - framework: '@storybook/svelte-webpack5', { - preprocess: preprocess({ - typescript: true, - postcss: true, - sourceMap: true, - }), + framework:{ + name: '@storybook/svelte-webpack5', + options: { + preprocess: preprocess({ + typescript: true, + postcss: true, + sourceMap: true, + }), + }, }, }; ``` \ No newline at end of file From a76abc97e0db66d21f1ac901213379685f6beda2 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:16:15 +0200 Subject: [PATCH 05/34] cleanup --- frameworks/ember/src/types.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts index 78a870c98f6e..80f69bd204a1 100644 --- a/frameworks/ember/src/types.ts +++ b/frameworks/ember/src/types.ts @@ -43,7 +43,3 @@ export type StorybookConfig = Omit< > & StorybookConfigWebpack & StorybookConfigFramework; - -export interface AngularOptions { - enableIvy: boolean; -} From e69a829a52e1e428151f7837c5f3411fea7a623a Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:16:48 +0200 Subject: [PATCH 06/34] cleanup --- frameworks/ember/src/types.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts index 78a870c98f6e..80f69bd204a1 100644 --- a/frameworks/ember/src/types.ts +++ b/frameworks/ember/src/types.ts @@ -43,7 +43,3 @@ export type StorybookConfig = Omit< > & StorybookConfigWebpack & StorybookConfigFramework; - -export interface AngularOptions { - enableIvy: boolean; -} From e666221c69120b1d2ef57fdc0e6cd380560457e9 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:20:41 +0200 Subject: [PATCH 07/34] cleanup --- frameworks/ember/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts index 80f69bd204a1..e75995bf27a7 100644 --- a/frameworks/ember/src/types.ts +++ b/frameworks/ember/src/types.ts @@ -11,7 +11,7 @@ import type { type FrameworkName = '@storybook/ember-webpack5'; type BuilderName = '@storybook/builder-webpack5'; -export type FrameworkOptions = AngularOptions & { +export type FrameworkOptions = { builder?: BuilderOptions; }; From 2f10e330c77be1033877e2c508d1735bceb02016 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 16:21:03 +0200 Subject: [PATCH 08/34] cleanup --- frameworks/ember/src/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frameworks/ember/src/types.ts b/frameworks/ember/src/types.ts index 80f69bd204a1..e75995bf27a7 100644 --- a/frameworks/ember/src/types.ts +++ b/frameworks/ember/src/types.ts @@ -11,7 +11,7 @@ import type { type FrameworkName = '@storybook/ember-webpack5'; type BuilderName = '@storybook/builder-webpack5'; -export type FrameworkOptions = AngularOptions & { +export type FrameworkOptions = { builder?: BuilderOptions; }; From b239db28111b91ca079742a7651984b706e2ff39 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Mon, 20 Jun 2022 23:53:26 +0200 Subject: [PATCH 09/34] fix --- examples/angular-cli/.storybook/main.ts | 4 +--- examples/svelte-kitchen-sink/.storybook/main.ts | 9 ++++++++- examples/svelte-kitchen-sink/tsconfig.json | 3 ++- frameworks/svelte-webpack5/src/types.ts | 3 ++- presets/svelte-webpack/src/types.ts | 4 +++- 5 files changed, 16 insertions(+), 7 deletions(-) diff --git a/examples/angular-cli/.storybook/main.ts b/examples/angular-cli/.storybook/main.ts index 416e84643958..bbe31a987a33 100644 --- a/examples/angular-cli/.storybook/main.ts +++ b/examples/angular-cli/.storybook/main.ts @@ -1,6 +1,4 @@ -import type { StorybookConfig } from '@storybook/angular/types'; - -const mainConfig: StorybookConfig = { +const mainConfig: import('@storybook/angular/types').StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ diff --git a/examples/svelte-kitchen-sink/.storybook/main.ts b/examples/svelte-kitchen-sink/.storybook/main.ts index 964001ed3b7c..68886dde567b 100644 --- a/examples/svelte-kitchen-sink/.storybook/main.ts +++ b/examples/svelte-kitchen-sink/.storybook/main.ts @@ -24,12 +24,19 @@ const mainConfig: StorybookConfig = { '@storybook/addon-a11y', ], webpackFinal: async (config) => { - config.module.rules.push({ + const rules = config.module?.rules || []; + rules.push({ test: [/\.stories\.js$/, /index\.js$/], use: [require.resolve('@storybook/source-loader')], include: [path.resolve(__dirname, '../src')], enforce: 'pre', }); + + // eslint-disable-next-line no-param-reassign + config.module = config.module || {}; + // eslint-disable-next-line no-param-reassign + config.module.rules = rules; + return config; }, core: { diff --git a/examples/svelte-kitchen-sink/tsconfig.json b/examples/svelte-kitchen-sink/tsconfig.json index 2c9591c5f7c6..d9ce79c36ba0 100644 --- a/examples/svelte-kitchen-sink/tsconfig.json +++ b/examples/svelte-kitchen-sink/tsconfig.json @@ -5,7 +5,8 @@ "module": "ES2020", "esModuleInterop": true, "skipLibCheck": true, - "strict": true + "strict": true, + "moduleResolution": "Node" }, "include": [ "src/*" diff --git a/frameworks/svelte-webpack5/src/types.ts b/frameworks/svelte-webpack5/src/types.ts index 0a91a311d498..d5c0578faa32 100644 --- a/frameworks/svelte-webpack5/src/types.ts +++ b/frameworks/svelte-webpack5/src/types.ts @@ -1,4 +1,5 @@ import type { + SvelteOptions, StorybookConfig as StorybookConfigBase, TypescriptOptions as TypescriptOptionsReact, } from '@storybook/preset-svelte-webpack'; @@ -11,7 +12,7 @@ import type { type FrameworkName = '@storybook/svelte-webpack5'; type BuilderName = '@storybook/builder-webpack5'; -export type FrameworkOptions = { +export type FrameworkOptions = SvelteOptions & { builder?: BuilderOptions; }; diff --git a/presets/svelte-webpack/src/types.ts b/presets/svelte-webpack/src/types.ts index 00b21f25cbc8..f16ca946bda4 100644 --- a/presets/svelte-webpack/src/types.ts +++ b/presets/svelte-webpack/src/types.ts @@ -11,4 +11,6 @@ export type TypescriptOptions = BaseTypescriptOptions; export type StorybookConfig = StorybookConfigBase; -export type SvelteOptions = {}; +export type SvelteOptions = { + preprocess?: any; +}; From 4b018d210230d57fe32acbf37f1d143418c46476 Mon Sep 17 00:00:00 2001 From: Norbert de Langen Date: Tue, 21 Jun 2022 00:59:50 +0200 Subject: [PATCH 10/34] wip --- examples/angular-cli/.storybook/main.ts | 2 +- examples/cra-kitchen-sink/.storybook/main.ts | 2 +- examples/cra-ts-essentials/.storybook/main.ts | 2 +- .../cra-ts-kitchen-sink/.storybook/main.ts | 2 +- examples/external-docs/src/.storybook/main.ts | 2 +- examples/html-kitchen-sink/.storybook/main.ts | 2 +- examples/official-storybook/main.ts | 2 +- .../preact-kitchen-sink/.storybook/main.ts | 2 +- examples/react-ts/.storybook/main.ts | 2 +- .../server-kitchen-sink/.storybook/main.ts | 2 +- .../svelte-kitchen-sink/.storybook/main.ts | 2 +- examples/vue-3-cli/.storybook/main.ts | 2 +- examples/vue-cli/.storybook/main.ts | 2 +- examples/vue-kitchen-sink/.storybook/main.ts | 2 +- frameworks/html-webpack5/types-7-0.d.ts | 1 - frameworks/html-webpack5/types.d.ts | 1 - frameworks/preact-webpack5/types-6-0.d.ts | 1 - frameworks/preact-webpack5/types-7-0.d.ts | 1 - frameworks/preact-webpack5/types.d.ts | 1 - frameworks/react-webpack5/types-6-0.d.ts | 1 - frameworks/react-webpack5/types-7-0.d.ts | 1 - frameworks/react-webpack5/types.d.ts | 1 - frameworks/server-webpack5/types.d.ts | 1 - frameworks/svelte-webpack5/types.d.ts | 1 - frameworks/vue-webpack5/types-6-0.d.ts | 1 - frameworks/vue-webpack5/types-7-0.d.ts | 1 - frameworks/vue-webpack5/types.d.ts | 1 - frameworks/vue3-webpack5/types-6-0.d.ts | 1 - frameworks/vue3-webpack5/types-7-0.d.ts | 1 - frameworks/vue3-webpack5/types.d.ts | 1 - .../web-components-webpack5/src/index.ts | 1 + .../web-components-webpack5/types-6-0.d.ts | 1 - .../web-components-webpack5/types-7-0.d.ts | 1 - lib/addons/src/types.ts | 3 +- renderers/react/src/config.ts | 9 ++- .../react/src/docs/jsxDecorator.test.tsx | 20 +++-- renderers/react/src/docs/jsxDecorator.tsx | 6 +- .../react/src/docs/react-argtypes.stories.tsx | 5 +- .../react/src/docs/react-properties.test.ts | 10 +-- renderers/react/src/{preview => }/globals.ts | 0 renderers/react/src/index.ts | 16 +--- renderers/react/src/preview/config.ts | 1 - renderers/react/src/preview/types-6-0.ts | 46 ----------- renderers/react/src/preview/types-6-3.ts | 49 ------------ renderers/react/src/preview/types-7-0.ts | 28 ------- .../index.test.ts => public-api.test.ts} | 0 .../src/{preview/index.tsx => public-api.tsx} | 5 +- renderers/react/src/public-types.ts | 77 +++++++++++++++++++ renderers/react/src/{preview => }/render.tsx | 3 +- .../src/{testing/index.ts => testing-api.ts} | 9 +-- renderers/react/src/{preview => }/types.ts | 7 +- renderers/web-components/src/config.ts | 2 +- .../src/docs/sourceDecorator.test.ts | 11 +-- .../src/docs/sourceDecorator.ts | 2 +- .../{customElements.ts => framework-api.ts} | 0 .../src/{preview => }/globals.ts | 0 renderers/web-components/src/index.ts | 23 +----- .../web-components/src/preview/config.ts | 1 - .../web-components/src/preview/types-7-0.ts | 14 ---- .../src/{preview/index.ts => public-api.ts} | 3 +- .../{preview/types-6-0.ts => public-types.ts} | 20 ++--- .../src/{preview => }/render.ts | 2 +- .../web-components/src/{preview => }/types.ts | 19 ++++- renderers/web-components/src/typings.d.ts | 4 - 64 files changed, 174 insertions(+), 268 deletions(-) delete mode 100644 frameworks/html-webpack5/types-7-0.d.ts delete mode 100644 frameworks/html-webpack5/types.d.ts delete mode 100644 frameworks/preact-webpack5/types-6-0.d.ts delete mode 100644 frameworks/preact-webpack5/types-7-0.d.ts delete mode 100644 frameworks/preact-webpack5/types.d.ts delete mode 100644 frameworks/react-webpack5/types-6-0.d.ts delete mode 100644 frameworks/react-webpack5/types-7-0.d.ts delete mode 100644 frameworks/react-webpack5/types.d.ts delete mode 100644 frameworks/server-webpack5/types.d.ts delete mode 100644 frameworks/svelte-webpack5/types.d.ts delete mode 100644 frameworks/vue-webpack5/types-6-0.d.ts delete mode 100644 frameworks/vue-webpack5/types-7-0.d.ts delete mode 100644 frameworks/vue-webpack5/types.d.ts delete mode 100644 frameworks/vue3-webpack5/types-6-0.d.ts delete mode 100644 frameworks/vue3-webpack5/types-7-0.d.ts delete mode 100644 frameworks/vue3-webpack5/types.d.ts delete mode 100644 frameworks/web-components-webpack5/types-6-0.d.ts delete mode 100644 frameworks/web-components-webpack5/types-7-0.d.ts rename renderers/react/src/{preview => }/globals.ts (100%) delete mode 100644 renderers/react/src/preview/config.ts delete mode 100644 renderers/react/src/preview/types-6-0.ts delete mode 100644 renderers/react/src/preview/types-6-3.ts delete mode 100644 renderers/react/src/preview/types-7-0.ts rename renderers/react/src/{preview/index.test.ts => public-api.test.ts} (100%) rename renderers/react/src/{preview/index.tsx => public-api.tsx} (90%) create mode 100644 renderers/react/src/public-types.ts rename renderers/react/src/{preview => }/render.tsx (97%) rename renderers/react/src/{testing/index.ts => testing-api.ts} (95%) rename renderers/react/src/{preview => }/types.ts (71%) rename renderers/web-components/src/{customElements.ts => framework-api.ts} (100%) rename renderers/web-components/src/{preview => }/globals.ts (100%) delete mode 100644 renderers/web-components/src/preview/config.ts delete mode 100644 renderers/web-components/src/preview/types-7-0.ts rename renderers/web-components/src/{preview/index.ts => public-api.ts} (93%) rename renderers/web-components/src/{preview/types-6-0.ts => public-types.ts} (68%) rename renderers/web-components/src/{preview => }/render.ts (97%) rename renderers/web-components/src/{preview => }/types.ts (54%) delete mode 100644 renderers/web-components/src/typings.d.ts diff --git a/examples/angular-cli/.storybook/main.ts b/examples/angular-cli/.storybook/main.ts index bbe31a987a33..c728386d3241 100644 --- a/examples/angular-cli/.storybook/main.ts +++ b/examples/angular-cli/.storybook/main.ts @@ -1,4 +1,4 @@ -const mainConfig: import('@storybook/angular/types').StorybookConfig = { +const mainConfig: import('@storybook/angular').StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], logLevel: 'debug', addons: [ diff --git a/examples/cra-kitchen-sink/.storybook/main.ts b/examples/cra-kitchen-sink/.storybook/main.ts index 8809f7c45ad4..e8b0f22b4b17 100644 --- a/examples/cra-kitchen-sink/.storybook/main.ts +++ b/examples/cra-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const path = require('path'); diff --git a/examples/cra-ts-essentials/.storybook/main.ts b/examples/cra-ts-essentials/.storybook/main.ts index 0ade83b8345b..01c95af66b35 100644 --- a/examples/cra-ts-essentials/.storybook/main.ts +++ b/examples/cra-ts-essentials/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const path = require('path'); diff --git a/examples/cra-ts-kitchen-sink/.storybook/main.ts b/examples/cra-ts-kitchen-sink/.storybook/main.ts index ab1ada857a95..e5aa1555621b 100644 --- a/examples/cra-ts-kitchen-sink/.storybook/main.ts +++ b/examples/cra-ts-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const path = require('path'); diff --git a/examples/external-docs/src/.storybook/main.ts b/examples/external-docs/src/.storybook/main.ts index 68037f6e019a..0aa3e69e006d 100644 --- a/examples/external-docs/src/.storybook/main.ts +++ b/examples/external-docs/src/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [ diff --git a/examples/html-kitchen-sink/.storybook/main.ts b/examples/html-kitchen-sink/.storybook/main.ts index 01ba45ff39c1..a8aba5cd9f31 100644 --- a/examples/html-kitchen-sink/.storybook/main.ts +++ b/examples/html-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/html-webpack5/types'; +import type { StorybookConfig } from '@storybook/html-webpack5'; const mainConfig: StorybookConfig = { // this dirname is because we run tests from project root diff --git a/examples/official-storybook/main.ts b/examples/official-storybook/main.ts index d931060beb05..1634bf3e8862 100644 --- a/examples/official-storybook/main.ts +++ b/examples/official-storybook/main.ts @@ -1,5 +1,5 @@ /// -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [ diff --git a/examples/preact-kitchen-sink/.storybook/main.ts b/examples/preact-kitchen-sink/.storybook/main.ts index 8613ab7478d2..dd8b68f39d00 100644 --- a/examples/preact-kitchen-sink/.storybook/main.ts +++ b/examples/preact-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/preact-webpack5/types'; +import type { StorybookConfig } from '@storybook/preact-webpack5'; const path = require('path'); diff --git a/examples/react-ts/.storybook/main.ts b/examples/react-ts/.storybook/main.ts index bde9bf48edd4..b92c85e76c07 100644 --- a/examples/react-ts/.storybook/main.ts +++ b/examples/react-ts/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/react-webpack5/types'; +import type { StorybookConfig } from '@storybook/react-webpack5'; const config: StorybookConfig = { stories: [ diff --git a/examples/server-kitchen-sink/.storybook/main.ts b/examples/server-kitchen-sink/.storybook/main.ts index 099561a19828..994af2274338 100644 --- a/examples/server-kitchen-sink/.storybook/main.ts +++ b/examples/server-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/server-webpack5/types'; +import type { StorybookConfig } from '@storybook/server-webpack5'; const mainConfig: StorybookConfig = { stories: ['../stories/**/*.stories.@(json|yaml|yml)'], diff --git a/examples/svelte-kitchen-sink/.storybook/main.ts b/examples/svelte-kitchen-sink/.storybook/main.ts index 68886dde567b..dece43f0b3bd 100644 --- a/examples/svelte-kitchen-sink/.storybook/main.ts +++ b/examples/svelte-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/svelte-webpack5/types'; +import type { StorybookConfig } from '@storybook/svelte-webpack5'; const sveltePreprocess = require('svelte-preprocess'); diff --git a/examples/vue-3-cli/.storybook/main.ts b/examples/vue-3-cli/.storybook/main.ts index 886a8324b577..48221e0138e1 100644 --- a/examples/vue-3-cli/.storybook/main.ts +++ b/examples/vue-3-cli/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/vue3-webpack5/types'; +import type { StorybookConfig } from '@storybook/vue3-webpack5'; const mainConfig: StorybookConfig = { stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'], diff --git a/examples/vue-cli/.storybook/main.ts b/examples/vue-cli/.storybook/main.ts index 584c25f35618..269706434644 100644 --- a/examples/vue-cli/.storybook/main.ts +++ b/examples/vue-cli/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/vue-webpack5/types'; +import type { StorybookConfig } from '@storybook/vue-webpack5'; const mainConfig: StorybookConfig = { stories: ['../src/**/*.stories.@(ts|tsx|js|jsx|mdx)'], diff --git a/examples/vue-kitchen-sink/.storybook/main.ts b/examples/vue-kitchen-sink/.storybook/main.ts index 77c61ec047bf..3086223c309b 100644 --- a/examples/vue-kitchen-sink/.storybook/main.ts +++ b/examples/vue-kitchen-sink/.storybook/main.ts @@ -1,4 +1,4 @@ -import type { StorybookConfig } from '@storybook/vue-webpack5/types'; +import type { StorybookConfig } from '@storybook/vue-webpack5'; const mainConfig: StorybookConfig = { stories: ['../src/stories/**/*.stories.@(ts|tsx|js|jsx|mdx)'], diff --git a/frameworks/html-webpack5/types-7-0.d.ts b/frameworks/html-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/html-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/html-webpack5/types.d.ts b/frameworks/html-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/html-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/preact-webpack5/types-6-0.d.ts b/frameworks/preact-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/preact-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/preact-webpack5/types-7-0.d.ts b/frameworks/preact-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/preact-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/preact-webpack5/types.d.ts b/frameworks/preact-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/preact-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/react-webpack5/types-6-0.d.ts b/frameworks/react-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/react-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/react-webpack5/types-7-0.d.ts b/frameworks/react-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/react-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/react-webpack5/types.d.ts b/frameworks/react-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/react-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/server-webpack5/types.d.ts b/frameworks/server-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/server-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/svelte-webpack5/types.d.ts b/frameworks/svelte-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/svelte-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/vue-webpack5/types-6-0.d.ts b/frameworks/vue-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/vue-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/vue-webpack5/types-7-0.d.ts b/frameworks/vue-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/vue-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/vue-webpack5/types.d.ts b/frameworks/vue-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/vue-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/vue3-webpack5/types-6-0.d.ts b/frameworks/vue3-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/vue3-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/vue3-webpack5/types-7-0.d.ts b/frameworks/vue3-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/vue3-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/frameworks/vue3-webpack5/types.d.ts b/frameworks/vue3-webpack5/types.d.ts deleted file mode 100644 index b74be4c5a234..000000000000 --- a/frameworks/vue3-webpack5/types.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/index.d'; diff --git a/frameworks/web-components-webpack5/src/index.ts b/frameworks/web-components-webpack5/src/index.ts index 9d1e091abcc8..538d3b3a6d67 100644 --- a/frameworks/web-components-webpack5/src/index.ts +++ b/frameworks/web-components-webpack5/src/index.ts @@ -1 +1,2 @@ export * from '@storybook/web-components'; +export * from './types'; diff --git a/frameworks/web-components-webpack5/types-6-0.d.ts b/frameworks/web-components-webpack5/types-6-0.d.ts deleted file mode 100644 index 408fe71eecba..000000000000 --- a/frameworks/web-components-webpack5/types-6-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-6-0.d'; diff --git a/frameworks/web-components-webpack5/types-7-0.d.ts b/frameworks/web-components-webpack5/types-7-0.d.ts deleted file mode 100644 index e3503ed86e68..000000000000 --- a/frameworks/web-components-webpack5/types-7-0.d.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './dist/types/client/preview/types-7-0.d'; diff --git a/lib/addons/src/types.ts b/lib/addons/src/types.ts index 64a66273db0c..56985c26c498 100644 --- a/lib/addons/src/types.ts +++ b/lib/addons/src/types.ts @@ -82,7 +82,8 @@ export interface Parameters { [key: string]: any; } -export type StoryContext = StoryContextForFramework; +export type StoryContext = + StoryContextForFramework; export type StoryContextUpdate = Partial; type ReturnTypeFramework = { component: any; storyResult: ReturnType }; diff --git a/renderers/react/src/config.ts b/renderers/react/src/config.ts index 6a2fe62ad226..a9ba6b59eed9 100644 --- a/renderers/react/src/config.ts +++ b/renderers/react/src/config.ts @@ -1,5 +1,10 @@ import { parameters as docsParams } from './docs/config'; -export const parameters = { framework: 'react', ...docsParams }; +export const parameters = { + framework: 'react', + ...docsParams, +}; + export { decorators, argTypesEnhancers } from './docs/config'; -export * from './preview/config'; + +export { render, renderToDOM } from './render'; diff --git a/renderers/react/src/docs/jsxDecorator.test.tsx b/renderers/react/src/docs/jsxDecorator.test.tsx index 40eb7c57b74d..b32364cb1e95 100644 --- a/renderers/react/src/docs/jsxDecorator.test.tsx +++ b/renderers/react/src/docs/jsxDecorator.test.tsx @@ -1,7 +1,7 @@ /* eslint-disable jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */ -import React from 'react'; +import React, { createElement, FC, PropsWithChildren } from 'react'; import PropTypes from 'prop-types'; -import { addons, StoryContext, useEffect } from '@storybook/addons'; +import { addons, useEffect } from '@storybook/addons'; import { SNIPPET_RENDERED } from '@storybook/docs-tools'; import { renderJsx, jsxDecorator } from './jsxDecorator'; @@ -47,6 +47,7 @@ describe('renderJsx', () => { }); it('large objects', () => { const obj = Array.from({ length: 20 }).reduce((acc, _, i) => { + // @ts-ignore acc[`key_${i}`] = `val_${i}`; return acc; }, {}); @@ -109,11 +110,14 @@ describe('renderJsx', () => { }); it('forwardRef component', () => { - const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) { + const MyExoticComponent = React.forwardRef>(function MyExoticComponent( + props, + _ref + ) { return
{props.children}
; }); - expect(renderJsx(I'm forwardRef!, {})) + expect(renderJsx(createElement(MyExoticComponent, {}, 'I am forwardRef!'), {})) .toMatchInlineSnapshot(` I'm forwardRef! @@ -122,11 +126,11 @@ describe('renderJsx', () => { }); it('memo component', () => { - const MyMemoComponent = React.memo(function MyMemoComponent(props: any) { + const MyMemoComponent: FC = React.memo(function MyMemoComponent(props) { return
{props.children}
; }); - expect(renderJsx(I'm memo!, {})).toMatchInlineSnapshot(` + expect(renderJsx(createElement(MyMemoComponent, {}, 'I am memo!'), {})).toMatchInlineSnapshot(` I'm memo! @@ -169,6 +173,7 @@ describe('jsxDecorator', () => { let mockChannel: { on: jest.Mock; emit?: jest.Mock }; beforeEach(() => { mockedAddons.getChannel.mockReset(); + // @ts-ignore mockedUseEffect.mockImplementation((cb) => setTimeout(cb, 0)); mockChannel = { on: jest.fn(), emit: jest.fn() }; @@ -266,7 +271,8 @@ describe('jsxDecorator', () => { it('renders MDX properly', async () => { // FIXME: generate this from actual MDX - const mdxElement = { + const mdxElement: ReturnType = { + // @ts-ignore type: { displayName: 'MDXCreateElement' }, props: { mdxType: 'div', diff --git a/renderers/react/src/docs/jsxDecorator.tsx b/renderers/react/src/docs/jsxDecorator.tsx index fb667a359d36..4f513c7a8376 100644 --- a/renderers/react/src/docs/jsxDecorator.tsx +++ b/renderers/react/src/docs/jsxDecorator.tsx @@ -9,7 +9,7 @@ import { StoryContext, ArgsStoryFn, PartialStoryFn } from '@storybook/csf'; import { SourceType, SNIPPET_RENDERED, getDocgenSection } from '@storybook/docs-tools'; import { logger } from '@storybook/client-logger'; -import { ReactFramework } from '..'; +import { ReactFramework } from '../types'; import { isMemo, isForwardRef } from './lib'; @@ -184,7 +184,9 @@ export const jsxDecorator = ( let jsx = ''; useEffect(() => { - if (!skip) channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx); + if (!skip) { + channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx); + } }); // We only need to render JSX if the source block is actually going to diff --git a/renderers/react/src/docs/react-argtypes.stories.tsx b/renderers/react/src/docs/react-argtypes.stories.tsx index 9a14a0c39f64..c47d886bebb9 100644 --- a/renderers/react/src/docs/react-argtypes.stories.tsx +++ b/renderers/react/src/docs/react-argtypes.stories.tsx @@ -1,10 +1,11 @@ import React, { useState } from 'react'; import mapValues from 'lodash/mapValues'; import { ArgsTable } from '@storybook/components'; -import { Args } from '@storybook/api'; +import type { Args } from '@storybook/csf'; import { inferControls } from '@storybook/store'; -import { storiesOf, StoryContext } from '..'; +import { storiesOf } from '../public-api'; +import type { StoryContext } from '../types'; import { extractArgTypes } from './extractArgTypes'; // FIXME diff --git a/renderers/react/src/docs/react-properties.test.ts b/renderers/react/src/docs/react-properties.test.ts index d2cc707ddeda..536a3b141898 100644 --- a/renderers/react/src/docs/react-properties.test.ts +++ b/renderers/react/src/docs/react-properties.test.ts @@ -8,7 +8,7 @@ import { inferControls } from '@storybook/store'; import type { AnyFramework } from '@storybook/csf'; import { normalizeNewlines } from '@storybook/docs-tools'; -import type { StoryContext } from '..'; +import type { StoryContext } from '../types'; import { extractProps } from './extractProps'; import { extractArgTypes } from './extractArgTypes'; @@ -31,8 +31,8 @@ const transformToModule = (inputCode: string) => { ], ], }; - const { code } = transformSync(inputCode, options); - return normalizeNewlines(code); + const { code } = transformSync(inputCode, options) || {}; + return normalizeNewlines(code || ''); }; const annotateWithDocgen = (inputPath: string) => { @@ -41,8 +41,8 @@ const annotateWithDocgen = (inputPath: string) => { plugins: ['babel-plugin-react-docgen', '@babel/plugin-proposal-class-properties'], babelrc: false, }; - const { code } = transformFileSync(inputPath, options); - return normalizeNewlines(code); + const { code } = transformFileSync(inputPath, options) || {}; + return normalizeNewlines(code || ''); }; describe('react component properties', () => { diff --git a/renderers/react/src/preview/globals.ts b/renderers/react/src/globals.ts similarity index 100% rename from renderers/react/src/preview/globals.ts rename to renderers/react/src/globals.ts diff --git a/renderers/react/src/index.ts b/renderers/react/src/index.ts index d8e47c130c28..7a5214b6ac35 100644 --- a/renderers/react/src/index.ts +++ b/renderers/react/src/index.ts @@ -1,17 +1,7 @@ -export type { DecoratorFn } from './preview'; -export { - storiesOf, - setAddon, - addDecorator, - addParameters, - configure, - getStorybook, - raw, - forceReRender, -} from './preview'; -export * from './testing'; +export * from './public-api'; +export * from './testing-api'; -export * from './preview/types-6-3'; +export * from './public-types'; // optimization: stop HMR propagation in webpack module?.hot?.decline(); diff --git a/renderers/react/src/preview/config.ts b/renderers/react/src/preview/config.ts deleted file mode 100644 index 990959477289..000000000000 --- a/renderers/react/src/preview/config.ts +++ /dev/null @@ -1 +0,0 @@ -export { render, renderToDOM } from './render'; diff --git a/renderers/react/src/preview/types-6-0.ts b/renderers/react/src/preview/types-6-0.ts deleted file mode 100644 index 9b573efac5a6..000000000000 --- a/renderers/react/src/preview/types-6-0.ts +++ /dev/null @@ -1,46 +0,0 @@ -import type { ComponentType } from 'react'; -import type { - Args, - ComponentAnnotations, - StoryAnnotations, - AnnotatedStoryFn, -} from '@storybook/csf'; -import type { StoryFnReactReturnType } from './types'; - -export type { Args, ArgTypes, Parameters, StoryContext } from '@storybook/csf'; - -export type ReactFramework = { - component: ComponentType; - storyResult: StoryFnReactReturnType; -}; - -/** - * Metadata to configure the stories for a component. - * - * @see [Default export](https://storybook.js.org/docs/formats/component-story-format/#default-export) - */ -export type Meta = ComponentAnnotations; - -/** - * Story function that represents a CSFv2 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - */ -export type StoryFn = AnnotatedStoryFn; - -/** - * Story function that represents a CSFv3 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - */ -export type StoryObj = StoryAnnotations; - -/** - * Story function that represents a CSFv2 component example. - * - * @see [Named Story exports](https://storybook.js.org/docs/formats/component-story-format/#named-story-exports) - * - * NOTE that in Storybook 7.0, this type will be renamed to `StoryFn` and replaced by the current `StoryObj` type. - * - */ -export type Story = StoryFn; diff --git a/renderers/react/src/preview/types-6-3.ts b/renderers/react/src/preview/types-6-3.ts deleted file mode 100644 index 85c72920bee1..000000000000 --- a/renderers/react/src/preview/types-6-3.ts +++ /dev/null @@ -1,49 +0,0 @@ -import { ComponentProps, JSXElementConstructor } from 'react'; -import type { StoryFn, StoryObj, Story, Meta } from './types-6-0'; - -export * from './types-6-0'; - -/** - * For the common case where a component's stories are simple components that receives args as props: - * - * ```tsx - * export default { ... } as ComponentMeta; - * ``` - */ -export type ComponentMeta> = - Meta>; - -/** - * For the common case where a (CSFv2) story is a simple component that receives args as props: - * - * ```tsx - * const Template: ComponentStory = (args) => ; +const Basic: ComponentStoryFn = () => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx index 76b502fa348d..0d42716af396 100644 --- a/docs/snippets/react/button-story-with-args.ts.mdx +++ b/docs/snippets/react/button-story-with-args.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { Button, ButtonProps } from './Button'; @@ -17,7 +17,7 @@ export default { } as ComponentMeta; //👇 We create a “template” of how args map to rendering -const Template: ComponentStory = (args) => ; +export const Primary: ComponentStoryFn = () => ; ``` \ No newline at end of file diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx index 503a2f991320..7ee4746026e6 100644 --- a/docs/snippets/react/checkbox-story-csf.ts.mdx +++ b/docs/snippets/react/checkbox-story-csf.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentMeta, ComponentStory } from '@storybook/react'; +import { ComponentMeta, ComponentStoryFn } from '@storybook/react'; import { Checkbox } from './Checkbox'; @@ -16,7 +16,7 @@ export default { component: Checkbox, } as ComponentMeta; -export const allCheckboxes: ComponentStory = () => ( +export const allCheckboxes: ComponentStoryFn = () => (
diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx index be64e1f14af5..2b21fdd2335f 100644 --- a/docs/snippets/react/component-story-custom-args-complex.ts.mdx +++ b/docs/snippets/react/component-story-custom-args-complex.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { YourComponent } from './your-component'; @@ -30,7 +30,7 @@ export default { }, } as ComponentMeta; -const Template: ComponentStory = ({ propertyA, propertyB, ...rest }) => { +const Template: ComponentStoryFn = ({ propertyA, propertyB, ...rest }) => { //👇 Assigns the result from the function to a variable const someFunctionResult = someFunction(propertyA, propertyB); diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx index 1b54ea82e143..9d350e571fef 100644 --- a/docs/snippets/react/component-story-figma-integration.ts.mdx +++ b/docs/snippets/react/component-story-figma-integration.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { withDesign } from 'storybook-addon-designs'; @@ -17,7 +17,7 @@ export default { } as ComponentMeta; // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args -const Template: ComponentStory = () => ; +const Template: ComponentStoryFn = () => ; export const Example = Template.bind({}); Example.parameters = { diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx index 84fd419b4457..3112d36e2c3c 100644 --- a/docs/snippets/react/component-story-with-accessibility.ts.mdx +++ b/docs/snippets/react/component-story-with-accessibility.ts.mdx @@ -3,7 +3,7 @@ import React from 'react'; -import { ComponentStory, ComponentMeta } from '@storybook/react'; +import type { ComponentStoryFn, ComponentMeta } from '@storybook/react'; import { Button } from './Button'; @@ -19,7 +19,7 @@ export default { } as ComponentMeta; -const Template: ComponentStory = (args) =>