CLI: Prompt for framework when project type cannot be detected#35373
CLI: Prompt for framework when project type cannot be detected#35373MahinAnowar wants to merge 1 commit into
Conversation
|
📝 WalkthroughWalkthroughProject type detection for undetected frameworks moved from ChangesUndetected Project Type Handling
Estimated code review effort: 2 (Simple) | ~12 minutes Sequence Diagram(s)sequenceDiagram
participant User
participant ProjectDetectionCommand
participant ProjectTypeService
ProjectDetectionCommand->>ProjectTypeService: autoDetectProjectType()
ProjectTypeService-->>ProjectDetectionCommand: ProjectType.UNDETECTED
ProjectDetectionCommand->>ProjectDetectionCommand: promptUndetectedProjectType()
alt non-interactive (--yes)
ProjectDetectionCommand->>ProjectDetectionCommand: throw HandledError
else interactive
ProjectDetectionCommand->>User: prompt.select(install HTML / choose framework / cancel)
User-->>ProjectDetectionCommand: selection
alt cancel or no selection
ProjectDetectionCommand->>ProjectDetectionCommand: throw HandledError
else HTML or framework selected
ProjectDetectionCommand->>ProjectDetectionCommand: proceed with selected ProjectType
end
end
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts (2)
116-119: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winDuplicate "installable types" filter logic.
This filter (
!['undetected','unsupported','nx'].includes(String(t))) duplicates the identical logic already inProjectTypeService.validateProvidedType(Line 168-170 ofProjectTypeService.ts). Extract this into a shared method onProjectTypeService(e.g.getInstallableProjectTypes()) so both call sites stay in sync if the excluded set ever changes.♻️ Proposed refactor
+ getInstallableProjectTypes(): ProjectType[] { + return Object.values(ProjectType).filter( + (t) => !['undetected', 'unsupported', 'nx'].includes(String(t)) + ); + } + async validateProvidedType(projectTypeProvided: ProjectType): Promise<ProjectType> { - // Allow only installable types according to core list - const installable = Object.values(ProjectType).filter( - (t) => !['undetected', 'unsupported', 'nx'].includes(String(t)) - ); + const installable = this.getInstallableProjectTypes(); if (installable.includes(projectTypeProvided)) {if (choice === 'select') { - const installable = Object.values(ProjectType).filter( - (t) => !['undetected', 'unsupported', 'nx'].includes(String(t)) - ); + const installable = this.projectTypeService.getInstallableProjectTypes(); const manualType = await prompt.select(🤖 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/commands/ProjectDetectionCommand.ts` around lines 116 - 119, The installable-types filter in ProjectDetectionCommand is duplicated and should be centralized. Move the exclusion logic from the local Object.values(ProjectType).filter(...) usage into a shared ProjectTypeService helper such as getInstallableProjectTypes(), then update both ProjectDetectionCommand and ProjectTypeService.validateProvidedType to use that shared method so the excluded project types stay consistent.
120-124: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winRaw enum values used as prompt labels.
label: String(t)will render internal enum values (e.g.react_native,sveltekit,web_components) verbatim in the CLI prompt, whereaspromptReactNativeVariantabove uses hand-crafted, capitalized labels withpicocolors.bold. Consider a small display-name map for consistency with the rest of the CLI's presentation quality.🤖 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/commands/ProjectDetectionCommand.ts` around lines 120 - 124, The prompt in ProjectDetectionCommand is using raw enum strings as visible labels, so replace String(t) in the prompt.select options with a small display-name mapping that formats framework names consistently with the rest of the CLI. Use the existing promptReactNativeVariant approach as the reference for how labels should be human-friendly and styled, and keep the underlying value unchanged while only improving the displayed label.
🤖 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 46-51: The React Native variant prompt in ProjectDetectionCommand
is checking the original detected value instead of the updated projectType
selected by the user. Update the conditional in the project detection flow so
the React Native variant check uses projectType after
promptUndetectedProjectType() may have changed it, while keeping the existing
yes-option guard. This fix should be applied in ProjectDetectionCommand where
promptUndetectedProjectType() and promptReactNativeVariant() are used.
---
Nitpick comments:
In `@code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts`:
- Around line 116-119: The installable-types filter in ProjectDetectionCommand
is duplicated and should be centralized. Move the exclusion logic from the local
Object.values(ProjectType).filter(...) usage into a shared ProjectTypeService
helper such as getInstallableProjectTypes(), then update both
ProjectDetectionCommand and ProjectTypeService.validateProvidedType to use that
shared method so the excluded project types stay consistent.
- Around line 120-124: The prompt in ProjectDetectionCommand is using raw enum
strings as visible labels, so replace String(t) in the prompt.select options
with a small display-name mapping that formats framework names consistently with
the rest of the CLI. Use the existing promptReactNativeVariant approach as the
reference for how labels should be human-friendly and styled, and keep the
underlying value unchanged while only improving the displayed label.
🪄 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: 47348798-2ee9-4678-95db-b310d35f77db
📒 Files selected for processing (4)
code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tscode/lib/create-storybook/src/commands/ProjectDetectionCommand.tscode/lib/create-storybook/src/services/ProjectTypeService.test.tscode/lib/create-storybook/src/services/ProjectTypeService.ts
| if (detected === ProjectType.UNDETECTED) { | ||
| projectType = await this.promptUndetectedProjectType(); | ||
| } | ||
| if (detected === ProjectType.REACT_NATIVE && !this.options.yes) { | ||
| projectType = await this.promptReactNativeVariant(); | ||
| } |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant file and surrounding symbols.
ast-grep outline code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts --view expanded
# Show the relevant section with line numbers.
sed -n '1,220p' code/lib/create-storybook/src/commands/ProjectDetectionCommand.ts
# Find the project-type prompt logic and enum values used by the command.
rg -n "promptUndetectedProjectType|promptReactNativeVariant|ProjectType.REACT_NATIVE|REACT_NATIVE_WEB|REACT_NATIVE_AND_RNW|Choose a framework to install|undetected|unsupported|nx" code/lib/create-storybook/src -SRepository: storybookjs/storybook
Length of output: 15410
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '160,260p' code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.ts
sed -n '1,260p' code/lib/create-storybook/src/services/ProjectTypeService.tsRepository: storybookjs/storybook
Length of output: 12891
🏁 Script executed:
#!/bin/bash
set -euo pipefail
sed -n '1,160p' code/lib/create-storybook/src/commands/ProjectDetectionCommand.test.tsRepository: storybookjs/storybook
Length of output: 6164
Use projectType for the React Native variant check
The undetected/manual select flow can return ProjectType.REACT_NATIVE, but this branch still checks the stale detected value, so the variant prompt is skipped there.
🤖 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/commands/ProjectDetectionCommand.ts` around
lines 46 - 51, The React Native variant prompt in ProjectDetectionCommand is
checking the original detected value instead of the updated projectType selected
by the user. Update the conditional in the project detection flow so the React
Native variant check uses projectType after promptUndetectedProjectType() may
have changed it, while keeping the existing yes-option guard. This fix should be
applied in ProjectDetectionCommand where promptUndetectedProjectType() and
promptReactNativeVariant() are used.
1 participant
Closes #35045
What I did
When
create storybookcan't detect a supported framework it previously hard-failed with an error that never mentioned the--typeflag — leaving vanilla-HTML / Web Components users (and monorepo users in the wrong folder) stuck.Following the fix shape prescribed by @Sidnioulz in the issue:
ProjectTypeService.autoDetectProjectTypenow returnsProjectType.UNDETECTEDinstead of logging + throwing (its "prompting handled by command layer" comment is now actually true; the NX error path is unchanged).ProjectDetectionCommandhandlesUNDETECTED: it prints the education message (now mentioning--type, e.g.--type html) and, when interactive, prompts:--yes) keep the previous fail-with-error behavior, without prompting.The prompt mirrors the existing
promptReactNativeVariantpattern, includingcreatePromptCancelOptionstelemetry.How to test
Automated: 4 new cases in
ProjectDetectionCommand.test.ts(HTML selection, framework selection, cancel, non-interactive fail) + updatedProjectTypeService.test.tsexpectations. All 313 create-storybook package tests pass; the new tests fail without the source change.Manual:
mkdir empty-dir && cd empty-dir && npm init -ynpx create-storybook@latest(built from this branch)--type, followed by the "How would you like to proceed?" prompt; selecting HTML proceeds with the HTML framework install; selecting Cancel exits non-zero.npx create-storybook@latest --yesin the same dir still fails immediately with a non-zero exit (no prompt).Checklist
--type htmltracked separately per the issue)Summary by CodeRabbit
New Features
Bug Fixes