CLI: Make relative imports default in csf-factories codemod

[Copilot]

Problem

The csf-factories automigration had several issues that needed to be addressed:

1. Incorrect documentation links - The migration was pointing users to outdated documentation URLs (csf-factories) instead of the correct Storybook 10 documentation (csf-next)
2. Wrong recommended option - Subpath imports was marked as "recommended" when relative imports should be the default
3. Wrong default selection - Subpath imports was pre-selected by default
4. Unbalanced messaging - The text overly promoted subpath imports without adequately noting compatibility concerns

Changes

Updated code/lib/cli-storybook/src/codemod/csf-factories.ts, code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.ts, and tests:

1. Fixed Documentation Links

• Updated to point to correct Storybook 10 docs: https://storybook.js.org/docs/10/api/csf/csf-next#subpath-imports

2. Made Relative Imports the Default

• Changed default value: useSubPathImports = true (with inverted logic, this means relative imports)
• Reordered prompt options so "Relative imports" appears first

3. Inverted Boolean Logic for Better Semantics

• Now useSubPathImports = true means use relative imports (the default)
• useSubPathImports = false means use subpath imports
• Updated helper function logic: if (useSubPathImports) calculates relative paths
• Updated all test expectations to match the inverted logic

4. Improved Messaging and Presentation

• Revised main description to provide balanced information about both import types
• Text now states: "The CSF Factories format can benefit from using absolute imports..." followed by "However, we cannot broadly recommend it for all projects..."
• Removed "recommended" and "suitable for mono repos" labels from options for neutral presentation
• Updated prompt message to: "Which import type would you like to use for your story files?"
• Option labels now show full import examples: "Relative imports (import preview from '../../.storybook/preview')" and "Subpath imports (import preview from '#.storybook/preview')"

Result

Users running the csf-factories migration will now:

• See the correct documentation links for Storybook 10
• Have relative imports pre-selected by default
• Get balanced information about both import types without strong recommendations
• See clear examples of what each import type looks like
• Understand the benefits and limitations of subpath imports
• Still have the option to choose subpath imports if appropriate for their project

This ensures a better migration experience that aligns with the updated documentation and provides users with the information they need to make an informed choice.

Fixes #29836

Original prompt

---

This section details on the original issue you should resolve

<issue_title>[Bug]: SB10 - The csf-factories automigration needs slight changes</issue_title>
<issue_description>### Describe the bug

Noticed a few minor issues with the csf-factories automigration.

• The relative imports option should be the recommended option and it should be selected, by default
• The link here should be https://storybook.js.org/docs/10/api/csf/csf-next#subpath-imports
• The link at the end should be https://storybook.js.org/docs/10/api/csf/csf-next

Reproduction link

Reproduction steps

No response

System

-

Additional context

No response</issue_description>

Comments on the Issue (you are @copilot in this section)

Fixes #32609

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

Summary by CodeRabbit

• Refactor

  • Clarified CLI prompt for selecting import type with more specific wording.
  • Updated option labels to “Relative imports” and “Subpath imports,” including concrete path examples.
  • Revised guidance to reference absolute preview config imports and aligned surrounding messages.

• Documentation

  • Updated in-CLI links and references to point to v10 documentation for CSF.

• Tests

  • Adjusted test expectations to match revised import-type options and resulting import paths.

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

📝 Walkthrough

Walkthrough

Updated CLI codemod messaging and options related to import types (relative vs subpath) and documentation links to v10. Adjusted test expectations by toggling useSubPathImports flags to reflect the new guidance. No control flow or exported API changes.

Changes

Cohort / File(s)	Change summary
Codemod prompts and messaging code/lib/cli-storybook/src/codemod/csf-factories.ts	Revised logBox copy to emphasize absolute previewConfigPath and v10 docs; updated prompt question; reworked import-type option labels and order (Relative vs Subpath), with updated example paths; updated post-codemod doc URL; minor text alignment; no logic changes.
Codemod tests: import resolution expectations code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts	Flipped useSubPathImports flags in multiple test cases to match new guidance; updates affect expected import paths in snapshots; no other test logic modified.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Cleanup: Remove duplicated entrypoints in core #32507 — Also modifies codemods/import resolution for internal vs public module paths, overlapping with this PR’s changes to import-type guidance and tests.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch copilot/fix-f2bf7ddc-5b58-455d-a384-3b65990421aa

---

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

[yannbf]

@copilot make the suggested changes and resolve the comments after

[yannbf]

@copilot I need you to update the text and the options again.

The CSF Factories format can benefit from using absolute imports of your .storybook/preview.js|ts file. We can configure that for you, using subpath imports (a node standard), by adjusting the imports property of your package.json.
However, we cannot broadly recommend it for all projects, because it might not work in some monorepo setups or if you have an outdated tsconfig, use custom paths, or have type alias plugins configured in your project. You can always rerun this codemod and select another option to update your code later.
More info: https://storybook.js.org/docs/10/api/csf/csf-next#subpath-imports


Which import type would you like to use for your story files?
Relative imports (import preview from '../../.storybook/preview')
Subpath imports (import preview from '#.storybook/preview')

[Copilot]

@copilot I need you to update the text and the options again.

...

Updated the text and options as requested in commit 7f79e3a. Changes include:

• Revised main description to emphasize benefits of subpath imports while noting they cannot be broadly recommended
• Removed "recommended" labels from options
• Updated prompt message to "Which import type would you like to use for your story files?"
• Simplified option labels to show full import examples
• Removed ?ref=upgrade from the info link

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 5065e09

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

---

☁️ Nx Cloud last updated this comment at 2025-10-15 10:59:00 UTC

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

code/lib/cli-storybook/src/codemod/csf-factories.ts (1)

91-101: Critical: Condition logic is inverted.

The condition at line 91 adds an imports map when useSubPathImports is true. However, with the inverted semantics (where true means relative imports), this adds the imports map when the user chooses relative imports—but the imports map (#*) is only needed for subpath imports.

This causes the package.json to be modified unnecessarily when users select relative imports, and NOT modified when they actually need it for subpath imports.

Apply this diff to fix the inverted condition:

-    if (useSubPathImports && !packageJson.imports?.['#*']) {
+    if (!useSubPathImports && !packageJson.imports?.['#*']) {
       logger.log(
         `🗺️ Adding imports map in ${picocolors.cyan(packageManager.primaryPackageJson.packageJsonPath)}`
       );

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between ee0c7a3 and d9d66e5.

📒 Files selected for processing (2)

• code/lib/cli-storybook/src/codemod/csf-factories.ts (2 hunks)
• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts (3 hunks)

🧰 Additional context used

📓 Path-based instructions (7)

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.{js,jsx,json,html,ts,tsx,mjs}: Run Prettier formatting on changed files before committing
Run ESLint on changed files and fix all errors/warnings before committing (use yarn lint:js:cmd <file>)

Files:

• code/lib/cli-storybook/src/codemod/csf-factories.ts
• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Export functions from modules when they need to be unit-tested

Files:

• code/lib/cli-storybook/src/codemod/csf-factories.ts
• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

code/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

In application code, use Storybook loggers instead of console.* (client code: storybook/internal/client-logger; server code: storybook/internal/node-logger)

Files:

• code/lib/cli-storybook/src/codemod/csf-factories.ts
• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Do not use console.log, console.warn, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

• code/lib/cli-storybook/src/codemod/csf-factories.ts
• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

code/**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

code/**/*.{test,spec}.{ts,tsx}: Place all test files under the code/ directory
Name test files as *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx

Files:

• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

**/*.test.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.cursor/rules/spy-mocking.mdc)

**/*.test.{ts,tsx,js,jsx}: Use vi.mock() with the spy: true option for all package and file mocks in Vitest tests
Place all mocks at the top of the test file before any test cases
Use vi.mocked() to type and access mocked functions
Implement mock behaviors in beforeEach blocks
Mock all required dependencies that the test subject uses
Mock implementations should be placed in beforeEach blocks
Each mock implementation should return a Promise for async functions
Mock implementations should match the expected return type of the original function
Use vi.mocked() to access and implement mock behaviors
Mock all required properties and methods that the test subject uses
Avoid direct function mocking without vi.mocked()
Avoid mock implementations outside of beforeEach blocks
Avoid mocking without the spy: true option
Avoid inline mock implementations within test cases
Avoid mocking only a subset of required dependencies
Mock at the highest level of abstraction needed
Keep mock implementations simple and focused
Use type-safe mocking with vi.mocked()
Document complex mock behaviors
Group related mocks together

Files:

• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

**/*.@(test|spec).{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

**/*.@(test|spec).{ts,tsx,js,jsx}: Unit tests should import and execute the functions under test rather than only asserting on syntax patterns
Mock external dependencies in tests using vi.mock() (e.g., filesystem, loggers)

Files:

• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

🧠 Learnings (2)

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to test-storybooks/** : Maintain test Storybook configurations under `test-storybooks/` for E2E and visual testing scenarios

Applied to files:

• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

📚 Learning: 2025-10-13T13:33:14.659Z

Learnt from: CR
PR: storybookjs/storybook#0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/.storybook/** : Place internal UI Storybook configuration in `code/.storybook/` and maintain it there

Applied to files:

• code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: normal
• GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (2)

code/lib/cli-storybook/src/codemod/helpers/story-to-csf-factory.test.ts (1)

29-29: Test flag inversions correctly reflect the new semantics.

The boolean flag flips in the test expectations are consistent with the inverted semantics described in the PR objectives, where useSubPathImports: true now generates relative imports and useSubPathImports: false generates subpath imports. The test at lines 348-398 explicitly validates this behavior:

• useSubPathImports: false → output is '#.storybook/preview' (subpath)
• useSubPathImports: true → output is '../../preview' (relative)

While the variable name useSubPathImports is now counterintuitive, the tests correctly enforce the intended behavior.

Also applies to: 364-364, 386-386, 348-398

code/lib/cli-storybook/src/codemod/csf-factories.ts (1)

70-74: LGTM on messaging and documentation updates.

The updated user guidance, prompt message, and documentation links correctly reference the v10 CSF next docs and provide balanced information about both import types.

Also applies to: 78-78, 129-129