Docs: Add CSF Next snippets

docs/_snippets/actions-filtering-example.md

@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, svelte)
 import type { Preview } from '@storybook/your-framework';
 
@@ -9,44 +9,101 @@ const originalConsoleLog = console.log;
 const preview: Preview = {
   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);
-    });
+      // 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);
+      });
   },
 };
 
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { action } from 'storybook/actions';
 import { spyOn } from 'storybook/test';
 
 const originalConsoleLog = console.log;
 export default {
   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);
-    });
+      // 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="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+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="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+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

@@ -1,4 +1,4 @@
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, svelte)
 import type { Preview } from '@storybook/your-framework';
 
@@ -13,7 +13,7 @@ const preview: Preview = {
 export default preview;
 ```
 
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 import { spyOn } from 'storybook/test';
 
 export default {
@@ -22,3 +22,31 @@ export default {
   },
 };
 ```
+
+```ts filename=".storybook/preview.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+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="react" language="js" tabTitle="CSF Next 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, nextjs-vite)
+import { definePreview } from '@storybook/your-framework';
+
+import { spyOn } from 'storybook/test';
+
+export default definePreview({
+  async beforeEach() {
+    spyOn(console, 'log').mockName('console.log');
+  },
+});
+```

docs/_snippets/addon-a11y-config-context-in-story.md

@@ -1,4 +1,4 @@
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // ...rest of story file
 
 export const ExampleStory: Story = {
@@ -135,3 +135,45 @@ export const ExampleStory = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+// ...rest of story file
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {
+        include: ['body'],
+        exclude: ['.no-a11y-check'],
+      },
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+// ...rest of story file
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {
+        include: ['body'],
+        exclude: ['.no-a11y-check'],
+      },
+    },
+  },
+});
+```

docs/_snippets/addon-a11y-config-in-meta-and-story.md

@@ -57,7 +57,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-framework with the framework you are using, e.g. react-vite, nextjs, vue3-vite, etc.
 import type { Meta, StoryObj } from '@storybook/your-framework';
 
@@ -117,7 +117,7 @@ export const ExampleStory: Story = {
 };
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
 import { Button } from './Button';
 
 export default {
@@ -511,3 +511,117 @@ export const ExampleStory = {
   },
 };
 ```
+
+```ts filename="Button.stories.ts" renderer="react" language="ts" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {},
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+      /*
+       * Configure test behavior
+       * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+       */
+      test: 'error',
+    },
+  },
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+  globals: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+});
+```
+
+<!-- JS snippets still needed while providing both CSF 3 & Next -->
+
+```js filename="Button.stories.js" renderer="react" language="js" tabTitle="CSF Next 🧪"
+import preview from '../.storybook/preview';
+import { Button } from './Button';
+
+const meta = preview.meta({
+  component: Button,
+  parameters: {
+    a11y: {
+      /*
+       * Axe's context parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#context-parameter
+       * to learn more.
+       */
+      context: {},
+      /*
+       * Axe's configuration
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#api-name-axeconfigure
+       * to learn more about the available properties.
+       */
+      config: {},
+      /*
+       * Axe's options parameter
+       * See https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter
+       * to learn more about the available options.
+       */
+      options: {},
+      /*
+       * Configure test behavior
+       * See: https://storybook.js.org/docs/next/writing-tests/accessibility-testing#test-behavior
+       */
+      test: 'error',
+    },
+  },
+
+  globals: {
+    a11y: {
+      // Optional flag to prevent the automatic check
+      manual: true,
+    },
+  },
+});
+
+export const ExampleStory = meta.story({
+  parameters: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+  globals: {
+    a11y: {
+      // ...same config available as above
+    },
+  },
+});
+```