and even more

storybookjs · Jun 21, 2022 · b94b844 · b94b844
1 parent 4f42f71
commit b94b844
Show file tree

Hide file tree

Showing 9 changed files with 18 additions and 17 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/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts b/examples/html-kitchen-sink/stories/from-essentials/Button.stories.ts
@@ -14,7 +14,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story<ButtonProps> = (args) => {
+const Template: StoryFn<ButtonProps> = (args) => {
   // You can either use a function to create DOM elements or use a plain html string!
   // return `<div>${label}</div>`;
   return createButton(args);

diff --git a/examples/vue-3-cli/src/stories/CSF3.stories.ts b/examples/vue-3-cli/src/stories/CSF3.stories.ts
@@ -1,5 +1,5 @@
 import { userEvent, within } from '@storybook/testing-library';
-import type { Meta, StoryFn } from '@storybook/vue3';
+import type { Meta, Story } from '@storybook/vue3';
 import Button from './Button.vue';
 
 export default {

diff --git a/examples/vue-3-cli/src/stories/DynamicHeading.stories.ts b/examples/vue-3-cli/src/stories/DynamicHeading.stories.ts
@@ -1,4 +1,4 @@
-import { Story, Meta } from '@storybook/vue3';
+import type { Meta, StoryFn } from '@storybook/vue3';
 import { FunctionalComponent, h } from 'vue';
 import DynamicHeading, { Props } from './DynamicHeading';
 
@@ -15,6 +15,7 @@ export default {
       const story = storyFn();
       // Vue 3 "Functional" component as decorator
       return () => {
+        // @ts-ignore // this is an unfortunate side-effect of having vue & vue3 in 1 repo
         return h('div', { style: 'border: 2px solid red' }, h(story));
       };
     },
@@ -26,9 +27,9 @@ export default {
 
   Make sure to pass the `args` the component expects  to receive as the props!
  */
-const Template: Story = (args, { argTypes }) => {
-  const component: FunctionalComponent<Props> = () =>
-    h(DynamicHeading, args as Props, 'Hello World!');
+// @ts-ignore // this is an unfortunate side-effect of having vue & vue3 in 1 repo
+const Template: StoryFn<Props> = (args, { argTypes }) => {
+  const component: FunctionalComponent<Props> = () => h(DynamicHeading, args, 'Hello World!');
   component.props = Object.keys(argTypes);
   return component;
 };

diff --git a/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/a11y/addon-a11y.stories.ts
@@ -10,14 +10,14 @@ export default {
   },
 } as Meta;
 
-export const Default: Story = () => html`<button></button>`;
-export const Label: Story = () => html`<button>${text}</button>`;
-export const Disabled: Story = () => html`<button disabled>${text}</button>`;
-export const InvalidContrast: Story = () => html`
+export const Default: StoryFn = () => html`<button></button>`;
+export const Label: StoryFn = () => html`<button>${text}</button>`;
+export const Disabled: StoryFn = () => html`<button disabled>${text}</button>`;
+export const InvalidContrast: StoryFn = () => html`
   <button style="color: black; background-color: brown;">${text}</button>
 `;
 
-export const DelayedRender: Story = () => {
+export const DelayedRender: StoryFn = () => {
   const div = document.createElement('div');
   setTimeout(() => {
     div.innerHTML = `<button>This button has a delayed render of 1s</button>`;

diff --git a/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/actions/addon-actions.stories.ts
@@ -5,7 +5,7 @@ export default {
   title: 'Addons / Actions',
 } as Meta;
 
-const Template: Story = () => html`<button>Click Me!</button>`;
+const Template: StoryFn = () => html`<button>Click Me!</button>`;
 
 export const Story1 = Template.bind({});
 Story1.storyName = 'Simple `click` handler';

diff --git a/...les/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts b/...les/web-components-kitchen-sink/src/stories/addons/background/addon-background.stories.ts
@@ -14,7 +14,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => html`<button>Click Me!</button>`;
+const Template: StoryFn = () => html`<button>Click Me!</button>`;
 
 export const Default = Template.bind({});
 

diff --git a/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts b/examples/web-components-kitchen-sink/src/stories/addons/controls/addon-controls.stories.ts
@@ -15,7 +15,7 @@ export default {
   },
 } as Meta;
 
-const Template: Story = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) =>
+const Template: StoryFn = ({ primary, backgroundColor, size, label, sbButtonClickHandler }) =>
   html`<sb-button
     ?primary="${primary}"
     .size="${size}"

diff --git a/lib/cli/src/frameworks/web-components/ts/Page.stories.ts b/lib/cli/src/frameworks/web-components/ts/Page.stories.ts
@@ -1,12 +1,12 @@
-import { Story, Meta } from '@storybook/web-components';
+import type { Meta, StoryFn } from '@storybook/web-components';
 import { Page, PageProps } from './Page';
 import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
 } as Meta;
 
-const Template: Story<Partial<PageProps>> = (args) => Page(args);
+const Template: StoryFn<PageProps> = (args) => Page(args);
 
 export const LoggedIn = Template.bind({});
 LoggedIn.args = {