Docs: Add codemod script for docs snippets by yannbf · Pull Request #30315 · storybookjs/storybook

yannbf · 2025-01-20T18:11:35Z

What I did

This PR adds a new command to the scripts directory to be able to run codemods in our own documentation file.

Based on a specified codemod and glob, it will essentially go through all of the files, extract all snippets from that given file, go through some logic to define which target snippets should be migrated, then apply the codemod to those snippets.

You can run it like so in the scripts directory:

y docs:codemod <codemod> --glob=<glob> --dry-run

for instance:

y docs:codemod csf-factory-story --glob="loader-story.md" --dry-run

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

available codemods:
csf-factory-story (for stories snippets), csf-factory-config (for preview.js/main.js snippets)

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

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.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook canary-release-pr.yml --field pr=<PR_NUMBER>

Greptile Summary

Adds a new codemod script for transforming documentation code snippets to CSF 4 format, with functionality to extract, transform, and append updated snippets while maintaining original content.

Added scripts/snippets/codemod.ts with snippet extraction and transformation logic using concurrent processing
Added SNIPPETS_DIRECTORY constant in scripts/utils/constants.ts pointing to '_snippets' directory
Added docs:codemod script command and globby dependency in scripts/package.json
Implemented CSF factory codemods for both story and config files with proper error handling

greptile-apps

_{3 file(s) reviewed, 3 comment(s)}
_{Edit PR Review Bot Settings | Greptile}

greptile-apps · 2025-01-20T18:12:23Z

+                const newSnippet = { ...snippet };
+                newSnippet.attributes.tabTitle = 'CSF 4 (experimental)';


style: redundant assignment of tabTitle - it's set again in the attributes spread below

greptile-apps · 2025-01-20T18:12:24Z

+export function parseAttributes(attributes: string): Record<string, string> {
+  const attributeRegex = /([a-zA-Z0-9.-]+)="([^"]+)"/g;
+  const result: Record<string, string> = {};


logic: attributeRegex is too permissive - should escape dots and validate attribute names more strictly

greptile-apps · 2025-01-20T18:12:24Z

+program
+  .name('command')
+  .description('A minimal CLI for demonstration')


style: CLI name and description are placeholder values that should be updated with actual command details

nx-cloud · 2025-01-20T18:16:18Z

View your CI Pipeline Execution ↗ for commit 3fad32c.

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

☁️ Nx Cloud last updated this comment at 2025-05-21 09:25:36 UTC

github-actions · 2025-02-12T14:26:34Z

	Fails
🚫	PR is not labeled with one of: ["cleanup","BREAKING CHANGE","feature request","bug","documentation","maintenance","build","dependencies"]

Generated by 🚫 dangerJS against 3fad32c

yannbf · 2025-07-24T11:55:21Z

@vanessayuenn @kylegach @jonniebigodes I'm turning this PR into draft but it would be lovely to know what the plans are for the CSF factories docs

yannbf · 2025-11-18T08:50:32Z

Closing this, if we ever need it we can bring this back. cc @kylegach @jonniebigodes

yannbf added the ci:docs Run the CI jobs for documentation checks only. label Jan 20, 2025

yannbf self-assigned this Jan 20, 2025

greptile-apps Bot reviewed Jan 20, 2025

View reviewed changes

yannbf force-pushed the yann/csf-factories-docs-codemod branch 2 times, most recently from 831bf94 to 7d38d73 Compare January 20, 2025 18:48

yannbf force-pushed the yann/csf-factories-base branch from f75b007 to 80c80ac Compare January 20, 2025 20:49

Base automatically changed from yann/csf-factories-base to kasper/csf-factories January 21, 2025 11:30

yannbf force-pushed the yann/csf-factories-docs-codemod branch from 7d38d73 to a7bbc4c Compare January 21, 2025 16:54

yannbf requested review from jonniebigodes and kylegach as code owners January 22, 2025 17:44

yannbf added 7 commits January 30, 2025 07:56

add docs codemod command for scripts directory

54171e0

add requested changes

7304607

improve codemod command

bf51bc7

rename tabTitle

f40b85b

add --prompt flag

439acb3

only update code when codemod has not been applied

46aa992

add subpath code comment

b95322e

yannbf force-pushed the yann/csf-factories-docs-codemod branch from 3638e44 to b95322e Compare January 30, 2025 07:09

yannbf added 4 commits February 5, 2025 12:17

Merge branch 'kasper/csf-factories' into yann/csf-factories-docs-codemod

027ac6b

Merge branch 'kasper/csf-factories' into yann/csf-factories-docs-codemod

6787461

fix

62df9b9

add disclaimer

a454898

Base automatically changed from kasper/csf-factories to next February 12, 2025 14:25

Merge branch 'next' into yann/csf-factories-docs-codemod

3fad32c

github-actions Bot added the Stale label Jul 5, 2025

yannbf removed the Stale label Jul 24, 2025

yannbf marked this pull request as draft July 24, 2025 11:54

kylegach mentioned this pull request Aug 29, 2025

Docs: Add CSF Next snippets #32357

Merged

4 tasks

yannbf closed this Nov 18, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Docs: Add codemod script for docs snippets#30315

Docs: Add codemod script for docs snippets#30315
yannbf wants to merge 12 commits into
nextfrom
yann/csf-factories-docs-codemod

yannbf commented Jan 20, 2025 •

edited

Loading

Uh oh!

greptile-apps Bot left a comment

Uh oh!

greptile-apps Bot Jan 20, 2025

Uh oh!

greptile-apps Bot Jan 20, 2025

Uh oh!

greptile-apps Bot Jan 20, 2025

Uh oh!

nx-cloud Bot commented Jan 20, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Feb 12, 2025 •

edited

Loading

Uh oh!

yannbf commented Jul 24, 2025

Uh oh!

yannbf commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

		const newSnippet = { ...snippet };
		newSnippet.attributes.tabTitle = 'CSF 4 (experimental)';

Uh oh!

Conversation

yannbf commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Greptile Summary

Uh oh!

greptile-apps Bot left a comment

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps Bot Jan 20, 2025

Choose a reason for hiding this comment

Uh oh!

nx-cloud Bot commented Jan 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Feb 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yannbf commented Jul 24, 2025

Uh oh!

yannbf commented Nov 18, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

yannbf commented Jan 20, 2025 •

edited

Loading

nx-cloud Bot commented Jan 20, 2025 •

edited

Loading

github-actions Bot commented Feb 12, 2025 •

edited

Loading