From a12c69953023997a0cf42555ec89ab58c807e5aa Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Wed, 30 Nov 2022 11:26:53 -0700 Subject: [PATCH 1/6] Update links in Addon knowledge base doc - Point to `main` instead of `master` - Use Chromatic branch permalink --- docs/addons/addon-knowledge-base.md | 42 ++++++++++++++--------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/docs/addons/addon-knowledge-base.md b/docs/addons/addon-knowledge-base.md index dd4aa0986bc7..b87f5a432718 100644 --- a/docs/addons/addon-knowledge-base.md +++ b/docs/addons/addon-knowledge-base.md @@ -49,30 +49,30 @@ Addon authors can develop their UIs using any React library. But we recommend us Use the components listed below with your next addon. -| Component | Source | Story | -| ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------- | -| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ActionBar/ActionBar.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-actionbar--single-item) | -| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/addon-panel/addon-panel.tsx) | N/A | -| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Badge/Badge.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-badge--all-badges) | -| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Button/Button.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-button--all-buttons) | -| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/form/index.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-form-button--sizes) | -| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Loader/Loader.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-loader--progress-bar) | -| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/placeholder/placeholder.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-placeholder--single-child) | -| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-scrollarea--vertical) | -| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/spaced/Spaced.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-spaced--row) | -| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) | -| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tabs/tabs.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tabs--stateful-static) | -| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/bar/bar.tsx) | N/A | -| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/tooltip/Tooltip.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) | -| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/Zoom/Zoom.tsx) | [See component story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-zoom--element-actual-size) | +| Component | Source | Story | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------ | +| Action Bar | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/ActionBar/ActionBar.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-actionbar--single-item) | +| Addon Panel | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/addon-panel/addon-panel.tsx) | N/A | +| Badge | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Badge/Badge.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-badge--all-badges) | +| Button | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Button/Button.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-button--all-buttons) | +| Form | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/form/index.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-form-button--sizes) | +| Loader | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Loader/Loader.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-loader--progress-bar) | +| PlaceHolder | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/placeholder/placeholder.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-placeholder--single-child) | +| Scroll Area | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/ScrollArea/ScrollArea.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-scrollarea--vertical) | +| Space | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/spaced/Spaced.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-spaced--row) | +| Syntax Highlighter | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-syntaxhighlighter--bash) | +| Tabs | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/tabs/tabs.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-tabs--stateful-static) | +| ToolBar | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/bar/bar.tsx) | N/A | +| ToolTip | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/tooltip/Tooltip.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-tooltip-tooltip--basic-default) | +| Zoom | [See component implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/Zoom/Zoom.tsx) | [See component story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-zoom--element-actual-size) | Complementing the components, also included is a set of UI primitives. Use the content listed below as a reference for styling your addon. -| Component | Source | Story | -| ------------------------------ | ---------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------- | -| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/Colors) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-colorpalette--page) | -| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/master/code/ui/components/src/icon/icons.tsx) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-icon--labels) | -| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://5a375b97f4b14f0020b0cda3-wbeulgbetj.chromatic.com/?path=/story/basics-typography--all) | +| Component | Source | Story | +| ------------------------------ | -------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | +| Color Palette (see note below) | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/Colors) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-colorpalette--page) | +| Icon | [See implementation](https://github.com/storybookjs/storybook/blob/main/code/ui/components/src/icon/icons.tsx) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-icon--labels) | +| Typography | [See implementation](https://github.com/storybookjs/storybook/tree/master/code/ui/components/src/typography) | [See story](https://main--5a375b97f4b14f0020b0cda3.chromatic.com/?path=/story/basics-typography--all) |
The color palette implemented by @storybook/components is a high-level abstraction of the @storybook/theming package. From 2cee61b65146107bc2edd1635fb26c4d44563ecc Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 1 Dec 2022 12:33:55 -0700 Subject: [PATCH 2/6] Update snippets to CSF 3 - Fix some minor errors --- docs/addons/configure-addons.md | 6 ++++-- ...ton-story-controls-primary-variant.mdx.mdx | 17 ---------------- ...torybook-interactions-step-function.js.mdx | 20 ++++++++++--------- docs/snippets/react/checkbox-story.mdx.mdx | 4 +--- .../react/list-story-unchecked.js.mdx | 12 ++++++----- .../react/list-story-unchecked.ts.mdx | 2 +- .../list-story-with-unchecked-children.js.mdx | 9 ++++----- .../list-story-with-unchecked-children.ts.mdx | 2 +- .../list-story-unchecked.ts.mdx | 6 +++--- 9 files changed, 32 insertions(+), 46 deletions(-) delete mode 100644 docs/snippets/common/button-story-controls-primary-variant.mdx.mdx diff --git a/docs/addons/configure-addons.md b/docs/addons/configure-addons.md index 709730d35e61..c92faf125d01 100644 --- a/docs/addons/configure-addons.md +++ b/docs/addons/configure-addons.md @@ -23,8 +23,10 @@ For example, the [Pseudo States addon](https://storybook.js.org/addons/storybook Use the [`useParameter`](./addons-api.md#useparameter) hook to access the parameter values within your addon. ```js -export const Hover = () => ; -Hover.parameters = { pseudo: { hover: true } }; +export const Hover = { + render: () => , + parameters: { pseudo: { hover: true } }, +}; ``` ## Channels diff --git a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx b/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx deleted file mode 100644 index b062be004420..000000000000 --- a/docs/snippets/common/button-story-controls-primary-variant.mdx.mdx +++ /dev/null @@ -1,17 +0,0 @@ -```md - - -import { Meta, Story } from '@storybook/addon-docs'; - -import { Button } from './Button'; - - - - ({ // Your implementation here })} /> - -``` \ No newline at end of file diff --git a/docs/snippets/common/storybook-interactions-step-function.js.mdx b/docs/snippets/common/storybook-interactions-step-function.js.mdx index 7ef59f7d482c..28ccd2c7fb52 100644 --- a/docs/snippets/common/storybook-interactions-step-function.js.mdx +++ b/docs/snippets/common/storybook-interactions-step-function.js.mdx @@ -1,14 +1,16 @@ ```js -Submitted.play = async ({ args, canvasElement, step }) => { - const canvas = within(canvasElement); +Submitted = { + play: async ({ args, canvasElement, step }) => { + const canvas = within(canvasElement); - await step('Enter email and password', async () => { - await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); - await userEvent.type(canvas.getByTestId('password'), 'supersecret'); - }); + await step('Enter email and password', async () => { + await userEvent.type(canvas.getByTestId('email'), 'hi@example.com'); + await userEvent.type(canvas.getByTestId('password'), 'supersecret'); + }); - await step('Submit form', async () => { - await userEvent.click(canvas.getByRole('button')); - }); + await step('Submit form', async () => { + await userEvent.click(canvas.getByRole('button')); + }); + }, }; ``` diff --git a/docs/snippets/react/checkbox-story.mdx.mdx b/docs/snippets/react/checkbox-story.mdx.mdx index 075b110a0676..eb35f02b3104 100644 --- a/docs/snippets/react/checkbox-story.mdx.mdx +++ b/docs/snippets/react/checkbox-story.mdx.mdx @@ -7,8 +7,6 @@ import { Checkbox } from './Checkbox'; -export const Template = (args) => ; - # Checkbox With `MDX`, we can define a story for `Checkbox` right in the middle of our @@ -37,4 +35,4 @@ Markdown documentation. }} render={(args) => } /> -``` \ No newline at end of file +``` diff --git a/docs/snippets/react/list-story-unchecked.js.mdx b/docs/snippets/react/list-story-unchecked.js.mdx index 4a1e03c22d7d..a1b51d096e70 100644 --- a/docs/snippets/react/list-story-unchecked.js.mdx +++ b/docs/snippets/react/list-story-unchecked.js.mdx @@ -17,9 +17,11 @@ export default { component: List, }; -export const OneItem = (args) => ( - - - -); +export const OneItem = { + render: (args) => ( + + + + ), +}; ``` diff --git a/docs/snippets/react/list-story-unchecked.ts.mdx b/docs/snippets/react/list-story-unchecked.ts.mdx index d1e96498712d..033380780e92 100644 --- a/docs/snippets/react/list-story-unchecked.ts.mdx +++ b/docs/snippets/react/list-story-unchecked.ts.mdx @@ -20,7 +20,7 @@ export const meta: Meta = { export default meta; type Story = StoryObj; -const OneItem: Story = { +export const OneItem: Story = { render: (args) => ( diff --git a/docs/snippets/react/list-story-with-unchecked-children.js.mdx b/docs/snippets/react/list-story-with-unchecked-children.js.mdx index c1ff91cb7b92..3852851951c2 100644 --- a/docs/snippets/react/list-story-with-unchecked-children.js.mdx +++ b/docs/snippets/react/list-story-with-unchecked-children.js.mdx @@ -17,10 +17,9 @@ export default { component: List, }; -const Template = (args) => ; - -export const OneItem = Template.bind({}); -OneItem.args = { - children: , +export const OneItem = { + args: { + children: , + }, }; ``` diff --git a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx index bd38a5fe9ae3..6b07edf0e642 100644 --- a/docs/snippets/react/list-story-with-unchecked-children.ts.mdx +++ b/docs/snippets/react/list-story-with-unchecked-children.ts.mdx @@ -20,7 +20,7 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const OneItem = { +export const OneItem: Story = { args: { children: , }, diff --git a/docs/snippets/web-components/list-story-unchecked.ts.mdx b/docs/snippets/web-components/list-story-unchecked.ts.mdx index c979ba6c86d2..cc7dada9b3d8 100644 --- a/docs/snippets/web-components/list-story-unchecked.ts.mdx +++ b/docs/snippets/web-components/list-story-unchecked.ts.mdx @@ -18,7 +18,7 @@ const meta: Meta = { title: 'my-list', }; -export const OneItem: Story = () => html` - ${Unchecked({ ...Unchecked.args })} -`; +export const OneItem: Story = { + render: () => html` ${Unchecked({ ...Unchecked.args })} `, +}; ``` From 03f1825a1d17ac01935f46d1845f00cc18672bb1 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 1 Dec 2022 12:32:35 -0700 Subject: [PATCH 3/6] Add CSF 2->3 attributes to docs CodeSnippets --- docs/addons/addons-api.md | 2 ++ docs/addons/writing-addons.md | 2 ++ docs/api/csf.md | 15 ++++++++++++++ docs/api/mdx.md | 2 ++ docs/api/new-frameworks.md | 4 ++++ docs/configure/environment-variables.md | 4 ++++ docs/configure/images-and-assets.md | 6 ++++++ docs/configure/sidebar-and-urls.md | 5 +++++ docs/configure/story-layout.md | 2 ++ docs/essentials/backgrounds.md | 6 ++++++ docs/essentials/controls.md | 10 ++++++++++ docs/essentials/interactions.md | 2 ++ docs/essentials/toolbars-and-globals.md | 2 ++ docs/essentials/viewport.md | 2 ++ docs/get-started/setup.md | 2 ++ docs/get-started/whats-a-story.md | 4 ++++ docs/sharing/design-integrations.md | 2 ++ docs/why-storybook.md | 4 +++- docs/writing-docs/doc-block-canvas.md | 2 ++ docs/writing-docs/doc-block-description.md | 2 ++ docs/writing-docs/doc-block-source.md | 2 ++ docs/writing-docs/doc-block-story.md | 2 ++ docs/writing-docs/mdx.md | 6 ++++++ docs/writing-stories/args.md | 12 +++++++++++ .../build-pages-with-storybook.md | 10 ++++++++++ docs/writing-stories/decorators.md | 2 ++ docs/writing-stories/introduction.md | 20 +++++++++++++++++++ docs/writing-stories/loaders.md | 2 ++ .../naming-components-and-hierarchy.md | 2 ++ docs/writing-stories/parameters.md | 2 ++ docs/writing-stories/play-function.md | 18 +++++++++++++++++ .../stories-for-multiple-components.md | 8 ++++++++ docs/writing-tests/accessibility-testing.md | 6 ++++++ .../importing-stories-in-tests.md | 4 ++++ docs/writing-tests/interaction-testing.md | 4 ++++ 35 files changed, 179 insertions(+), 1 deletion(-) diff --git a/docs/addons/addons-api.md b/docs/addons/addons-api.md index de5e258705a6..43384a5ae0cc 100644 --- a/docs/addons/addons-api.md +++ b/docs/addons/addons-api.md @@ -236,6 +236,8 @@ Let's say you've got a story like this: 'angular/button-story-with-addon-example.ts.mdx', 'svelte/button-story-with-addon-example.js.mdx', ]} + usesCsf3 + csf2Path="addons/addons-api#snippet-button-story-with-addon-example" /> diff --git a/docs/addons/writing-addons.md b/docs/addons/writing-addons.md index 9988bed21863..6f9753522c8a 100644 --- a/docs/addons/writing-addons.md +++ b/docs/addons/writing-addons.md @@ -201,6 +201,8 @@ When Storybook was initialized, it provided a small set of example stories. Chan 'angular/button-story-with-addon-example.ts.mdx', 'svelte/button-story-with-addon-example.js.mdx', ]} + usesCsf3 + csf2Path="addons/writing-addons#snippet-button-story-with-addon-example" /> diff --git a/docs/api/csf.md b/docs/api/csf.md index 10aec059988d..98e6246dcfcf 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -48,6 +48,8 @@ With CSF, every named export in the file represents a story object by default. 'svelte/my-component-story-basic-and-props.js.mdx', 'angular/my-component-story-basic-and-props.ts.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-my-component-story-basic-and-props" /> @@ -74,6 +76,8 @@ Storybook's `name` configuration element is helpful in specific circumstances. C paths={[ 'common/my-component-story-with-storyname.js.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-my-component-story-with-storyname" /> @@ -95,6 +99,8 @@ Consider Storybook’s ["Button" example](../writing-stories/introduction.md#def 'svelte/button-story-click-handler.js.mdx', 'angular/button-story-click-handler.ts.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-button-story-click-handler" /> @@ -111,6 +117,8 @@ Now consider the same example, re-written with args: 'angular/button-story-click-handler-args.ts.mdx', 'svelte/button-story-click-handler-args.js.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-button-story-click-handler-args" /> @@ -125,6 +133,8 @@ Or even more simply: 'angular/button-story-click-handler-simplificated.ts.mdx', 'vue/button-story-click-handler-simplificated.js.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-button-story-click-handler-simplificated" /> @@ -150,6 +160,8 @@ A good use case for the `play` function is a form component. With previous Story 'vue/login-form-with-play-function.3.js.mdx', 'svelte/login-form-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="api/csf#snippet-login-form-with-play-function" /> @@ -172,6 +184,7 @@ Starting in Storybook 6.4, you can write your stories as JavaScript objects, red 'preact/component-story-with-custom-render-function.js.mdx', 'web-components/component-story-with-custom-render-function.js.mdx', ]} + usesCsf3 /> @@ -222,6 +235,8 @@ Consider the following story file: 'svelte/my-component-story-with-nonstory.js.mdx', 'angular/my-component-story-with-nonstory.ts.mdx' ]} + usesCsf3 + csf2Path="api/csf#snippet-my-component-story-with-nonstory" /> diff --git a/docs/api/mdx.md b/docs/api/mdx.md index 042592c8d94b..b2ba3842fd8c 100644 --- a/docs/api/mdx.md +++ b/docs/api/mdx.md @@ -45,6 +45,8 @@ For example, here's the story from the `Checkbox` example above, rewritten in CS 'vue/checkbox-story-csf.js.mdx', 'angular/checkbox-story-csf.ts.mdx', ]} + usesCsf3 + csf2Path="api/mdx#snippet-checkbox-story-csf" /> diff --git a/docs/api/new-frameworks.md b/docs/api/new-frameworks.md index 7e77b0a67d3c..32e63c576b67 100644 --- a/docs/api/new-frameworks.md +++ b/docs/api/new-frameworks.md @@ -107,6 +107,8 @@ Consider the following React story: paths={[ 'react/button-story-with-sample.js.mdx' ]} + usesCsf3 + csf2Path="api/new-frameworks#snippet-button-story-with-sample" /> @@ -123,6 +125,8 @@ Consider the following hypothetical example: paths={[ 'common/button-story-hypothetical-example.js.mdx' ]} + usesCsf3 + csf2Path="api/new-frameworks#snippet-button-story-hypothetical-example" /> diff --git a/docs/configure/environment-variables.md b/docs/configure/environment-variables.md index 1732577ac32d..6f58530dd049 100644 --- a/docs/configure/environment-variables.md +++ b/docs/configure/environment-variables.md @@ -59,6 +59,8 @@ Then you can access this environment variable anywhere, even within your stories 'web-components/my-component-with-env-variables.js.mdx', 'svelte/my-component-with-env-variables.js.mdx', ]} + usesCsf3 + csf2Path="configure/environment-variables#snippet-my-component-with-env-variables" /> @@ -94,6 +96,8 @@ When Storybook loads, it will enable you to access them in your stories similar 'common/my-component-env-var-config.js.mdx', 'common/my-component-env-var-config.ts.mdx', ]} + usesCsf3 + csf2Path="configure/environment-variables#snippet-my-component-env-var-config" /> diff --git a/docs/configure/images-and-assets.md b/docs/configure/images-and-assets.md index 7ca5a20c79fa..43eeb003a01b 100644 --- a/docs/configure/images-and-assets.md +++ b/docs/configure/images-and-assets.md @@ -23,6 +23,8 @@ Afterward, you can use any asset in your stories: 'angular/component-story-static-asset-with-import.ts.mdx', 'svelte/component-story-static-asset-with-import.js.mdx', ]} + usesCsf3 + csf2Path="configure/images-and-assets#snippet-component-story-static-asset-with-import" /> @@ -56,6 +58,8 @@ Here `../public` is your static directory. Now use it in a component or story li 'angular/component-story-static-asset-without-import.ts.mdx', 'svelte/component-story-static-asset-without-import.js.mdx', ]} + usesCsf3 + csf2Path="configure/images-and-assets#snippet-component-story-static-asset-without-import" /> @@ -103,6 +107,8 @@ Upload your files to an online CDN and reference them. In this example, we’re 'angular/component-story-static-asset-cdn.ts.mdx', 'svelte/component-story-static-asset-cdn.js.mdx', ]} + usesCsf3 + csf2Path="configure/images-and-assets#snippet-component-story-static-asset-cdn" /> diff --git a/docs/configure/sidebar-and-urls.md b/docs/configure/sidebar-and-urls.md index 1e301206e38f..4fd1c30426da 100644 --- a/docs/configure/sidebar-and-urls.md +++ b/docs/configure/sidebar-and-urls.md @@ -38,6 +38,8 @@ Consider the following story: paths={[ 'common/foo-bar-baz-story.js.mdx', ]} + usesCsf3 + csf2Path="configure/sidebar-and-urls#snippet-foo-bar-baz-story" /> @@ -52,6 +54,8 @@ It is possible to manually set the story's id, which is helpful if you want to r paths={[ 'common/other-foo-bar-story.js.mdx', ]} + usesCsf3 + csf2Path="configure/sidebar-and-urls#snippet-other-foo-bar-story" /> @@ -104,6 +108,7 @@ If you need to preserve the naming scheme, you can add the `title` element to th paths={[ 'common/storybook-csf-3-auto-title-redundant.js.mdx', ]} + usesCsf3 /> diff --git a/docs/configure/story-layout.md b/docs/configure/story-layout.md index 9ff753c22fc7..9ea970bf7f5b 100644 --- a/docs/configure/story-layout.md +++ b/docs/configure/story-layout.md @@ -52,6 +52,8 @@ Or even apply it to specific stories like so: 'common/storybook-story-layout-param.js.mdx', 'common/storybook-story-layout-param.ts.mdx', ]} + usesCsf3 + csf2Path="configure/story-layout#snippet-storybook-story-layout-param" /> diff --git a/docs/essentials/backgrounds.md b/docs/essentials/backgrounds.md index d7ded9812b43..651974d20904 100644 --- a/docs/essentials/backgrounds.md +++ b/docs/essentials/backgrounds.md @@ -53,6 +53,8 @@ You can also override a single key on the `backgrounds` parameter, for instance, 'common/storybook-addon-backgrounds-override-background-color.js.mdx', 'common/storybook-addon-backgrounds-override-background-color.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/backgrounds#snippet-storybook-addon-backgrounds-override-background-color" /> @@ -68,6 +70,8 @@ If you want to disable backgrounds in a story, you can do so by setting the `bac 'common/storybook-addon-backgrounds-disable-backgrounds.js.mdx', 'common/storybook-addon-backgrounds-disable-backgrounds.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/backgrounds#snippet-storybook-addon-backgrounds-disable-backgrounds" /> @@ -100,6 +104,8 @@ If you need to disable the grid for a specific story, set the `backgrounds` para 'common/storybook-addon-backgrounds-disable-grid.js.mdx', 'common/storybook-addon-backgrounds-disable-grid.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/backgrounds#snippet-storybook-addon-backgrounds-disable-grid" /> diff --git a/docs/essentials/controls.md b/docs/essentials/controls.md index 5287cd4b46ab..c59a5f7f8745 100644 --- a/docs/essentials/controls.md +++ b/docs/essentials/controls.md @@ -55,6 +55,8 @@ For instance, suppose you have a `variant` arg on your story that should be `pri 'common/button-story-controls-primary-variant.js.mdx', 'common/button-story-controls-primary-variant.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/controls#snippet-button-story-controls-primary-variant" /> @@ -127,6 +129,8 @@ Until now, we only used auto-generated controls based on the component we're wri 'vue/table-story-fully-customize-controls.ts-3.ts.mdx', 'angular/table-story-fully-customize-controls.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/controls#snippet-table-story-fully-customize-controls" /> @@ -156,6 +160,8 @@ One way to deal with this is to use primitive values (e.g., strings) as arg valu 'angular/component-story-custom-args-complex.ts.mdx', 'svelte/component-story-custom-args-complex.js.mdx', ]} + usesCsf3 + csf2Path="essentials/controls#snippet-component-story-custom-args-complex" /> @@ -368,6 +374,8 @@ If you don't plan to handle the control args inside your Story, you can remove t 'common/button-story-hide-nocontrols-warning.js.mdx', 'common/button-story-hide-nocontrols-warning.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/controls#snippet-button-story-hide-nocontrols-warning" /> @@ -387,6 +395,8 @@ Consider the following story snippets: 'common/component-story-disable-controls-regex.js.mdx', 'common/component-story-disable-controls-regex.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/controls#snippet-component-story-disable-controls-regex" /> diff --git a/docs/essentials/interactions.md b/docs/essentials/interactions.md index 12da3785421d..70a457f48a14 100644 --- a/docs/essentials/interactions.md +++ b/docs/essentials/interactions.md @@ -68,6 +68,8 @@ Make sure to import the Storybook wrappers for Jest and Testing Library rather t 'common/storybook-interactions-play-function.js.mdx', 'common/storybook-interactions-play-function.ts.mdx', ]} + usesCsf3 + csf2Path="essentials/interactions#snippet-storybook-interactions-play-function" /> diff --git a/docs/essentials/toolbars-and-globals.md b/docs/essentials/toolbars-and-globals.md index 2deb0866cf57..154c9b4201a8 100644 --- a/docs/essentials/toolbars-and-globals.md +++ b/docs/essentials/toolbars-and-globals.md @@ -109,6 +109,8 @@ Using the example above, you can modify any story to retrieve the **Locale** `gl 'svelte/my-component-story-use-globaltype.js.mdx', 'web-components/my-component-story-use-globaltype.js.mdx', ]} + usesCsf3 + csf2Path="essentials/toolbars-and-globals#snippet-my-component-story-use-globaltype" /> diff --git a/docs/essentials/viewport.md b/docs/essentials/viewport.md index 33a10ac00527..400151f7327f 100644 --- a/docs/essentials/viewport.md +++ b/docs/essentials/viewport.md @@ -127,6 +127,8 @@ Update your story through [parameters](../writing-stories/parameters.md) to incl 'web-components/my-component-story-configure-viewports.js.mdx', 'svelte/my-component-story-configure-viewports.js.mdx', ]} + usesCsf3 + csf2Path="essentials/viewport#snippet-my-component-story-configure-viewports" /> diff --git a/docs/get-started/setup.md b/docs/get-started/setup.md index 412a3f798990..645e3cc272be 100644 --- a/docs/get-started/setup.md +++ b/docs/get-started/setup.md @@ -23,6 +23,8 @@ Pick a simple component from your project, like a Button, and write a `.stories. 'html/your-component.ts.mdx', 'preact/your-component.js.mdx', ]} + usesCsf3 + csf2Path="get-started/setup#snippet-your-component" /> diff --git a/docs/get-started/whats-a-story.md b/docs/get-started/whats-a-story.md index 329983411e70..6d69dfcf3efb 100644 --- a/docs/get-started/whats-a-story.md +++ b/docs/get-started/whats-a-story.md @@ -26,6 +26,8 @@ Let’s start with the `Button` component. A story is a function that describes 'html/button-story.ts.mdx', 'preact/button-story.js.mdx', ]} + usesCsf3 + csf2Path="get-started/whats-a-story#snippet-button-story" /> @@ -53,6 +55,8 @@ The above story definition can be further improved to take advantage of [Storybo 'html/button-story-with-args.ts.mdx', 'preact/button-story-with-args.js.mdx', ]} + usesCsf3 + csf2Path="get-started/whats-a-story#snippet-button-story-with-args" /> diff --git a/docs/sharing/design-integrations.md b/docs/sharing/design-integrations.md index 65a4fb7963db..3a1eb827e68b 100644 --- a/docs/sharing/design-integrations.md +++ b/docs/sharing/design-integrations.md @@ -107,6 +107,8 @@ In Storybook, add a new [parameter](../writing-stories/parameters.md) named `des 'angular/component-story-figma-integration.ts.mdx', 'svelte/component-story-figma-integration.js.mdx', ]} + usesCsf3 + csf2Path="sharing/design-integrations#snippet-component-story-figma-integration" /> diff --git a/docs/why-storybook.md b/docs/why-storybook.md index 9ef118190d66..0c798e36876a 100644 --- a/docs/why-storybook.md +++ b/docs/why-storybook.md @@ -52,6 +52,8 @@ You write stories for granular UI component variation and then use those stories 'html/histogram-story.js.mdx', 'html/histogram-story.ts.mdx', ]} + usesCsf3 + csf2Path="why-storybook#snippet-histogram-story" /> @@ -131,4 +133,4 @@ Reuse stories with [Jest](https://jestjs.io/) and [Testing Library](https://test --- -Storybook is purpose-built to help you develop complex UIs faster with greater durability and lower maintenance. It’s used by 100s of [leading companies](https://storybook.js.org/showcase) and thousands of [developers](https://github.com/storybookjs/storybook/). \ No newline at end of file +Storybook is purpose-built to help you develop complex UIs faster with greater durability and lower maintenance. It’s used by 100s of [leading companies](https://storybook.js.org/showcase) and thousands of [developers](https://github.com/storybookjs/storybook/). diff --git a/docs/writing-docs/doc-block-canvas.md b/docs/writing-docs/doc-block-canvas.md index f6628d058f45..a8d973378fec 100644 --- a/docs/writing-docs/doc-block-canvas.md +++ b/docs/writing-docs/doc-block-canvas.md @@ -45,6 +45,8 @@ If you want, you can also group multiple stories and render them inside a single 'vue/mdx-canvas-multiple-stories.mdx-3.mdx.mdx', 'svelte/mdx-canvas-multiple-stories.mdx.mdx', ]} + usesCsf3 + csf2Path="writing-docs/doc-block-canvas#snippet-mdx-canvas-multiple-stories" /> diff --git a/docs/writing-docs/doc-block-description.md b/docs/writing-docs/doc-block-description.md index fc1d7a4032e0..f3b42fc121be 100644 --- a/docs/writing-docs/doc-block-description.md +++ b/docs/writing-docs/doc-block-description.md @@ -16,6 +16,8 @@ Storybook extracts the component's description and renders it at the top of the paths={[ 'common/component-story-csf-description.js.mdx', ]} + usesCsf3 + csf2Path="writing-docs/doc-block-description#snippet-component-story-csf-description" /> diff --git a/docs/writing-docs/doc-block-source.md b/docs/writing-docs/doc-block-source.md index 9adbb9fc3b0f..cc90beb198fb 100644 --- a/docs/writing-docs/doc-block-source.md +++ b/docs/writing-docs/doc-block-source.md @@ -17,6 +17,8 @@ It includes additional customization via parameters. Below is a condensed exampl paths={[ 'common/component-story-custom-source.js.mdx', ]} + usesCsf3 + csf2Path="writing-docs/doc-block-source#snippet-component-story-custom-source" /> diff --git a/docs/writing-docs/doc-block-story.md b/docs/writing-docs/doc-block-story.md index c334cfad93b9..d41d7c9df1ea 100644 --- a/docs/writing-docs/doc-block-story.md +++ b/docs/writing-docs/doc-block-story.md @@ -41,6 +41,8 @@ With MDX, the `Story` block is not only a way of rendering stories, but how you 'svelte/component-story-mdx-story-by-name.mdx.mdx', 'common/component-story-mdx-reference-storyid.mdx.mdx', ]} + usesCsf3 + csf2Path="writing-docs/doc-block-story#snippet-component-story-mdx-story-by-name" /> diff --git a/docs/writing-docs/mdx.md b/docs/writing-docs/mdx.md index d354825a08a2..bab6b5242c0f 100644 --- a/docs/writing-docs/mdx.md +++ b/docs/writing-docs/mdx.md @@ -28,6 +28,8 @@ Let's get started with an example that combines Markdown with a single story: 'vue/checkbox-story.mdx-3.mdx.mdx', 'svelte/checkbox-story.mdx.mdx', ]} + usesCsf3 + csf2Path="writing-docs/mdx#snippet-checkbox-story" /> @@ -52,6 +54,8 @@ For example, here's the first story from the Checkbox example above, rewritten i paths={[ 'common/checkbox-story-csf.js.mdx', ]} + usesCsf3 + csf2Path="writing-docs/mdx#snippet-checkbox-story-csf" /> @@ -72,6 +76,8 @@ Let's look at a more realistic example to see how MDX works: 'vue/badge-story.mdx-3.mdx.mdx', 'svelte/badge-story.mdx.mdx', ]} + usesCsf3 + csf2Path="writing-docs/mdx#snippet-badge-story" /> diff --git a/docs/writing-stories/args.md b/docs/writing-stories/args.md index 8608cbf7f55f..620aa23bdca7 100644 --- a/docs/writing-stories/args.md +++ b/docs/writing-stories/args.md @@ -32,6 +32,8 @@ To define the args of a single story, use the `args` CSF story key: 'html/button-story-with-args.ts.mdx', 'html/button-story-with-args.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-button-story-with-args" /> @@ -46,6 +48,8 @@ These args will only apply to the story for which they are attached, although yo 'common/button-story-primary-long-name.js.mdx', 'common/button-story-primary-long-name.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-button-story-primary-long-name" /> @@ -69,6 +73,8 @@ You can also define args at the component level; they will apply to all the comp 'svelte/button-story-component-args-primary.js.mdx', 'web-components/button-story-component-args-primary.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-button-story-component-args-primary" /> @@ -98,6 +104,8 @@ You can separate the arguments to a story to compose in other stories. Here's ho 'common/button-story-primary-composition.js.mdx', 'common/button-story-primary-composition.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-button-story-primary-composition" /> @@ -123,6 +131,8 @@ Args are useful when writing stories for composite components that are assembled 'vue/page-story.ts-3.ts.mdx', 'svelte/page-story.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-page-story" /> @@ -143,6 +153,8 @@ You can use args in your stories to configure the component's appearance, simila 'vue/page-story-slots.ts-3.ts.mdx', 'angular/page-story-slots.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/args#snippet-page-story-slots" /> diff --git a/docs/writing-stories/build-pages-with-storybook.md b/docs/writing-stories/build-pages-with-storybook.md index 49ccdfca2e86..5c354722310d 100644 --- a/docs/writing-stories/build-pages-with-storybook.md +++ b/docs/writing-stories/build-pages-with-storybook.md @@ -62,6 +62,8 @@ In such cases, it is natural to use [args composition](./args.md#args-compositio 'angular/page-story-with-args-composition.ts.mdx', 'svelte/page-story-with-args-composition.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/build-pages-with-storybook#snippet-page-story-with-args-composition" /> @@ -155,6 +157,8 @@ To test your screen with the mocked data, you could write a similar set of stori 'angular/documentscreen-story-msw-rest-request.ts.mdx', 'svelte/documentscreen-story-msw-rest-request.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-rest-request" /> @@ -197,6 +201,8 @@ To test your screen with the GraphQL mocked data, you could write the following 'svelte/documentscreen-story-msw-graphql-query.js.mdx', 'svelte/apollo-wrapper-component.with-mock-implementation.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/build-pages-with-storybook#snippet-documentscreen-story-msw-graphql-query" /> @@ -258,6 +264,8 @@ Finally, we can set the mock values in a specific story. Let's borrow an example 'vue/app-story-with-mock.ts.mdx', 'angular/app-story-with-mock.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/build-pages-with-storybook#snippet-app-story-with-mock" /> @@ -327,6 +335,8 @@ In the context of Storybook, instead of providing container components through c paths={[ 'react/mock-context-container.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/build-pages-with-storybook#snippet-mock-context-container" /> diff --git a/docs/writing-stories/decorators.md b/docs/writing-stories/decorators.md index 5d8d1281ed45..b36a6cdc6a25 100644 --- a/docs/writing-stories/decorators.md +++ b/docs/writing-stories/decorators.md @@ -95,6 +95,8 @@ To define a decorator for a single story, use the `decorators` key on a named ex 'svelte/button-story-decorator.js.mdx', 'web-components/button-story-decorator.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/decorators#snippet-button-story-decorator" /> diff --git a/docs/writing-stories/introduction.md b/docs/writing-stories/introduction.md index 40217eddeb60..000b3c2e6512 100644 --- a/docs/writing-stories/introduction.md +++ b/docs/writing-stories/introduction.md @@ -63,6 +63,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r 'html/button-story.js.mdx', 'html/button-story.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-story" /> @@ -77,6 +79,8 @@ Use the _named_ exports of a CSF file to define your component’s stories. We r paths={[ 'react/button-story.with-hooks.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-story-with-hooks" /> @@ -103,6 +107,8 @@ You can rename any particular story you need. For instance, to give it a more ac 'html/button-story-rename-story.js.mdx', 'html/button-story-rename-story.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-story-rename-story" /> @@ -128,6 +134,8 @@ A story is a function that describes how to render a component. You can have mul 'html/button-story-with-emojis.js.mdx', 'html/button-story-with-emojis.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-story-with-emojis" /> @@ -154,6 +162,8 @@ Refine this pattern by introducing `args` for your component's stories. It reduc 'html/button-story-using-args.js.mdx', 'html/button-story-using-args.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-story-using-args" /> @@ -176,6 +186,8 @@ What’s more, you can import `args` to reuse when writing stories for other com 'svelte/button-group-story.js.mdx', 'web-components/button-group-story.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-button-group-story" /> @@ -218,6 +230,8 @@ Storybook's `play` function and the [`@storybook/addon-interactions`](https://st 'vue/login-form-with-play-function.ts-3.ts.mdx', 'svelte/login-form-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-login-form-with-play-function" /> Without the help of the `play` function and the `@storybook/addon-interactions`, you had to write your own stories and manually interact with the component to test out each use case scenario possible. @@ -302,6 +316,8 @@ When building design systems or component libraries, you may have two or more co 'html/list-story-starter.js.mdx', 'html/list-story-starter.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-list-story-starter" /> @@ -323,6 +339,8 @@ In such cases, it makes sense to render a different function for each story: 'html/list-story-expanded.js.mdx', 'html/list-story-expanded.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-list-story-expanded" /> @@ -344,6 +362,8 @@ You can also reuse stories from the child `ListItem` in your `List` component. T 'html/list-story-reuse-data.js.mdx', 'html/list-story-reuse-data.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/introduction#snippet-list-story-reuse-data" /> diff --git a/docs/writing-stories/loaders.md b/docs/writing-stories/loaders.md index 75e0bfd3ec04..d6f2b940aae8 100644 --- a/docs/writing-stories/loaders.md +++ b/docs/writing-stories/loaders.md @@ -24,6 +24,8 @@ Loaders are helpful when you need to load story data externally (e.g., from a re 'angular/loader-story.ts.mdx', 'svelte/loader-story.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/loaders#snippet-loader-story" /> diff --git a/docs/writing-stories/naming-components-and-hierarchy.md b/docs/writing-stories/naming-components-and-hierarchy.md index f3c6df610e23..a4ca2ff942c3 100644 --- a/docs/writing-stories/naming-components-and-hierarchy.md +++ b/docs/writing-stories/naming-components-and-hierarchy.md @@ -66,6 +66,8 @@ Stories which have **no siblings** (i.e. the component has only one story) and w 'common/button-story-hoisted.js.mdx', 'common/button-story-hoisted.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/naming-components-and-hierarchy#button-story-hoisted" /> diff --git a/docs/writing-stories/parameters.md b/docs/writing-stories/parameters.md index 030991da8cb5..57d826b02e02 100644 --- a/docs/writing-stories/parameters.md +++ b/docs/writing-stories/parameters.md @@ -17,6 +17,8 @@ We can set a parameter for a single story with the `parameters` key on a CSF exp 'common/component-story-custom-params.js.mdx', 'common/component-story-custom-params.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/parameters#snippet-component-story-custom-params" /> diff --git a/docs/writing-stories/play-function.md b/docs/writing-stories/play-function.md index b659c3691ee0..90046df79f09 100644 --- a/docs/writing-stories/play-function.md +++ b/docs/writing-stories/play-function.md @@ -50,6 +50,8 @@ Storybook's `play` functions are small code snippets that run once the story fin 'vue/register-component-with-play-function.ts.mdx', 'svelte/register-component-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-register-component-with-play-function" /> @@ -77,6 +79,8 @@ Thanks to the [Component Story Format](../api/csf.md), an ES6 module based file 'vue/my-component-play-function-composition.ts.mdx', 'svelte/my-component-play-function-composition.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-composition" /> @@ -100,6 +104,8 @@ A common type of component interaction is a button click. If you need to reprodu 'vue/my-component-play-function-with-clickevent.ts.mdx', 'svelte/my-component-play-function-with-clickevent.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-clickevent" /> @@ -119,6 +125,8 @@ Asides from click events, you can also script additional events with the `play` 'vue/my-component-play-function-with-selectevent.ts.mdx', 'svelte/my-component-play-function-with-selectevent.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-selectevent" /> @@ -136,6 +144,8 @@ In addition to events, you can also create interactions with the `play` function 'vue/my-component-play-function-with-delay.ts.mdx', 'svelte/my-component-play-function-with-delay.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-delay" /> @@ -155,6 +165,8 @@ You can also use the `play` function to verify the existence of an element based 'vue/my-component-play-function-waitfor.ts.mdx', 'svelte/my-component-play-function-waitfor.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-waitfor" /> @@ -174,6 +186,8 @@ If you need, you can also adjust your `play` function to find elements based on 'vue/my-component-play-function-alt-queries.ts.mdx', 'svelte/my-component-play-function-alt-queries.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-alt-queries" /> @@ -197,6 +211,8 @@ Otherwise, if the component is not immediately available, for instance, due to a 'vue/my-component-play-function-query-findby.ts.mdx', 'svelte/my-component-play-function-query-findby.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-query-findby" /> @@ -216,6 +232,8 @@ By default, each interaction you write inside your `play` function will be execu 'vue/my-component-play-function-with-canvas.ts.mdx', 'svelte/my-component-play-function-with-canvas.js.mdx', ]} + usesCsf3 + csf2Path="writing-stories/play-function#snippet-my-component-play-function-with-canvas" /> diff --git a/docs/writing-stories/stories-for-multiple-components.md b/docs/writing-stories/stories-for-multiple-components.md index bbab789739f8..d499d17a8a95 100644 --- a/docs/writing-stories/stories-for-multiple-components.md +++ b/docs/writing-stories/stories-for-multiple-components.md @@ -16,6 +16,8 @@ It's useful to write stories that [render two or more components](../writing-sto 'vue/list-story-with-sub-components.3.js.mdx', 'vue/list-story-with-sub-components.ts-3.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-subcomponents" /> @@ -49,6 +51,8 @@ The simplest change we can make to the above is to reuse the stories of the `Lis 'web-components/list-story-unchecked.js.mdx', 'web-components/list-story-unchecked.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-unchecked" /> @@ -68,6 +72,8 @@ One way we improve that situation is by pulling the rendered subcomponent out in 'react/list-story-with-unchecked-children.js.mdx', 'react/list-story-with-unchecked-children.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-with-unchecked-children" /> @@ -105,6 +111,8 @@ Another option that is more “data”-based is to create a special “story-gen 'vue/list-story-template.ts-3.ts.mdx', 'angular/list-story-template.ts.mdx', ]} + usesCsf3 + csf2Path="writing-stories/stories-for-multiple-components#snippet-list-story-template" /> diff --git a/docs/writing-tests/accessibility-testing.md b/docs/writing-tests/accessibility-testing.md index 231807621c61..ebff86d9842d 100644 --- a/docs/writing-tests/accessibility-testing.md +++ b/docs/writing-tests/accessibility-testing.md @@ -66,6 +66,8 @@ Storybook's a11y addon runs [Axe](https://github.com/dequelabs/axe-core) on the 'vue/component-story-with-accessibility.3.js.mdx', 'svelte/component-story-with-accessibility.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/accessibility-testing#snippet-component-story-with-accessibility" /> @@ -120,6 +122,8 @@ Customize the a11y ruleset at the story level by updating your story to include 'vue/storybook-addon-a11y-story-config.js.mdx', 'svelte/storybook-addon-a11y-story-config.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-story-config" /> @@ -138,6 +142,8 @@ Disable accessibility testing for stories or components by adding the following 'vue/storybook-addon-a11y-disable.js.mdx', 'svelte/storybook-addon-a11y-disable.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/accessibility-testing#snippet-storybook-addon-a11y-disable" /> diff --git a/docs/writing-tests/importing-stories-in-tests.md b/docs/writing-tests/importing-stories-in-tests.md index 12b8cb021210..cba0d2d22681 100644 --- a/docs/writing-tests/importing-stories-in-tests.md +++ b/docs/writing-tests/importing-stories-in-tests.md @@ -112,6 +112,8 @@ An example of an end-to-end test with Cypress and Storybook is testing a login c 'vue/login-form-with-play-function.3.js.mdx', 'svelte/login-form-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" /> @@ -154,6 +156,8 @@ A real-life scenario of user flow testing with Playwright would be how to test a 'vue/login-form-with-play-function.3.js.mdx', 'svelte/login-form-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/importing-stories-in-tests#snippet-login-form-with-play-function" /> diff --git a/docs/writing-tests/interaction-testing.md b/docs/writing-tests/interaction-testing.md index 79d3dc844826..8e5e55ae3f4e 100644 --- a/docs/writing-tests/interaction-testing.md +++ b/docs/writing-tests/interaction-testing.md @@ -63,6 +63,8 @@ The test itself is defined inside a `play` function connected to a story. Here's 'vue/login-form-with-play-function.3.js.mdx', 'svelte/login-form-with-play-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/interaction-testing#snippet-login-form-with-play-function" /> @@ -104,6 +106,8 @@ For complex flows, it can be worthwhile to group sets of related interactions to paths={[ 'common/storybook-interactions-step-function.js.mdx', ]} + usesCsf3 + csf2Path="writing-tests/interaction-testing#snippet-storybook-interactions-step-function" /> From 74f3252ff855bd1c5ee2d204a0c83268961cf1f4 Mon Sep 17 00:00:00 2001 From: Kyle Gach Date: Thu, 1 Dec 2022 16:10:03 -0700 Subject: [PATCH 4/6] Add CSF 2->3 upgrade docs & snippets --- docs/api/csf.md | 151 ++++++++++++++++++ .../angular/csf-2-example-starter.ts.mdx | 15 ++ .../angular/csf-2-example-story.ts.mdx | 6 + .../angular/csf-3-example-render.ts.mdx | 8 + .../angular/csf-3-example-starter.ts.mdx | 12 ++ .../csf-2-example-primary-dark-story.js.mdx | 6 + .../common/csf-2-example-title.js.mdx | 4 + .../common/csf-3-example-auto-title.js.mdx | 4 + .../csf-3-example-default-render.js.mdx | 4 + .../csf-3-example-primary-dark-story.js.mdx | 7 + .../common/csf-3-example-starter.js.mdx | 8 + .../react/csf-2-example-starter.js.mdx | 12 ++ .../react/csf-2-example-starter.ts.mdx | 13 ++ .../snippets/react/csf-2-example-story.js.mdx | 4 + .../react/csf-3-example-render.js.mdx | 6 + .../react/csf-3-example-starter.ts.mdx | 12 ++ .../vue/csf-2-example-starter.2.js.mdx | 15 ++ .../vue/csf-2-example-starter.3.js.mdx | 18 +++ .../vue/csf-2-example-starter.ts-2.ts.mdx | 16 ++ .../vue/csf-2-example-starter.ts-3.ts.mdx | 22 +++ .../snippets/vue/csf-2-example-story.2.js.mdx | 7 + .../snippets/vue/csf-2-example-story.3.js.mdx | 10 ++ .../vue/csf-3-example-render.2.js.mdx | 9 ++ .../vue/csf-3-example-render.3.js.mdx | 12 ++ .../vue/csf-3-example-starter.ts-2.ts.mdx | 12 ++ .../vue/csf-3-example-starter.ts-3.ts.mdx | 12 ++ .../csf-2-example-starter.js.mdx | 14 ++ .../web-components/csf-2-example-story.js.mdx | 4 + .../csf-3-example-render.js.mdx | 6 + 29 files changed, 429 insertions(+) create mode 100644 docs/snippets/angular/csf-2-example-starter.ts.mdx create mode 100644 docs/snippets/angular/csf-2-example-story.ts.mdx create mode 100644 docs/snippets/angular/csf-3-example-render.ts.mdx create mode 100644 docs/snippets/angular/csf-3-example-starter.ts.mdx create mode 100644 docs/snippets/common/csf-2-example-primary-dark-story.js.mdx create mode 100644 docs/snippets/common/csf-2-example-title.js.mdx create mode 100644 docs/snippets/common/csf-3-example-auto-title.js.mdx create mode 100644 docs/snippets/common/csf-3-example-default-render.js.mdx create mode 100644 docs/snippets/common/csf-3-example-primary-dark-story.js.mdx create mode 100644 docs/snippets/common/csf-3-example-starter.js.mdx create mode 100644 docs/snippets/react/csf-2-example-starter.js.mdx create mode 100644 docs/snippets/react/csf-2-example-starter.ts.mdx create mode 100644 docs/snippets/react/csf-2-example-story.js.mdx create mode 100644 docs/snippets/react/csf-3-example-render.js.mdx create mode 100644 docs/snippets/react/csf-3-example-starter.ts.mdx create mode 100644 docs/snippets/vue/csf-2-example-starter.2.js.mdx create mode 100644 docs/snippets/vue/csf-2-example-starter.3.js.mdx create mode 100644 docs/snippets/vue/csf-2-example-starter.ts-2.ts.mdx create mode 100644 docs/snippets/vue/csf-2-example-starter.ts-3.ts.mdx create mode 100644 docs/snippets/vue/csf-2-example-story.2.js.mdx create mode 100644 docs/snippets/vue/csf-2-example-story.3.js.mdx create mode 100644 docs/snippets/vue/csf-3-example-render.2.js.mdx create mode 100644 docs/snippets/vue/csf-3-example-render.3.js.mdx create mode 100644 docs/snippets/vue/csf-3-example-starter.ts-2.ts.mdx create mode 100644 docs/snippets/vue/csf-3-example-starter.ts-3.ts.mdx create mode 100644 docs/snippets/web-components/csf-2-example-starter.js.mdx create mode 100644 docs/snippets/web-components/csf-2-example-story.js.mdx create mode 100644 docs/snippets/web-components/csf-3-example-render.js.mdx diff --git a/docs/api/csf.md b/docs/api/csf.md index 98e6246dcfcf..a933c87415ff 100644 --- a/docs/api/csf.md +++ b/docs/api/csf.md @@ -253,3 +253,154 @@ For this particular example, you could achieve the same result in different ways - `excludeStories: ['simpleData', 'complexData']` The first option is the recommended solution if you follow the best practice of starting story exports with an uppercase letter (i.e., use UpperCamelCase). + +## Upgrading from CSF 2 to CSF 3 + +In CSF 2, the named exports are always functions that instantiate a component, and those functions can be annotated with configuration options. For example: + + + + + + + +This declares a Primary story for a Button that renders itself by spreading `{ primary: true }` into the component. The `default.title` metadata says where to place the story in a navigation hierarchy. + +Here's the CSF 3 equivalent: + + + + + + + +Let's go through the changes individually to understand what's going on. + +### Spreadable story objects + +In CSF 3, the named exports are **objects**, not functions. This allows us to reuse stories more efficiently with the JS spread operator. + +Consider the following addition to the intro example, which creates a `PrimaryOnDark` story that renders against a dark background: + +Here's the CSF 2 implementation: + + + + + + + +`Primary.bind({})` copies the story function, but it doesn't copy the annotations hanging off the function, so we must add `PrimaryOnDark.args = Primary.args` to inherit the args. + +In CSF 3, we can spread the `Primary` object to carry over all its annotations: + + + + + + + +### Default render functions + +In CSF 3, you specify how a story renders through a `render` function. We can rewrite a CSF 2 example to CSF 3 through the following steps. + +Let's start with a simple CSF 2 story function: + + + + + + + +Now, let's rewrite it as a story object in CSF 3 with an explicit `render` function that tells the story how to render itself. Like CSF 2, this gives us full control of how we render a component or even a collection of components. + + + + + + + +But in CSF 2, a lot of story functions are identical: take the component specified in the default export and spread args into it. What's interesting about these stories is not the function, but the args passed into the function. + +CSF 3 provides default render functions for each renderer. If all you're doing is spreading args into your component—which is the most common case—you don't need to specify any `render` function at all: + + + + + + + +For more information, see the section on [custom render functions](#custom-render-functions). + +### Generate titles automatically + +Finally, CSF 3 can automatically generate titles. + + + + + + + + + + + + + +You can still specify a title like in CSF 2, but if you don't specify one, it can be inferred from the story's path on disk. For more information, see the section on [configuring story loading](../configure/overview#configure-story-loading). diff --git a/docs/snippets/angular/csf-2-example-starter.ts.mdx b/docs/snippets/angular/csf-2-example-starter.ts.mdx new file mode 100644 index 000000000000..c86ce4295baa --- /dev/null +++ b/docs/snippets/angular/csf-2-example-starter.ts.mdx @@ -0,0 +1,15 @@ +```ts +// CSF 2 +import { Meta, Story } from '@storybook/angular'; +import { Button } from './button.component'; + +export default { + title: 'components/Button', + component: Button, +} as Meta; + +export const Primary: Story = (args) => ({ + props: args, +}); +Primary.args = { primary: true }; +``` diff --git a/docs/snippets/angular/csf-2-example-story.ts.mdx b/docs/snippets/angular/csf-2-example-story.ts.mdx new file mode 100644 index 000000000000..2c8cd4def124 --- /dev/null +++ b/docs/snippets/angular/csf-2-example-story.ts.mdx @@ -0,0 +1,6 @@ +```ts +// CSF 2 +export const Default: Story = (args) => ({ + props: args, +}); +``` diff --git a/docs/snippets/angular/csf-3-example-render.ts.mdx b/docs/snippets/angular/csf-3-example-render.ts.mdx new file mode 100644 index 000000000000..3c4f1c5c0ca7 --- /dev/null +++ b/docs/snippets/angular/csf-3-example-render.ts.mdx @@ -0,0 +1,8 @@ +```ts +// CSF 3 +export const Default: Story = { + render: (args) => ({ + props: args, + }), +}; +``` diff --git a/docs/snippets/angular/csf-3-example-starter.ts.mdx b/docs/snippets/angular/csf-3-example-starter.ts.mdx new file mode 100644 index 000000000000..dd93d4098441 --- /dev/null +++ b/docs/snippets/angular/csf-3-example-starter.ts.mdx @@ -0,0 +1,12 @@ +```ts +// CSF 3 +import { Meta, StoryObj } from '@storybook/angular'; +import { Button } from './button.component'; + +const meta: Meta