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;
-
-// 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 = Template.bind({});
-// More on args: https://storybook.js.org/docs/angular/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export default meta;
+type Story = StoryObj<Button>;
+
+// More on component templates: https://storybook.js.org/docs/angular/writing-stories/introduction#using-args
+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/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.ts

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Button } from './Button';
+
+// 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',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+export const Primary: Story = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Button',
+  },
+};
+
+export const Large: Story = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
+};

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

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Header } from './Header';
+
+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',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Header>;
+
+export const LoggedIn: Story = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
+};
+
+export const LoggedOut: Story = {};

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

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { within, userEvent } from '@storybook/testing-library';
+
+import { Page } from './Page';
+
+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',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Page>;
+
+export const LoggedOut: Story = {};
+
+// More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
+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);
+  },
+};