Docs: Add Vue, Angular, and Web Components CSF Next snippets & guidance

docs/_snippets/actions-filtering-example.md

@@ -107,3 +107,140 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { action } from 'storybook/actions';
+import { spyOn } from 'storybook/test';
+
+const originalConsoleLog = console.log;
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log')
+      // Disable automatic logging in the actions panel
+      .mockName('')
+      .mockImplementation((args) => {
+        // Check if the log message matches a certain pattern
+        if (someCondition(args)) {
+          // Manually log an action
+          action('console.log')(args);
+        }
+
+        // Call the original console.log function
+        originalConsoleLog(...args);
+      });
+  },
+});
+```

docs/_snippets/actions-spyon-basic-example.md

@@ -50,3 +50,67 @@ export default definePreview({
   },
 });
 ```
+
+```ts filename=".storybook/preview.ts" renderer="vue" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="vue" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/vue3-vite';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="angular" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/angular';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+```ts filename=".storybook/preview.ts" renderer="web-components" language="ts" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename=".storybook/preview.js" renderer="web-components" language="js" tabTitle="CSF Next 🧪"
+import { definePreview } from '@storybook/web-components-vite';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```