Address TODOs

storybookjs · Aug 20, 2023 · 84f8999 · 84f8999
1 parent 656fbfa
commit 84f8999
Show file tree

Hide file tree

Showing 9 changed files with 19 additions and 22 deletions.
diff --git a/docs/snippets/angular/page-story-slots.ts.mdx b/docs/snippets/angular/page-story-slots.ts.mdx
@@ -5,10 +5,6 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-// TODO: Is this correct?
-//       If not, is it expected that an Angular component exports its props type?
-//       What if it's an interface instead of a type (which seems to be the convention)?
-//       Or, how do you extract an Angular component's props type?
 type PagePropsAndCustomArgs = Page & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {

diff --git a/docs/snippets/solid/page-story-slots.ts-4-9.mdx b/docs/snippets/solid/page-story-slots.ts-4-9.mdx
@@ -1,12 +1,12 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
-// TODO: How do you extract a Solid component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,

diff --git a/docs/snippets/solid/page-story-slots.ts.mdx b/docs/snippets/solid/page-story-slots.ts.mdx
@@ -1,12 +1,12 @@
 ```tsx
 // Page.stories.ts|tsx
 
+import type { ComponentProps } from 'solid-js';
 import type { Meta, StoryObj } from 'storybook-solidjs';
 
 import { Page } from './Page';
 
-// TODO: How do you extract a Solid component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,

diff --git a/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.2.ts-4-9.mdx
@@ -1,12 +1,13 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue';
 
 import Page from './Page.vue';
 
-// TODO: How do you extract a Vue2 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,

diff --git a/docs/snippets/vue/page-story-slots.2.ts.mdx b/docs/snippets/vue/page-story-slots.2.ts.mdx
@@ -1,12 +1,13 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue';
 
 import Page from './Page.vue';
 
-// TODO: How do you extract a Vue2 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,

diff --git a/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx b/docs/snippets/vue/page-story-slots.3.ts-4-9.mdx
@@ -1,12 +1,13 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
 
-// TODO: How do you extract a Vue3 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta = {
   component: Page,

diff --git a/docs/snippets/vue/page-story-slots.3.ts.mdx b/docs/snippets/vue/page-story-slots.3.ts.mdx
@@ -1,12 +1,13 @@
 ```ts
 // Page.stories.ts
 
+// https://www.npmjs.com/package/vue-component-type-helpers
+import type { ComponentProps } from 'vue-component-type-helpers';
 import type { Meta, StoryObj } from '@storybook/vue3';
 
 import Page from './Page.vue';
 
-// TODO: How do you extract a Vue3 component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type PagePropsAndCustomArgs = ComponentProps<typeof Page> & { footer?: string };
 
 const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,

diff --git a/docs/snippets/web-components/page-story-slots.ts.mdx b/docs/snippets/web-components/page-story-slots.ts.mdx
@@ -5,10 +5,9 @@ import type { Meta, StoryObj } from '@storybook/web-components';
 
 import { html } from 'lit';
 
-// TODO: How do you extract a web component's props type?
-// type PagePropsAndCustomArgs = Page & { footer?: string };
+type CustomArgs = { footer?: string };
 
-const meta: Meta<PagePropsAndCustomArgs> = {
+const meta: Meta<CustomArgs> = {
   title: 'Page',
   component: 'demo-page',
   render: ({ footer }) => html`
@@ -19,7 +18,7 @@ const meta: Meta<PagePropsAndCustomArgs> = {
 };
 export default meta;
 
-type Story = StoryObj<PagePropsAndCustomArgs>;
+type Story = StoryObj<CustomArgs>;
 
 export const CustomFooter: Story = {
   args: {

diff --git a/docs/snippets/web-components/typed-csf-file.ts.mdx b/docs/snippets/web-components/typed-csf-file.ts.mdx
@@ -3,8 +3,6 @@
 
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-// TODO: How do you extract a web component's props type?
-
 const meta: Meta = {
   title: 'Button',
   component: 'demo-button',