From 40819001178620c3c1ffe57c0523ad93e1ae839d Mon Sep 17 00:00:00 2001
From: Kasper Peulen <kasperpeulen@gmail.com>
Date: Fri, 28 Oct 2022 11:05:22 +0200
Subject: [PATCH] Migrate JS templates to CSF3

---
 .../ember/template/cli/1-Button.stories.js    | 62 +++++++++--------
 .../html/template/cli/js/Button.stories.js    | 48 ++++++-------
 .../html/template/cli/js/Header.stories.js    | 15 ++--
 .../html/template/cli/js/Page.stories.js      | 19 +++---
 .../preact/template/cli/Button.stories.jsx    | 37 +++++-----
 .../preact/template/cli/Header.stories.jsx    | 14 ++--
 .../preact/template/cli/Page.stories.jsx      | 17 ++---
 .../react/template/cli/js/Button.stories.jsx  | 37 +++++-----
 .../react/template/cli/js/Header.stories.jsx  | 15 ++--
 .../react/template/cli/js/Page.stories.jsx    | 17 ++---
 .../svelte/template/cli/Button.stories.js     | 50 +++++++-------
 .../svelte/template/cli/Header.stories.js     | 31 ++++-----
 .../svelte/template/cli/Page.stories.js       | 30 ++++----
 .../vue/template/cli/Button.stories.js        | 48 ++++++-------
 .../vue/template/cli/Header.stories.js        | 27 ++++----
 .../vue/template/cli/Page.stories.js          | 26 +++----
 .../vue3/template/cli/Button.stories.js       | 68 +++++++++++--------
 .../vue3/template/cli/Header.stories.js       | 43 ++++++------
 .../vue3/template/cli/Page.stories.js         | 35 ++++++----
 .../template/cli/js/Button.stories.js         | 40 +++++------
 .../template/cli/js/Header.stories.js         | 15 ++--
 .../template/cli/js/Page.stories.js           | 19 +++---
 22 files changed, 376 insertions(+), 337 deletions(-)

diff --git a/code/frameworks/ember/template/cli/1-Button.stories.js b/code/frameworks/ember/template/cli/1-Button.stories.js
index 5be754973287..9aff5c61cb45 100644
--- a/code/frameworks/ember/template/cli/1-Button.stories.js
+++ b/code/frameworks/ember/template/cli/1-Button.stories.js
@@ -5,6 +5,10 @@ import { linkTo } from '@storybook/addon-links';
 // More on default export: https://storybook.js.org/docs/ember/writing-stories/introduction#default-export
 export default {
   title: 'Button',
+  render: (args) => ({
+    template: hbs`<button {{action onClick}}>{{label}}</button>`,
+    context: args,
+  }),
   // More on argTypes: https://storybook.js.org/docs/ember/api/argtypes
   argTypes: {
     label: { control: 'text' },
@@ -12,46 +16,46 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/ember/writing-stories/introduction#using-args
-const Template = (args) => ({
-  template: hbs`<button {{action onClick}}>{{label}}</button>`,
-  context: args,
-});
-
-export const Text = Template.bind({});
-// More on args: https://storybook.js.org/docs/ember/writing-stories/args
-Text.args = {
-  label: 'Button',
-  onClick: action('onClick'),
+export const Text = {
+  args: {
+    label: 'Button',
+    onClick: action('onClick'),
+  },
 };
 
-export const Emoji = Template.bind({});
-Emoji.args = {
-  label: '😀 😎 👍 💯',
+export const Emoji = {
+  args: {
+    label: '😀 😎 👍 💯',
+  },
 };
 
-export const TextWithAction = () => ({
-  template: hbs`
+export const TextWithAction = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Trigger Action
     </button>
   `,
-  context: {
-    onClick: () => action('This was clicked')(),
+    context: {
+      onClick: () => action('This was clicked')(),
+    },
+  }),
+  name: 'With an action',
+  parameters: {
+    notes: 'My notes on a button with emojis',
   },
-});
-
-TextWithAction.storyName = 'With an action';
-TextWithAction.parameters = { notes: 'My notes on a button with emojis' };
+};
 
-export const ButtonWithLinkToAnotherStory = () => ({
-  template: hbs`
+export const ButtonWithLinkToAnotherStory = {
+  render: () => ({
+    template: hbs`
     <button {{action onClick}}>
       Go to Welcome Story
     </button>
   `,
-  context: {
-    onClick: linkTo('example-introduction--page'),
-  },
-});
-
-ButtonWithLinkToAnotherStory.storyName = 'button with link to another story';
+    context: {
+      onClick: linkTo('example-introduction--page'),
+    },
+  }),
+  name: 'button with link to another story',
+};
diff --git a/code/renderers/html/template/cli/js/Button.stories.js b/code/renderers/html/template/cli/js/Button.stories.js
index 63d4f9147145..cdc3d1bfb20b 100644
--- a/code/renderers/html/template/cli/js/Button.stories.js
+++ b/code/renderers/html/template/cli/js/Button.stories.js
@@ -3,6 +3,12 @@ import { createButton } from './Button';
 // More on default export: https://storybook.js.org/docs/html/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
+  render: ({ label, ...args }) => {
+    // You can either use a function to create DOM elements or use a plain html string!
+    // return `<div>${label}</div>`;
+    return createButton({ label, ...args });
+  },
   // More on argTypes: https://storybook.js.org/docs/html/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -16,33 +22,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/html/writing-stories/introduction#using-args
-const Template = ({ label, ...args }) => {
-  // You can either use a function to create DOM elements or use a plain html string!
-  // return `<div>${label}</div>`;
-  return createButton({ label, ...args });
-};
-
-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 Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/html/template/cli/js/Header.stories.js b/code/renderers/html/template/cli/js/Header.stories.js
index 553f3f8760f2..8cc98e523abd 100644
--- a/code/renderers/html/template/cli/js/Header.stories.js
+++ b/code/renderers/html/template/cli/js/Header.stories.js
@@ -2,6 +2,7 @@ import { createHeader } from './Header';
 
 export default {
   title: 'Example/Header',
+  render: (args) => createHeader(args),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
@@ -14,14 +15,12 @@ export default {
   },
 };
 
-const Template = (args) => createHeader(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/html/template/cli/js/Page.stories.js b/code/renderers/html/template/cli/js/Page.stories.js
index 3305bde25d9e..047e0ac7ca5e 100644
--- a/code/renderers/html/template/cli/js/Page.stories.js
+++ b/code/renderers/html/template/cli/js/Page.stories.js
@@ -3,21 +3,22 @@ import { createPage } from './Page';
 
 export default {
   title: 'Example/Page',
+  render: () => createPage(),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/html/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = () => createPage();
-
-export const LoggedOut = Template.bind({});
-
-export const LoggedIn = Template.bind({});
+export const LoggedOut = {};
 
 // 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 = {
+  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/renderers/preact/template/cli/Button.stories.jsx b/code/renderers/preact/template/cli/Button.stories.jsx
index 080a4bfc3d61..a26bd4ea2839 100644
--- a/code/renderers/preact/template/cli/Button.stories.jsx
+++ b/code/renderers/preact/template/cli/Button.stories.jsx
@@ -12,28 +12,29 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/preact/writing-stories/introduction#using-args
-const Template = (args) => <Button {...args} />;
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/preact/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/preact/template/cli/Header.stories.jsx b/code/renderers/preact/template/cli/Header.stories.jsx
index 19f58b372ed6..116bc01b04c3 100644
--- a/code/renderers/preact/template/cli/Header.stories.jsx
+++ b/code/renderers/preact/template/cli/Header.stories.jsx
@@ -14,14 +14,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/preact/template/cli/Page.stories.jsx b/code/renderers/preact/template/cli/Page.stories.jsx
index c79af4904740..77903f60e15a 100644
--- a/code/renderers/preact/template/cli/Page.stories.jsx
+++ b/code/renderers/preact/template/cli/Page.stories.jsx
@@ -11,14 +11,15 @@ export default {
   },
 };
 
-const Template = (args) => <Page {...args} />;
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/preact/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 = {
+  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/renderers/react/template/cli/js/Button.stories.jsx b/code/renderers/react/template/cli/js/Button.stories.jsx
index 61f6e19e14d7..815e298261aa 100644
--- a/code/renderers/react/template/cli/js/Button.stories.jsx
+++ b/code/renderers/react/template/cli/js/Button.stories.jsx
@@ -13,28 +13,29 @@ export default {
 };
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
-const Template = (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 = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/react/template/cli/js/Header.stories.jsx b/code/renderers/react/template/cli/js/Header.stories.jsx
index e4850002cac5..610019f3c1a6 100644
--- a/code/renderers/react/template/cli/js/Header.stories.jsx
+++ b/code/renderers/react/template/cli/js/Header.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { Header } from './Header';
 
 export default {
@@ -11,14 +10,12 @@ export default {
   },
 };
 
-const Template = (args) => <Header {...args} />;
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/react/template/cli/js/Page.stories.jsx b/code/renderers/react/template/cli/js/Page.stories.jsx
index 0174fdb881f9..2c2c87f8e845 100644
--- a/code/renderers/react/template/cli/js/Page.stories.jsx
+++ b/code/renderers/react/template/cli/js/Page.stories.jsx
@@ -12,14 +12,15 @@ export default {
   },
 };
 
-const Template = (args) => <Page {...args} />;
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/react/writing-tests/interaction-testing
-export const LoggedOut = Template.bind({});
-
-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 = {
+  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/renderers/svelte/template/cli/Button.stories.js b/code/renderers/svelte/template/cli/Button.stories.js
index d700639dba2d..e9660788c483 100644
--- a/code/renderers/svelte/template/cli/Button.stories.js
+++ b/code/renderers/svelte/template/cli/Button.stories.js
@@ -5,6 +5,14 @@ import Button from './Button.svelte';
 export default {
   title: 'Example/Button',
   component: Button,
+  // More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
+  render: (args) => ({
+    Component: Button,
+    props: args,
+    on: {
+      click: args.onClick,
+    },
+  }),
   argTypes: {
     backgroundColor: { control: 'color' },
     label: { control: 'text' },
@@ -17,35 +25,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/svelte/writing-stories/introduction#using-args
-const Template = (args) => ({
-  Component: Button,
-  props: args,
-  on: {
-    click: args.onClick,
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
   },
-});
-
-// More on args: https://storybook.js.org/docs/svelte/writing-stories/args
-export const Primary = Template.bind({});
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/svelte/template/cli/Header.stories.js b/code/renderers/svelte/template/cli/Header.stories.js
index 9f80fa3fbbe3..687d61465dd0 100644
--- a/code/renderers/svelte/template/cli/Header.stories.js
+++ b/code/renderers/svelte/template/cli/Header.stories.js
@@ -3,6 +3,15 @@ import Header from './Header.svelte';
 export default {
   title: 'Example/Header',
   component: Header,
+  render: (args) => ({
+    Component: Header,
+    props: args,
+    on: {
+      login: args.onLogin,
+      logout: args.onLogout,
+      createAccount: args.onCreateAccount,
+    },
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
     layout: 'fullscreen',
@@ -14,22 +23,12 @@ export default {
   },
 };
 
-const Template = (args) => ({
-  Component: Header,
-  props: args,
-  on: {
-    login: args.onLogin,
-    logout: args.onLogout,
-    createAccount: args.onCreateAccount,
-  },
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/svelte/template/cli/Page.stories.js b/code/renderers/svelte/template/cli/Page.stories.js
index 563782345a2d..ce0f8a33ed8d 100644
--- a/code/renderers/svelte/template/cli/Page.stories.js
+++ b/code/renderers/svelte/template/cli/Page.stories.js
@@ -4,24 +4,28 @@ import Page from './Page.svelte';
 export default {
   title: 'Example/Page',
   component: Page,
+  render: (args) => ({
+    Component: Page,
+    props: args,
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/svelte/configure/story-layout
     layout: 'fullscreen',
   },
 };
-
-const Template = (args) => ({
-  Component: Page,
-  props: args,
-});
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/svelte/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 = {
+  render: (args) => ({
+    Component: 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/renderers/vue/template/cli/Button.stories.js b/code/renderers/vue/template/cli/Button.stories.js
index 3e9d01553ef5..a13a16111b24 100644
--- a/code/renderers/vue/template/cli/Button.stories.js
+++ b/code/renderers/vue/template/cli/Button.stories.js
@@ -4,6 +4,12 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: { MyButton },
+    template: '<my-button @onClick="onClick" v-bind="$props" />',
+  }),
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,33 +20,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyButton },
-  template: '<my-button @onClick="onClick" v-bind="$props" />',
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/vue/template/cli/Header.stories.js b/code/renderers/vue/template/cli/Header.stories.js
index 8878aa5f88af..d06aa5f7969d 100644
--- a/code/renderers/vue/template/cli/Header.stories.js
+++ b/code/renderers/vue/template/cli/Header.stories.js
@@ -3,25 +3,26 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  render: (args, { argTypes }) => ({
+    props: Object.keys(argTypes),
+    components: {
+      MyHeader,
+    },
+    template:
+      '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyHeader },
-  template:
-    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/vue/template/cli/Page.stories.js b/code/renderers/vue/template/cli/Page.stories.js
index cdb1e24ba717..5094c2e78802 100644
--- a/code/renderers/vue/template/cli/Page.stories.js
+++ b/code/renderers/vue/template/cli/Page.stories.js
@@ -1,27 +1,27 @@
 import { within, userEvent } from '@storybook/testing-library';
-
 import MyPage from './Page.vue';
 
 export default {
   title: 'Example/Page',
   component: MyPage,
+  render: () => ({
+    components: { MyPage },
+    template: '<my-page />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
-
-const Template = () => ({
-  components: { MyPage },
-  template: '<my-page />',
-});
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/vue/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 = {
+  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/renderers/vue3/template/cli/Button.stories.js b/code/renderers/vue3/template/cli/Button.stories.js
index 2561202c7ee7..4c31167c656e 100644
--- a/code/renderers/vue3/template/cli/Button.stories.js
+++ b/code/renderers/vue3/template/cli/Button.stories.js
@@ -4,49 +4,59 @@ import MyButton from './Button.vue';
 export default {
   title: 'Example/Button',
   component: MyButton,
+  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      MyButton,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      return {
+        args,
+      };
+    },
+    // And then the `args` are bound to your component with `v-bind="args"`
+    template: '<my-button v-bind="args" />',
+  }),
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
-    backgroundColor: { control: 'color' },
+    backgroundColor: {
+      control: 'color',
+    },
     onClick: {},
     size: {
-      control: { type: 'select' },
+      control: {
+        type: 'select',
+      },
       options: ['small', 'medium', 'large'],
     },
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyButton },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    return { args };
+export const Primary = {
+  args: {
+    primary: true,
+    label: 'Button',
   },
-  // And then the `args` are bound to your component with `v-bind="args"`
-  template: '<my-button v-bind="args" />',
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/vue3/template/cli/Header.stories.js b/code/renderers/vue3/template/cli/Header.stories.js
index 8cda9abc0324..6733856c044b 100644
--- a/code/renderers/vue3/template/cli/Header.stories.js
+++ b/code/renderers/vue3/template/cli/Header.stories.js
@@ -3,32 +3,37 @@ import MyHeader from './Header.vue';
 export default {
   title: 'Example/Header',
   component: MyHeader,
+  render: (args) => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: {
+      MyHeader,
+    },
+    // The story's `args` need to be mapped into the template through the `setup()` method
+    setup() {
+      // Story args can be spread into the returned object
+      return {
+        ...args,
+      };
+    },
+    // Then, the spread values can be accessed directly in the template
+    template: '<my-header :user="user" />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = (args) => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyHeader },
-  // The story's `args` need to be mapped into the template through the `setup()` method
-  setup() {
-    // Story args can be spread into the returned object
-    return { ...args };
-  },
-  // Then, the spread values can be accessed directly in the template
-  template: '<my-header :user="user" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {
-    name: 'Jane Doe',
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
   },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  user: null,
+export const LoggedOut = {
+  args: {
+    user: null,
+  },
 };
diff --git a/code/renderers/vue3/template/cli/Page.stories.js b/code/renderers/vue3/template/cli/Page.stories.js
index ef6aeafe784d..ed95225c9f69 100644
--- a/code/renderers/vue3/template/cli/Page.stories.js
+++ b/code/renderers/vue3/template/cli/Page.stories.js
@@ -4,26 +4,33 @@ import MyPage from './Page.vue';
 export default {
   title: 'Example/Page',
   component: MyPage,
+  render: () => ({
+    // Components used in your story `template` are defined in the `components` object
+    components: { MyPage },
+    // Here we define the `template`
+    template: '<my-page />',
+  }),
   parameters: {
     // More on Story layout: https://storybook.js.org/docs/vue/configure/story-layout
     layout: 'fullscreen',
   },
 };
 
-const Template = () => ({
-  // Components used in your story `template` are defined in the `components` object
-  components: { MyPage },
-
-  // Here we define the `template`
-  template: '<my-page />',
-});
-
-export const LoggedOut = Template.bind({});
+export const LoggedOut = {};
 
 // More on interaction testing: https://storybook.js.org/docs/vue/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 = {
+  render: () => ({
+    components: {
+      MyPage,
+    },
+    template: '<my-page />',
+  }),
+  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/renderers/web-components/template/cli/js/Button.stories.js b/code/renderers/web-components/template/cli/js/Button.stories.js
index ec71e8a7c638..bd4618ade8ce 100644
--- a/code/renderers/web-components/template/cli/js/Button.stories.js
+++ b/code/renderers/web-components/template/cli/js/Button.stories.js
@@ -3,6 +3,8 @@ import { Button } from './Button';
 // More on default export: https://storybook.js.org/docs/web-components/writing-stories/introduction#default-export
 export default {
   title: 'Example/Button',
+  // More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
+  render: (args) => Button(args),
   // More on argTypes: https://storybook.js.org/docs/web-components/api/argtypes
   argTypes: {
     backgroundColor: { control: 'color' },
@@ -14,29 +16,29 @@ export default {
   },
 };
 
-// More on component templates: https://storybook.js.org/docs/web-components/writing-stories/introduction#using-args
-const Template = (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 = {
+  args: {
+    primary: true,
+    label: 'Button',
+  },
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
+export const Secondary = {
+  args: {
+    label: 'Button',
+  },
 };
 
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
+export const Large = {
+  args: {
+    size: 'large',
+    label: 'Button',
+  },
 };
 
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
+export const Small = {
+  args: {
+    size: 'small',
+    label: 'Button',
+  },
 };
diff --git a/code/renderers/web-components/template/cli/js/Header.stories.js b/code/renderers/web-components/template/cli/js/Header.stories.js
index 6045ac91d89d..9785703225f3 100644
--- a/code/renderers/web-components/template/cli/js/Header.stories.js
+++ b/code/renderers/web-components/template/cli/js/Header.stories.js
@@ -2,14 +2,15 @@ import { Header } from './Header';
 
 export default {
   title: 'Example/Header',
+  render: (args) => Header(args),
 };
 
-const Template = (args) => Header(args);
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
+export const LoggedIn = {
+  args: {
+    user: {
+      name: 'Jane Doe',
+    },
+  },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+export const LoggedOut = {};
diff --git a/code/renderers/web-components/template/cli/js/Page.stories.js b/code/renderers/web-components/template/cli/js/Page.stories.js
index 961abc636a0e..91cc0239c73e 100644
--- a/code/renderers/web-components/template/cli/js/Page.stories.js
+++ b/code/renderers/web-components/template/cli/js/Page.stories.js
@@ -3,17 +3,18 @@ import * as HeaderStories from './Header.stories';
 
 export default {
   title: 'Example/Page',
+  render: (args) => Page(args),
 };
 
-const Template = (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,
+export const LoggedIn = {
+  args: {
+    // More on composing args: https://storybook.js.org/docs/web-components/writing-stories/args#args-composition
+    ...HeaderStories.LoggedIn.args,
+  },
 };
 
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {
-  ...HeaderStories.LoggedOut.args,
+export const LoggedOut = {
+  args: {
+    ...HeaderStories.LoggedOut.args,
+  },
 };