From cce0ba4c4a7a168dcd98036629affd0f86401db1 Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 04:05:31 -0600
Subject: [PATCH 1/7] Add suport for play function

---
 src/core/parser.ts    | 12 ++++++++++++
 src/core/transform.ts |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/core/parser.ts b/src/core/parser.ts
index 54a7762e..84003f74 100644
--- a/src/core/parser.ts
+++ b/src/core/parser.ts
@@ -18,6 +18,7 @@ export interface ParsedStory {
   id: string
   title: string
   template: string
+  play?: string
 }
 
 export function parse(code: string) {
@@ -75,6 +76,8 @@ function parseTemplate(content: string): {
     const title = extractTitle(story)
     if (!title) throw new Error('Story is missing a title')
 
+    const play = extractPlay(story)
+
     const storyTemplate = parseSFC(
       story.loc.source
         .replace(/<Story/, '<template')
@@ -85,6 +88,7 @@ function parseTemplate(content: string): {
     stories.push({
       id: sanitize(title).replace(/[^a-zA-Z0-9]/g, '_'),
       title,
+      play,
       template: storyTemplate,
     })
   }
@@ -107,6 +111,14 @@ function extractComponent(node: ElementNode) {
       : undefined
 }
 
+function extractPlay(node: ElementNode) {
+  const prop = extractProp(node, 'play')
+  if (prop && prop.type === 7)
+    return prop.exp?.type === 4
+      ? prop.exp?.content.replace('_ctx.', '')
+      : undefined
+}
+
 // Minimal version of https://github.com/vitejs/vite/blob/57916a476924541dd7136065ceee37ae033ca78c/packages/plugin-vue/src/main.ts#L297
 function resolveScript(descriptor: SFCDescriptor) {
   if (descriptor.script || descriptor.scriptSetup)
diff --git a/src/core/transform.ts b/src/core/transform.ts
index da621a2f..606497fc 100644
--- a/src/core/transform.ts
+++ b/src/core/transform.ts
@@ -114,7 +114,7 @@ function generateDefaultImport(
 }
 
 function generateStoryImport(
-  { id, title, template }: ParsedStory,
+  { id, title, play, template }: ParsedStory,
   resolvedScript?: SFCScriptBlock
 ) {
   const { code } = compileTemplate({
@@ -136,7 +136,7 @@ function generateStoryImport(
   return `
     ${renderFunction}
     export const ${id} = () => Object.assign({render: render${id}}, _sfc_main)
-    ${id}.storyName = '${title}'
+    ${id}.storyName = '${title}'${play ? `\n${id}.play = ${play}` : ''}
     ${id}.parameters = {
       docs: { source: { code: \`${template.trim()}\` } },
     };`

From e100f6c9b9ba10009dca8bd1d8ad3428373e6535 Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 04:05:48 -0600
Subject: [PATCH 2/7] Added test for play function support

---
 test/index.test.ts | 42 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 42 insertions(+)

diff --git a/test/index.test.ts b/test/index.test.ts
index f845ceea..0d643243 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -346,4 +346,46 @@ describe('transform', () => {
       "
     `)
   })
+
+  it('suupports play functions', async () => {
+    const code = `
+      <template>
+        <Stories>
+          <Story title="Primary", :play="playFunction">
+          hello
+          </Story>
+        </Stories>
+      </template>
+
+      <script lang="ts">
+      function playFunction({canvasElement}: any) {
+        console.log("playFunction")
+      }
+      </script>
+      `
+    const result = await transform(code)
+    expect(result).toMatchInlineSnapshot(`
+    "function playFunction({ canvasElement }: any) {
+      console.log(\\"playFunction\\");
+    }
+    
+    const _sfc_main = {};
+    export default {
+      //decorators: [ ... ],
+      parameters: {},
+    };
+    
+    function renderPrimary(_ctx, _cache, $props, $setup, $data, $options) {
+      return \\"hello\\";
+    }
+    export const Primary = () =>
+      Object.assign({ render: renderPrimary }, _sfc_main);
+    Primary.storyName = \\"Primary\\";
+    Primary.play = playFunction;
+    Primary.parameters = {
+      docs: { source: { code: \`hello\` } },
+    };
+    "
+    `)
+  })
 })

From 8973b135bb965bb42b4328b696cfb70e0c662a2f Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 06:54:43 -0600
Subject: [PATCH 3/7] Fixed typo in test name

---
 test/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/index.test.ts b/test/index.test.ts
index 0d643243..934bbd79 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -347,7 +347,7 @@ describe('transform', () => {
     `)
   })
 
-  it('suupports play functions', async () => {
+  it('supports play functions', async () => {
     const code = `
       <template>
         <Stories>

From af6ff344adabb230064a228e15b25921ffe9b11c Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 07:29:02 -0600
Subject: [PATCH 4/7] Added play to StoryProps

---
 src/components.d.ts | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/components.d.ts b/src/components.d.ts
index 69844916..5bc21e86 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -49,6 +49,8 @@ interface StoriesProps {
 }
 type Stories = VueComponent<StoriesProps>
 
+import { Meta, StoryObj } from '@storybook/vue3'
+
 /**
  * Story that represents a component example.
  *
@@ -59,6 +61,12 @@ interface StoryProps {
    * Display name in the UI.
    */
   title: string
+  /**
+   * Function that is executed after the story is rendered.
+   *
+   * Must be defined in a non-setup script
+   */
+  play?: StoryObj<Meta<VueComponent<any>>>['play']
 }
 type Story = VueComponent<StoryProps>
 

From 473de0a88a153dcf3413f6350a26607d695bb322 Mon Sep 17 00:00:00 2001
From: Naratna <59068049+Naratna@users.noreply.github.com>
Date: Sun, 30 Apr 2023 08:09:54 -0600
Subject: [PATCH 5/7] Update test/index.test.ts

Fixed typo

Co-authored-by: Tobias Diez <code@tobiasdiez.com>
---
 test/index.test.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/test/index.test.ts b/test/index.test.ts
index 0d643243..895bba2b 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -351,7 +351,7 @@ describe('transform', () => {
     const code = `
       <template>
         <Stories>
-          <Story title="Primary", :play="playFunction">
+          <Story title="Primary" :play="playFunction">
           hello
           </Story>
         </Stories>

From b3b95205040e443e0ae3ace24a23304369fcbfa9 Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 11:29:12 -0600
Subject: [PATCH 6/7] Added examples

---
 examples/vite/src/components/LoginForm.vue    | 64 +++++++++++++++++++
 .../5-using-the-play-function.stories.ts      | 60 +++++++++++++++++
 .../5-using-the-play-function.stories.vue     | 47 ++++++++++++++
 3 files changed, 171 insertions(+)
 create mode 100644 examples/vite/src/components/LoginForm.vue
 create mode 100644 examples/vite/src/writing-stories/5-using-the-play-function.stories.ts
 create mode 100644 examples/vite/src/writing-stories/5-using-the-play-function.stories.vue

diff --git a/examples/vite/src/components/LoginForm.vue b/examples/vite/src/components/LoginForm.vue
new file mode 100644
index 00000000..c89ca6ea
--- /dev/null
+++ b/examples/vite/src/components/LoginForm.vue
@@ -0,0 +1,64 @@
+<template>
+  <div class="container">
+    <form @submit.prevent="handleSubmit">
+      <label for="email">Email</label>
+      <input
+        v-model="email"
+        id="email"
+        type="text"
+        data-testid="email"
+      />
+      <label for="password">Password</label>
+      <input
+        v-model="password"
+        id="password"
+        type="password"
+        data-testid="password"
+      />
+      <Button
+        label="Submit"
+        type="submit"
+        primary
+      ></Button>
+    </form>
+
+    <p>
+      {{ message }}
+    </p>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import Button from './Button.vue'
+
+const message = ref('')
+const email = ref('')
+const password = ref('')
+
+function handleSubmit() {
+  if (!email.value) {
+    message.value = 'Please enter your email'
+    return
+  }
+  if (!password.value) {
+    message.value = 'Please enter your password'
+    return
+  }
+  message.value =
+    'Everything is perfect. Your account is ready and we should probably get you started!'
+}
+</script>
+
+<style scoped>
+form > input {
+  margin: 7px;
+}
+.container,
+form {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+</style>
diff --git a/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts b/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts
new file mode 100644
index 00000000..6da3fdd6
--- /dev/null
+++ b/examples/vite/src/writing-stories/5-using-the-play-function.stories.ts
@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import { userEvent, within } from '@storybook/testing-library'
+
+import { expect } from '@storybook/jest'
+
+import LoginForm from '../components/LoginForm.vue'
+
+const meta: Meta<typeof LoginForm> = {
+  /* 👇 The title prop is optional.
+   * See https://storybook.js.org/docs/vue/configure/overview#configure-story-loading
+   * to learn how to generate automatic titles
+   */
+  title: 'docs/5. Using the play function/classical',
+  component: LoginForm,
+}
+
+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/vue/api/csf
+ * to learn how to use render functions.
+ */
+export const EmptyForm: Story = {
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+}
+
+/*
+ * See https://storybook.js.org/docs/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+export const FilledForm: Story = {
+  render: () => ({
+    components: { LoginForm },
+    template: `<LoginForm />`,
+  }),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement)
+
+    // 👇 Simulate interactions with the component
+    await userEvent.type(canvas.getByTestId('email'), 'email@provider.com')
+
+    await userEvent.type(canvas.getByTestId('password'), 'a-random-password')
+
+    // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+    await userEvent.click(canvas.getByRole('button'))
+
+    // 👇 Assert DOM structure
+    await expect(
+      canvas.getByText(
+        'Everything is perfect. Your account is ready and we should probably get you started!'
+      )
+    ).toBeInTheDocument()
+  },
+}
diff --git a/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue b/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue
new file mode 100644
index 00000000..541d33d4
--- /dev/null
+++ b/examples/vite/src/writing-stories/5-using-the-play-function.stories.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { userEvent, within } from '@storybook/testing-library'
+import { expect } from '@storybook/jest'
+import LoginForm from '../components/LoginForm.vue'
+</script>
+
+<script>
+/*
+ * See https://storybook.js.org/docs/vue/writing-stories/play-function#working-with-the-canvas
+ * to learn more about using the canvasElement to query the DOM
+ */
+async function playFunction({ canvasElement }) {
+  const canvas = within(canvasElement)
+
+  // 👇 Simulate interactions with the component
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com')
+
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password')
+
+  // See https://storybook.js.org/docs/vue/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
+  await userEvent.click(canvas.getByRole('button'))
+
+  // 👇 Assert DOM structure
+  await expect(
+    canvas.getByText(
+      'Everything is perfect. Your account is ready and we should probably get you started!'
+    )
+  ).toBeInTheDocument()
+}
+</script>
+
+<template>
+  <Stories
+    title="docs/5. Using the play function/native"
+    :component="LoginForm"
+  >
+    <Story title="Empty Form">
+      <LoginForm />
+    </Story>
+    <Story
+      title="Filled Form"
+      :play="playFunction"
+    >
+      <LoginForm />
+    </Story>
+  </Stories>
+</template>

From 3ce718475c914b6d6027a10fd9e19c3f2d9f3cf2 Mon Sep 17 00:00:00 2001
From: Naratna <antar.espadas@hotmail.com>
Date: Sun, 30 Apr 2023 11:39:49 -0600
Subject: [PATCH 7/7] Moved code into new line and updated tests

---
 src/core/transform.ts |  3 ++-
 test/index.test.ts    | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/src/core/transform.ts b/src/core/transform.ts
index 606497fc..2f175df9 100644
--- a/src/core/transform.ts
+++ b/src/core/transform.ts
@@ -136,7 +136,8 @@ function generateStoryImport(
   return `
     ${renderFunction}
     export const ${id} = () => Object.assign({render: render${id}}, _sfc_main)
-    ${id}.storyName = '${title}'${play ? `\n${id}.play = ${play}` : ''}
+    ${id}.storyName = '${title}'
+    ${play ? `${id}.play = ${play}` : ''}
     ${id}.parameters = {
       docs: { source: { code: \`${template.trim()}\` } },
     };`
diff --git a/test/index.test.ts b/test/index.test.ts
index 1312e9ac..2503222d 100644
--- a/test/index.test.ts
+++ b/test/index.test.ts
@@ -19,6 +19,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -44,6 +45,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -75,6 +77,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -98,6 +101,7 @@ describe('transform', () => {
       export const Primary_story = () =>
         Object.assign({ render: renderPrimary_story }, _sfc_main);
       Primary_story.storyName = \\"Primary story\\";
+
       Primary_story.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -121,6 +125,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -149,6 +154,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       };
@@ -159,6 +165,7 @@ describe('transform', () => {
       export const Secondary = () =>
         Object.assign({ render: renderSecondary }, _sfc_main);
       Secondary.storyName = \\"Secondary\\";
+
       Secondary.parameters = {
         docs: { source: { code: \`world\` } },
       };
@@ -195,6 +202,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`<Button>\` } },
       };
@@ -207,6 +215,7 @@ describe('transform', () => {
       export const Secondary = () =>
         Object.assign({ render: renderSecondary }, _sfc_main);
       Secondary.storyName = \\"Secondary\\";
+
       Secondary.parameters = {
         docs: { source: { code: \`<Button>\` } },
       };
@@ -262,6 +271,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`<test></test>\` } },
       };
@@ -298,6 +308,7 @@ describe('transform', () => {
       export const Primary = () =>
         Object.assign({ render: renderPrimary }, _sfc_main);
       Primary.storyName = \\"Primary\\";
+
       Primary.parameters = {
         docs: { source: { code: \`hello\` } },
       }; /*@jsxRuntime automatic @jsxImportSource react*/