Migrate TS templates to CSF3

code/frameworks/angular/template/cli/Button.stories.ts

@@ -1,43 +1,52 @@
-import type { Meta, StoryFn } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import Button from './button.component';
 
-// More on default export: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/angular/writing-stories/introduction#default-export
+const meta: Meta<Button> = {
   title: 'Example/Button',
   component: Button,
+  // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+  render: (args: Button) => ({
+    props: {
+      backgroundColor: null,
+      ...args,
+    },
+  }),
   // More on argTypes: https://storybook.js.org/docs/angular/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: {
+      control: 'color',
+    },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<Button>;
 
 // More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
-const Template: StoryFn<Button> = (args: Button) => {
-  return {
-    props: { backgroundColor: null, ...args },
-  };
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/angular/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

code/frameworks/angular/template/cli/Header.stories.ts

@@ -1,13 +1,14 @@
 import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { CommonModule } from '@angular/common';
-import type { Meta, StoryFn } from '@storybook/angular';
 
 import Button from './button.component';
 import Header from './header.component';
 
-export default {
+const meta: Meta<Header> = {
   title: 'Example/Header',
   component: Header,
+  render: (args) => ({ props: args }),
   decorators: [
     moduleMetadata({
       declarations: [Button],
@@ -18,18 +19,17 @@ export default {
     // More on Story layout: https://storybook.js.org/docs/angular/configure/story-layout
     layout: 'fullscreen',
   },
-} as Meta;
+};
 
-const Template: StoryFn<Header> = (args: Header) => ({
-  props: args,
-});
+export default meta;
+type Story = StoryObj<Header>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

code/frameworks/angular/template/cli/Page.stories.ts

@@ -1,4 +1,4 @@
-import type { StoryFn, Meta } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { within, userEvent } from '@storybook/testing-library';
 import { CommonModule } from '@angular/common';
@@ -7,7 +7,7 @@ import Button from './button.component';
 import Header from './header.component';
 import Page from './page.component';
 
-export default {
+const meta: Meta<Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
@@ -20,18 +20,27 @@ export default {
       imports: [CommonModule],
     }),
   ],
-} as Meta;
+};
 
-const Template: StoryFn<Page> = (args: Page) => ({
-  props: args,
-});
+export default meta;
+type Story = StoryObj<Page>;
 
-export const LoggedOut = Template.bind({});
+export const LoggedOut: Story = {
+  render: (args: Page) => ({
+    props: args,
+  }),
+};
 
 // More on interaction testing: https://storybook.js.org/docs/angular/writing-tests/interaction-testing
-export const LoggedIn = Template.bind({});
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: Story = {
+  render: (args: Page) => ({
+    props: args,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };

code/frameworks/nextjs/template/cli/ts/Button.stories.tsx

@@ -1,41 +1,46 @@
-import * as React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: {
+      control: 'color',
+    },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

code/frameworks/nextjs/template/cli/ts/Header.stories.tsx

@@ -1,25 +1,24 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';
 
-export default {
+const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Header>;
+};
 
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
+export default meta;
+type Story = StoryObj<typeof Header>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

code/frameworks/nextjs/template/cli/ts/Page.stories.tsx

@@ -1,26 +1,29 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+
 import { Page } from './Page';
 
-export default {
+const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+};
 
-const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };

code/renderers/html/template/cli/ts/Button.stories.ts

@@ -1,10 +1,15 @@
-import type { Meta, StoryFn } from '@storybook/html';
+import type { StoryObj, Meta } from '@storybook/html';
 import type { ButtonProps } from './Button';
 import { createButton } from './Button';
 
-// More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
+const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  render: (args) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return createButton(args);
+  },
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -16,35 +21,35 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta<ButtonProps>;
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-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);
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/html/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

code/renderers/html/template/cli/ts/Header.stories.ts

@@ -1,9 +1,10 @@
-import type { Meta, StoryFn } from '@storybook/html';
+import type { Meta, StoryObj } from '@storybook/html';
 import type { HeaderProps } from './Header';
 import { createHeader } from './Header';
 
-export default {
+const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
+  render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
@@ -14,16 +15,17 @@ export default {
     onLogout: { action: 'onLogout' },
     onCreateAccount: { action: 'onCreateAccount' },
   },
-} as Meta<HeaderProps>;
+};
 
-const Template: StoryFn<HeaderProps> = (args) => createHeader(args);
+export default meta;
+type Story = StoryObj<HeaderProps>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'John Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'John Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

code/renderers/html/template/cli/ts/Page.stories.ts

@@ -1,24 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/html';
 import { within, userEvent } from '@storybook/testing-library';
-import type { Meta, StoryFn } from '@storybook/html';
 import { createPage } from './Page';
 
-export default {
+const meta: Meta = {
   title: 'Example/Page',
+  render: () => createPage(),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
   },
-} as Meta;
+};
 
-const Template: StoryFn = () => createPage();
+export default meta;
 
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut: StoryObj = {};
 
 // More on interaction testing: https://storybook.js.org/docs/html/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: StoryObj = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };

code/renderers/react/template/cli/ts/Button.stories.tsx

@@ -1,41 +1,45 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta: Meta<typeof Button> = {
   title: 'Example/Button',
   component: Button,
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
   },
-} as ComponentMeta<typeof Button>;
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: Story = {
+  // More on args: https://storybook.js.org/docs/react/writing-stories/args
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

code/renderers/react/template/cli/ts/Header.stories.tsx

@@ -1,25 +1,24 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
-
+import type { Meta, StoryObj } from '@storybook/react';
 import { Header } from './Header';
 
-export default {
+const meta: Meta<typeof Header> = {
   title: 'Example/Header',
   component: Header,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Header>;
+};
 
-const Template: ComponentStoryFn<typeof Header> = (args) => <Header {...args} />;
+export default meta;
+type Story = StoryObj<typeof Header>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

code/renderers/react/template/cli/ts/Page.stories.tsx

@@ -1,26 +1,29 @@
-import React from 'react';
-import type { ComponentStoryFn, ComponentMeta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import { within, userEvent } from '@storybook/testing-library';
+
 import { Page } from './Page';
 
-export default {
+const meta: Meta<typeof Page> = {
   title: 'Example/Page',
   component: Page,
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/react/configure/story-layout
     layout: 'fullscreen',
   },
-} as ComponentMeta<typeof Page>;
+};
 
-const Template: ComponentStoryFn<typeof Page> = (args) => <Page {...args} />;
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-LoggedIn.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  const loginButton = await canvas.getByRole('button', { name: /Log in/i });
-  await userEvent.click(loginButton);
+export const LoggedIn: Story = {
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const loginButton = await canvas.getByRole('button', {
+      name: /Log in/i,
+    });
+    await userEvent.click(loginButton);
+  },
 };

code/renderers/web-components/template/cli/ts/Button.stories.ts

@@ -1,10 +1,11 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
 import type { ButtonProps } from './Button';
 import { Button } from './Button';
 
-// More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
-export default {
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
+const meta: Meta<ButtonProps> = {
   title: 'Example/Button',
+  render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,31 +15,35 @@ export default {
       options: ['small', 'medium', 'large'],
     },
   },
-} as Meta;
+};
+
+export default meta;
+type Story = StoryObj<ButtonProps>;
 
 // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template: StoryFn<ButtonProps> = (args) => Button(args);
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/web-components/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };

code/renderers/web-components/template/cli/ts/Header.stories.ts

@@ -1,19 +1,21 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
 import type { HeaderProps } from './Header';
 import { Header } from './Header';
 
-export default {
+const meta: Meta<HeaderProps> = {
   title: 'Example/Header',
-} as Meta;
+  render: (args) => Header(args),
+};
 
-const Template: StoryFn<HeaderProps> = (args) => Header(args);
+export default meta;
+type Story = StoryObj<HeaderProps>;
 
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jonh Doe',
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jonh Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut: Story = {};

code/renderers/web-components/template/cli/ts/Page.stories.ts

@@ -1,21 +1,26 @@
-import type { Meta, StoryFn } from '@storybook/web-components';
+import type { Meta, StoryObj } from '@storybook/web-components';
+
 import type { PageProps } from './Page';
 import { Page } from './Page';
 import * as HeaderStories from './Header.stories';
 
-export default {
+const meta: Meta<PageProps> = {
   title: 'Example/Page',
-} as Meta;
-
-const Template: StoryFn<PageProps> = (args) => Page(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
-  ...HeaderStories.LoggedIn.args,
+  render: (args) => Page(args),
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+export default meta;
+type Story = StoryObj<PageProps>;
+
+export const LoggedIn: Story = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
+};
+
+export const LoggedOut: Story = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
 };