Story should StoryFn

docs/snippets/angular/button-story.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { Button } from './button.component';
 
@@ -14,7 +14,7 @@ export default {
   component: Button,
 } as Meta;
 
-export const Primary: Story = () => ({
+export const Primary: StoryFn = () => ({
   props: {
     label: 'Button',
     primary: true,

docs/snippets/angular/component-story-custom-args-icons.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // Icon.stories.ts
 
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Icon from './icon.component';
 

docs/snippets/angular/component-story-figma-integration.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { withDesign } from 'storybook-addon-designs';
 
@@ -15,7 +15,7 @@ export default {
 } as Meta;
 
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: Story = () => ({
+const Template: StoryFn = () => ({
   props: {},
 });
 

docs/snippets/angular/component-story-static-asset-without-import.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { MyComponent } from './MyComponent.component';
 
@@ -15,7 +15,7 @@ export default {
 } as Meta;
 
 // Assume image.png is located in the "public" directory.
-export const WithAnImage: Story = () => ({
+export const WithAnImage: StoryFn = () => ({
   props: {
     src: '/image.png',
     alt: 'my image',

docs/snippets/angular/list-story-with-subcomponents.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // List.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -24,13 +24,13 @@ export default {
   ],
 } as Meta;
 
-export const Empty: Story = () => ({
+export const Empty: StoryFn = () => ({
   props: {
     args,
   },
 });
 
-export const OneItem: Story = () => ({
+export const OneItem: StoryFn = () => ({
   props: {
     args,
   },

examples/angular-cli/src/stories/addons/actions/addon-actions.stories.ts

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, Story } from '@storybook/angular';
+import { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../../angular-demo';
 
 export default {
@@ -7,7 +7,7 @@ export default {
   title: 'Addons/Actions',
 } as Meta;
 
-export const ComponentOutputWithEventEmitter: Story = () => ({
+export const ComponentOutputWithEventEmitter: StoryFn = () => ({
   props: {
     text: 'Button 🥁',
     onClick: action('On click'),
@@ -15,7 +15,7 @@ export const ComponentOutputWithEventEmitter: Story = () => ({
 });
 ComponentOutputWithEventEmitter.storyName = 'Component Output with EventEmitter';
 
-export const UseActionInMethod: Story = () => ({
+export const UseActionInMethod: StoryFn = () => ({
   props: {
     text: 'Button 🥁',
     onClick: (e) => {
@@ -27,7 +27,7 @@ export const UseActionInMethod: Story = () => ({
 });
 UseActionInMethod.storyName = 'Use action in method';
 
-export const StoryTemplate: Story = () => ({
+export const StoryTemplate: StoryFn = () => ({
   template: `<button (click)="onClick($event)" (mouseover)="onOver()">Button</button>`,
   props: {
     onClick: action('On click'),
@@ -36,7 +36,7 @@ export const StoryTemplate: Story = () => ({
 });
 StoryTemplate.storyName = 'Story with template';
 
-export const ComponentOutputWithArgsTypes: Story = (args) => ({
+export const ComponentOutputWithArgsTypes: StoryFn = (args) => ({
   props: {
     text: 'Button 🥁',
     ...args,

examples/angular-cli/src/stories/addons/backgrounds/addon-background.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../../angular-demo';
 
 export default {
@@ -15,11 +15,11 @@ export default {
   },
 } as Meta;
 
-export const WithComponent: Story = () => ({
+export const WithComponent: StoryFn = () => ({
   props: { text: 'Button' },
 });
 
-export const WithTemplate: Story = () => ({
+export const WithTemplate: StoryFn = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: { text: 'Button' },
 });

examples/angular-cli/src/stories/addons/controls/addon-controls.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { DocButtonComponent, ISomeInterface } from '../docs/doc-button/doc-button.component';
 
 export default {

examples/angular-cli/src/stories/basics/angular-forms/customControlValueAccessor/custom-cva-component.stories.ts

@@ -1,6 +1,6 @@
 import { FormsModule } from '@angular/forms';
 import { action } from '@storybook/addon-actions';
-import { moduleMetadata, Meta, Story } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { CustomCvaComponent } from './custom-cva.component';
 
 export default {
@@ -18,7 +18,7 @@ export default {
   ],
 } as Meta;
 
-export const SimpleInput: Story = () => ({
+export const SimpleInput: StoryFn = () => ({
   props: {
     ngModel: 'Type anything',
     ngModelChange: action('ngModelChange'),

examples/angular-cli/src/stories/basics/component-with-enums/enums.component.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import {
   EnumsComponent,
   EnumNumeric,

examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-about-parent.stories.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
 import { componentWrapperDecorator, moduleMetadata } from '@storybook/angular';
 
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 @Component({
   selector: 'sb-button',
@@ -38,13 +38,13 @@ export default {
 
 // By default storybook uses the default export component if no template or component is defined in the story
 // So Storybook nests the component twice because it is first added by the componentWrapperDecorator.
-export const AlwaysDefineTemplateOrComponent: Story = () => ({});
+export const AlwaysDefineTemplateOrComponent: StoryFn = () => ({});
 
-export const EmptyButton: Story = () => ({
+export const EmptyButton: StoryFn = () => ({
   template: '',
 });
 
-export const WithDynamicContentAndArgs: Story = (args) => ({
+export const WithDynamicContentAndArgs: StoryFn = (args) => ({
   template: `${args.content}`,
 });
 WithDynamicContentAndArgs.argTypes = {
@@ -52,7 +52,7 @@ WithDynamicContentAndArgs.argTypes = {
 };
 WithDynamicContentAndArgs.args = { content: 'My button text' };
 
-export const InH1: Story = () => ({
+export const InH1: StoryFn = () => ({
   template: 'My button in h1',
 });
 InH1.decorators = [componentWrapperDecorator((story) => `<h1>${story}</h1>`)];
@@ -74,7 +74,7 @@ class SbEmojiComponent {
   emoji = '👾';
 }
 
-export const WithComponent: Story = () => ({
+export const WithComponent: StoryFn = () => ({
   // Override the default component
   // It is therefore necessary to manually declare the parent component with moduleMetadata
   component: SbEmojiComponent,
@@ -85,7 +85,7 @@ WithComponent.decorators = [
   }),
 ];
 
-export const WithComponentAndArgs: Story = (args) => {
+export const WithComponentAndArgs: StoryFn = (args) => {
   return {
     props: args,
     component: SbEmojiComponent,

examples/angular-cli/src/stories/basics/component-with-ng-content/ng-content-simple.stories.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
 
-import type { Story, Meta } from '@storybook/angular/';
+import type { Meta, StoryFn } from '@storybook/angular/';
 
 @Component({
   selector: 'storybook-with-ng-content',
@@ -14,13 +14,13 @@ export default {
   component: WithNgContentComponent,
 } as Meta;
 
-export const OnlyComponent: Story = () => ({});
+export const OnlyComponent: StoryFn = () => ({});
 
-export const Default: Story = () => ({
+export const Default: StoryFn = () => ({
   template: `<storybook-with-ng-content><h1>This is rendered in ng-content</h1></storybook-with-ng-content>`,
 });
 
-export const WithDynamicContentAndArgs: Story = (args) => ({
+export const WithDynamicContentAndArgs: StoryFn = (args) => ({
   template: `<storybook-with-ng-content><h1>${args.content}</h1></storybook-with-ng-content>`,
 });
 WithDynamicContentAndArgs.argTypes = {

examples/angular-cli/src/stories/basics/component-with-ng-on-destroy/component-with-on-destroy.stories.ts

@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 @Component({
   selector: 'on-destroy',
@@ -37,6 +37,6 @@ export default {
   },
 } as Meta;
 
-export const SimpleComponent: Story = () => ({
+export const SimpleComponent: StoryFn = () => ({
   component: OnDestroyComponent,
 });

examples/angular-cli/src/stories/basics/component-with-pipe/custom-pipes.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 
 import { CustomPipePipe } from './custom.pipe';
 import { WithPipeComponent } from './with-pipe.component';
@@ -13,13 +13,13 @@ export default {
   ],
 } as Meta;
 
-export const Simple: Story = () => ({
+export const Simple: StoryFn = () => ({
   props: {
     field: 'foobar',
   },
 });
 
-export const WithArgsStory: Story = (args) => ({
+export const WithArgsStory: StoryFn = (args) => ({
   props: args,
 });
 WithArgsStory.storyName = 'With args';

examples/angular-cli/src/stories/basics/component-without-selector/without-selector.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { WithoutSelectorComponent, WITHOUT_SELECTOR_DATA } from './without-selector.component';
 
 export default {
@@ -11,11 +11,11 @@ export default {
   ],
 } as Meta;
 
-export const SimpleComponent: Story = () => ({});
+export const SimpleComponent: StoryFn = () => ({});
 
 // Live changing of args by controls does not work for now. When changing args storybook does not fully
 // reload and therefore does not take into account the change of provider.
-export const WithInjectionTokenAndArgs: Story = (args) => ({
+export const WithInjectionTokenAndArgs: StoryFn = (args) => ({
   props: args,
   moduleMetadata: {
     providers: [

examples/angular-cli/src/stories/core/moduleMetadata/in-export-default.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Story, Meta } from '@storybook/angular';
+import { moduleMetadata, StoryFn, Meta } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
 export default {
@@ -21,7 +21,7 @@ export default {
   ],
 } as Meta;
 
-export const Story1: Story = () => ({
+export const Story1: StoryFn = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
@@ -30,7 +30,7 @@ export const Story1: Story = () => ({
 
 Story1.storyName = 'Story 1';
 
-export const Story2: Story = () => ({
+export const Story2: StoryFn = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
 });
 

examples/angular-cli/src/stories/core/moduleMetadata/in-stories.stories.ts

@@ -1,11 +1,11 @@
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 
 export default {
   title: 'Core / ModuleMetadata / In stories',
 } as Meta;
 
-export const Individual1: Story = () => ({
+export const Individual1: StoryFn = () => ({
   template: `<storybook-simple-token-component [name]="name"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',
@@ -24,7 +24,7 @@ export const Individual1: Story = () => ({
 
 Individual1.storyName = 'Individual 1';
 
-export const Individual2: Story = () => ({
+export const Individual2: StoryFn = () => ({
   template: `<storybook-simple-token-component></storybook-simple-token-component>`,
   moduleMetadata: {
     imports: [],

examples/angular-cli/src/stories/core/moduleMetadata/merge-default-and-story.stories.ts

@@ -1,4 +1,4 @@
-import { moduleMetadata, Meta, Story } from '@storybook/angular';
+import { moduleMetadata, Meta, StoryFn } from '@storybook/angular';
 import { TokenComponent, ITEMS, DEFAULT_NAME } from './angular-src/token.component';
 import { CustomPipePipe } from './angular-src/custom.pipe';
 
@@ -21,7 +21,7 @@ export default {
   ],
 } as Meta;
 
-export const MergeWithDefaultModuleMetadata: Story = () => ({
+export const MergeWithDefaultModuleMetadata: StoryFn = () => ({
   template: `<storybook-simple-token-component [name]="name | customPipe"></storybook-simple-token-component>`,
   props: {
     name: 'Prop Name',

examples/angular-cli/src/stories/core/parameters/all-parameters.stories.ts

@@ -1,5 +1,5 @@
 import { addParameters } from '@storybook/angular';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../../angular-demo';
 
 const globalParameter = 'globalParameter';

examples/angular-cli/src/stories/core/parameters/layout.parameters.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../../angular-demo';
 
 export default {
@@ -6,26 +6,26 @@ export default {
   component: Button,
 } as Meta;
 
-export const Default: Story = () => ({
+export const Default: StoryFn = () => ({
   props: { text: 'Button' },
 });
 
-export const Fullscreen: Story = () => ({
+export const Fullscreen: StoryFn = () => ({
   template: `<div style="background-color: yellow;"><storybook-button-component text="Button"></storybook-button-component></div>`,
 });
 Fullscreen.parameters = { layout: 'fullscreen' };
 
-export const Centered: Story = () => ({
+export const Centered: StoryFn = () => ({
   props: { text: 'Button' },
 });
 Centered.parameters = { layout: 'centered' };
 
-export const Padded: Story = () => ({
+export const Padded: StoryFn = () => ({
   props: { text: 'Button' },
 });
 Padded.parameters = { layout: 'padded' };
 
-export const None: Story = () => ({
+export const None: StoryFn = () => ({
   props: { text: 'Button' },
 });
 None.parameters = { layout: 'none' };

examples/angular-cli/src/stories/core/styles/story-styles.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 import { action } from '@storybook/addon-actions';
 import { Button } from '../../angular-demo';
 
@@ -11,7 +11,7 @@ export default {
   ],
 } as Meta;
 
-export const TemplateStory: Story = () => ({
+export const TemplateStory: StoryFn = () => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: {
     text: 'Button with custom styles',
@@ -28,7 +28,7 @@ export const TemplateStory: Story = () => ({
 });
 TemplateStory.storyName = 'With story template';
 
-export const WithArgsStory: Story = (args) => ({
+export const WithArgsStory: StoryFn = (args) => ({
   template: `<storybook-button-component [text]="text" (onClick)="onClick($event)"></storybook-button-component>`,
   props: args,
   styles: [

examples/angular-cli/src/stories/from-cli/Button.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import Button from './button.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export

examples/angular-cli/src/stories/legacy/component-in-story.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../angular-demo';
 
 export default {

examples/angular-cli/src/stories/others/issues/12009-unknown-component.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { Button } from '../../angular-demo';
 
 export default {

examples/angular-cli/src/stories/others/ngrx/ngrx-store.stories.ts

@@ -1,7 +1,7 @@
 import { Store, StoreModule } from '@ngrx/store';
 import { Component } from '@angular/core';
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 
 @Component({
   selector: 'storybook-comp-with-store',
@@ -41,10 +41,10 @@ export default {
   ],
 } as Meta;
 
-export const WithComponent: Story = () => ({
+export const WithComponent: StoryFn = () => ({
   component: WithStoreComponent,
 });
 
-export const WithTemplate: Story = () => ({
+export const WithTemplate: StoryFn = () => ({
   template: `<storybook-comp-with-store></storybook-comp-with-store>`,
 });

examples/angular-cli/src/stories/welcome-angular.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { linkTo } from '@storybook/addon-links';
 import { AppComponent } from '../app/app.component';
 
@@ -6,7 +6,7 @@ export default {
   title: 'Welcome/ To Angular',
 } as Meta;
 
-export const ToAngular: Story = () => ({
+export const ToAngular: StoryFn = () => ({
   component: AppComponent,
   props: {
     showApp: linkTo('Button'),

examples/angular-cli/src/stories/welcome-storybook.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import { linkTo } from '@storybook/addon-links';
 import { Welcome } from './angular-demo';
 
@@ -6,7 +6,7 @@ export default {
   title: 'Welcome/ To Storybook',
 } as Meta;
 
-export const ToStorybook: Story = () => ({
+export const ToStorybook: StoryFn = () => ({
   component: Welcome,
   props: {
     showApp: linkTo('Button'),

examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts

@@ -1,4 +1,4 @@
-import type { Story, Meta } from '@storybook/html';
+import type { Meta, StoryFn } from '@storybook/html';
 import { createButton, ButtonProps } from './Button';
 
 export default {

examples/vue-3-cli/src/stories/CSF3.stories.ts

@@ -1,5 +1,5 @@
 import { userEvent, within } from '@storybook/testing-library';
-import type { Story, Meta } from '@storybook/vue3';
+import type { Meta, StoryFn } from '@storybook/vue3';
 import Button from './Button.vue';
 
 export default {

examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import type { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 
 const text = 'Testing the a11y addon';
 

examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import type { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 
 export default {
   title: 'Addons / Actions',

examples/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import type { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 
 export default {
   title: 'Addons / Backgrounds',

examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts

@@ -1,5 +1,5 @@
 import { html } from 'lit';
-import type { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import '../../../components/sb-button';
 
 export default {

frameworks/angular/src/client/angular-beta/StorybookModule.ts

@@ -17,7 +17,7 @@ const deprecatedStoryComponentWarning = deprecate(
         Instead, use \`export const default = () => ({ component: AppComponent });\`
         or
         \`\`\`
-        export const Primary: Story = () => ({});
+        export const Primary: StoryFn = () => ({});
         Primary.parameters = { component: AppComponent };
         \`\`\`
         Read more at 

lib/cli/src/frameworks/angular/Button.stories.ts

@@ -1,5 +1,5 @@
 // also exported from '@storybook/angular' if you can deal with breaking changes in 6.1
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 import Button from './button.component';
 
 // More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export

lib/cli/src/frameworks/angular/Header.stories.ts

@@ -1,6 +1,6 @@
 import { moduleMetadata } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Story, Meta } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';