From 682538425fda4b88dd856dc8956a4e568c9ddcf3 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Wed, 15 Jan 2025 13:38:14 -0700
Subject: [PATCH 1/5] Add CSF 4 snippets

---
 docs/_snippets/tags-in-meta-and-story.md | 252 ++++++++++++++++-------
 docs/_snippets/tags-in-preview.md        |  40 +++-
 2 files changed, 210 insertions(+), 82 deletions(-)

diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index d0f262f2d6f..8d133fd24a7 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -1,3 +1,93 @@
+```js filename="Button.stories.js" renderer="common" language="js" tabTitle="CSF 3"
+import { Button } from './Button';
+
+export default {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export const ExperimentalFeatureStory = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts-4-9" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
+```ts filename="Button.stories.ts" renderer="common" language="ts" tabTitle="CSF 3"
+// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
+import type { Meta, StoryObj } from '@storybook/your-framework';
+
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const ExperimentalFeatureStory: Story = {
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+};
+```
+
 ```ts filename="Button.stories.ts" renderer="angular" language="ts"
 import type { Meta, StoryObj } from '@storybook/angular';
 
@@ -29,38 +119,44 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
+```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
+import config from '#.storybook/preview.ts';
 
-  import Button from './Button.svelte';
+import { Button } from './Button';
 
-  const { Story } = defineMeta({
-    component: Button,
-    /*
-     * All stories in this file will have these tags applied:
-     * - autodocs
-     * - dev (implicit default, inherited from preview)
-     * - test (implicit default, inherited from preview)
-     */
-    tags: ['autodocs'],
-  });
-</script>
+const meta = config.meta({
+  component: Button,
+  /*
+   * All stories in this file will have these tags applied:
+   * - autodocs
+   * - dev (implicit default, inherited from preview)
+   * - test (implicit default, inherited from preview)
+   */
+  tags: ['autodocs'],
+});
 
-<!--
-  This particular story will have these tags applied:
-  - experimental
-  - autodocs (inherited from meta)
-  - dev (inherited from meta)
-  - test (inherited from meta)
--->
-<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+export default meta;
+
+export const ExperimentalFeatureStory = meta.story({
+  /*
+   * This particular story will have these tags applied:
+   * - experimental
+   * - autodocs (inherited from meta)
+   * - dev (inherited from meta)
+   * - test (inherited from meta)
+   */
+  tags: ['experimental'],
+});
 ```
 
-```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
-import Button from './Button.svelte';
+<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-export default {
+```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
+import config from '#.storybook/preview.ts';
+
+import { Button } from './Button';
+
+const meta = config.meta({
   component: Button,
   /*
    * All stories in this file will have these tags applied:
@@ -69,9 +165,11 @@ export default {
    * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
-};
+});
 
-export const ExperimentalFeatureStory = {
+export default meta;
+
+export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
    * - experimental
@@ -80,13 +178,15 @@ export const ExperimentalFeatureStory = {
    * - test (inherited from meta)
    */
   tags: ['experimental'],
-};
+});
 ```
 
-```js filename="Button.stories.js" renderer="common" language="js"
+```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF 4 (experimental)"
+import config from '#.storybook/preview.ts';
+
 import { Button } from './Button';
 
-export default {
+const meta = config.meta({
   component: Button,
   /*
    * All stories in this file will have these tags applied:
@@ -95,9 +195,11 @@ export default {
    * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
-};
+});
 
-export const ExperimentalFeatureStory = {
+export default meta;
+
+export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
    * - experimental
@@ -106,10 +208,10 @@ export const ExperimentalFeatureStory = {
    * - test (inherited from meta)
    */
   tags: ['experimental'],
-};
+});
 ```
 
-```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+```svelte filename="Button.stories.svelte" renderer="svelte" language="js" tabTitle="Svelte CSF"
 <script module>
   import { defineMeta } from '@storybook/addon-svelte-csf';
 
@@ -137,12 +239,10 @@ export const ExperimentalFeatureStory = {
 <Story name="ExperimentalFeatureStory" tags={['experimental']} />
 ```
 
-```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
-import type { Meta, StoryObj } from '@storybook/svelte';
-
+```js filename="Button.stories.js" renderer="svelte" language="js" tabTitle="CSF"
 import Button from './Button.svelte';
 
-const meta = {
+export default {
   component: Button,
   /*
    * All stories in this file will have these tags applied:
@@ -151,12 +251,9 @@ const meta = {
    * - test (implicit default, inherited from preview)
    */
   tags: ['autodocs'],
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
+};
 
-export const ExperimentalFeatureStory: Story = {
+export const ExperimentalFeatureStory = {
   /*
    * This particular story will have these tags applied:
    * - experimental
@@ -168,11 +265,38 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts-4-9"
-// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
+```svelte filename="Button.stories.svelte" renderer="svelte" language="ts-4-9" tabTitle="Svelte CSF"
+<script module>
+  import { defineMeta } from '@storybook/addon-svelte-csf';
 
-import { Button } from './Button';
+  import Button from './Button.svelte';
+
+  const { Story } = defineMeta({
+    component: Button,
+    /*
+     * All stories in this file will have these tags applied:
+     * - autodocs
+     * - dev (implicit default, inherited from preview)
+     * - test (implicit default, inherited from preview)
+     */
+    tags: ['autodocs'],
+  });
+</script>
+
+<!--
+  This particular story will have these tags applied:
+  - experimental
+  - autodocs (inherited from meta)
+  - dev (inherited from meta)
+  - test (inherited from meta)
+-->
+<Story name="ExperimentalFeatureStory" tags={['experimental']} />
+```
+
+```ts filename="Button.stories.ts" renderer="svelte" language="ts-4-9" tabTitle="CSF"
+import type { Meta, StoryObj } from '@storybook/svelte';
+
+import Button from './Button.svelte';
 
 const meta = {
   component: Button,
@@ -259,38 +383,6 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.ts" renderer="common" language="ts"
-// Replace your-framework with the framework you are using (e.g., nextjs, vue3-vite)
-import type { Meta, StoryObj } from '@storybook/your-framework';
-
-import { Button } from './Button';
-
-const meta: Meta<typeof Button> = {
-  component: Button,
-  /*
-   * All stories in this file will have these tags applied:
-   * - autodocs
-   * - dev (implicit default, inherited from preview)
-   * - test (implicit default, inherited from preview)
-   */
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Button>;
-
-export const ExperimentalFeatureStory: Story = {
-  /*
-   * This particular story will have these tags applied:
-   * - experimental
-   * - autodocs (inherited from meta)
-   * - dev (inherited from meta)
-   * - test (inherited from meta)
-   */
-  tags: ['experimental'],
-};
-```
-
 ```js filename="Button.stories.js" renderer="web-components" language="js"
 export default {
   title: 'Button',
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index de110347bbe..55f49845d97 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -1,4 +1,4 @@
-```js filename=".storybook/preview.js" renderer="common" language="js"
+```js filename=".storybook/preview.js" renderer="common" language="js" tabTitle="CSF 3"
 export default {
   // ...rest of preview
   /*
@@ -11,7 +11,7 @@ export default {
 };
 ```
 
-```ts filename=".storybook/preview.ts" renderer="common" language="ts"
+```ts filename=".storybook/preview.ts" renderer="common" language="ts" tabTitle="CSF 3"
 // Replace your-renderer with the renderer you are using (e.g., react, vue3)
 import type { Preview } from '@storybook/your-renderer';
 
@@ -28,3 +28,39 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
+import { defineConfig } from '@storybook/react';
+
+const config defineConfig({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+
+export default config;
+```
+
+<!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
+
+```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
+import { defineConfig } from '@storybook/react';
+
+const config defineConfig({
+  // ...rest of preview
+  /*
+   * All stories in your project will have these tags applied:
+   * - autodocs
+   * - dev (implicit default)
+   * - test (implicit default)
+   */
+  tags: ['autodocs'],
+});
+
+export default config;
+```

From 619f909bfd4c2bd09b57a473b8f98f8ceb62cfb0 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 17 Jan 2025 07:30:10 -0700
Subject: [PATCH 2/5] Fix incorrect API

---
 docs/_snippets/tags-in-preview.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index 55f49845d97..f92abf47fe0 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -30,9 +30,9 @@ export default preview;
 ```
 
 ```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
-import { defineConfig } from '@storybook/react';
+import { definePreview } from '@storybook/react-vite/browser';
 
-const config defineConfig({
+const config definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
@@ -49,9 +49,9 @@ export default config;
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
 ```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
-import { defineConfig } from '@storybook/react';
+import { definePreview } from '@storybook/react-vite/browser';
 
-const config defineConfig({
+const config definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:

From 5d7b457755aed63604a92cae5fd51e7983e58a38 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Wed, 22 Jan 2025 10:13:12 -0700
Subject: [PATCH 3/5] Changes per latest discussions

---
 docs/_snippets/tags-in-meta-and-story.md |  9 ++++++---
 docs/_snippets/tags-in-preview.md        | 10 ++++++----
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index 8d133fd24a7..ec4de40b70d 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -119,7 +119,8 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
+```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
 import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
@@ -151,7 +152,8 @@ export const ExperimentalFeatureStory = meta.story({
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
+```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
 import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
@@ -181,7 +183,8 @@ export const ExperimentalFeatureStory = meta.story({
 });
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF 4 (experimental)"
+```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
 import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index f92abf47fe0..54de98fda82 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -29,8 +29,9 @@ const preview: Preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
-import { definePreview } from '@storybook/react-vite/browser';
+```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework/preview';
 
 const config definePreview({
   // ...rest of preview
@@ -48,8 +49,9 @@ export default config;
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF 4 (experimental)"
-import { definePreview } from '@storybook/react-vite/browser';
+```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
+// Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
+import { definePreview } from '@storybook/your-framework/preview';
 
 const config definePreview({
   // ...rest of preview

From ab464032bdacc455c1ec133ab7118af94f470207 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 31 Jan 2025 14:33:45 -0700
Subject: [PATCH 4/5] Changes per latest discussion

---
 docs/_snippets/tags-in-meta-and-story.md | 24 +++++++++---------------
 docs/_snippets/tags-in-preview.md        | 16 ++++++----------
 2 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index ec4de40b70d..6e7cd5c438e 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -119,9 +119,9 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
-// Learn how to set up subpath imports: TK
-import config from '#.storybook/preview.ts';
+```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factories 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
+import config from '#.storybook/preview';
 
 import { Button } from './Button';
 
@@ -136,8 +136,6 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
-export default meta;
-
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
@@ -152,9 +150,9 @@ export const ExperimentalFeatureStory = meta.story({
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
-// Learn how to set up subpath imports: TK
-import config from '#.storybook/preview.ts';
+```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factories 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
+import config from '#.storybook/preview';
 
 import { Button } from './Button';
 
@@ -169,8 +167,6 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
-export default meta;
-
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
@@ -183,9 +179,9 @@ export const ExperimentalFeatureStory = meta.story({
 });
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factory 🧪"
-// Learn how to set up subpath imports: TK
-import config from '#.storybook/preview.ts';
+```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factories 🧪"
+// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
+import config from '#.storybook/preview';
 
 import { Button } from './Button';
 
@@ -200,8 +196,6 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
-export default meta;
-
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index 54de98fda82..e7a82cd8160 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -29,11 +29,11 @@ const preview: Preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
+```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factories 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
-import { definePreview } from '@storybook/your-framework/preview';
+import { definePreview } from '@storybook/your-framework';
 
-const config definePreview({
+export default definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
@@ -43,17 +43,15 @@ const config definePreview({
    */
   tags: ['autodocs'],
 });
-
-export default config;
 ```
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
+```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factories 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
-import { definePreview } from '@storybook/your-framework/preview';
+import { definePreview } from '@storybook/your-framework';
 
-const config definePreview({
+export default definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
@@ -63,6 +61,4 @@ const config definePreview({
    */
   tags: ['autodocs'],
 });
-
-export default config;
 ```

From 41007240bb7dc9680d3b541f0b3718c3ae466ae6 Mon Sep 17 00:00:00 2001
From: Kyle Gach <kyle.gach@gmail.com>
Date: Fri, 31 Jan 2025 16:43:03 -0700
Subject: [PATCH 5/5] Revert "Changes per latest discussion"

This reverts commit ab464032bdacc455c1ec133ab7118af94f470207.
---
 docs/_snippets/tags-in-meta-and-story.md | 24 +++++++++++++++---------
 docs/_snippets/tags-in-preview.md        | 16 ++++++++++------
 2 files changed, 25 insertions(+), 15 deletions(-)

diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md
index 6e7cd5c438e..ec4de40b70d 100644
--- a/docs/_snippets/tags-in-meta-and-story.md
+++ b/docs/_snippets/tags-in-meta-and-story.md
@@ -119,9 +119,9 @@ export const ExperimentalFeatureStory: Story = {
 };
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factories 🧪"
-// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
-import config from '#.storybook/preview';
+```ts filename="Button.stories.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
+import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
 
@@ -136,6 +136,8 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
+export default meta;
+
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
@@ -150,9 +152,9 @@ export const ExperimentalFeatureStory = meta.story({
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factories 🧪"
-// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
-import config from '#.storybook/preview';
+```js filename="Button.stories.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
+import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
 
@@ -167,6 +169,8 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
+export default meta;
+
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
@@ -179,9 +183,9 @@ export const ExperimentalFeatureStory = meta.story({
 });
 ```
 
-```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factories 🧪"
-// Learn about the # subpath import: https://storybook.js.org/docs/api/csf/csf-factories#subpath-importsd
-import config from '#.storybook/preview';
+```ts filename="Button.stories.js|ts" renderer="react" language="ts-4-9" tabTitle="CSF Factory 🧪"
+// Learn how to set up subpath imports: TK
+import config from '#.storybook/preview.ts';
 
 import { Button } from './Button';
 
@@ -196,6 +200,8 @@ const meta = config.meta({
   tags: ['autodocs'],
 });
 
+export default meta;
+
 export const ExperimentalFeatureStory = meta.story({
   /*
    * This particular story will have these tags applied:
diff --git a/docs/_snippets/tags-in-preview.md b/docs/_snippets/tags-in-preview.md
index e7a82cd8160..54de98fda82 100644
--- a/docs/_snippets/tags-in-preview.md
+++ b/docs/_snippets/tags-in-preview.md
@@ -29,11 +29,11 @@ const preview: Preview = {
 export default preview;
 ```
 
-```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factories 🧪"
+```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF Factory 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
-import { definePreview } from '@storybook/your-framework';
+import { definePreview } from '@storybook/your-framework/preview';
 
-export default definePreview({
+const config definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
@@ -43,15 +43,17 @@ export default definePreview({
    */
   tags: ['autodocs'],
 });
+
+export default config;
 ```
 
 <!-- js & ts-4-9 (when applicable) still needed while providing both CSF 3 & 4 -->
 
-```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factories 🧪"
+```js filename=".storybook/preview.js|ts" renderer="react" language="js" tabTitle="CSF Factory 🧪"
 // Replace your-framework with the framework you are using (e.g., react-vite, nextjs, experimental-nextjs-vite)
-import { definePreview } from '@storybook/your-framework';
+import { definePreview } from '@storybook/your-framework/preview';
 
-export default definePreview({
+const config definePreview({
   // ...rest of preview
   /*
    * All stories in your project will have these tags applied:
@@ -61,4 +63,6 @@ export default definePreview({
    */
   tags: ['autodocs'],
 });
+
+export default config;
 ```