Polish to the vue snippets and docs

docs/snippets/common/component-story-custom-source.js.mdx

@@ -12,7 +12,7 @@ export default {
   component: Button,
 };
 
-export const Template = (args) => ({
+const Template = (args) => ({
   //👇 Your template goes here
 });
 

docs/snippets/vue/button-group-story.2.js.mdx

@@ -1,5 +1,5 @@
 ```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/button-group-story.3.js.mdx

@@ -1,5 +1,5 @@
 ```js
-//ButtonGroup.stories.js
+// ButtonGroup.stories.js
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/button-group-story.ts-2.ts.mdx

@@ -1,5 +1,5 @@
 ```ts
-//ButtonGroup.stories.ts
+// ButtonGroup.stories.ts
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/button-group-story.ts-3.ts.mdx

@@ -1,5 +1,5 @@
 ```ts
-//ButtonGroup.stories.ts
+// ButtonGroup.stories.ts
 
 import ButtonGroup from './ButtonGroup.vue';
 

docs/snippets/vue/component-story-figma-integration.mdx.mdx

@@ -10,7 +10,7 @@ import MyComponent from './MyComponent.vue';
 <Meta title="FigmaExample" component={MyComponent} decorators={[withDesign]} />
 
 export const Template = (args) => ({
-// Components used in your story `template` are defined in the `components` object
+  // Components used in your story `template` are defined in the `components` object
   components: { MyComponent },
   template: 'MyComponent />',
 });

docs/snippets/vue/component-story-figma-integration.ts.mdx

@@ -1,7 +1,7 @@
 ```ts
 // MyComponent.stories.ts
 
-import { Meta, Story } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
+import { Meta, StoryFn } from '@storybook/vue'; // For Vue 3 use import { Meta, Story } from '@storybook/vue3';
 
 import { withDesign } from 'storybook-addon-designs';
 
@@ -12,10 +12,10 @@ export default {
   title: 'FigmaExample',
   component: MyComponent,
   decorators: [withDesign],
-} as Meta;
+} as Meta<typeof MyComponent>;
 
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template: Story = () => ({
+const Template: StoryFn<typeof MyComponent> = () => ({
   components: { MyComponent },
   template: '<MyComponent />',
 });

docs/snippets/vue/login-form-with-play-function.2.js.mdx

@@ -16,7 +16,7 @@ export default {
   component: LoginForm,
 };
 
-export const Template = (args, { argTypes }) => ({
+const Template = (args, { argTypes }) => ({
   components: { LoginForm },
   props: Object.keys(argTypes),
   template: `<LoginForm v-bind="$props" v-on="$props" />`,

docs/snippets/vue/login-form-with-play-function.ts-2.ts.mdx

@@ -3,6 +3,8 @@
 
 import { userEvent, within } from '@storybook/testing-library';
 
+import { expect } from '@storybook/jest';
+
 import LoginForm from './LoginForm.vue';
 
 import { Meta, StoryFn } from '@storybook/vue';
@@ -16,7 +18,7 @@ export default {
   component: LoginForm,
 } as Meta<typeof LoginForm>;
 
-export const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
+const Template: StoryFn<typeof LoginForm> = (args, { argTypes }) => ({
   components: { LoginForm },
   props: Object.keys(argTypes),
   template: `<LoginForm v-bind="$props" v-on="$props" />`,
@@ -29,14 +31,19 @@ FilledForm.play = async ({ canvasElement }) => {
   // Starts querying the component from its root element
   const canvas = within(canvasElement);
 
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+  // 👇 Simulate interactions with the component
-    delay: 100,
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-  });
+
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
-    delay: 100,
-  });
 
   // 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();
 };
 ```

docs/snippets/vue/login-form-with-play-function.ts-3.ts.mdx

@@ -1,8 +1,10 @@
 ```js
-// LoginForm.stories.js
+// LoginForm.stories.ts
 
 import { userEvent, within } from '@storybook/testing-library';
 
+import { expect } from '@storybook/jest';
+
 import LoginForm from './LoginForm.vue';
 
 import { Meta, StoryFn } from '@storybook/vue3';
@@ -31,14 +33,19 @@ FilledForm.play = async ({ canvasElement }) => {
   // Starts querying the component from its root element
   const canvas = within(canvasElement);
 
-  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com', {
+  // 👇 Simulate interactions with the component
-    delay: 100,
+  await userEvent.type(canvas.getByTestId('email'), 'email@provider.com');
-  });
+
-  await userEvent.type(canvas.getByTestId('password'), 'a-random-password', {
+  await userEvent.type(canvas.getByTestId('password'), 'a-random-password');
-    delay: 100,
-  });
 
   // 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();
 };
 ```

docs/writing-stories/introduction.md

@@ -11,7 +11,7 @@ Storybook uses the generic term arguments (args for short) when talking about Re
 A component’s stories are defined in a story file that lives alongside the component file. The story file is for development-only, and it won't be included in your production bundle.
 
 ```
-Button.vue | js | ts | jsx | tsx 
+Button.js | ts | jsx | tsx | vue | svelte
 Button.stories.js | ts | jsx | tsx | mdx
 ```