Docs: Document portable stories usage

docs/_snippets/portable-stories-import-annotations.md

@@ -1,11 +1,32 @@
-```js filename="setupFile.js|ts" renderer="common" language="js"
-// Adjust the import based on the supported framework or Storybook's testing libraries (e.g., react, testing-vue3)
-import { setProjectAnnotations } from '@storybook/your-framework';
+```js filename="setupFile.js|ts" renderer="react" language="ts"
+import { setProjectAnnotations } from '@storybook/react';
+import * as previewAnnotations from './.storybook/preview';
 
-// Replace this export with the default export from your Storybook preview file if you're working with a latest version of Storybook
-import * as projectAnnotations from './.storybook/preview';
+// Apply the global annotations from the Storybook preview file
+const annotations = setProjectAnnotations(previewAnnotations);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```
+
+```js filename="setupFile.js|ts" renderer="vue" language="ts"
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as previewAnnotations from './.storybook/preview';
 
 // Apply the global annotations from the Storybook preview file
-setProjectAnnotations(projectAnnotations);
+const annotations = setProjectAnnotations(previewAnnotations);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
 ```
 
+```js filename="setupFile.js|ts" renderer="svelte" language="ts"
+import { setProjectAnnotations } from '@storybook/svelte';
+import * as previewAnnotations from './.storybook/preview';
+
+// Apply the global annotations from the Storybook preview file
+const annotations = setProjectAnnotations(previewAnnotations);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```

docs/_snippets/portable-stories-jest-override-set-project-annotations.md

@@ -0,0 +1,35 @@
+```tsx filename="setupTest.ts" renderer="react" language="ts"
+import { beforeAll } from '@jest/globals';
+import { render as testingLibraryRender } from '@testing-library/react';
+import { setProjectAnnotations } from '@storybook/react';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
+  addonAnnotations,
+  // Attention: Passing the render function from testing library is required if you mount stories in play functions
+  { testingLibraryRender },
+]);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="setupTest.ts" renderer="vue" language="ts"
+import { beforeAll } from '@jest/globals';
+import { render as testingLibraryRender } from '@testing-library/vue';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
+  addonAnnotations,
+  // Attention: Passing the render function from testing library is required if you mount stories in play functions
+  { testingLibraryRender },
+]);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```

docs/_snippets/portable-stories-jest-with-play-function.md

@@ -8,11 +8,7 @@ import meta, { Primary } from './Button.stories';
 
 test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
-
-  // First, render the story
-  render(<PrimaryStory />);
-
-  // Then, execute the play function
+  // Mount story and run interactions
   await PrimaryStory.play();
 });
 ```
@@ -26,12 +22,7 @@ import meta, { Primary } from './Button.stories';
 
 test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
-
-  // First, render the story
-  render(PrimaryStory);
-
-  // Then, execute the play function
+  // Mount story and run interactions
   await PrimaryStory.play();
 });
 ```
-

docs/_snippets/portable-stories-playwright-ct-compose-stories.md

@@ -0,0 +1,21 @@
+```tsx filename="playwright/index.tsx" renderer="react" language="ts"
+import { test } from '@playwright/experimental-ct-react';
+import { setProjectAnnotations } from '@storybook/react';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from '../.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
+// Supports beforeAll hook from Storybook
+test.beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="playwright/index.tsx"  renderer="vue" language="ts"
+import { test } from '@playwright/experimental-ct-react';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from '../.storybook/preview';
+
+const annotations = setProjectAnnotations([previewAnnotations, addonAnnotations]);
+// Supports beforeAll hook from Storybook
+test.beforeAll(annotations.beforeAll);
+```

docs/_snippets/portable-stories-playwright-ct-override-globals.md

@@ -0,0 +1,27 @@
+```tsx filename="Button.stories.portable.ts" renderer="react" language="ts"
+import { composeStory } from '@storybook/react';
+
+import meta, { Primary } from './Button.stories';
+
+export const PrimaryEnglish = composeStory(
+  Primary,
+  meta,
+  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+);
+
+export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
+```
+
+```ts filename="Button.stories.portable.ts" renderer="vue" language="ts"
+import { composeStory } from '@storybook/vue3';
+
+import meta, { Primary } from './Button.stories';
+
+export const PrimaryEnglish = composeStory(
+  Primary,
+  meta,
+  { globals: { locale: 'en' } } // 👈 Project annotations to override the locale
+);
+
+export const PrimarySpanish = composeStory(Primary, meta, { globals: { locale: 'es' } });
+```

docs/_snippets/portable-stories-vitest-override-set-project-annotations.md

@@ -0,0 +1,53 @@
+```tsx filename="setupTest.ts" renderer="react" language="ts"
+import { beforeAll } from 'vitest';
+import { render as testingLibraryRender } from '@testing-library/react';
+import { setProjectAnnotations } from '@storybook/react';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
+  addonAnnotations,
+  // Attention: Passing the render function from testing library is required if you mount stories in play functions
+  { testingLibraryRender },
+]);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="setupTest.ts" renderer="svelte" language="ts"
+import { beforeAll } from 'vitest';
+import { render as testingLibraryRender } from '@testing-library/svelte';
+import { setProjectAnnotations } from '@storybook/svelte';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
+  addonAnnotations,
+  // Attention: Passing the render function from testing library is required if you mount stories in play functions
+  { testingLibraryRender },
+]);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```
+
+```tsx filename="setupTest.ts" renderer="vue" language="ts"
+import { beforeAll } from 'vitest';
+import { render as testingLibraryRender } from '@testing-library/vue';
+import { setProjectAnnotations } from '@storybook/vue3';
+import * as addonAnnotations from 'my-addon/preview';
+import * as previewAnnotations from './.storybook/preview';
+
+const annotations = setProjectAnnotations([
+  previewAnnotations,
+  addonAnnotations,
+  // Attention: Passing the render function from testing library is required if you mount stories in play functions
+  { testingLibraryRender },
+]);
+
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
+```

docs/_snippets/portable-stories-vitest-with-play-function.md

@@ -7,11 +7,7 @@ import meta, { Primary } from './Button.stories';
 
 test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
-
-  // First, render the story
-  render(<PrimaryStory />);
-
-  // Then, execute the play function
+  // Mount story and run interactions
   await PrimaryStory.play();
 });
 ```
@@ -25,11 +21,7 @@ import meta, { Primary } from './Button.stories';
 
 test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
-
-  // First, render the story
-  render(PrimaryStory.Component, PrimaryStory.props);
-
-  // Then, execute the play function
+  // Mount story and run interactions
   await PrimaryStory.play();
 });
 ```
@@ -43,12 +35,7 @@ import meta, { Primary } from './Button.stories';
 
 test('renders and executes the play function', async () => {
   const PrimaryStory = composeStory(Primary, meta);
-
-  // First, render the story
-  render(PrimaryStory);
-
-  // Then, execute the play function
+  // Mount story and run interactions
   await PrimaryStory.play();
 });
 ```
-

docs/_snippets/storybook-testing-addon-optional-config.md → docs/_snippets/storybook-testing-addon-set-annotations.md

@@ -1,10 +1,13 @@
 ```js filename="setupFile.js|ts" renderer="react" language="js"
+import { setProjectAnnotations } from '@storybook/react';
+import { render as testingLibraryRender } from '@testing-library/react';
 // Storybook's preview file location
-import * as globalStorybookConfig from './.storybook/preview';
+import * as previewAnnotations from './.storybook/preview';
 
-import { setProjectAnnotations } from '@storybook/react';
+const annotations = setProjectAnnotations([previewAnnotations, { testingLibraryRender }]);
 
-setProjectAnnotations(globalStorybookConfig);
+// Supports beforeAll hook from Storybook
+beforeAll(annotations.beforeAll);
 ```
 
 ```js filename="vitest.config.js" renderer="react" language="js" tabTitle="vite"
@@ -22,7 +25,7 @@ export default mergeConfig(
       clearMocks: true,
       setupFiles: './src/setupTests.js', //👈 Our configuration file enabled here
     },
-  }),
+  })
 );
 ```
 
@@ -42,17 +45,18 @@ export default mergeConfig(
       clearMocks: true,
       setupFiles: './src/setupTests.ts', //👈 Our configuration file enabled here
     },
-  }),
+  })
 );
 ```
 
 ```js filename="setupFile.js|ts" renderer="vue" language="js"
 // Storybook's preview file location
-import * as globalStorybookConfig from './.storybook/preview';
+import * as previewAnnotations from './.storybook/preview';
 
 import { setProjectAnnotations } from '@storybook/vue3';
+import { render as testingLibraryRender } from '@testing-library/vue';
 
-setProjectAnnotations(globalStorybookConfig);
+setProjectAnnotations([previewAnnotations, { testingLibraryRender }]);
 ```
 
 ```js filename="vitest.config.js" renderer="vue" language="js" tabTitle="vite"
@@ -70,7 +74,7 @@ export default mergeConfig(
       clearMocks: true,
       setupFiles: './src/setupTests.js', //👈 Our configuration file enabled here
     },
-  }),
+  })
 );
 ```
 
@@ -90,7 +94,6 @@ export default mergeConfig(
       clearMocks: true,
       setupFiles: './src/setupTests.ts', //👈 Our configuration file enabled here
     },
-  }),
+  })
 );
 ```
-