Merge pull request #23711 from storybookjs/writing-stories-in-typescript

docs/essentials/controls.md

@@ -123,26 +123,26 @@ If you haven't used the CLI to setup the configuration, or if you want to define
 
 ## Fully custom args
 
-Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component.
+Until now, we only used auto-generated controls based on the component we're writing stories for. If we are writing [complex stories](../writing-stories/stories-for-multiple-components.md), we may want to add controls for args that aren’t part of the component. For example, here's how you could use a `footer` arg to populate a child component:
 
 <!-- prettier-ignore-start -->
 
 <CodeSnippets
   paths={[
-    'react/table-story-fully-customize-controls.js.mdx',
-    'react/table-story-fully-customize-controls.ts.mdx',
-    'vue/table-story-fully-customize-controls.2.js.mdx',
-    'vue/table-story-fully-customize-controls.2.ts.mdx',
-    'vue/table-story-fully-customize-controls.3.js.mdx',
-    'vue/table-story-fully-customize-controls.3.ts.mdx',
-    'angular/table-story-fully-customize-controls.ts.mdx',
-    'web-components/table-story-fully-customize-controls.js.mdx',
-    'web-components/table-story-fully-customize-controls.ts.mdx',
-    'solid/table-story-fully-customize-controls.js.mdx',
-    'solid/table-story-fully-customize-controls.ts.mdx',
+    'react/page-story-slots.js.mdx',
+    'react/page-story-slots.ts.mdx',
+    'vue/page-story-slots.2.js.mdx',
+    'vue/page-story-slots.2.ts.mdx',
+    'vue/page-story-slots.3.js.mdx',
+    'vue/page-story-slots.3.ts.mdx',
+    'angular/page-story-slots.ts.mdx',
+    'web-components/page-story-slots.js.mdx',
+    'web-components/page-story-slots.ts.mdx',
+    'solid/page-story-slots.js.mdx',
+    'solid/page-story-slots.ts.mdx',
   ]}
   usesCsf3
-  csf2Path="essentials/controls#snippet-table-story-fully-customize-controls"
+  csf2Path="writing-stories/args#snippet-page-story-slots"
 />
 
 <!-- prettier-ignore-end -->

docs/snippets/angular/page-story-slots.ts.mdx

@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/angular';
 
 import { Page } from './page.component';
 
-const meta: Meta<Page> = {
-  component: Page,
-};
-
-export default meta;
-type Story = StoryObj<Page>;
+type PagePropsAndCustomArgs = Page & { footer?: string };
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/angular/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => ({
+const meta: Meta<PagePropsAndCustomArgs> = {
+  component: Page,
+  render: ({ footer, ...args }) => ({
     props: args,
     template: `
       <storybook-page>
-        <ng-container footer>${args.footer}</ng-container>
+        <ng-container footer>${footer}</ng-container>
       </storybook-page>`,
   }),
+};
+export default meta;
+
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
+export const CustomFooter: Story = {
   args: {
     footer: 'Built with Storybook',
   },

docs/snippets/angular/typed-csf-file.ts.mdx

@@ -0,0 +1,22 @@
+```ts
+// Button.stories.ts
+
+import type { Meta, StoryObj } from '@storybook/angular';
+
+import { Button } from './button.component';
+
+const meta: Meta<Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```

docs/snippets/common/typed-csf-file.ts-4-9.mdx

@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic = {} satisfies Story;
+
+export const Primary = {
+  args: {
+    primary: true,
+  },
+} satisfies Story;
+```

docs/snippets/common/typed-csf-file.ts.mdx

@@ -0,0 +1,23 @@
+```ts
+// Button.stories.ts
+
+// Replace your-renderer with the renderer you are using (e.g., react, vue3, etc.)
+import type { Meta, StoryObj } from '@storybook/your-renderer';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+};
+export default meta;
+
+type Story = StoryObj<typeof Button>;
+
+export const Basic: Story = {};
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};
+```

docs/snippets/react/page-story-slots.js.mdx

@@ -5,19 +5,14 @@ import { Page } from './Page';
 
 export default {
   component: Page,
-};
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+};
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },

docs/snippets/react/page-story-slots.ts-4-9.mdx

@@ -5,26 +5,23 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string };
+
 const meta = {
   component: Page,
-} satisfies Meta<typeof Page>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
-export const CustomFooter: Story = {
-  render: (args) => (
+  render: ({ footer, ...args }) => (
     <Page {...args}>
-      <footer>{args.footer}</footer>
+      <footer>{footer}</footer>
     </Page>
   ),
+} satisfies Meta<PagePropsAndCustomArgs>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const CustomFooter = {
   args: {
     footer: 'Built with Storybook',
   },
-};
+} satisfies Story;
 ```

docs/snippets/react/page-story-slots.ts.mdx

@@ -5,24 +5,21 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { Page } from './Page';
 
-const meta: Meta<typeof Page> = {
+type PagePropsAndCustomArgs = React.ComponentProps<typeof Page> & { footer?: string };
+
+const meta: Meta<PagePropsAndCustomArgs> = {
   component: Page,
+  render: ({ footer, ...args }) => (
+    <Page {...args}>
+      <footer>{footer}</footer>
+    </Page>
+  ),
 };
-
 export default meta;
-type Story = StoryObj<typeof Page>;
 
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/react/api/csf
- * to learn how to use render functions.
- */
+type Story = StoryObj<PagePropsAndCustomArgs>;
+
 export const CustomFooter: Story = {
-  render: (args) => (
-    <Page {...args}>
-      <footer>{args.footer}</footer>
-    </Page>
-  ),
   args: {
     footer: 'Built with Storybook',
   },