minor adjustments

docs/api/portable-stories-jest.md

@@ -91,15 +91,15 @@ An object where the keys are the names of the stories and the values are the com
 
 Additionally, the composed story will have the following properties:
 
-| Property   | Type                                      | Description                                                     |
-| ---------- | ----------------------------------------- | --------------------------------------------------------------- |
-| storyName  | `string`                                  | The story's name                                                |
-| args       | `Record<string, any>`                     | The story's [args](../writing-stories/args.md)                  |
-| argTypes   | `ArgType`                                 | The story's [argTypes](./arg-types.md)                          |
-| id         | `string`                                  | The story's id                                                  |
-| parameters | `Record<string, any>`                     | The story's [parameters](./parameters.md)                       |
-| load       | `() => Promise<void>`                     | Executes all the [loaders](#2-load-optional) for a given story  |
-| play       | `(context) => Promise<void> \| undefined` | Executes the [play function](#4-play-optional) of a given story |
+| Property   | Type                                                     | Description                                                     |
+| ---------- | -------------------------------------------------------- | --------------------------------------------------------------- |
+| storyName  | `string`                                                 | The story's name                                                |
+| args       | `Record<string, any>`                                    | The story's [args](../writing-stories/args.md)                  |
+| argTypes   | `ArgType`                                                | The story's [argTypes](./arg-types.md)                          |
+| id         | `string`                                                 | The story's id                                                  |
+| parameters | `Record<string, any>`                                    | The story's [parameters](./parameters.md)                       |
+| load       | `() => Promise<void>`                                    | Executes all the [loaders](#2-load-optional) for a given story  |
+| play       | `(context?: StoryContext) => Promise<void> \| undefined` | Executes the [play function](#4-play-optional) of a given story |
 
 ## composeStory
 

docs/api/portable-stories-playwright.md

@@ -38,7 +38,7 @@ Normally, Storybok composes a story and its [annotations](#annotations) automati
 
 <Callout variant="info">
 
-You may need to alias the `vue` module to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
+If your stories use template-based Vue components, you may need to alias the `vue` module to resolve correctly in the Playwright CT environment. You can do this via the [`ctViteConfig` property](https://playwright.dev/docs/test-components#i-have-a-project-that-already-uses-vite-can-i-reuse-the-config):
 
 <details>
 <summary>Example Playwright configuration</summary>

docs/snippets/react/portable-stories-jest-compose-story.ts.mdx

@@ -2,7 +2,7 @@
 // Button.test.tsx
 import { jest, test, expect } from '@jest/globals';
 import { render, screen } from '@testing-library/react';
-// Using Next.js? Import from @storybook/nextjs instead
+// 👉 Using Next.js? Import from @storybook/nextjs instead
 import { composeStory } from '@storybook/react';
 
 import meta, { Primary } from './Button.stories';

docs/snippets/react/portable-stories-jest-override-globals.ts.mdx

@@ -2,7 +2,7 @@
 // Button.test.tsx
 import { test } from '@jest/globals';
 import { render } from '@testing-library/react';
-// Using Next.js? Import from @storybook/nextjs instead
+// 👉 Using Next.js? Import from @storybook/nextjs instead
 import { composeStory } from '@storybook/react';
 
 import meta, { Primary } from './Button.stories';

docs/snippets/react/portable-stories-jest-with-loaders.ts.mdx

@@ -2,7 +2,7 @@
 // Button.test.tsx
 import { test } from '@jest/globals';
 import { render } from '@testing-library/react';
-// Using Next.js? Import from @storybook/nextjs instead
+// 👉 Using Next.js? Import from @storybook/nextjs instead
 import { composeStory } from '@storybook/react';
 
 import meta, { Primary } from './Button.stories';

docs/snippets/vue/portable-stories-jest-compose-story.ts.mdx

@@ -11,7 +11,7 @@ test('onclick handler is called', () => {
   const PrimaryStory = composeStory(Primary, meta);
 
   const onClickSpy = jest.fn();
-  render(Primary({ onClick: onClickSpy }));
+  render(Primary, { props: { onClick: onClickSpy } });
   const buttonElement = screen.getByRole('button');
   buttonElement.click();
   expect(onClickSpy).toHaveBeenCalled();

docs/snippets/vue/portable-stories-jest-with-loaders.ts.mdx

@@ -13,6 +13,6 @@ test('applies the loaders and renders', async () => {
   await PrimaryStory.load();
 
   // Then, render the story
-  render(PrimaryStory());
+  render(PrimaryStory);
 });
 ```

docs/snippets/vue/portable-stories-jest-with-play-function.ts.mdx

@@ -10,7 +10,7 @@ test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
 
   // First, render the story
-  render(PrimaryStory());
+  render(PrimaryStory);
 
   // Then, execute the play function
   await PrimaryStory.play();

docs/snippets/vue/portable-stories-playwright-ct.ts.mdx

@@ -10,6 +10,6 @@ const test = createTest(base);
 test('renders primary button', async ({ mount }) => {
   // The mount function will execute all the necessary steps in the story,
   // such as loaders, render, and play function
-  await mount(stories.Primary());
+  await mount(stories.Primary);
 });
 ```

docs/snippets/vue/portable-stories-vitest-compose-story.ts.mdx

@@ -11,7 +11,7 @@ test('onclick handler is called', () => {
   const PrimaryStory = composeStory(Primary, meta);
 
   const onClickSpy = vi.fn();
-  render(Primary({ onClick: onClickSpy }));
+  render(Primary, { props: { onClick: onClickSpy } });
   const buttonElement = screen.getByRole('button');
   buttonElement.click();
   expect(onClickSpy).toHaveBeenCalled();

docs/snippets/vue/portable-stories-vitest-override-globals.ts.mdx

@@ -13,12 +13,12 @@ test('renders in English', async () => {
     { globals: { locale: 'en' } }, // 👈 Project annotations to override the locale
   );
 
-  render(PrimaryStory());
+  render(PrimaryStory);
 });
 
 test('renders in Spanish', async () => {
   const PrimaryStory = composeStory(Primary, meta, { globals: { locale: 'es' } });
 
-  render(PrimaryStory());
+  render(PrimaryStory);
 });
 ```

docs/snippets/vue/portable-stories-vitest-with-loaders.ts.mdx

@@ -13,6 +13,6 @@ test('applies the loaders and renders', async () => {
   await PrimaryStory.load();
 
   // Then, render the story
-  render(PrimaryStory());
+  render(PrimaryStory);
 });
 ```

docs/snippets/vue/portable-stories-vitest-with-play-function.ts.mdx

@@ -10,7 +10,7 @@ test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
 
   // First, render the story
-  render(PrimaryStory());
+  render(PrimaryStory);
 
   // Then, execute the play function
   await PrimaryStory.play();