Codemod: Add option to have relative path in csf factories codemod

[yannbf]

Closes #

What I did

This PR introduces a new prompt for the user related to the csf factories codemod.

When using the subpath imports, things may not work if users if they:

• do not have moduleResolution: bundler in tsconfig
• use ts path aliases (baseUrl and/or paths property in tsconfig) and a webpack or vite ts paths plugin

So the codemod provides an option for the user to not use subpath imports, and just get relative imports instead in the story files

Here's how it looks like now:

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>

name	before	after	diff	z	%
createSize	0 B	0 B	0 B	-	-
generateSize	78.3 MB	78 MB	-309 kB	0.62	-0.4%
initSize	132 MB	132 MB	-474 kB	0.91	-0.4%
diffSize	54.1 MB	54 MB	-165 kB	0.96	-0.3%
buildSize	7.25 MB	7.2 MB	-48.1 kB	0.44	-0.7%
buildSbAddonsSize	1.87 MB	1.85 MB	-25.5 kB	-0.05	-1.4%
buildSbCommonSize	195 kB	195 kB	0 B	-	0%
buildSbManagerSize	1.88 MB	1.86 MB	-14.1 kB	-0.99	-0.8%
buildSbPreviewSize	0 B	0 B	0 B	-	-
buildStaticSize	0 B	0 B	0 B	-	-
buildPrebuildSize	3.95 MB	3.91 MB	-39.5 kB	-0.42	-1%
buildPreviewSize	3.3 MB	3.29 MB	-8.6 kB	1.19	-0.3%
testBuildSize	0 B	0 B	0 B	-	-
testBuildSbAddonsSize	0 B	0 B	0 B	-	-
testBuildSbCommonSize	0 B	0 B	0 B	-	-
testBuildSbManagerSize	0 B	0 B	0 B	-	-
testBuildSbPreviewSize	0 B	0 B	0 B	-	-
testBuildStaticSize	0 B	0 B	0 B	-	-
testBuildPrebuildSize	0 B	0 B	0 B	-	-
testBuildPreviewSize	0 B	0 B	0 B	-	-

name	before	after	diff	z	%
createTime	7.4s	17.7s	10.3s	0.01	58.4%
generateTime	19.3s	19.3s	-24ms	-0.63	-0.1%
initTime	12.2s	12.2s	93ms	-0.81	0.8%
buildTime	9s	9s	39ms	-0.4	0.4%
testBuildTime	0ms	0ms	0ms	-	-
devPreviewResponsive	5.5s	5.5s	51ms	-0.05	0.9%
devManagerResponsive	4.3s	3.8s	-490ms	-0.25	-12.9%
devManagerHeaderVisible	831ms	1s	218ms	1.06	20.8%
devManagerIndexVisible	867ms	1s	193ms	1	18.2%
devStoryVisibleUncached	3.2s	4.2s	1s	0.66	24.8%
devStoryVisible	869ms	1.1s	236ms	1.06	21.4%
devAutodocsVisible	810ms	914ms	104ms	0.7	11.4%
devMDXVisible	672ms	840ms	168ms	0.62	20%
buildManagerHeaderVisible	1s	752ms	-277ms	0.06	-36.8%
buildManagerIndexVisible	1.1s	753ms	-349ms	0.02	-46.3%
buildStoryVisible	973ms	741ms	-232ms	0.08	-31.3%
buildAutodocsVisible	1s	643ms	-428ms	0.16	-66.6%
buildMDXVisible	805ms	568ms	-237ms	-0.08	-41.7%

Greptile Summary

Based on the provided information, I'll create a concise summary of the key changes in this PR:

Added user prompt and relative path import option to the CSF factories codemod, providing flexibility in how preview configs are imported in stories.

• Added new useSubPathImports option in storyToCsfFactory to support both subpath (#.storybook/preview) and relative path imports
• Modified path calculation logic in story-to-csf-factory.ts to handle relative paths from story files to preview config
• Added conditional imports map configuration in package.json only when subpath imports are chosen
• Added idempotency check in config-to-csf-factory.ts to prevent re-transformation of already converted code
• Improved import detection and handling to properly manage type imports and prevent duplicates

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 4820815.

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

---

☁️ Nx Cloud last updated this comment at 2025-02-05 13:17:42 UTC

[greptile-apps]

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

[storybook-pr-benchmarking]

Package Benchmarks

^{Commit: 04a004b, ran on 5 February 2025 at 12:19:05 UTC}

The following packages have significant changes to their size or dependencies:

@storybook/core

	Before	After	Difference
Dependency count	54	54	0
Self size	19.27 MB	19.10 MB	🎉 -165 KB 🎉
Dependency size	14.43 MB	14.43 MB	0 B
Bundle Size Analyzer	Link	Link

storybook

	Before	After	Difference
Dependency count	55	55	0
Self size	23 KB	23 KB	0 B
Dependency size	33.70 MB	33.54 MB	🎉 -165 KB 🎉
Bundle Size Analyzer	Link	Link

sb

	Before	After	Difference
Dependency count	56	56	0
Self size	1 KB	1 KB	0 B
Dependency size	33.72 MB	33.56 MB	🎉 -165 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/cli

	Before	After	Difference
Dependency count	390	390	0
Self size	530 KB	535 KB	🚨 +5 KB 🚨
Dependency size	75.59 MB	75.43 MB	🎉 -165 KB 🎉
Bundle Size Analyzer	Link	Link

@storybook/codemod

	Before	After	Difference
Dependency count	277	277	0
Self size	612 KB	612 KB	0 B
Dependency size	65.66 MB	65.49 MB	🎉 -165 KB 🎉
Bundle Size Analyzer	Link	Link

create-storybook

	Before	After	Difference
Dependency count	113	113	0
Self size	1.11 MB	1.11 MB	0 B
Dependency size	42.83 MB	42.67 MB	🎉 -165 KB 🎉
Bundle Size Analyzer	Link	Link