diff --git a/MIGRATION.md b/MIGRATION.md index f55ad50607c8..37168e87098a 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -43,8 +43,9 @@ - [7.0 Deprecations](#70-deprecations) - [`Story` type deprecated](#story-type-deprecated) - [`ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated) - - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertoroot) + - [Renamed `renderToDOM` to `renderToCanvas`](#renamed-rendertodom-to-rendertocanvas) - [Renamed `XFramework` to `XRenderer`](#renamed-xframework-to-xrenderer) + - [Renamed `DecoratorFn` to `Decorator`](#renamed-decoratorfn-to-decorator) - [From version 6.4.x to 6.5.0](#from-version-64x-to-650) - [Vue 3 upgrade](#vue-3-upgrade) - [React18 new root API](#react18-new-root-api) @@ -864,6 +865,43 @@ import type { SvelteRenderer } from '@storybook/svelte'; // etc. ``` +#### Renamed `DecoratorFn` to `Decorator` + +In 6.x you could import the type `DecoratorFn`: + +```ts +import type { DecoratorFn } from '@storybook/react'; +// etc. +``` + +This type is deprecated in 7.0, instead you can use the type `Decorator`: + +```ts +import type { Decorator } from '@storybook/react'; +// etc. +``` + +The type `Decorator` accepts a generic parameter `TArgs`. This can be used like this: + +```tsx +import type { Decorator } from '@storybook/react'; + +const withTheme: Decorator<{ theme: 'light' | 'dark' }> = (Story, { args }) => ( + + + +); +``` + +If you want to use `Decorator` in a backwards compatible way to `DecoratorFn`, you can use: + +```tsx +import type { Args, Decorator } from '@storybook/react'; + +// same Decorator is the same as the old DecartorFn +const withTheme: Decorator = (Story, {args}) => // args has type { [name: string]: any } +``` + ## From version 6.4.x to 6.5.0 ### Vue 3 upgrade diff --git a/code/renderers/react/src/public-types.ts b/code/renderers/react/src/public-types.ts index aad193cfd18a..99212af7df4f 100644 --- a/code/renderers/react/src/public-types.ts +++ b/code/renderers/react/src/public-types.ts @@ -131,7 +131,7 @@ export type ComponentStory = ComponentStoryFn; /** * @deprecated Use Decorator instead. */ -export type DecoratorFn = DecoratorFunction; +export type DecoratorFn = DecoratorFunction; export type Decorator = DecoratorFunction; export type Loader = LoaderFunction; export type StoryContext = GenericStoryContext;