From 7a7907743acb834cdb7bc9f157d9089df6cf743a Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 24 Nov 2025 08:42:56 +0000 Subject: [PATCH 1/5] Fix broken CSF open standard links in documentation Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com> --- docs/_snippets/addon-consume-and-update-globaltype.md | 4 ++-- docs/_snippets/main-config-builder-custom-config.md | 2 -- docs/_snippets/storybook-addon-css-example.md | 2 +- docs/_snippets/storybook-addon-toolkit-types.md | 2 +- docs/_snippets/storybook-addons-api-getchannel.md | 4 ++-- docs/_snippets/storybook-preview-use-global-type.md | 2 +- docs/api/csf/index.mdx | 2 +- docs/api/index.mdx | 2 +- docs/get-started/why-storybook.mdx | 4 ++-- 9 files changed, 11 insertions(+), 13 deletions(-) diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md index cc594f4f099a..cf43e00b49ad 100644 --- a/docs/_snippets/addon-consume-and-update-globaltype.md +++ b/docs/_snippets/addon-consume-and-update-globaltype.md @@ -14,11 +14,11 @@ const ExampleToolbar = () => { // Function that will update the global value and trigger a UI refresh. const refreshAndUpdateGlobal = () => { // Updates Storybook global value - updateGlobals({ + (updateGlobals({ ['my-param-key']: !isActive, }), // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh - addons.getChannel().emit(FORCE_RE_RENDER); + addons.getChannel().emit(FORCE_RE_RENDER)); }; const toggleOutline = useCallback(() => refreshAndUpdateGlobal(), [isActive]); diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md index da1b7996a571..e2f1a0838ea9 100644 --- a/docs/_snippets/main-config-builder-custom-config.md +++ b/docs/_snippets/main-config-builder-custom-config.md @@ -46,7 +46,6 @@ export default defineMain({ }, }, }); - ``` @@ -67,5 +66,4 @@ export default defineMain({ }, }, }); - ``` diff --git a/docs/_snippets/storybook-addon-css-example.md b/docs/_snippets/storybook-addon-css-example.md index 43717ddff9b7..1990f58d798d 100644 --- a/docs/_snippets/storybook-addon-css-example.md +++ b/docs/_snippets/storybook-addon-css-example.md @@ -2,7 +2,7 @@ import { dedent } from 'ts-dedent'; export default function outlineCSS(selector: string) { - return dedent/* css */ ` + return dedent /* css */ ` ${selector} body { outline: 1px solid #2980b9 !important; } diff --git a/docs/_snippets/storybook-addon-toolkit-types.md b/docs/_snippets/storybook-addon-toolkit-types.md index 5a2bb4054ce7..2898cca64c31 100644 --- a/docs/_snippets/storybook-addon-toolkit-types.md +++ b/docs/_snippets/storybook-addon-toolkit-types.md @@ -18,7 +18,7 @@ export const Tool = memo(function MyAddonSelector() { [PARAM_KEY]: !isActive, }); }, [isActive]); - + useEffect(() => { api.setAddonShortcut(ADDON_ID, { label: 'Toggle Outline', diff --git a/docs/_snippets/storybook-addons-api-getchannel.md b/docs/_snippets/storybook-addons-api-getchannel.md index 97408b651752..73add964516b 100644 --- a/docs/_snippets/storybook-addons-api-getchannel.md +++ b/docs/_snippets/storybook-addons-api-getchannel.md @@ -13,11 +13,11 @@ const ExampleToolbar = () => { // Function that will update the global value and trigger a UI refresh. const refreshAndUpdateGlobal = () => { - updateGlobals({ + (updateGlobals({ ['my-param-key']: !isActive, }), // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh - addons.getChannel().emit(FORCE_RE_RENDER); + addons.getChannel().emit(FORCE_RE_RENDER)); }; const toggleToolbarAddon = useCallback(() => refreshAndUpdateGlobal(), [isActive]); diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md index b83528fddf70..d03a178280b7 100644 --- a/docs/_snippets/storybook-preview-use-global-type.md +++ b/docs/_snippets/storybook-preview-use-global-type.md @@ -8,7 +8,7 @@ const preview: Preview = { (story) => `
${story}
`, ({ globals }) => { return { myTheme: globals['theme'] }; - } + }, ), ], }; diff --git a/docs/api/csf/index.mdx b/docs/api/csf/index.mdx index 50afb12d6183..06b9d5f8f7e1 100644 --- a/docs/api/csf/index.mdx +++ b/docs/api/csf/index.mdx @@ -9,7 +9,7 @@ tab: title: CSF 3 --- -Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/ComponentDriven/csf) based on ES6 modules that is portable beyond Storybook. +Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) based on ES6 modules that is portable beyond Storybook. In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). diff --git a/docs/api/index.mdx b/docs/api/index.mdx index 5a957e12bf3a..3611ea52a271 100644 --- a/docs/api/index.mdx +++ b/docs/api/index.mdx @@ -80,7 +80,7 @@ An overview of all available API references for Storybook. Component Story Format (CSF) is the API for writing stories. It's an - open standard based on ES6 modules that + open standard based on ES6 modules that is portable beyond Storybook. diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index df8269db386a..7a5b0238bcb3 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -29,7 +29,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost ### Capture UI variations as “stories” -When developing a component variation in isolation, save it as a story. [Stories](https://github.com/ComponentDriven/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. +When developing a component variation in isolation, save it as a story. [Stories](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. You write stories for granular UI component variation and then use those stories in development, testing, and documentation. @@ -100,7 +100,7 @@ Storybook is compatible with your continuous integration workflow. Add it as a C ## Write stories once, reuse everywhere -Storybook is powered by [Component Story Format](https://github.com/ComponentDriven/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. +Storybook is powered by [Component Story Format](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. Reuse stories with [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost. From 73c2e7347aa355b148a0b55ccf23009c76b0b307 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 24 Nov 2025 08:52:05 +0000 Subject: [PATCH 2/5] Revert unintended prettier changes to snippet files Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com> --- docs/_snippets/addon-consume-and-update-globaltype.md | 4 ++-- docs/_snippets/main-config-builder-custom-config.md | 2 ++ docs/_snippets/storybook-addon-css-example.md | 2 +- docs/_snippets/storybook-addon-toolkit-types.md | 2 +- docs/_snippets/storybook-addons-api-getchannel.md | 4 ++-- docs/_snippets/storybook-preview-use-global-type.md | 2 +- 6 files changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/_snippets/addon-consume-and-update-globaltype.md b/docs/_snippets/addon-consume-and-update-globaltype.md index cf43e00b49ad..cc594f4f099a 100644 --- a/docs/_snippets/addon-consume-and-update-globaltype.md +++ b/docs/_snippets/addon-consume-and-update-globaltype.md @@ -14,11 +14,11 @@ const ExampleToolbar = () => { // Function that will update the global value and trigger a UI refresh. const refreshAndUpdateGlobal = () => { // Updates Storybook global value - (updateGlobals({ + updateGlobals({ ['my-param-key']: !isActive, }), // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh - addons.getChannel().emit(FORCE_RE_RENDER)); + addons.getChannel().emit(FORCE_RE_RENDER); }; const toggleOutline = useCallback(() => refreshAndUpdateGlobal(), [isActive]); diff --git a/docs/_snippets/main-config-builder-custom-config.md b/docs/_snippets/main-config-builder-custom-config.md index e2f1a0838ea9..da1b7996a571 100644 --- a/docs/_snippets/main-config-builder-custom-config.md +++ b/docs/_snippets/main-config-builder-custom-config.md @@ -46,6 +46,7 @@ export default defineMain({ }, }, }); + ``` @@ -66,4 +67,5 @@ export default defineMain({ }, }, }); + ``` diff --git a/docs/_snippets/storybook-addon-css-example.md b/docs/_snippets/storybook-addon-css-example.md index 1990f58d798d..43717ddff9b7 100644 --- a/docs/_snippets/storybook-addon-css-example.md +++ b/docs/_snippets/storybook-addon-css-example.md @@ -2,7 +2,7 @@ import { dedent } from 'ts-dedent'; export default function outlineCSS(selector: string) { - return dedent /* css */ ` + return dedent/* css */ ` ${selector} body { outline: 1px solid #2980b9 !important; } diff --git a/docs/_snippets/storybook-addon-toolkit-types.md b/docs/_snippets/storybook-addon-toolkit-types.md index 2898cca64c31..5a2bb4054ce7 100644 --- a/docs/_snippets/storybook-addon-toolkit-types.md +++ b/docs/_snippets/storybook-addon-toolkit-types.md @@ -18,7 +18,7 @@ export const Tool = memo(function MyAddonSelector() { [PARAM_KEY]: !isActive, }); }, [isActive]); - + useEffect(() => { api.setAddonShortcut(ADDON_ID, { label: 'Toggle Outline', diff --git a/docs/_snippets/storybook-addons-api-getchannel.md b/docs/_snippets/storybook-addons-api-getchannel.md index 73add964516b..97408b651752 100644 --- a/docs/_snippets/storybook-addons-api-getchannel.md +++ b/docs/_snippets/storybook-addons-api-getchannel.md @@ -13,11 +13,11 @@ const ExampleToolbar = () => { // Function that will update the global value and trigger a UI refresh. const refreshAndUpdateGlobal = () => { - (updateGlobals({ + updateGlobals({ ['my-param-key']: !isActive, }), // Invokes Storybook's addon API method (with the FORCE_RE_RENDER) event to trigger a UI refresh - addons.getChannel().emit(FORCE_RE_RENDER)); + addons.getChannel().emit(FORCE_RE_RENDER); }; const toggleToolbarAddon = useCallback(() => refreshAndUpdateGlobal(), [isActive]); diff --git a/docs/_snippets/storybook-preview-use-global-type.md b/docs/_snippets/storybook-preview-use-global-type.md index d03a178280b7..b83528fddf70 100644 --- a/docs/_snippets/storybook-preview-use-global-type.md +++ b/docs/_snippets/storybook-preview-use-global-type.md @@ -8,7 +8,7 @@ const preview: Preview = { (story) => `
${story}
`, ({ globals }) => { return { myTheme: globals['theme'] }; - }, + } ), ], }; From c6ef3f99a896b6d0c421df00bb6724656e347c99 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 24 Nov 2025 10:44:26 +0000 Subject: [PATCH 3/5] Replace GitHub links with Storybook documentation links Co-authored-by: Sidnioulz <5108577+Sidnioulz@users.noreply.github.com> --- docs/api/csf/index.mdx | 2 +- docs/api/index.mdx | 2 +- docs/get-started/why-storybook.mdx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/api/csf/index.mdx b/docs/api/csf/index.mdx index 06b9d5f8f7e1..b0a50147f1f4 100644 --- a/docs/api/csf/index.mdx +++ b/docs/api/csf/index.mdx @@ -9,7 +9,7 @@ tab: title: CSF 3 --- -Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an [open standard](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) based on ES6 modules that is portable beyond Storybook. +Component Story Format (CSF) is the recommended way to [write stories](../../writing-stories/index.mdx). It's an open standard based on ES6 modules that is portable beyond Storybook. In CSF, stories and component metadata are defined as ES Modules. Every component story file consists of a required [default export](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export#Using_the_default_export) and one or more [named exports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export). diff --git a/docs/api/index.mdx b/docs/api/index.mdx index 3611ea52a271..7fcbe13736fe 100644 --- a/docs/api/index.mdx +++ b/docs/api/index.mdx @@ -80,7 +80,7 @@ An overview of all available API references for Storybook. Component Story Format (CSF) is the API for writing stories. It's an - open standard based on ES6 modules that + open standard based on ES6 modules that is portable beyond Storybook. diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index 7a5b0238bcb3..1aea8eba9366 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -29,7 +29,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost ### Capture UI variations as “stories” -When developing a component variation in isolation, save it as a story. [Stories](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. +When developing a component variation in isolation, save it as a story. [Stories](https://storybook.js.org/docs/writing-stories) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. You write stories for granular UI component variation and then use those stories in development, testing, and documentation. @@ -100,7 +100,7 @@ Storybook is compatible with your continuous integration workflow. Add it as a C ## Write stories once, reuse everywhere -Storybook is powered by [Component Story Format](https://github.com/storybookjs/storybook/tree/next/code/core/src/csf), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. +Storybook is powered by [Component Story Format](https://storybook.js.org/docs/api/csf/index), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. Reuse stories with [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost. From fa8067d180506d861428d8d9c53c732cb23dcb69 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 24 Nov 2025 16:35:45 +0000 Subject: [PATCH 4/5] Use plain anchor tags instead of links for Stories and CSF Co-authored-by: jonniebigodes <22988955+jonniebigodes@users.noreply.github.com> --- docs/get-started/why-storybook.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index 1aea8eba9366..0217f9d08dd5 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -29,7 +29,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost ### Capture UI variations as “stories” -When developing a component variation in isolation, save it as a story. [Stories](https://storybook.js.org/docs/writing-stories) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. +When developing a component variation in isolation, save it as a story. Stories are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. You write stories for granular UI component variation and then use those stories in development, testing, and documentation. @@ -100,7 +100,7 @@ Storybook is compatible with your continuous integration workflow. Add it as a C ## Write stories once, reuse everywhere -Storybook is powered by [Component Story Format](https://storybook.js.org/docs/api/csf/index), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. +Storybook is powered by Component Story Format, an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. Reuse stories with [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost. From 320d1351dbb3b306b40669f2e90e02cf17d5f277 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Mon, 24 Nov 2025 16:46:14 +0000 Subject: [PATCH 5/5] Use markdown links with internal paths for Stories and CSF Co-authored-by: jonniebigodes <22988955+jonniebigodes@users.noreply.github.com> --- docs/get-started/why-storybook.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/get-started/why-storybook.mdx b/docs/get-started/why-storybook.mdx index 0217f9d08dd5..887d98dad48b 100644 --- a/docs/get-started/why-storybook.mdx +++ b/docs/get-started/why-storybook.mdx @@ -29,7 +29,7 @@ Storybook is packaged as a small, development-only, [workshop](https://bradfrost ### Capture UI variations as “stories” -When developing a component variation in isolation, save it as a story. Stories are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. +When developing a component variation in isolation, save it as a story. [Stories](../writing-stories/index.mdx) are a declarative syntax for supplying props and mock data to simulate component variations. Each component can have multiple stories. Each story allows you to demonstrate a specific variation of that component to verify appearance and behavior. You write stories for granular UI component variation and then use those stories in development, testing, and documentation. @@ -100,7 +100,7 @@ Storybook is compatible with your continuous integration workflow. Add it as a C ## Write stories once, reuse everywhere -Storybook is powered by Component Story Format, an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. +Storybook is powered by [Component Story Format](../api/csf/index.mdx), an open standard based on JavaScript ES6 modules. This enables stories to interoperate between development, testing, and design tools. Each story is exported as a JavaScript function enabling you to reuse it with other tools. No vendor lock-in. Reuse stories with [Jest](https://jestjs.io/) or [Vitest](https://vitest.dev/) and [Testing Library](https://testing-library.com/) to verify interactions. Put them in [Chromatic](https://www.chromatic.com/?utm_source=storybook_website\&utm_medium=link\&utm_campaign=storybook) for visual testing. Audit story accessibility with [Axe](https://github.com/dequelabs/axe-core). Or test user flows with [Playwright](https://playwright.dev/) and [Cypress](https://www.cypress.io/). Reuse unlocks more workflows at no extra cost.