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)
+    - [Story, ComponentStory, ComponentStoryObj, ComponentStoryFn and ComponentMeta TypeScript types](#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,12 @@ import LinkTo from '@storybook/addon-links';
 import LinkTo from '@storybook/addon-links/react';
 ```
 
+#### 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).
+
+Additionally, for React, the `ComponentStory`, `ComponentStoryObj`, `ComponentStoryFn` and `ComponentMeta` types are now removed in favor of `StoryFn`, `StoryObj` and `Meta`. More info [here](#componentstory-componentstoryobj-componentstoryfn-and-componentmeta-types-are-deprecated).
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

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>;