Add CSF 4 snippets

storybookjs · Jan 15, 2025 · d0371d2 · d0371d2
1 parent 89631e6
commit d0371d2
Show file tree

Hide file tree

Showing 2 changed files with 212 additions and 82 deletions.
diff --git 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
@@ -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,41 @@ const preview: Preview = {
 
 export default preview;
 ```
+
+```ts filename=".storybook/preview.js|ts" renderer="react" language="ts" tabTitle="CSF 4 (experimental)"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { defineConfig } from '@storybook/your-renderer';
+
+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)"
+// Replace your-renderer with the renderer you are using (e.g., react, vue3)
+import { defineConfig } from '@storybook/your-renderer';
+
+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;
+```