Migrate TS templates to CSF3

storybookjs · Oct 29, 2022 · c061a3c · c061a3c
1 parent 4081900
commit c061a3c
Show file tree

Hide file tree

Showing 15 changed files with 290 additions and 230 deletions.
diff --git a/code/frameworks/angular/template/cli/Button.stories.ts b/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',
+  },
 };
diff --git a/code/frameworks/angular/template/cli/Header.stories.ts b/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 = {};
diff --git a/code/frameworks/angular/template/cli/Page.stories.ts b/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);
+  },
 };
diff --git a/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Button.stories.tsx
@@ -1,41 +1,47 @@
 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>;
+};
 
-// More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template: ComponentStoryFn<typeof Button> = (args) => <Button {...args} />;
+export default meta;
+type Story = StoryObj<typeof Button>;
 
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: '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 = 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',
+  },
 };
diff --git a/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Header.stories.tsx
@@ -1,25 +1,25 @@
 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 = {};
diff --git a/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx b/code/frameworks/nextjs/template/cli/ts/Page.stories.tsx
@@ -1,26 +1,30 @@
 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 const LoggedOut = Template.bind({});
+export default meta;
+type Story = StoryObj<typeof Page>;
 
-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);
+  },
 };