Types: Remove DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta types

MIGRATION.md

@@ -33,6 +33,7 @@
     - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
     - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
     - [LinkTo direct import from addon-links](#linkto-direct-import-from-addon-links)
+    - [DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#decoratorfn-story-componentstory-componentstoryobj-componentstoryfn-and-componentmeta-typescript-types)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -619,6 +620,14 @@ import LinkTo from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 ```
 
+#### DecoratorFn, Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types
+
+The `Story` type is now removed in favor of `StoryFn` and `StoryObj`. More info [here](#story-type-deprecated).
+
+The `DecoratorFn` type is now removed in favor of `Decorator`. [More info](#renamed-decoratorfn-to-decorator).
+
+For React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. [More info](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated
@@ -2214,6 +2223,8 @@ During the 7.0 dev cycle we will be preparing recommendations and utilities to m
 
 #### `Story` type deprecated
 
+_Has codemod_
+
 In 6.x you were able to do this:
 
 ```ts
@@ -2222,24 +2233,43 @@ import type { Story } from '@storybook/react';
 export const MyStory: Story = () => <div />;
 ```
 
-But this will produce a deprecation warning in 7.0 because `Story` has been deprecated.
-To fix the deprecation warning, use the `StoryFn` type:
+However with the introduction of CSF3, the `Story` type has been deprecated in favor of two other types: `StoryFn` for CSF2 and `StoryObj` for CSF3.
 
 ```ts
-import type { StoryFn } from '@storybook/react';
+import type { StoryFn, StoryObj } from '@storybook/react';
 
-export const MyStory: StoryFn = () => <div />;
+export const MyCsf2Story: StoryFn = () => <div />;
+export const MyCsf3Story: StoryObj = {
+  render: () => <div />
+};
 ```
 
 This change is part of our move to CSF3, which uses objects instead of functions to represent stories.
 You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
 
+We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs):
+
+```
+npx storybook@next migrate upgrade-deprecated-types --glob="**/*.stories.tsx"
+```
+
 #### `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are deprecated
 
-The type of StoryObj and StoryFn have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter.
+_Has codemod_
+
+The type of `StoryObj` and `StoryFn` have been changed in 7.0 so that both the "component" as "the props of the component" will be accepted as the generic parameter. You can now replace the types:
+
+```
+ComponentStory -> StoryFn (CSF2) or StoryObj (CSF3)
+ComponentStoryObj -> StoryObj
+ComponentStoryFn -> StoryFn
+ComponentMeta -> Meta
+```
+
+Here are a few examples:
 
 ```ts
-import type { Story } from '@storybook/react';
+import type { StoryFn, StoryObj } from '@storybook/react';
 import { Button, ButtonProps } from './Button';
 
 // This works in 7.0, making the ComponentX types redundant.
@@ -2259,6 +2289,12 @@ export const CSF2Story: StoryFn<ButtonProps> = (args) => <Button {...args} />;
 CSF2Story.args = { label: 'Label' };
 ```
 
+We have set up a codemod that attempts to automatically migrate your code for you (update the glob to suit your needs):
+
+```
+npx storybook@next migrate upgrade-deprecated-types --glob="**/*.stories.tsx"
+```
+
 #### Renamed `renderToDOM` to `renderToCanvas`
 
 The "rendering" function that renderers (ex-frameworks) must export (`renderToDOM`) has been renamed to `renderToCanvas` to acknowledge that some consumers of frameworks/the preview do not work with DOM elements.

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,4 +1,4 @@
-import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { StoryObj, Meta } from '@storybook/react';
 import { expect } from '@storybook/jest';
 import { CallStates } from '@storybook/instrumenter';
 import { userEvent, within } from '@storybook/testing-library';
@@ -7,7 +7,7 @@ import { getCalls } from '../mocks';
 import { Interaction } from './Interaction';
 import SubnavStories from './Subnav.stories';
 
-type Story = ComponentStoryObj<typeof Interaction>;
+type Story = StoryObj<typeof Interaction>;
 
 export default {
   title: 'Addons/Interactions/Interaction',
@@ -17,7 +17,7 @@ export default {
     controls: SubnavStories.args.controls,
     controlStates: SubnavStories.args.controlStates,
   },
-} as ComponentMeta<typeof Interaction>;
+} as Meta<typeof Interaction>;
 
 export const Active: Story = {
   args: {

code/renderers/html/src/public-types.ts

@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<HtmlRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<HtmlRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<HtmlRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<HtmlRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<HtmlRenderer, TArgs>;

code/renderers/preact/src/public-types.ts

@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<PreactRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<PreactRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<PreactRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<PreactRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<PreactRenderer, TArgs>;

code/renderers/react/src/public-types.ts

@@ -11,15 +11,13 @@ import type {
   StrictArgs,
   ProjectAnnotations,
 } from '@storybook/types';
-import type { ComponentProps, ComponentType, JSXElementConstructor } from 'react';
+import type { ComponentProps, ComponentType } from 'react';
 import type { SetOptional, Simplify } from 'type-fest';
 import type { ReactRenderer } from './types';
 
 export type { Args, ArgTypes, Parameters, StrictArgs } from '@storybook/types';
 export type { ReactRenderer };
 
-type JSXElement = keyof JSX.IntrinsicElements | JSXElementConstructor<any>;
-
 /**
  * Metadata to configure the stories for a component.
  *
@@ -74,73 +72,6 @@ type AddMocks<TArgs, DefaultArgs> = Simplify<{
     : TArgs[T];
 }>;
 
-/**
- * @deprecated Use `Meta` instead, e.g. ComponentMeta<typeof Button> -> Meta<typeof Button>.
- *
- * For the common case where a component's stories are simple components that receives args as props:
- *
- * ```tsx
- * export default { ... } as ComponentMeta<typeof Button>;
- * ```
- */
-export type ComponentMeta<T extends JSXElement> = Meta<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryFn` instead, e.g. ComponentStoryFn<typeof Button> -> StoryFn<typeof Button>.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * For the common case where a (CSFv2) story is a simple component that receives args as props:
- *
- * ```tsx
- * const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />
- * ```
- */
-export type ComponentStoryFn<T extends JSXElement> = StoryFn<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryObj` instead, e.g. ComponentStoryObj<typeof Button> -> StoryObj<typeof Button>.
- *
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStoryObj<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-export type ComponentStoryObj<T extends JSXElement> = StoryObj<ComponentProps<T>>;
-
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
-/**
- * @deprecated Use `StoryFn` instead, e.g. ComponentStory<typeof Button> -> StoryFn<typeof Button>.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/.
- *
- * For the common case where a (CSFv3) story is a simple component that receives args as props:
- *
- * ```tsx
- * const MyStory: ComponentStory<typeof Button> = {
- *   args: { buttonArg1: 'val' },
- * }
- * ```
- */
-export type ComponentStory<T extends JSXElement> = ComponentStoryFn<T>;
-
-/**
- * @deprecated Use Decorator instead.
- */
-export type DecoratorFn = DecoratorFunction<ReactRenderer>;
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ReactRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<ReactRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<ReactRenderer, TArgs>;

code/renderers/server/src/public-types.ts

@@ -34,17 +34,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<ServerRenderer, TArgs>;
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<ServerRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type { ServerRenderer };
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<ServerRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<ServerRenderer, TArgs>;

code/renderers/vue3/src/public-types.ts

@@ -74,17 +74,6 @@ type ComponentPropsOrProps<TCmpOrArgs> = TCmpOrArgs extends Constructor<any>
   ? ComponentPropsAndSlots<TCmpOrArgs>
   : TCmpOrArgs;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<VueRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<VueRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<VueRenderer, TArgs>;

code/renderers/web-components/src/public-types.ts

@@ -35,17 +35,6 @@ export type StoryFn<TArgs = Args> = AnnotatedStoryFn<WebComponentsRenderer, TArg
  */
 export type StoryObj<TArgs = Args> = StoryAnnotations<WebComponentsRenderer, TArgs>;
 
-/**
- * @deprecated Use `StoryFn` instead.
- * Use `StoryObj` if you want to migrate to CSF3, which uses objects instead of functions to represent stories.
- * You can read more about the CSF3 format here: https://storybook.js.org/blog/component-story-format-3-0/
- *
- * 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 Story<TArgs = Args> = StoryFn<TArgs>;
-
 export type Decorator<TArgs = StrictArgs> = DecoratorFunction<WebComponentsRenderer, TArgs>;
 export type Loader<TArgs = StrictArgs> = LoaderFunction<WebComponentsRenderer, TArgs>;
 export type StoryContext<TArgs = StrictArgs> = GenericStoryContext<WebComponentsRenderer, TArgs>;

code/ui/manager/src/components/preview/Preview.stories.tsx

@@ -7,7 +7,7 @@ import { Location, BaseLocationProvider } from '@storybook/router';
 
 import { ThemeProvider, ensure as ensureTheme, themes } from '@storybook/theming';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { Preview } from './Preview';
 
 import { PrettyFakeProvider } from '../../FakeProvider';
@@ -80,7 +80,7 @@ export default {
           </Location>
         </BaseLocationProvider>
       );
-    }) as DecoratorFn,
+    }) as Decorator,
   ],
 };
 

code/ui/manager/src/components/sidebar/Heading.stories.tsx

@@ -1,15 +1,15 @@
 /* eslint-disable storybook/use-storybook-testing-library */
 // @TODO: use addon-interactions and remove the rule disable above
 import React from 'react';
-import type { ComponentMeta, ComponentStoryObj, ComponentStoryFn } from '@storybook/react';
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
 import { ThemeProvider, useTheme } from '@storybook/theming';
 import type { Theme } from '@storybook/theming';
 import { action } from '@storybook/addon-actions';
 import { screen } from '@testing-library/dom';
 
 import { Heading } from './Heading';
 
-type Story = ComponentStoryFn<typeof Heading>;
+type Story = StoryFn<typeof Heading>;
 
 export default {
   component: Heading,
@@ -19,7 +19,7 @@ export default {
   decorators: [
     (storyFn) => <div style={{ padding: '0 20px', maxWidth: '230px' }}>{storyFn()}</div>,
   ],
-} as ComponentMeta<typeof Heading>;
+} as Meta<typeof Heading>;
 
 const menuItems = [
   { title: 'Menu Item 1', onClick: action('onActivateMenuItem'), id: '1' },
@@ -223,7 +223,7 @@ export const NoBrand: Story = () => {
   );
 };
 
-export const SkipToCanvasLinkFocused: ComponentStoryObj<typeof Heading> = {
+export const SkipToCanvasLinkFocused: StoryObj<typeof Heading> = {
   args: {
     menu: menuItems,
     skipLinkHref: '#storybook-preview-wrapper',

code/ui/manager/src/settings/SettingsFooter.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import SettingsFooter from './SettingsFooter';
 
 export default {
@@ -11,7 +11,7 @@ export default {
       <div style={{ width: '600px', margin: '2rem auto' }}>
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };
 

code/ui/manager/src/settings/shortcuts.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { actions as makeActions } from '@storybook/addon-actions';
 
-import type { DecoratorFn } from '@storybook/react';
+import type { Decorator } from '@storybook/react';
 import { ShortcutsScreen } from './shortcuts';
 import { defaultShortcuts } from './defaultShortcuts';
 
@@ -26,7 +26,7 @@ export default {
       >
         <StoryFn {...c} />
       </div>
-    )) as DecoratorFn,
+    )) as Decorator,
   ],
 };