CLI: Improve package incompatibility detection and warning

[Copilot]

storybook init emits "Detected TypeScript < 4.9 or incompatible tooling" when any bundled version check fails—even if TypeScript is fine and only e.g. Prettier (from a monorepo root) is below threshold. Additionally, canary eslint-plugin-storybook versions (0.0.0-pr-*) fail >=0.6.8 since the numeric part is 0.0.0.

Manual testing

Changes

• Clean separation of concerns: detectLanguage() is now a pure detection function returning SupportedLanguage. A new detectIncompatiblePackageVersions() method separately checks installed tooling versions against TypeScript compatibility constraints and returns string[] with specific failure reasons. The "Populating with JavaScript examples" warning is in ProjectDetectionCommand, where the language result is actually used:

  Populating with JavaScript examples due to incompatible package versions:
    - prettier 2.6.2 is below 2.8.0
  

• Canary version bypass: skip the eslint-plugin-storybook version gate for 0.0.0-* versions (Storybook PR/canary builds where the numeric version is meaningless)
• Tests: detectLanguage tests assert plain language return values; detectIncompatiblePackageVersions tests cover compatible, incompatible, single-tool failure, and canary bypass scenarios; ProjectDetectionCommand tests verify the warning is logged by the caller

Summary by CodeRabbit

Release Notes

• Bug Fixes
  • Improved package compatibility validation during project setup with comprehensive checks for TypeScript, Prettier, Babel plugins, ESLint parsers, and Storybook tooling versions. When version incompatibilities are detected, enhanced warning messages now clearly notify users that JavaScript examples will be used instead, providing better transparency about the setup process and fallback behavior.

[yannbf]

@copilot the message is still a bit misleading because it says "populating javascript examples" but the function is just detecting the language type. The javascript explanation should me moved up to where it makes the most sense.

[Copilot]

@copilot the message is still a bit misleading because it says "populating javascript examples" but the function is just detecting the language type. The javascript explanation should me moved up to w...

Updated the warning to "Detected incompatible package versions, falling back to JavaScript" — it no longer mentions "examples" since detectLanguage() only determines the language type. Commit: bc15365

[yannbf]

@copilot don't you think that function is supposed to detect language and this message about fallback to javascript is in the wrong place?

[Copilot]

@copilot don't you think that function is supposed to detect language and this message about fallback to javascript is in the wrong place?

Good call. detectLanguage() now returns { language, incompatibleReasons } without logging anything — it's a pure detection function. The "Populating with JavaScript examples" warning is now in ProjectDetectionCommand.detectAndReportLanguage(), which is where the language result is actually used. Commit: f7fcfb3

[yannbf]

@copilot the language detection should be clean, and there should be a separate function for incompatibility detection

[Copilot]

@copilot the language detection should be clean, and there should be a separate function for incompatibility detection

Separated into two clean functions: detectLanguage() returns plain SupportedLanguage and detectIncompatiblePackageVersions() returns string[] with specific failure reasons. Each has its own test suite. Commit: 8de2130

[coderabbitai]

📝 Walkthrough

Walkthrough

ProjectTypeService refactors language detection by extracting package compatibility checking into a reusable detectIncompatiblePackageVersions() method that returns incompatibility reasons. ProjectDetectionCommand integrates the check via a new detectAndReportLanguage() helper that logs warnings when JavaScript fallback occurs. Both components and their tests are updated accordingly.

Changes

Language Detection & Package Compatibility Refactor

Layer / File(s)	Summary
Service Incompatibility Detection code/lib/create-storybook/src/services/ProjectTypeService.ts	detectIncompatiblePackageVersions() checks installed versions of TypeScript, Prettier, @babel/plugin-transform-typescript, @typescript-eslint/parser, and eslint-plugin-storybook against minimum required ranges, treating canary versions of eslint-plugin-storybook (starting with 0.0.0-) as compatible.
Language Detection Refactor code/lib/create-storybook/src/services/ProjectTypeService.ts	detectLanguage() delegates TypeScript compatibility to detectIncompatiblePackageVersions(); sets SupportedLanguage.TYPESCRIPT only when no incompatibilities are reported. Falls back to tsconfig.json inference for transitive TypeScript setups.
Command Language Detection code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts	execute() uses new detectAndReportLanguage() helper that reports incompatibility warnings (both generic fallback message and specific reasons) when JavaScript is detected due to package version issues.
Import Reordering code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts	SupportedLanguage import reordered after telemetry-related imports.
Service Incompatibility Tests code/lib/create-storybook/src/services/ProjectTypeService.test.ts	detectIncompatiblePackageVersions() tests verify empty results for compatible versions, detailed per-package messages for incompatibilities, single-package reporting, and canary version compatibility.
Service Language Detection Tests code/lib/create-storybook/src/services/ProjectTypeService.test.ts	detectLanguage() tests updated to expect javascript when incompatibilities exist (without logging), added tests for single-tooling incompatibility fallback and canary eslint-plugin-storybook compatibility.
Command Tests code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts	Test suite mocks detectIncompatiblePackageVersions, sets empty incompatibilities by default. New test case verifies fallback to JavaScript with two logger.warn calls (generic and incompatibility-specific).

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~22 minutes

Possibly related PRs

• storybookjs/storybook#34665: Modifies ProjectTypeService detection logic (React Native variant detection in autoDetectProjectType); overlaps with language and compatibility detection refactors in this PR.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

code/lib/create-storybook/src/services/ProjectTypeService.ts (1)

265-267: 💤 Low value

Inconsistent version checking pattern for Prettier.

The Prettier version check uses semver.gte (line 265) while all other package checks use the satisfies helper with range strings. This inconsistency might be intentional, but it's worth verifying.

satisfies(version, '>=2.8.0') would be more consistent with the pattern used for TypeScript, Babel, and ESLint packages.

♻️ Proposed fix for consistency

-    if (prettierVersion && !semver.gte(prettierVersion, '2.8.0')) {
+    if (prettierVersion && !satisfies(prettierVersion, '>=2.8.0')) {
       incompatibleReasons.push(`prettier ${prettierVersion} is below 2.8.0`);
     }

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@code/lib/create-storybook/src/services/ProjectTypeService.ts` around lines
265 - 267, Replace the inconsistent Prettier check that uses semver.gte with the
project's standard satisfies helper: instead of calling
semver.gte(prettierVersion, '2.8.0'), use satisfies(prettierVersion, '>=2.8.0')
when deciding whether to push the incompatibleReasons entry (look for the
prettierVersion variable, the incompatibleReasons array, and the current
semver.gte call inside ProjectTypeService.ts) so the Prettier check matches the
TypeScript/Babel/ESLint pattern.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts`:
- Around line 56-70: The current detectAndReportLanguage implementation logs a
single combined warning, but tests expect two separate logger.warn calls; update
detectAndReportLanguage so when language === SupportedLanguage.JAVASCRIPT and
incompatibleReasons.length > 0 it first calls logger.warn with the generic
message "Populating with JavaScript examples due to incompatible package
versions:" and then calls logger.warn a second time with the formatted list of
reasons (e.g., incompatibleReasons.map(r => `  - ${r}`).join('\n')), leaving all
other logic (projectTypeService.detectLanguage and
projectTypeService.detectIncompatiblePackageVersions) unchanged.

---

Nitpick comments:
In `@code/lib/create-storybook/src/services/ProjectTypeService.ts`:
- Around line 265-267: Replace the inconsistent Prettier check that uses
semver.gte with the project's standard satisfies helper: instead of calling
semver.gte(prettierVersion, '2.8.0'), use satisfies(prettierVersion, '>=2.8.0')
when deciding whether to push the incompatibleReasons entry (look for the
prettierVersion variable, the incompatibleReasons array, and the current
semver.gte call inside ProjectTypeService.ts) so the Prettier check matches the
TypeScript/Babel/ESLint pattern.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 910a0dbd-2550-4852-8d73-13dcc7da3a83

📥 Commits

Reviewing files that changed from the base of the PR and between 4fd4885 and 5e39ead.

📒 Files selected for processing (4)

• code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts
• code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts
• code/lib/create-storybook/src/services/ProjectTypeService.test.ts
• code/lib/create-storybook/src/services/ProjectTypeService.ts