Merge pull request #18527 from storybookjs/future/SB-444-cleanup

cleanup SB-444 examples
storybookjs · Jun 21, 2022 · 0982008 · 0982008
2 parents d4c22e2 + 0498b96
commit 0982008
Show file tree

Hide file tree

Showing 195 changed files with 558 additions and 673 deletions.
diff --git a/docs/faq.md b/docs/faq.md
@@ -426,7 +426,7 @@ We're aware that the default Typescript story construct might seem outdated and
 // Button.stories.ts | tsx
 
 import React from 'react';
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStory, ComponentMeta } from '@storybook/react';
 
 const StoryMeta: ComponentMeta<typeof Button> = {
   /* 👇 The title prop is optional.

diff --git a/docs/snippets/react/app-story-with-mock.ts.mdx b/docs/snippets/react/app-story-with-mock.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import App from './App';
 
@@ -16,7 +16,7 @@ export default {
   component: App,
 } as ComponentMeta<typeof App>;
 
-const Template: ComponentStory<typeof App> = () => <App />;
+const Template: ComponentStoryFn<typeof App> = () => <App />;
 
 export const Success = Template.bind({});
 Success.parameters = {

diff --git a/docs/snippets/react/button-group-story.ts.mdx b/docs/snippets/react/button-group-story.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { ButtonGroup } from '../ButtonGroup';
 
@@ -19,7 +19,7 @@ export default {
   component: ButtonGroup,
 } as ComponentMeta<typeof ButtonGroup>;
 
-const Template: ComponentStory<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />;
+const Template: ComponentStoryFn<typeof ButtonGroup> = (args) => <ButtonGroup {...args} />;
 
 export const Pair = Template.bind({});
 Pair.args = {

diff --git a/docs/snippets/react/button-story-click-handler.ts.mdx b/docs/snippets/react/button-story-click-handler.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { action } from '@storybook/addon-actions';
 
@@ -18,5 +18,5 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Basic: ComponentStory<typeof Button> = () => <Button label="Hello" onClick={action('clicked')} />;
+export const Basic: ComponentStoryFn<typeof Button> = () => <Button label="Hello" onClick={action('clicked')} />;
 ```
diff --git a/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx b/docs/snippets/react/button-story-decorator.story-function-ts.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
@@ -14,7 +14,7 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.decorators = [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>];

diff --git a/docs/snippets/react/button-story-decorator.ts.mdx b/docs/snippets/react/button-story-decorator.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 export default {
   /* 👇 The title prop is optional.
@@ -14,7 +14,7 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 Primary.decorators = [

diff --git a/docs/snippets/react/button-story-default-docs-code.ts.mdx b/docs/snippets/react/button-story-default-docs-code.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -25,7 +25,7 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-export const ExampleStory: ComponentStory<typeof Button> = (args) => {
+export const ExampleStory: ComponentStoryFn<typeof Button> = (args) => {
   //👇 Destructure the label from the args object
   const { label } = args;
 

diff --git a/docs/snippets/react/button-story-rename-story.ts.mdx b/docs/snippets/react/button-story-rename-story.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -16,6 +16,6 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary label="Button"/>;
+export const Primary: ComponentStoryFn<typeof Button> = () => <Button primary label="Button"/>;
 Primary.storyName = 'I am the primary';
 ```
diff --git a/docs/snippets/react/button-story-using-args.ts.mdx b/docs/snippets/react/button-story-using-args.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -17,7 +17,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 //👇 Each story then reuses that template
 export const Primary = Template.bind({});

diff --git a/docs/snippets/react/button-story-with-addon-example.ts.mdx b/docs/snippets/react/button-story-with-addon-example.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -22,5 +22,5 @@ export default {
   },
 } as ComponentMeta<typeof Button>;
 
-const Basic: ComponentStory<typeof Button> = () => <Button>hello</Button>;
+const Basic: ComponentStoryFn<typeof Button> = () => <Button>hello</Button>;
 ```
diff --git a/docs/snippets/react/button-story-with-args.ts.mdx b/docs/snippets/react/button-story-with-args.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button, ButtonProps } from './Button';
 
@@ -17,7 +17,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 //👇 We create a “template” of how args map to rendering
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 export const Primary = Template.bind({});
 

diff --git a/docs/snippets/react/button-story-with-emojis.ts.mdx b/docs/snippets/react/button-story-with-emojis.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -16,15 +16,15 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => (
+export const Primary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="Button" />
 );
 
-export const Secondary: ComponentStory<typeof Button> = () => (
+export const Secondary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="😄👍😍💯" />
 );
 
-export const Tertiary: ComponentStory<typeof Button> = () => (
+export const Tertiary: ComponentStoryFn<typeof Button> = () => (
   <Button backgroundColor="#ff0" label="📚📕📈🤓" />
 );
 ```
diff --git a/docs/snippets/react/button-story.ts.mdx b/docs/snippets/react/button-story.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -16,5 +16,5 @@ export default {
   component: Button,
 } as ComponentMeta<typeof Button>;
 
-export const Primary: ComponentStory<typeof Button> = () => <Button primary>Button</Button>;
+export const Primary: ComponentStoryFn<typeof Button> = () => <Button primary>Button</Button>;
 ```
diff --git a/docs/snippets/react/checkbox-story-csf.ts.mdx b/docs/snippets/react/checkbox-story-csf.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { ComponentMeta, ComponentStoryFn } from '@storybook/react';
 
 import { Checkbox } from './Checkbox';
 
@@ -16,7 +16,7 @@ export default {
   component: Checkbox,
 } as ComponentMeta<typeof Checkbox>;
 
-export const allCheckboxes: ComponentStory<typeof Checkbox> = () => (
+export const allCheckboxes: ComponentStoryFn<typeof Checkbox> = () => (
   <form>
     <Checkbox id="Unchecked" label="Unchecked" />
     <Checkbox id="Checked" label="Checked" checked />

diff --git a/docs/snippets/react/component-story-custom-args-complex.ts.mdx b/docs/snippets/react/component-story-custom-args-complex.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { YourComponent } from './your-component';
 
@@ -30,7 +30,7 @@ export default {
   },
 } as ComponentMeta<typeof YourComponent>;
 
-const Template: ComponentStory<typeof YourComponent> = ({ propertyA, propertyB, ...rest }) => {
+const Template: ComponentStoryFn<typeof YourComponent> = ({ propertyA, propertyB, ...rest }) => {
   //👇 Assigns the result from the function to a variable
   const someFunctionResult = someFunction(propertyA, propertyB);
 

diff --git a/docs/snippets/react/component-story-figma-integration.ts.mdx b/docs/snippets/react/component-story-figma-integration.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { withDesign } from 'storybook-addon-designs';
 
@@ -17,7 +17,7 @@ export default {
 } as ComponentMeta<typeof YourComponent>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStory<typeof MyComponent> = () => <MyComponent />;
+const Template: ComponentStoryFn<typeof MyComponent> = () => <MyComponent />;
 
 export const Example = Template.bind({});
 Example.parameters = {

diff --git a/docs/snippets/react/component-story-with-accessibility.ts.mdx b/docs/snippets/react/component-story-with-accessibility.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { Button } from './Button';
 
@@ -19,7 +19,7 @@ export default {
 } as ComponentMeta<typeof Button>;
 
 
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
+const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
 
 // This is an accessible story
 export const Accessible = Template.bind({});

diff --git a/docs/snippets/react/list-story-expanded.ts.mdx b/docs/snippets/react/list-story-expanded.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -17,15 +17,15 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const Empty: ComponentStory<typeof List> = (args) => <List {...args} />;
+export const Empty: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 
-export const OneItem: ComponentStory<typeof List> = (args) => (
+export const OneItem: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <ListItem />
   </List>
 );
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
+export const ManyItems: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <ListItem />
     <ListItem />

diff --git a/docs/snippets/react/list-story-reuse-data.ts.mdx b/docs/snippets/react/list-story-reuse-data.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -20,7 +20,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-export const ManyItems: ComponentStory<typeof List> = (args) => (
+export const ManyItems: ComponentStoryFn<typeof List> = (args) => (
   <List {...args}>
     <Selected {...ListItemStories.Selected.args} />
     <Unselected {...ListItemStories.Unselected.args} />

diff --git a/docs/snippets/react/list-story-starter.ts.mdx b/docs/snippets/react/list-story-starter.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 
@@ -17,5 +17,5 @@ export default {
 } as ComponentMeta<typeof List>;
 
 //👇 Always an empty list, not super interesting
-const Template: ComponentStory<typeof List> = (args) => <List {...args} />;
+const Template: ComponentStoryFn<typeof List> = (args) => <List {...args} />;
 ```
diff --git a/docs/snippets/react/list-story-template.ts.mdx b/docs/snippets/react/list-story-template.ts.mdx
@@ -3,7 +3,7 @@
 
 import React from 'react';
 
-import { ComponentStory, ComponentMeta } from '@storybook/react';
+import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
 
 import { List } from './List';
 import { ListItem } from './ListItem';
@@ -20,7 +20,7 @@ export default {
   component: List,
 } as ComponentMeta<typeof List>;
 
-const ListTemplate: ComponentStory<typeof ButtonGroup> = (args) => {
+const ListTemplate: ComponentStoryFn<typeof ButtonGroup> = (args) => {
   const { items } = args;
   return (
     <List>