Merge pull request #18532 from storybookjs/future/SB-444-angular

cleanup (angular) SB-444
storybookjs · Jun 21, 2022 · 27e9cd5 · 27e9cd5
2 parents 0982008 + b94b844
commit 27e9cd5
Show file tree

Hide file tree

Showing 172 changed files with 344 additions and 385 deletions.
diff --git a/addons/interactions/src/Panel.stories.tsx b/addons/interactions/src/Panel.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
-import { ComponentStoryObj, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryObj, ComponentMeta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
 

diff --git a/addons/jest/README.md b/addons/jest/README.md
@@ -221,7 +221,7 @@ export const decorators = [
 Finally, in your story, you'll need to include the following:
 
 ```ts
-import { Meta, Story } from '@storybook/angular/types-6-0';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import MyComponent from './MyComponent.component';
 
@@ -230,7 +230,7 @@ export default {
   title: 'MyComponent',
 } as Meta;
 
-const Template: Story<MyComponent> = (args: MyComponent) => ({
+const Template: StoryFn<MyComponent> = (args: MyComponent) => ({
   props: args,
 });
 

diff --git a/docs/snippets/angular/app-story-with-mock.ts.mdx b/docs/snippets/angular/app-story-with-mock.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // App.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { AppComponent } from './app.component';
 
@@ -14,7 +14,7 @@ export default {
   component: AppComponent,
 } as Meta;
 
-const Template: Story = () => ({
+const Template: StoryFn = () => ({
   props: {},
 });
 

diff --git a/docs/snippets/angular/button-group-story.ts.mdx b/docs/snippets/angular/button-group-story.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // ButtonGroup.stories.ts
 
-import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { Meta, moduleMetadata, StoryFn } from '@storybook/angular';
 
 import { CommonModule } from '@angular/common';
 
@@ -26,7 +26,7 @@ export default {
   ],
 } as Meta;
 
-const Template: Story = (args) => ({
+const Template: StoryFn = (args) => ({
   props: args,
 });
 

diff --git a/docs/snippets/angular/button-story-click-handler-args.ts.mdx b/docs/snippets/angular/button-story-click-handler-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { action } from '@storybook/addon-actions';
 
@@ -16,7 +16,7 @@ export default {
   component: Button,
 } as Meta;
 
-export const Text: Story = ({ label, onClick }) => ({
+export const Text: StoryFn = ({ label, onClick }) => ({
   props: {
     label,
     onClick,

diff --git a/docs/snippets/angular/button-story-click-handler-simplificated.ts.mdx b/docs/snippets/angular/button-story-click-handler-simplificated.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 Text: Story = (args) => ({
+export const Text: StoryFn = (args) => ({
   props: args,
 });
 ```
diff --git a/docs/snippets/angular/button-story-click-handler.ts.mdx b/docs/snippets/angular/button-story-click-handler.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';
 
@@ -16,7 +16,7 @@ export default {
   component: Button,
 } as Meta;
 
-export const Text: Story = () => ({
+export const Text: StoryFn = () => ({
   props: {
     text: 'Hello Button',
     onClick: action('clicked'),

diff --git a/docs/snippets/angular/button-story-component-args-primary.ts.mdx b/docs/snippets/angular/button-story-component-args-primary.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 

diff --git a/docs/snippets/angular/button-story-default-docs-code.ts.mdx b/docs/snippets/angular/button-story-default-docs-code.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';
 
@@ -24,7 +24,7 @@ const someFunction = (someValue: string) => {
 };
 
 
-export const ExampleStory: Story = (args) => {
+export const ExampleStory: StoryFn = (args) => {
   //👇 Destructure the label from the args object
   const { label } = args;
 

diff --git a/docs/snippets/angular/button-story-default-export-with-component.ts.mdx b/docs/snippets/angular/button-story-default-export-with-component.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 

diff --git a/docs/snippets/angular/button-story-rename-story.ts.mdx b/docs/snippets/angular/button-story-rename-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';
 
@@ -15,7 +15,7 @@ export default {
 } as Meta;
 
 
-export const Primary: Story = () => ({
+export const Primary: StoryFn = () => ({
   props: {
     label: 'Button',
     primary: true,

diff --git a/docs/snippets/angular/button-story-using-args.ts.mdx b/docs/snippets/angular/button-story-using-args.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';
 
@@ -16,7 +16,7 @@ export default {
 
 
 //👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
+const Template: StoryFn = (args) => ({
   props: args,
 });
 

diff --git a/docs/snippets/angular/button-story-with-addon-example.ts.mdx b/docs/snippets/angular/button-story-with-addon-example.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';
 
@@ -20,7 +20,7 @@ export default {
   },
 } as Meta;
 
-export const Basic: Story = () => ({
+export const Basic: StoryFn = () => ({
    template: `<app-button>hello</<app-button>`,
 });
 ```
diff --git a/docs/snippets/angular/button-story-with-args.ts.mdx b/docs/snippets/angular/button-story-with-args.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';
 
@@ -15,7 +15,7 @@ export default {
 } as Meta;
 
 //👇 We create a “template” of how args map to rendering
-const Template: Story = (args) => ({
+const Template: StoryFn = (args) => ({
   props: args,
 });
 

diff --git a/docs/snippets/angular/button-story-with-blue-args.ts.mdx b/docs/snippets/angular/button-story-with-blue-args.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Button.stories.ts
 
-import { Meta } from '@storybook/angular';
+import type { Meta } from '@storybook/angular';
 
 import { Button } from './button.component';
 

diff --git a/docs/snippets/angular/button-story-with-emojis.ts.mdx b/docs/snippets/angular/button-story-with-emojis.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,22 +14,22 @@ export default {
   component: Button,
 };
 
-export const Primary: Story = () => ({
+export const Primary: StoryFn = () => ({
   props: {
     label: 'Button',
     backgroundColor: '#ff0',
   },
 });
 
 
-export const Secondary: Story = () => ({
+export const Secondary: StoryFn = () => ({
   props: {
     label: '😄👍😍💯',
     backgroundColor: '#ff0',
   },
 });
 
-export const Tertiary: Story = () => ({
+export const Tertiary: StoryFn = () => ({
   props: {
     label: '📚📕📈🤓',
     backgroundColor: '#ff0',

diff --git a/docs/snippets/angular/button-story.ts.mdx b/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,

diff --git a/docs/snippets/angular/checkbox-story-csf.ts.mdx b/docs/snippets/angular/checkbox-story-csf.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Checkbox.stories.ts
 
-import { Meta, Story } from '@storybook/angular';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import { Checkbox } from './Checkbox.component';
 
@@ -14,7 +14,7 @@ export default {
   component: Checkbox,
 } as Meta;
 
-export const allCheckboxes: Story = () => ({
+export const allCheckboxes: StoryFn = () => ({
   template: `
     <form>
       <Checkbox id="Unchecked" label="Unchecked" />

diff --git a/docs/snippets/angular/component-story-custom-args-icons.ts.mdx b/docs/snippets/angular/component-story-custom-args-icons.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // Icon.stories.ts
 
-import { Story, Meta } from '@storybook/angular/types-6-0';
+import type { Meta, StoryFn } from '@storybook/angular';
 
 import Icon from './icon.component';
 

diff --git a/docs/snippets/angular/component-story-figma-integration.ts.mdx b/docs/snippets/angular/component-story-figma-integration.ts.mdx
@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { 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: {},
 });
 

diff --git a/docs/snippets/angular/component-story-static-asset-cdn.ts.mdx b/docs/snippets/angular/component-story-static-asset-cdn.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;
 
 
-export const WithAnImage: Story = () => ({
+export const WithAnImage: StoryFn = () => ({
   props: {
     src: 'https://place-hold.it/350x150',
     alt: 'My CDN placeholder',

diff --git a/docs/snippets/angular/component-story-static-asset-with-import.ts.mdx b/docs/snippets/angular/component-story-static-asset-with-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';
 
@@ -21,7 +21,7 @@ const image = {
   alt: 'my image',
 };
 
-export const WithAnImage: Story () => ({
+export const WithAnImage: StoryFn () => ({
   template: `<img src="{{src}}" alt="{{alt}}" />`,
   props: {
     src: image.src,

diff --git a/docs/snippets/angular/component-story-static-asset-without-import.ts.mdx b/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',