CLI: Minor improvements #33180
CLI: Minor improvements #33180
Conversation
…roved command execution
|
Caution Review failedThe pull request is closed. 📝 WalkthroughWalkthroughAdds an abstract getPackageCommand(args: string[]) to JsPackageManager, implements it in NPM/PNPM/Yarn1/Yarn2/BUN proxies, updates AddonVitestService to use the computed package command string in prompts/errors, and makes small CLI text and logger message/color tweaks. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant AV as AddonVitestService
participant PM as JsPackageManager (proxy)
participant UI as CLI Prompt / Logger
rect rgba(230,247,255,0.6)
note right of AV: installPlaywright (display-only change)
AV->>PM: getPackageCommand(playwrightCommand)
PM-->>AV: "<manager-specific> <args...>"
AV->>UI: show prompt/error using computed command string
end
UI-->>AV: user confirms / aborts
alt user confirms
AV->>AV: run existing install flow (unchanged execution)
UI-->>AV: success / error (uses computed command in messages)
else abort/error
UI-->>AV: abort/error (uses computed command in messages)
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
✨ Finishing touches
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
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 (1)
code/core/src/common/js-package-manager/PNPMProxy.ts (1)
76-78: LGTM! Implementation is correct and consistent.The implementation correctly constructs the PNPM exec command string by joining arguments. This follows the same pattern as
getRunCommandand is appropriate for display purposes in prompts and error messages.Optional enhancement: Consider adding shell escaping for arguments that contain spaces or special characters to ensure commands remain valid when users copy and paste them. For example, args with spaces could be wrapped in quotes. However, this is a minor edge case and the current implementation handles typical use cases well.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
code/core/src/cli/AddonVitestService.ts(2 hunks)code/core/src/common/js-package-manager/BUNProxy.ts(1 hunks)code/core/src/common/js-package-manager/JsPackageManager.ts(1 hunks)code/core/src/common/js-package-manager/NPMProxy.ts(1 hunks)code/core/src/common/js-package-manager/PNPMProxy.ts(1 hunks)code/core/src/common/js-package-manager/Yarn1Proxy.ts(1 hunks)code/core/src/common/js-package-manager/Yarn2Proxy.ts(1 hunks)code/core/src/node-logger/logger/colors.ts(1 hunks)code/core/src/telemetry/notify.ts(1 hunks)code/lib/create-storybook/src/commands/UserPreferencesCommand.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Use camelCase for variable and function names
Files:
code/core/src/common/js-package-manager/NPMProxy.tscode/core/src/common/js-package-manager/BUNProxy.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/PNPMProxy.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/core/src/common/js-package-manager/Yarn1Proxy.tscode/core/src/cli/AddonVitestService.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/telemetry/notify.ts
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx}: Enable TypeScript strict mode
Export functions from modules for testing purposes
Files:
code/core/src/common/js-package-manager/NPMProxy.tscode/core/src/common/js-package-manager/BUNProxy.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/PNPMProxy.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/core/src/common/js-package-manager/Yarn1Proxy.tscode/core/src/cli/AddonVitestService.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/telemetry/notify.ts
**/*.{ts,tsx,js,jsx,json,html,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
**/*.{ts,tsx,js,jsx,json,html,mjs}: Use ESLint and Prettier for code style enforcement
Run 'yarn prettier --write ' to format code after making changes
Run 'yarn lint:js:cmd ' to check for ESLint issues after making changes
Files:
code/core/src/common/js-package-manager/NPMProxy.tscode/core/src/common/js-package-manager/BUNProxy.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/PNPMProxy.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/core/src/common/js-package-manager/Yarn1Proxy.tscode/core/src/cli/AddonVitestService.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/telemetry/notify.ts
code/**/!(*.test).{ts,tsx,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
code/**/!(*.test).{ts,tsx,js,mjs}: Use 'logger' from 'storybook/internal/node-logger' for server-side (Node.js) logging, not console.log/console.warn/console.error
Use 'logger' from 'storybook/internal/client-logger' for client-side (browser) logging, not console.log/console.warn/console.error
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/core/src/common/js-package-manager/NPMProxy.tscode/core/src/common/js-package-manager/BUNProxy.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/PNPMProxy.tscode/lib/create-storybook/src/commands/UserPreferencesCommand.tscode/core/src/common/js-package-manager/Yarn1Proxy.tscode/core/src/cli/AddonVitestService.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/telemetry/notify.ts
🧠 Learnings (2)
📚 Learning: 2025-11-05T09:38:47.712Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.
Applied to files:
code/lib/create-storybook/src/commands/UserPreferencesCommand.ts
📚 Learning: 2025-11-05T09:36:55.944Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Tabs/Tabs.stories.tsx:222-227
Timestamp: 2025-11-05T09:36:55.944Z
Learning: Repo: storybookjs/storybook PR: 32458 — In code/core/src/components/components/Button/Button.tsx (React/TypeScript), ButtonProps includes ariaLabel?: string | false and the component maps it to the DOM aria-label. Convention: ariaLabel is mandatory on all Button usages — provide a descriptive string for icon-only buttons; set ariaLabel=false when the button’s children already serve as the accessible name. Do not suggest using a raw aria-label prop on Button call sites.
Applied to files:
code/lib/create-storybook/src/commands/UserPreferencesCommand.ts
🧬 Code graph analysis (1)
code/core/src/cli/AddonVitestService.ts (2)
scripts/utils/tools.ts (1)
dedent(119-119)code/core/src/node-logger/logger/colors.ts (1)
CLI_COLORS(3-14)
⏰ 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). (3)
- GitHub Check: normal
- GitHub Check: Core Unit Tests, windows-latest
- GitHub Check: get-parameters
🔇 Additional comments (9)
code/core/src/common/js-package-manager/NPMProxy.ts (1)
101-103: Standardized npm getPackageCommand looks correctThis helper cleanly mirrors the existing
runPackageCommandbehavior and will render commands likenpx playwright install chromium --with-depscorrectly for callers such asAddonVitestService.code/lib/create-storybook/src/commands/UserPreferencesCommand.ts (1)
157-160: Install-type label wording change is safeThis is a purely textual tweak to the recommended option label; logic and telemetry behavior remain unchanged.
code/core/src/node-logger/logger/colors.ts (1)
7-8: Info color simplification to cyan is consistent and clearUsing cyan for
CLI_COLORS.infoon all platforms, with a clarifying comment, is a reasonable UX choice and keeps behavior consistent withcta.code/core/src/telemetry/notify.ts (1)
21-23: Telemetry notice wording simplification preserves behaviorThe new single-line message keeps the same meaning and one-time notification logic; only formatting/phrasing changed.
code/core/src/common/js-package-manager/BUNProxy.ts (1)
90-92: bun getPackageCommand aligns with existing bunx executionThis helper constructs
bunxcommands consistently withrunPackageCommand, so displayed instructions will match the actual command being run.code/core/src/common/js-package-manager/Yarn1Proxy.ts (1)
53-56: Yarn 1 getPackageCommand correctly mirrors exec invocationThe helper splits the first token as the binary and the rest as forwarded args, matching
runPackageCommand’syarn exec <cmd> -- <args>pattern so users see the exact command being executed.code/core/src/cli/AddonVitestService.ts (1)
120-150: Using getPackageCommand removes hard-coded npx and respects package managerDeriving
playwrightCommandStringfromthis.packageManager.getPackageCommand(playwrightCommand)ensures the instructions and error message reflect the actual command for each package manager (npm, pnpm, yarn, bun), while keeping the execution path unchanged. The spinner intro copy change is minor and remains clear.code/core/src/common/js-package-manager/JsPackageManager.ts (2)
104-105: LGTM! Comment clarification is helpful.The updated comment clarifies that
getRunCommandreturns a string suitable for display purposes, which helps distinguish it from execution methods.
107-108: LGTM! Well-designed interface addition.The new abstract method provides a clean way to generate display strings for package binary execution commands. The signature is clear and the comment accurately describes its purpose.
|
View your CI Pipeline Execution ↗ for commit f547a64
☁️ Nx Cloud last updated this comment at |
valentinpalkovic
changed the title
Closes #
What I did
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake 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/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
Bug Fixes
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.