From 682538425fda4b88dd856dc8956a4e568c9ddcf3 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 15 Jan 2025 13:38:14 -0700 Subject: [PATCH 1/8] 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 d0f262f2d6f7..8d133fd24a76 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; + +export default meta; +type Story = StoryObj; + +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 = { + 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; + +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" - +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'], +}); - - +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'; + -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" + + + +``` + +```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 = { - 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; - -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 de110347bbe0..55f49845d97c 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 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 Date: Fri, 17 Jan 2025 07:30:10 -0700 Subject: [PATCH 2/8] 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 55f49845d97c..f92abf47fe0b 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 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 dd306eb4cdebe711a914d2269ac0601e337867e7 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 22 Jan 2025 10:08:46 -0700 Subject: [PATCH 3/8] Changes per latest discussions --- docs/_snippets/tags-in-meta-and-story.md | 9 ++++++--- docs/_snippets/tags-in-preview.md | 8 ++++---- 2 files changed, 10 insertions(+), 7 deletions(-) diff --git a/docs/_snippets/tags-in-meta-and-story.md b/docs/_snippets/tags-in-meta-and-story.md index 8d133fd24a76..ec4de40b70de 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 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 f92abf47fe0b..3edfdc4e7232 100644 --- a/docs/_snippets/tags-in-preview.md +++ b/docs/_snippets/tags-in-preview.md @@ -29,8 +29,8 @@ 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 🧪" +import { definePreview } from '@storybook/react-vite/preview'; const config definePreview({ // ...rest of preview @@ -48,8 +48,8 @@ export default config; -```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 🧪" +import { definePreview } from '@storybook/react-vite/preview'; const config definePreview({ // ...rest of preview From 5d7b457755aed63604a92cae5fd51e7983e58a38 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 22 Jan 2025 10:13:12 -0700 Subject: [PATCH 4/8] 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 8d133fd24a76..ec4de40b70de 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 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 f92abf47fe0b..54de98fda829 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 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 Date: Fri, 31 Jan 2025 14:33:45 -0700 Subject: [PATCH 5/8] 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 ec4de40b70de..6e7cd5c438e5 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 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 54de98fda829..e7a82cd81606 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 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 Date: Fri, 31 Jan 2025 16:43:03 -0700 Subject: [PATCH 6/8] 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 6e7cd5c438e5..ec4de40b70de 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 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 e7a82cd81606..54de98fda829 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 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; ``` From 0a7a492009e78b22e16d644bb2841ad5550ee16c Mon Sep 17 00:00:00 2001 From: jonniebigodes Date: Thu, 6 Feb 2025 15:24:08 +0000 Subject: [PATCH 7/8] Adds CSF snippets and other minor documentation adjustments --- .../addon-actions-action-function.md | 63 +- .../addon-backgrounds-define-default.md | 84 +- .../addon-backgrounds-define-globals.md | 72 +- docs/_snippets/addon-backgrounds-disabled.md | 116 ++- docs/_snippets/addon-backgrounds-grid.md | 75 +- .../addon-backgrounds-options-in-meta.md | 69 +- .../addon-backgrounds-options-in-preview.md | 52 +- .../addon-backgrounds-values-in-meta.md | 66 +- .../addon-backgrounds-values-in-preview.md | 46 +- .../addon-consume-and-update-globaltype.md | 2 + docs/_snippets/addon-consume-globaltype.md | 2 + docs/_snippets/addon-highlight-reset.md | 93 +- .../addon-viewport-add-viewport-in-preview.md | 152 ++- .../addon-viewport-configuration-in-meta.md | 319 ++++-- .../addon-viewport-define-default.md | 72 +- .../addon-viewport-define-globals.md | 72 +- .../addon-viewport-options-in-preview.md | 42 +- .../addon-viewport-viewports-in-preview.md | 39 +- docs/_snippets/angular-add-framework.md | 2 + .../api-doc-block-argtypes-parameter.md | 135 ++- .../api-doc-block-canvas-parameter.md | 69 +- .../api-doc-block-controls-parameter.md | 56 +- .../api-doc-block-description-example.md | 115 ++- .../api-doc-block-source-parameter.md | 69 +- .../api-doc-block-story-parameter.md | 68 +- docs/_snippets/arg-types-control.md | 69 +- docs/_snippets/arg-types-default-value.md | 71 +- docs/_snippets/arg-types-description.md | 54 +- docs/_snippets/arg-types-if.md | 136 ++- docs/_snippets/arg-types-in-meta.md | 60 +- docs/_snippets/arg-types-in-preview.md | 51 +- docs/_snippets/arg-types-in-story.md | 71 +- docs/_snippets/arg-types-mapping.md | 68 +- docs/_snippets/arg-types-name.md | 54 +- docs/_snippets/arg-types-options.md | 54 +- docs/_snippets/arg-types-table.md | 63 +- docs/_snippets/arg-types-type.md | 48 +- docs/_snippets/args-in-preview.md | 36 +- docs/_snippets/args-usage-with-addons.md | 2 + .../before-each-in-meta-mock-date.md | 134 ++- docs/_snippets/button-group-story.md | 71 +- .../button-story-action-event-handle.md | 66 +- docs/_snippets/button-story-baseline.md | 20 +- .../button-story-click-handler-args.md | 70 +- ...utton-story-click-handler-simplificated.md | 117 ++- docs/_snippets/button-story-click-handler.md | 65 +- .../button-story-component-args-primary.md | 63 +- .../button-story-component-decorator.md | 63 +- .../button-story-controls-primary-variant.md | 57 +- .../button-story-controls-radio-group.md | 57 +- docs/_snippets/button-story-decorator.md | 72 +- ...ton-story-default-export-with-component.md | 39 +- docs/_snippets/button-story-default-export.md | 54 +- docs/_snippets/button-story-disable-addon.md | 60 +- docs/_snippets/button-story-grouped.md | 54 +- docs/_snippets/button-story-hoisted.md | 63 +- .../button-story-hypothetical-example.md | 66 +- .../button-story-matching-argtypes.md | 42 +- .../button-story-onclick-action-spy.md | 51 +- .../button-story-primary-composition.md | 83 +- .../button-story-primary-long-name.md | 83 +- .../button-story-pseudo-states-addon.md | 302 ++++++ docs/_snippets/button-story-rename-story.md | 66 +- docs/_snippets/button-story-using-args.md | 104 +- .../button-story-with-addon-example.md | 198 ++-- docs/_snippets/button-story-with-args.md | 64 +- docs/_snippets/button-story-with-sample.md | 81 +- docs/_snippets/button-story.md | 149 ++- docs/_snippets/checkbox-story-csf.md | 57 +- docs/_snippets/checkbox-story-grouped.md | 54 +- ...y-conditional-controls-mutual-exclusion.md | 72 +- ...onent-story-conditional-controls-toggle.md | 63 +- .../component-story-custom-args-complex.md | 961 ++++++------------ .../component-story-custom-args-mapping.md | 99 +- .../component-story-disable-controls-alt.md | 57 +- .../component-story-disable-controls-regex.md | 111 +- .../component-story-disable-controls.md | 63 +- .../component-story-figma-integration.md | 71 +- .../component-story-highlight-addon.md | 90 +- .../component-story-sort-controls.md | 42 +- .../component-story-static-asset-cdn.md | 57 +- ...omponent-story-static-asset-with-import.md | 72 +- ...onent-story-static-asset-without-import.md | 54 +- ...onent-story-with-custom-render-function.md | 87 +- docs/_snippets/component-story-with-title.md | 156 +++ ...gure-mock-provider-with-story-parameter.md | 69 +- docs/_snippets/csf-3-example-title.md | 87 -- .../custom-project-level-parameters.md | 67 ++ .../custom-story-level-parameters.md | 286 ++++++ .../decorator-parameterized-in-preview.md | 75 +- docs/_snippets/foo-bar-baz-story.md | 60 +- .../gizmo-story-controls-customization.md | 180 +++- .../_snippets/highlight-addon-custom-style.md | 96 +- docs/_snippets/histogram-story.md | 66 +- docs/_snippets/list-story-expanded.md | 117 ++- docs/_snippets/list-story-reuse-data.md | 83 +- docs/_snippets/list-story-starter.md | 48 +- docs/_snippets/list-story-template.md | 162 ++- .../list-story-with-subcomponents.md | 97 +- .../list-story-with-unchecked-children.md | 83 +- docs/_snippets/loader-story.md | 81 +- .../login-form-with-play-function.md | 133 ++- docs/_snippets/main-config-addons.md | 76 +- docs/_snippets/main-config-babel.md | 48 +- .../main-config-builder-custom-config.md | 55 +- docs/_snippets/main-config-core-builder.md | 40 +- .../main-config-core-cross-origin-isolated.md | 34 +- .../main-config-core-disable-project-json.md | 34 +- .../main-config-core-disable-telemetry.md | 34 +- ...onfig-core-disable-update-notifications.md | 34 +- ...in-config-core-disable-webpack-defaults.md | 32 +- .../main-config-core-enable-crash-reports.md | 34 +- docs/_snippets/main-config-docs-autodocs.md | 34 +- .../main-config-docs-default-name.md | 34 +- docs/_snippets/main-config-docs-docs-mode.md | 34 +- docs/_snippets/main-config-env.md | 44 +- ...ain-config-features-arg-type-targets-v7.md | 34 +- ...nfig-features-backgrounds-story-globals.md | 34 +- ...fig-features-development-mode-for-build.md | 34 +- ...ig-features-legacy-decorator-file-order.md | 34 +- ...-config-features-viewport-story-globals.md | 34 +- docs/_snippets/main-config-framework.md | 36 +- .../main-config-indexers-jsonstories.md | 51 +- docs/_snippets/main-config-indexers-title.md | 51 +- docs/_snippets/main-config-indexers.md | 44 +- docs/_snippets/main-config-log-level.md | 30 +- docs/_snippets/main-config-manager-head.md | 36 +- docs/_snippets/main-config-preview-body.md | 40 +- docs/_snippets/main-config-preview-head.md | 40 +- docs/_snippets/main-config-preview.md | 72 +- docs/_snippets/main-config-refs-disable.md | 34 +- .../main-config-refs-with-function.md | 80 +- docs/_snippets/main-config-refs.md | 44 +- .../main-config-static-dirs-with-object.md | 30 +- docs/_snippets/main-config-static-dirs.md | 30 +- docs/_snippets/main-config-stories-ordered.md | 31 +- .../main-config-stories-with-logic.md | 46 +- .../main-config-stories-with-object.md | 46 +- docs/_snippets/main-config-stories.md | 28 +- .../main-config-svelte-csf-register.md | 2 + .../main-config-swc-jsx-transform.md | 48 +- docs/_snippets/main-config-swc.md | 44 +- .../main-config-test-disable-autodocs.md | 38 +- .../main-config-test-disable-blocks.md | 38 +- .../main-config-test-disable-disableaddons.md | 40 +- .../main-config-test-disable-docgen.md | 38 +- .../_snippets/main-config-test-disable-mdx.md | 38 +- .../main-config-test-disable-sourcemaps.md | 38 +- .../main-config-test-disable-treeshaking.md | 38 +- .../main-config-typescript-check-options.md | 20 +- .../_snippets/main-config-typescript-check.md | 17 +- ...escript-react-docgen-typescript-options.md | 20 +- .../main-config-typescript-react-docgen.md | 15 +- .../main-config-typescript-skip-compiler.md | 17 +- docs/_snippets/main-config-typical.md | 42 +- docs/_snippets/main-config-vite-final-env.md | 81 +- docs/_snippets/main-config-vite-final.md | 40 +- docs/_snippets/main-config-webpack-final.md | 44 +- .../mock-context-container-global.md | 53 +- docs/_snippets/mock-provider-in-preview.md | 59 +- docs/_snippets/module-aliases-config.md | 124 ++- .../msw-addon-configure-handlers-graphql.md | 307 +++++- .../msw-addon-configure-handlers-http.md | 201 +++- docs/_snippets/msw-addon-initialize.md | 44 +- docs/_snippets/my-component-disable-toc.md | 63 +- docs/_snippets/my-component-env-var-config.md | 57 +- .../my-component-play-function-alt-queries.md | 81 +- .../my-component-play-function-composition.md | 140 ++- ...my-component-play-function-query-findby.md | 87 +- .../my-component-play-function-waitfor.md | 120 ++- .../my-component-play-function-with-canvas.md | 104 +- ...component-play-function-with-clickevent.md | 164 ++- .../my-component-play-function-with-delay.md | 108 +- ...omponent-play-function-with-selectevent.md | 117 ++- .../my-component-story-basic-and-props.md | 72 +- .../my-component-story-mandatory-export.md | 120 ++- .../my-component-story-use-globaltype.md | 105 +- .../my-component-story-with-nonstory.md | 100 +- .../my-component-story-with-storyname.md | 54 +- .../my-component-vite-env-variables.md | 64 +- .../my-component-with-env-variables.md | 57 +- docs/_snippets/nextjs-add-framework.md | 34 +- docs/_snippets/nextjs-additional-options.md | 76 ++ .../_snippets/nextjs-app-directory-in-meta.md | 58 +- .../nextjs-app-directory-in-preview.md | 38 +- docs/_snippets/nextjs-cache-mock.md | 97 +- docs/_snippets/nextjs-configure-svgr.md | 65 +- docs/_snippets/nextjs-headers-mock.md | 115 ++- docs/_snippets/nextjs-image-static-dirs.md | 37 +- docs/_snippets/nextjs-navigation-mock.md | 146 ++- .../nextjs-navigation-override-in-story.md | 103 +- docs/_snippets/nextjs-navigation-override.md | 95 ++ ...egments-for-use-params-override-in-meta.md | 76 +- ...js-navigation-segments-override-in-meta.md | 67 +- docs/_snippets/nextjs-remove-addons.md | 34 +- docs/_snippets/nextjs-router-mock.md | 102 +- .../nextjs-router-override-in-story.md | 93 +- .../nextjs-router-router-override.md | 96 ++ docs/_snippets/nextjs-sharp-install.md | 11 + docs/_snippets/nextjs-vite-add-framework.md | 24 +- docs/_snippets/nextjs-vite-remove-addons.md | 32 +- docs/_snippets/other-foo-bar-story.md | 69 +- .../_snippets/page-story-args-within-story.md | 115 ++- docs/_snippets/page-story-slots.md | 75 +- .../page-story-with-args-composition.md | 80 +- docs/_snippets/page-story.md | 68 +- docs/_snippets/parameters-in-meta.md | 59 +- docs/_snippets/parameters-in-preview.md | 38 +- docs/_snippets/parameters-in-story.md | 97 +- .../react-native-web-vite-add-framework.md | 2 + docs/_snippets/react-vite-add-framework.md | 24 +- .../_snippets/react-vite-framework-options.md | 30 +- .../_snippets/react-webpack5-add-framework.md | 24 +- .../react-webpack5-framework-options.md | 32 +- .../register-component-with-play-function.md | 135 ++- docs/_snippets/rsc-feature-flag.md | 33 +- docs/_snippets/rsc-parameter-in-meta.md | 54 +- docs/_snippets/storybook-a11y-register.md | 36 +- .../storybook-addon-a11y-global-config.md | 2 + ...torybook-addon-controls-custom-matchers.md | 38 +- .../storybook-addons-local-preset.md | 2 + .../storybook-addons-preset-preview.md | 41 +- .../storybook-addons-preset-webpackFinal.md | 2 + .../storybook-auto-docs-full-config.md | 38 +- .../storybook-auto-docs-main-mdx-config.md | 39 +- ...rybook-backgrounds-addon-default-params.md | 2 + .../storybook-backgrounds-preset-config.md | 2 + .../storybook-canvas-doc-block-story.md | 168 ++- .../storybook-component-layout-param.md | 51 +- .../storybook-csf-3-auto-title-redundant.md | 76 +- .../storybook-custom-manager-head.md | 30 +- ...storybook-fix-imports-autodocs-monorepo.md | 66 +- ...orybook-interactions-addon-registration.md | 36 +- .../storybook-interactions-play-function.md | 126 ++- .../storybook-main-advanced-config-example.md | 46 +- .../storybook-main-auto-title-custom.md | 38 +- .../storybook-main-config-remark-options.md | 57 +- .../storybook-main-configuration-src-dir.md | 28 +- .../_snippets/storybook-main-disable-addon.md | 46 +- .../storybook-main-disable-telemetry.md | 32 +- .../storybook-main-extend-ts-config.md | 25 +- ...book-main-fix-imports-autodocs-monorepo.md | 38 +- ...-main-full-individual-essentials-config.md | 72 +- docs/_snippets/storybook-main-js-md-files.md | 28 +- ...rybook-main-pnpm-with-module-resolution.md | 53 +- docs/_snippets/storybook-main-prop-filter.md | 24 +- .../storybook-main-react-docgen-typescript.md | 18 +- docs/_snippets/storybook-main-ref-local.md | 48 +- .../storybook-main-register-addon.md | 2 + ...torybook-main-register-essentials-addon.md | 30 +- .../storybook-main-register-example-addon.md | 30 +- ...-main-register-individual-actions-addon.md | 32 +- .../storybook-main-simplified-config.md | 34 +- ...main-ts-module-resolution-atsign-import.md | 47 +- .../storybook-main-ts-module-resolution.md | 52 +- .../storybook-main-use-manager-entries.md | 2 + .../storybook-main-using-existing-config.md | 42 +- .../storybook-main-webpack-options.md | 44 +- .../storybook-main-webpack-preset-config.md | 2 + .../storybook-preset-full-config-object.md | 2 + ...preview-auto-docs-custom-docs-container.md | 57 +- ...k-preview-auto-docs-custom-mdx-template.md | 49 +- ...view-auto-docs-custom-template-function.md | 64 +- ...review-auto-docs-override-mdx-container.md | 80 +- ...rybook-preview-auto-docs-override-theme.md | 48 +- ...storybook-preview-configure-globaltypes.md | 41 +- .../storybook-preview-custom-canvas.md | 40 +- .../storybook-preview-custom-code-renderer.md | 40 +- .../storybook-preview-custom-library.md | 52 + .../storybook-preview-custom-params.md | 2 + .../_snippets/storybook-preview-custom-toc.md | 48 +- ...review-doc-blocks-controls-exclude-prop.md | 30 +- .../storybook-preview-docs-dark-theme.md | 36 +- .../storybook-preview-empty-sort-object.md | 38 +- .../_snippets/storybook-preview-enable-toc.md | 30 +- .../storybook-preview-expanded-controls.md | 28 +- .../storybook-preview-global-decorator.md | 41 +- .../storybook-preview-global-loader.md | 30 +- .../storybook-preview-global-parameters.md | 2 + .../storybook-preview-import-global-styles.md | 26 +- .../storybook-preview-layout-param.md | 28 +- .../storybook-preview-locales-globaltype.md | 84 +- .../storybook-preview-matching-argtypes.md | 28 +- ...ook-preview-migrate-backgrounds-globals.md | 2 + ...ybook-preview-parameters-color-swatches.md | 32 +- .../storybook-preview-sort-function.md | 33 +- .../storybook-preview-use-global-type.md | 82 +- ...torybook-preview-with-library-decorator.md | 2 +- ...preview-with-ordered-pages-and-wildcard.md | 34 +- .../storybook-preview-with-ordered-pages.md | 34 +- ...review-with-styled-components-decorator.md | 46 +- .../_snippets/storybook-story-layout-param.md | 57 +- .../storybook-storyloading-with-directory.md | 30 +- ...ook-telemetry-main-enable-crash-reports.md | 34 +- docs/_snippets/storybook-test-fn-mock-spy.md | 139 ++- .../storybook-test-mock-return-value.md | 78 +- .../storybook-vite-builder-aliasing.md | 72 +- .../storybook-vite-builder-react-docgen.md | 58 +- .../storybook-vite-builder-register.md | 45 +- .../storybook-vite-builder-ts-configure.md | 14 +- docs/_snippets/subpath-imports-config.md | 2 +- docs/_snippets/svelte-csf-addon-options.md | 2 + docs/_snippets/svelte-vite-add-framework.md | 2 + .../svelte-vite-framework-options.md | 2 + .../svelte-webpack-framework-options.md | 2 + .../svelte-webpack5-add-framework.md | 2 + docs/_snippets/sveltekit-add-framework.md | 2 + docs/_snippets/sveltekit-framework-options.md | 2 + docs/_snippets/tags-autodocs-in-meta.md | 45 +- docs/_snippets/tags-autodocs-in-preview.md | 26 +- .../tags-autodocs-remove-component.md | 45 +- docs/_snippets/tags-autodocs-remove-story.md | 60 +- docs/_snippets/tags-combo-example.md | 108 +- docs/_snippets/tags-docs-only-in-meta.md | 57 +- docs/_snippets/tags-in-meta-and-story.md | 252 +++-- docs/_snippets/tags-in-preview.md | 34 +- docs/_snippets/tags-remove-in-story.md | 60 +- docs/_snippets/vue-vite-framework-options.md | 2 + .../vue-webpack5-framework-options.md | 2 + docs/_snippets/vue3-vite-add-framework.md | 2 + docs/_snippets/vue3-webpack5-add-framework.md | 2 + .../web-components-vite-add-framework.md | 2 + .../web-components-vite-framework-options.md | 2 + .../web-components-webpack5-add-framework.md | 2 + ...b-components-webpack5-framework-options.md | 2 + .../web-components-webpack5-transpilation.md | 2 + docs/_snippets/webpack-final-to-vite-final.md | 43 +- .../your-component-with-decorator.md | 63 +- docs/_snippets/your-component.md | 66 +- docs/addons/configure-addons.mdx | 13 +- docs/api/main-config/main-config-indexers.mdx | 4 +- docs/api/parameters.mdx | 51 +- docs/configure/story-rendering.mdx | 13 +- .../user-interface/sidebar-and-urls.mdx | 7 +- docs/get-started/frameworks/nextjs.mdx | 170 +--- docs/writing-stories/index.mdx | 2 + .../mocking-modules.mdx | 9 +- .../stories-for-multiple-components.mdx | 2 + docs/writing-stories/typescript.mdx | 6 +- 339 files changed, 18064 insertions(+), 2503 deletions(-) create mode 100644 docs/_snippets/button-story-pseudo-states-addon.md create mode 100644 docs/_snippets/component-story-with-title.md delete mode 100644 docs/_snippets/csf-3-example-title.md create mode 100644 docs/_snippets/custom-project-level-parameters.md create mode 100644 docs/_snippets/custom-story-level-parameters.md create mode 100644 docs/_snippets/nextjs-additional-options.md create mode 100644 docs/_snippets/nextjs-navigation-override.md create mode 100644 docs/_snippets/nextjs-router-router-override.md create mode 100644 docs/_snippets/nextjs-sharp-install.md create mode 100644 docs/_snippets/storybook-preview-custom-library.md diff --git a/docs/_snippets/addon-actions-action-function.md b/docs/_snippets/addon-actions-action-function.md index 6af337fe1ac9..45374248ab67 100644 --- a/docs/_snippets/addon-actions-action-function.md +++ b/docs/_snippets/addon-actions-action-function.md @@ -1,5 +1,6 @@ ```ts filename="Button.stories.ts" renderer="angular" language="ts" import type { Meta } from '@storybook/angular'; + import { action } from '@storybook/addon-actions'; import Button from './button.component'; @@ -15,7 +16,7 @@ const meta: Meta