Docs: Add CSF Next snippets #32357

kylegach · 2025-08-29T19:20:26Z

What I did

Add CSF Next codemod scripts for docs snippets (cherry-picked from Docs: Add codemod script for docs snippets #30315)
Update scripts
Run scripts to update snippets
Make manual adjustments

Checklist for Contributors

Testing

Manual testing

In monorepo, check out this branch, docs-csf-next-snippets
In web, check out remember-tab-choice branch (see Store docs snippet tab selection in cookie web#325)
Run local docs and sync with this branch

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

nx-cloud · 2025-08-29T19:27:11Z

View your CI Pipeline Execution ↗ for commit 9663fad

Command	Status	Duration	Result
`nx run-many -t build --parallel=3`	✅ Succeeded	48s	View ↗

☁️ Nx Cloud last updated this comment at 2025-10-07 20:26:05 UTC

coderabbitai · 2025-09-17T20:59:35Z

Important

Review skipped

More than 25% of the files skipped due to max files limit. The review is being skipped to prevent a low-quality review.

88 files out of 300 files are above the max files limit of 200.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

✨ Finishing touches

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch docs-csf-next-snippets

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

- `docs:codemod csf-factory-story --glob="*.md"`

- `docs:codemod csf-factory-config --glob="*.md"`

- Codemod unable to run on incomplete stories files ("...rest of story file") - Some uncaught usages of Stories.Story.args -> Stories.Story.input.args

kylegach · 2025-09-24T19:55:41Z

⚠️ This can only be merged after storybookjs/web#325 is merged.

* next: (277 commits) Bump version from "10.0.0-beta.6" to "10.0.0-beta.7" [skip ci] Write changelog for 10.0.0-beta.7 [skip ci] Update yarn utility to handle errors when removing .yarnrc.yml file during installation Update yarn utility to remove existing .yarnrc.yml file during installation fix failing react sandboxes optimizeDeps app state mock to ensure vitest doesn't reload clear yarn.lock content update updated docs make url mock static in stories provide features via the vitest integration cleanup enable async stories Update Tool component to allow isRotated to be undefined, enhancing type flexibility update svelte related packages enable test syntax in storybook:ui fix lint Fix types Update Tool component type definitions for viewportName and isRotated to improve type safety Refactor viewport handling in Vitest plugin and Tool component to use consistent type definitions for options and viewports cleanup ...

* next: Re-apply missing changes: add type checking section and update sandbox API rate limit documentation Apply suggestions from code review Apply suggestions from code review Fix missing props Improve sidebar empty state remove re-throwing error cleanup debugging Remove unused Angular preset file to streamline framework imports debug more let's debug this Refactor preset imports in Angular framework to use fileURLToPath for better compatibility fix: pass an index in handleAddValueAdd Do not use path.join to create package.json module paths Update yarn pnp to correctly resolve addons Use exsolve's resolveModulePath for safeResolveModule Update copilot instructions based on feedback: add build command, fix sandbox documentation Create comprehensive GitHub Copilot instructions documentation Initial plan

jonniebigodes

Thanks for putting this pull request together and getting the snippets updated to include the CSF Next format. I've checked through the snippets and found several issues that need to be addressed before we can merge this in. Also, while we're at it, I'm going to check the rest of them as well to make sure everything is in order, see if we didn't miss anything, and have a full audit of the snippets to make sure everything is in order.

docs/_snippets/addon-a11y-config-in-meta-and-story.md

docs/_snippets/addon-a11y-disable.md

docs/_snippets/addon-a11y-parameter-example.md

docs/_snippets/addon-backgrounds-options-in-preview.md

docs/_snippets/addon-viewport-options-in-preview.md

docs/_snippets/storybook-preview-auto-docs-custom-docs-container.md

docs/_snippets/storybook-preview-auto-docs-custom-template-function.md

docs/_snippets/storybook-preview-auto-docs-override-mdx-container.md

docs/_snippets/storybook-preview-use-global-type.md

docs/_snippets/typed-csf-file.md

jonniebigodes · 2025-09-29T11:30:07Z

I've checked and the following snippets were not converted:

addon-docs-options.md (used in the Autodocs page)
main-config-vite-final-env.md (used in the Vite builder page)
storybook-preview-auto-docs-custom-mdx-template.md (used in the Autodocs page)
storybook-vite-builder-aliasing.md (used in the Vite builder page)
storybook-vite-builder-react-docgen.md (used in the Vite builder page)
storybook-vite-builder-register.md ( used in the Vite builder page)

* next: (101 commits) Update assertion now that unhandled errors are shown correctly Fix interactions bar alignment Update E2E tests Prevent play status from leaving terminal state Expand selected story with tests on initialization Show tooltip on story status badge Avoid modern Set operators improve story index structure and types use full commit SHA for third party action Update docs/api/main-config/main-config-indexers.mdx simplify branching logic bail from workflow early if conditions aren't met Update action references and improve environment variable handling in workflows based on https://docs.github.com/en/actions/reference/security/secure-use simplify deps installation update docs cleanup Refactor Node.js setup and dependency installation across workflows extract node and dependency setup into reusable action merge canary workflow into publish workflow Telemetry: Add metadata for react routers ...

Co-authored-by: jonniebigodes <[email protected]>

* next: Update filter image Update docs/writing-stories/tags.mdx Update docs/api/main-config/main-config-tags.mdx Docs: Update tags, add filtering Fix: Incorrect URLS for the upgrade command

* next: Updates from review Docs: Add experimental test syntax to main config features page Prevent onboarding confetti overlay from intercepting pointer events

jonniebigodes

Took another pass at this and left some items for you to look into, when you're able. Nothing major.

Also, it seems that one of the snippets, specifically the main-config-builder-custom-config.md that's used in the Vite builder documentation was not properly converted.

Approving to unblock you

docs/_snippets/addon-a11y-parameter-remove.md

docs/_snippets/code-panel-in-meta-and-story.md

docs/_snippets/main-config-swc.md

docs/_snippets/main-config-tags-test-fn-exclude.md

docs/_snippets/main-config-tags.md

jonniebigodes · 2025-10-07T21:49:20Z

docs/_snippets/mount-basic.md

+import MockDate from 'mockdate';
+
+import preview from '../.storybook/preview';


When you're able, can you adjust the import order in the CSF Next to align with the other examples as follows:

Suggested change

import MockDate from 'mockdate';

import preview from '../.storybook/preview';

import preview from '../.storybook/preview';

import MockDate from 'mockdate';

ESLint's default configuration will place absolute imports above relative ones. So while it made sense to place the SB imports first prior to CSF Next, the relative import of the preview file should now be after any absolute imports.

docs/_snippets/msw-addon-configure-handlers-http.md

docs/_snippets/storybook-main-extend-ts-config.md

Co-authored-by: jonniebigodes <[email protected]>

* next: Update PR template to correct canary release workflow link Bump version from "10.0.0-beta.9" to "10.0.0-beta.10" [skip ci] fix story test Customize text for production mode fix story change qrcode text in prod Write changelog for 10.0.0-beta.10 [skip ci] Ensure valid QR code URL

kylegach self-assigned this Aug 29, 2025

kylegach added documentation ci:docs Run the CI jobs for documentation checks only. labels Aug 29, 2025

kylegach force-pushed the docs-csf-next-snippets branch from 336bfb9 to 1e2b464 Compare September 2, 2025 22:49

kylegach force-pushed the docs-csf-next-snippets branch from 1e2b464 to 50269a7 Compare September 17, 2025 20:59

yannbf and others added 6 commits September 18, 2025 16:25

add docs codemod command for scripts directory

016f27b

Update CSF Factories snippets codemod

5459bc7

Run docs script for CSF Factories stories codemod

75fbe79

- `docs:codemod csf-factory-story --glob="*.md"`

Run docs script for CSF Factories config codemod

b456d7f

- `docs:codemod csf-factory-config --glob="*.md"`

Manual snippet updates

f0bfd9f

- Codemod unable to run on incomplete stories files ("...rest of story file") - Some uncaught usages of Stories.Story.args -> Stories.Story.input.args

Fix already-tabbed snippets

bfc216b

kylegach force-pushed the docs-csf-next-snippets branch from 50269a7 to bfc216b Compare September 18, 2025 23:00

kylegach mentioned this pull request Sep 24, 2025

Store docs snippet tab selection in cookie storybookjs/web#325

Merged

kylegach added the ci: do not merge label Sep 24, 2025

kylegach marked this pull request as ready for review September 24, 2025 19:59

kylegach requested a review from jonniebigodes as a code owner September 24, 2025 19:59

kylegach added 3 commits September 24, 2025 17:00

Run pretty-docs

074c32d

Clean up unnecessary empty lines

c9cc145

kylegach mentioned this pull request Sep 26, 2025

Docs: Add CSF factory (experimental) snippets #30269

Closed

4 tasks

jonniebigodes requested changes Sep 28, 2025

View reviewed changes

kylegach and others added 4 commits October 3, 2025 14:27

Address feedback

2634f23

Co-authored-by: jonniebigodes <[email protected]>

Merge branch 'next' into docs-csf-next-snippets

67c6093

* next: Update filter image Update docs/writing-stories/tags.mdx Update docs/api/main-config/main-config-tags.mdx Docs: Update tags, add filtering Fix: Incorrect URLS for the upgrade command

Update new snippets

7e6a516

kylegach removed the ci: do not merge label Oct 6, 2025

kylegach added 2 commits October 7, 2025 14:01

Merge branch 'next' into docs-csf-next-snippets

5fe89f8

* next: Updates from review Docs: Add experimental test syntax to main config features page Prevent onboarding confetti overlay from intercepting pointer events

Fix typo

9663fad

jonniebigodes approved these changes Oct 7, 2025

View reviewed changes

kylegach and others added 2 commits October 8, 2025 14:55

Address feedback

265c76c

Co-authored-by: jonniebigodes <[email protected]>

kylegach merged commit 0a4b5af into next Oct 9, 2025
5 checks passed

kylegach deleted the docs-csf-next-snippets branch October 9, 2025 16:01

github-actions bot mentioned this pull request Oct 9, 2025

Release: Prerelease 10.0.0-beta.11 #32674

Merged

13 tasks

		import MockDate from 'mockdate';

		import preview from '../.storybook/preview';

Uh oh!

Docs: Add CSF Next snippets #32357

Docs: Add CSF Next snippets #32357

Uh oh!

Conversation

kylegach commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

Manual testing

Documentation

Checklist for Maintainers

Uh oh!

nx-cloud bot commented Aug 29, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai bot commented Sep 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Uh oh!

kylegach commented Sep 24, 2025

Uh oh!

jonniebigodes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jonniebigodes commented Sep 29, 2025

Uh oh!

jonniebigodes left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

jonniebigodes Oct 7, 2025

Choose a reason for hiding this comment

Uh oh!

kylegach Oct 8, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

kylegach commented Aug 29, 2025 •

edited

Loading

nx-cloud bot commented Aug 29, 2025 •

edited

Loading

coderabbitai bot commented Sep 17, 2025 •

edited

Loading

jonniebigodes left a comment •

edited

Loading