-
-
Notifications
You must be signed in to change notification settings - Fork 9.8k
CLI: Implement design feedback #32984
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
CLI: Implement design feedback #32984
Conversation
…frameworks; update warning message for clarity and exit process on selection.
…s spawn and execa calls for improved consistency and security across the codebase.
…g for improved clarity.
…or improved clarity.
…mplifying execution and logging process.
…d consistency; remove cli-table3 dependency.
…e redundant abort message logging in task execution for clarity.
📝 WalkthroughWalkthroughReplaced many shell-based command invocations with direct command+args or centralized executors, adjusted CLI flag formatting, removed a dependency, narrowed a logger BoxOptions type, removed Changes
Sequence Diagram(s)sequenceDiagram
participant CLI as Caller
participant ExecOld as Executor (old)
participant ExecNew as Executor (new)
participant OS as OS process
rect rgb(250,250,250)
Note over CLI,OS: Old flow — shell-based invocation
CLI->>ExecOld: execute("cmd arg1 arg2", { shell: true, cwd, stdio })
ExecOld->>OS: spawn(shell, ['-c', "cmd arg1 arg2"])
OS->>OS: shell parses string and spawns child process
end
rect rgb(235,250,235)
Note over CLI,OS: New flow — direct execution / centralized
CLI->>ExecNew: execute("cmd", ["arg1","arg2"], { cwd, stdio })
ExecNew->>OS: spawn("cmd", ["arg1","arg2"])
OS->>OS: direct exec of cmd with provided args
end
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (1)
💤 Files with no reviewable changes (1)
⏰ 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)
Comment |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
🧹 Nitpick comments (2)
code/core/src/node-logger/logger/colors.ts (1)
12-12: Consider consistency with picocolors.While the raw ANSI escape sequence is technically correct for the specific RGB color (255, 71, 133), it's inconsistent with the other formatters that use
picocolors. If this specific color is required for branding, consider adding a comment explaining why raw ANSI codes are necessary.If the exact RGB isn't critical, you could potentially use a similar picocolors helper for consistency:
- storybook: (text: string) => `\x1b[38;2;255;71;133m${text}\x1b[39m`, + storybook: picocolors.magenta, // or another close approximationAlternatively, add a comment:
+ // Brand-specific RGB color (255, 71, 133) requires raw ANSI codes storybook: (text: string) => `\x1b[38;2;255;71;133m${text}\x1b[39m`,code/lib/create-storybook/src/initiate.ts (1)
179-193: Consider consolidating npm-specific flag logic.The
--silentflag is added for npm, but then there's separate npm-specific handling later for the--separator. While correct, the logic could be more readable if consolidated.Consider grouping npm-specific logic:
const flags = []; - if (packageManager.type === 'npm') { - flags.push('--silent'); - } - // npm needs extra -- to pass flags to the command // in the case of Angular, we are calling `ng run` which doesn't need the extra `--` - if (packageManager.type === 'npm' && projectType !== ProjectType.ANGULAR) { - flags.push('--'); + if (packageManager.type === 'npm') { + flags.push('--silent'); + if (projectType !== ProjectType.ANGULAR) { + flags.push('--'); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
code/yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (24)
code/addons/themes/src/postinstall.ts(1 hunks)code/addons/vitest/src/vitest-plugin/global-setup.ts(0 hunks)code/core/package.json(0 hunks)code/core/src/bin/dispatcher.ts(1 hunks)code/core/src/builder-manager/index.ts(1 hunks)code/core/src/cli/AddonVitestService.test.ts(1 hunks)code/core/src/cli/AddonVitestService.ts(1 hunks)code/core/src/common/js-package-manager/JsPackageManagerFactory.ts(2 hunks)code/core/src/common/utils/command.ts(0 hunks)code/core/src/core-server/dev-server.ts(1 hunks)code/core/src/core-server/utils/output-startup-information.ts(2 hunks)code/core/src/core-server/utils/server-statics.ts(1 hunks)code/core/src/node-logger/logger/colors.ts(1 hunks)code/core/src/node-logger/logger/logger.ts(1 hunks)code/core/src/node-logger/tasks.ts(0 hunks)code/core/src/node-logger/wrap-utils.ts(2 hunks)code/core/src/telemetry/exec-command-count-lines.ts(1 hunks)code/core/src/telemetry/notify.ts(1 hunks)code/lib/cli-storybook/src/upgrade.ts(1 hunks)code/lib/codemod/src/index.ts(0 hunks)code/lib/create-storybook/src/commands/FinalizationCommand.test.ts(0 hunks)code/lib/create-storybook/src/commands/FinalizationCommand.ts(2 hunks)code/lib/create-storybook/src/initiate.ts(2 hunks)code/lib/create-storybook/src/scaffold-new-project.ts(1 hunks)
💤 Files with no reviewable changes (6)
- code/core/src/node-logger/tasks.ts
- code/addons/vitest/src/vitest-plugin/global-setup.ts
- code/core/src/common/utils/command.ts
- code/lib/codemod/src/index.ts
- code/core/package.json
- code/lib/create-storybook/src/commands/FinalizationCommand.test.ts
🧰 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 (useyarn lint:js:cmd <file>)
Files:
code/core/src/core-server/utils/server-statics.tscode/core/src/core-server/dev-server.tscode/lib/cli-storybook/src/upgrade.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/JsPackageManagerFactory.tscode/core/src/bin/dispatcher.tscode/core/src/telemetry/notify.tscode/core/src/cli/AddonVitestService.tscode/core/src/builder-manager/index.tscode/core/src/core-server/utils/output-startup-information.tscode/core/src/telemetry/exec-command-count-lines.tscode/core/src/node-logger/wrap-utils.tscode/lib/create-storybook/src/scaffold-new-project.tscode/addons/themes/src/postinstall.tscode/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/logger/logger.tscode/lib/create-storybook/src/commands/FinalizationCommand.tscode/lib/create-storybook/src/initiate.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/core/src/core-server/utils/server-statics.tscode/core/src/core-server/dev-server.tscode/lib/cli-storybook/src/upgrade.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/JsPackageManagerFactory.tscode/core/src/bin/dispatcher.tscode/core/src/telemetry/notify.tscode/core/src/cli/AddonVitestService.tscode/core/src/builder-manager/index.tscode/core/src/core-server/utils/output-startup-information.tscode/core/src/telemetry/exec-command-count-lines.tscode/core/src/node-logger/wrap-utils.tscode/lib/create-storybook/src/scaffold-new-project.tscode/addons/themes/src/postinstall.tscode/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/logger/logger.tscode/lib/create-storybook/src/commands/FinalizationCommand.tscode/lib/create-storybook/src/initiate.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/core/src/core-server/utils/server-statics.tscode/core/src/core-server/dev-server.tscode/lib/cli-storybook/src/upgrade.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/JsPackageManagerFactory.tscode/core/src/bin/dispatcher.tscode/core/src/telemetry/notify.tscode/core/src/cli/AddonVitestService.tscode/core/src/builder-manager/index.tscode/core/src/core-server/utils/output-startup-information.tscode/core/src/telemetry/exec-command-count-lines.tscode/core/src/node-logger/wrap-utils.tscode/lib/create-storybook/src/scaffold-new-project.tscode/addons/themes/src/postinstall.tscode/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/logger/logger.tscode/lib/create-storybook/src/commands/FinalizationCommand.tscode/lib/create-storybook/src/initiate.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/core-server/utils/server-statics.tscode/core/src/core-server/dev-server.tscode/lib/cli-storybook/src/upgrade.tscode/core/src/node-logger/logger/colors.tscode/core/src/common/js-package-manager/JsPackageManagerFactory.tscode/core/src/bin/dispatcher.tscode/core/src/telemetry/notify.tscode/core/src/cli/AddonVitestService.tscode/core/src/builder-manager/index.tscode/core/src/core-server/utils/output-startup-information.tscode/core/src/telemetry/exec-command-count-lines.tscode/core/src/node-logger/wrap-utils.tscode/lib/create-storybook/src/scaffold-new-project.tscode/addons/themes/src/postinstall.tscode/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/logger/logger.tscode/lib/create-storybook/src/commands/FinalizationCommand.tscode/lib/create-storybook/src/initiate.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/core/src/cli/AddonVitestService.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/core/src/cli/AddonVitestService.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 usingvi.mock()(e.g., filesystem, loggers)
Files:
code/core/src/cli/AddonVitestService.test.ts
🧠 Learnings (7)
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.
Applied to files:
code/lib/cli-storybook/src/upgrade.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/lib/cli-storybook/src/upgrade.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 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/upgrade.ts
📚 Learning: 2025-09-17T07:31:04.432Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32484
File: code/core/package.json:326-326
Timestamp: 2025-09-17T07:31:04.432Z
Learning: In Storybook's core package, dependencies like `open` are bundled into the final distribution during the build process, so they should remain in devDependencies rather than being moved to dependencies. End users don't need these packages as separate runtime dependencies since they're included in the bundled code.
Applied to files:
code/lib/cli-storybook/src/upgrade.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/core/src/node-logger/logger/colors.tscode/core/src/core-server/utils/output-startup-information.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/core/src/node-logger/logger/colors.tscode/core/src/core-server/utils/output-startup-information.ts
📚 Learning: 2025-11-05T09:38:47.694Z
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.694Z
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/initiate.ts
🧬 Code graph analysis (6)
code/core/src/common/js-package-manager/JsPackageManagerFactory.ts (2)
code/core/src/common/utils/command.ts (1)
executeCommandSync(48-59)code/core/src/common/js-package-manager/JsPackageManager.ts (1)
COMMON_ENV_VARS(26-30)
code/core/src/core-server/utils/output-startup-information.ts (2)
scripts/utils/tools.ts (1)
dedent(118-118)code/core/src/node-logger/logger/colors.ts (1)
CLI_COLORS(3-13)
code/core/src/node-logger/wrap-utils.ts (1)
scripts/utils/tools.ts (1)
process(114-114)
code/lib/create-storybook/src/scaffold-new-project.ts (1)
code/core/src/node-logger/index.ts (1)
logger(50-75)
code/lib/create-storybook/src/commands/FinalizationCommand.ts (2)
code/core/src/telemetry/error-collector.ts (1)
ErrorCollector(2-22)code/core/src/node-logger/index.ts (1)
logger(50-75)
code/lib/create-storybook/src/initiate.ts (1)
code/core/src/node-logger/index.ts (1)
logger(50-75)
⏰ 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 (20)
code/core/src/builder-manager/index.ts (1)
143-145: ✓ Logger usage is correct; message change looks good.The log message is appropriately streamlined ("Starting..." vs. "Starting manager.."), and the code correctly uses the server-side logger from
storybook/internal/node-loggerper coding guidelines. The conditional check ensures the message only logs when not in quiet mode.code/core/src/core-server/dev-server.ts (1)
97-97: LGTM! Log level adjustment reduces default verbosity.The change from
infotodebugaligns with the PR's broader goal of reducing log verbosity during startup.code/core/src/core-server/utils/server-statics.ts (1)
122-124: LGTM! Log level adjustment for static file serving.Reducing this to debug level is appropriate, as static file serving is typically infrastructure-level information that doesn't need to be surfaced at the info level.
code/core/src/cli/AddonVitestService.ts (1)
146-146: LGTM! Good UX improvement with abort instruction.Adding the abort hint improves user experience by making the cancellation capability discoverable. This aligns well with the
abortable: trueoption on Line 149.code/core/src/cli/AddonVitestService.test.ts (1)
382-382: LGTM! Test expectation correctly updated.The test assertion properly reflects the updated intro message from the implementation.
code/core/src/node-logger/wrap-utils.ts (2)
32-34: LGTM! Simplified environment variable access.Switching from shell command execution to direct
process.envaccess is cleaner, faster, and removes an unnecessary dependency on shell execution.
63-66: LGTM! Error handling updated appropriately.The catch block and comment correctly reflect the new direct environment access pattern, removing references to shell command execution.
code/core/src/common/js-package-manager/JsPackageManagerFactory.ts (4)
197-212: LGTM! Well-refactored command execution.The refactoring to use
executeCommandSynccentralizes command execution logic and improves consistency. The try/catch pattern with boolean returns is appropriate for this detection use case.
214-229: LGTM! Consistent implementation.The
hasBunfunction follows the same clean pattern ashasNPM, maintaining consistency across the codebase.
231-247: LGTM! Consistent PNPM detection.The implementation maintains consistency with other package manager detection functions.
249-264: LGTM! Version detection properly refactored.The Yarn version detection correctly uses
executeCommandSyncand preserves the version parsing logic. The try/catch with undefined fallback is appropriate.code/lib/create-storybook/src/commands/FinalizationCommand.ts (1)
11-14: LGTM! Clean API simplification.The removal of
selectedFeaturesfrom theExecuteFinalizationParamstype and all related method signatures is consistent and correct. All call sites have been properly updated to match the new signatures.Also applies to: 28-39, 66-91
code/core/src/telemetry/notify.ts (1)
20-25: LGTM! Simplified message formatting.Removing the colorized prefix streamlines the message while preserving all essential content.
code/core/src/bin/dispatcher.ts (1)
73-76: LGTM! Safer command execution.Removing
shell: trueimproves security by avoiding shell interpretation and potential command injection vulnerabilities. The command array is properly constructed with the executable and arguments separated.code/core/src/telemetry/exec-command-count-lines.ts (1)
17-17: LGTM! Aligned with security improvements.Removing
shell: trueis consistent with the broader PR effort to avoid shell interpretation during command execution, improving security.code/lib/create-storybook/src/initiate.ts (2)
106-109: LGTM! Aligned with FinalizationCommand changes.The removal of
selectedFeaturesfrom theexecuteFinalizationcall is consistent with the updated API signature inFinalizationCommand.ts.
150-150: Verify the empty outro message is intentional.The outro message is set to an empty string, which effectively silences the final log output. Please confirm this is the desired behavior rather than an oversight.
If the intent is to suppress the message, consider adding a comment:
- logger.outro(''); + // Suppress outro message as finalization handles all output + logger.outro('');code/lib/create-storybook/src/scaffold-new-project.ts (1)
126-147: LGTM! Good UX improvement.The addition of the "Other" option with a helpful hint and proper exit handling improves the user experience for unsupported frameworks. The early exit on line 141 correctly prevents accessing
SUPPORTED_PROJECTSwith an invalid key.code/core/src/core-server/utils/output-startup-information.ts (1)
24-49: LGTM! Clean refactoring with improved output.The replacement of
cli-table3with a simple array andlogBoxsimplifies the code while maintaining clear output formatting. The use of the newstorybookcolor formatter and structured box options enhances the visual presentation.code/core/src/node-logger/logger/logger.ts (1)
154-156: Well-designed type refactor.Delegating to
clack.BoxOptionsreduces duplication and ensures the type stays in sync with the upstream library, while keepingtitleexplicit for clarity.
|
View your CI Pipeline Execution ↗ for commit a2d573b
☁️ Nx Cloud last updated this comment at |
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Package BenchmarksCommit: The following packages have significant changes to their size or dependencies:
|
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 11 | 17 | 🚨 +6 🚨 |
| Self size | 334 KB | 344 KB | 🚨 +11 KB 🚨 |
| Dependency size | 1.30 MB | 2.00 MB | 🚨 +701 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/builder-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 191 | 🚨 +4 🚨 |
| Self size | 73 KB | 82 KB | 🚨 +9 KB 🚨 |
| Dependency size | 31.88 MB | 32.08 MB | 🚨 +196 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 44 | 39 | 🎉 -5 🎉 |
| Self size | 24.05 MB | 21.31 MB | 🎉 -2.74 MB 🎉 |
| Dependency size | 17.39 MB | 16.63 MB | 🎉 -755 KB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/angular
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 187 | 191 | 🚨 +4 🚨 |
| Self size | 130 KB | 130 KB | 🚨 +54 B 🚨 |
| Dependency size | 30.02 MB | 30.23 MB | 🚨 +206 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/ember
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 191 | 195 | 🚨 +4 🚨 |
| Self size | 17 KB | 17 KB | 0 B |
| Dependency size | 28.60 MB | 28.81 MB | 🚨 +206 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/html-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 20 | 🚨 +6 🚨 |
| Self size | 23 KB | 23 KB | 🎉 -18 B 🎉 |
| Dependency size | 1.67 MB | 2.38 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 533 | 537 | 🚨 +4 🚨 |
| Self size | 748 KB | 748 KB | 🚨 +126 B 🚨 |
| Dependency size | 58.93 MB | 59.14 MB | 🚨 +206 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/nextjs-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 124 | 128 | 🚨 +4 🚨 |
| Self size | 1.27 MB | 1.27 MB | 🎉 -36 B 🎉 |
| Dependency size | 21.88 MB | 22.10 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/preact-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 14 | 20 | 🚨 +6 🚨 |
| Self size | 14 KB | 14 KB | 0 B |
| Dependency size | 1.66 MB | 2.37 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-native-web-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 156 | 160 | 🚨 +4 🚨 |
| Self size | 31 KB | 31 KB | 0 B |
| Dependency size | 23.06 MB | 23.28 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 114 | 118 | 🚨 +4 🚨 |
| Self size | 37 KB | 37 KB | 🚨 +24 B 🚨 |
| Dependency size | 19.67 MB | 19.90 MB | 🚨 +225 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/react-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 273 | 277 | 🚨 +4 🚨 |
| Self size | 25 KB | 25 KB | 🚨 +36 B 🚨 |
| Dependency size | 43.89 MB | 44.09 MB | 🚨 +206 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/server-webpack5
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 199 | 203 | 🚨 +4 🚨 |
| Self size | 17 KB | 17 KB | 0 B |
| Dependency size | 33.14 MB | 33.35 MB | 🚨 +206 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/svelte-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 19 | 24 | 🚨 +5 🚨 |
| Self size | 59 KB | 59 KB | 0 B |
| Dependency size | 26.79 MB | 27.04 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/sveltekit
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 20 | 25 | 🚨 +5 🚨 |
| Self size | 58 KB | 58 KB | 0 B |
| Dependency size | 26.85 MB | 27.10 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/vue3-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 109 | 114 | 🚨 +5 🚨 |
| Self size | 38 KB | 38 KB | 0 B |
| Dependency size | 43.95 MB | 44.20 MB | 🚨 +252 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/web-components-vite
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 15 | 21 | 🚨 +6 🚨 |
| Self size | 20 KB | 20 KB | 🚨 +18 B 🚨 |
| Dependency size | 1.70 MB | 2.41 MB | 🚨 +712 KB 🚨 |
| Bundle Size Analyzer | Link | Link |
@storybook/cli
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 177 | 173 | 🎉 -4 🎉 |
| Self size | 863 KB | 862 KB | 🎉 -871 B 🎉 |
| Dependency size | 71.96 MB | 68.55 MB | 🎉 -3.41 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
@storybook/codemod
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 170 | 166 | 🎉 -4 🎉 |
| Self size | 35 KB | 35 KB | 🎉 -21 B 🎉 |
| Dependency size | 70.45 MB | 67.04 MB | 🎉 -3.41 MB 🎉 |
| Bundle Size Analyzer | Link | Link |
create-storybook
| Before | After | Difference | |
|---|---|---|---|
| Dependency count | 45 | 40 | 🎉 -5 🎉 |
| Self size | 1.07 MB | 1.07 MB | 🎉 -147 B 🎉 |
| Dependency size | 41.44 MB | 37.94 MB | 🎉 -3.50 MB 🎉 |
| Bundle Size Analyzer | node | node |
…us execution; improve command argument handling.
…pdate border styling to use rounded property for improved clarity in output.
…y quotes around the index.js path for improved execution clarity.
…y removing unnecessary quotes and using array syntax.
…mproved clarity and consistency in handling git and yarn commands.
…or improved clarity in option handling.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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)
scripts/utils/yarn.ts (1)
16-16: Replaceconsolewith the Storybook node-logger.As per coding guidelines, Node.js scripts should use
storybook/internal/node-loggerinstead ofconsole.*.Apply this diff to use the proper logger:
+import { logger } from '@storybook/core/node-logger'; + import { access, readFile, rm, writeFile } from 'node:fs/promises'; import { join } from 'node:path'; // TODO -- should we generate this file a second time outside of CLI? import storybookVersions from '../../code/core/src/common/versions'; import type { TemplateKey } from '../get-template'; import { exec } from './exec'; import touch from './touch'; export type YarnOptions = { cwd: string; dryRun: boolean; debug: boolean; }; -const logger = console;As per coding guidelines
🧹 Nitpick comments (1)
code/addons/themes/src/postinstall.ts (1)
14-14: Remove unnecessaryasynckeyword.The function is declared
asyncbut contains noawaitstatements and only uses the synchronousspawnSynccall. Theasynckeyword should be removed.Apply this diff:
-export default async function postinstall({ packageManager = 'npm' }) { +export default function postinstall({ packageManager = 'npm' }) {
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (7)
code/addons/themes/src/postinstall.ts(2 hunks)code/addons/vitest/src/postinstall.ts(1 hunks)code/core/src/bin/dispatcher.ts(2 hunks)code/lib/cli-storybook/src/link.ts(4 hunks)code/lib/cli-storybook/src/sandbox.ts(3 hunks)scripts/tasks/sandbox-parts.ts(0 hunks)scripts/utils/yarn.ts(1 hunks)
💤 Files with no reviewable changes (1)
- scripts/tasks/sandbox-parts.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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 (useyarn lint:js:cmd <file>)
Files:
scripts/utils/yarn.tscode/lib/cli-storybook/src/link.tscode/addons/vitest/src/postinstall.tscode/addons/themes/src/postinstall.tscode/lib/cli-storybook/src/sandbox.tscode/core/src/bin/dispatcher.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:
scripts/utils/yarn.tscode/lib/cli-storybook/src/link.tscode/addons/vitest/src/postinstall.tscode/addons/themes/src/postinstall.tscode/lib/cli-storybook/src/sandbox.tscode/core/src/bin/dispatcher.ts
scripts/**/*.{ts,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In Node.js scripts, use
storybook/internal/node-loggerinstead ofconsole.*
Files:
scripts/utils/yarn.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
scripts/utils/yarn.tscode/lib/cli-storybook/src/link.tscode/addons/vitest/src/postinstall.tscode/addons/themes/src/postinstall.tscode/lib/cli-storybook/src/sandbox.tscode/core/src/bin/dispatcher.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/link.tscode/addons/vitest/src/postinstall.tscode/addons/themes/src/postinstall.tscode/lib/cli-storybook/src/sandbox.tscode/core/src/bin/dispatcher.ts
🧠 Learnings (11)
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/sandbox/** : Do not use or modify `code/sandbox/` (internal build artifacts) for testing or development
Applied to files:
scripts/utils/yarn.tscode/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/lib/cli-storybook/src/link.tscode/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-09-17T08:11:04.287Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-09-17T08:11:04.287Z
Learning: Run tests from the code/ directory (yarn --cwd code test)
Applied to files:
code/lib/cli-storybook/src/link.ts
📚 Learning: 2025-10-02T09:22:13.215Z
Learnt from: JReinhold
Repo: storybookjs/storybook PR: 32607
File: code/package.json:243-243
Timestamp: 2025-10-02T09:22:13.215Z
Learning: The Storybook repository uses Yarn v^4 (any 4.x version) as the package manager, configured via .yarnrc.yml and package.json packageManager field. Specific patch versions within v4 can be upgraded as needed.
Applied to files:
code/lib/cli-storybook/src/link.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 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/link.tscode/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-09-24T09:39:39.233Z
Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.
Applied to files:
code/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-11-05T09:37:25.903Z
Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.903Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.
Applied to files:
code/lib/cli-storybook/src/sandbox.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 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/sandbox.ts
📚 Learning: 2025-11-05T09:38:47.694Z
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.694Z
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/cli-storybook/src/sandbox.ts
📚 Learning: 2025-09-29T13:20:23.346Z
Learnt from: mrginglymus
Repo: storybookjs/storybook PR: 32556
File: code/core/package.json:309-313
Timestamp: 2025-09-29T13:20:23.346Z
Learning: The `fast-printf` dependency in Storybook's core package is bundled into the final distribution during the build process, so it should remain in devDependencies rather than being moved to dependencies, following the same pattern as other bundled dependencies like `open`.
Applied to files:
code/lib/cli-storybook/src/sandbox.ts
🧬 Code graph analysis (2)
code/lib/cli-storybook/src/link.ts (1)
code/core/src/common/utils/command.ts (1)
executeCommand(34-46)
code/core/src/bin/dispatcher.ts (1)
code/core/src/shared/utils/module.ts (1)
resolvePackageDir(28-37)
⏰ 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 (13)
code/lib/cli-storybook/src/link.ts (3)
4-7: LGTM! Import changes align with command execution centralization.The addition of
executeCommandfromstorybook/internal/commonand the narrowed import ofspawnSyncfromcross-spawnare consistent with the PR's goal of centralizing command execution.
37-41: LGTM! executeCommand migrations are consistent and correct.The migration of git clone, yarn link, yarn install, and yarn run storybook to use
executeCommandis well-executed. Each call properly:
- Specifies the command and arguments
- Sets the appropriate working directory via
cwd- Awaits the async operation
The implicit error handling (throwing on command failure) is appropriate for this linking workflow where failures should abort the process.
Also applies to: 62-66, 89-93, 97-101
47-51: Consider migrating to executeCommand for consistency.This yarn version check is the only command execution still using
spawnSyncdirectly. While synchronous execution and stdout capture may be necessary here, consider whether this could be refactored to useexecuteCommand(with.then()or await) for consistency with the rest of the file.If a synchronous variant is needed, verify whether
executeCommandsupports synchronous execution or stdout capture patterns. If not, the current approach is acceptable, but a brief comment explaining whyspawnSyncis used here would be helpful.code/addons/vitest/src/postinstall.ts (3)
331-332: LGTM: Correct argument splitting for shellless execution.The change from
'--loglevel=silent'to separate arguments is correct for shellless command execution where each argument must be a distinct array element.
338-338: LGTM: Consistent argument splitting.The change correctly splits the package-manager argument into separate array elements, consistent with the shellless execution pattern.
346-346: LGTM: Consistent argument splitting.The change correctly splits the config-dir argument into separate array elements, maintaining consistency with the shellless execution pattern throughout the command array.
code/addons/themes/src/postinstall.ts (1)
1-1: Correct shellless command execution implementation.The command splitting logic correctly handles multi-word commands (e.g., 'pnpm dlx', 'yarn dlx') and the use of
spawnSyncwith an explicit arguments array is the proper approach for shellless execution.Also applies to: 15-18
code/lib/cli-storybook/src/sandbox.ts (4)
2-2: LGTM: Clean removal of unused import.The
mkdirimport is no longer needed and has been correctly removed.
80-82: LGTM: Simplified border configuration.The updated configuration aligns with the design feedback and uses a cleaner API.
260-260: LGTM: Simplified border configuration.Consistent with the other updated logBox calls.
124-124: Good news: bothborderColor(accepting hex values like '#F1618C') andborderStyle: 'round'are valid options in boxen. Theas anycasts at lines 124 and 143 indicate a TypeScript typing issue in the project, not an API issue. Since these are not API-breaking changes and the code is functionally valid, the original review comment's concern about inconsistency is valid but the lines are actually correct as-is.scripts/utils/yarn.ts (1)
63-63: No issues found; the change is appropriate for sandboxed environments.The
yarn config set enableScripts falsesetting is intentionally applied to sandboxed template environments where reproducible, controlled builds are needed. This aligns with standard CI practices and causes no breaking changes—no critical dependencies in this project rely on lifecycle scripts for setup or execution. The export mappings (e.g.,"./postinstall"entries) are file exports and are unaffected by this setting.code/core/src/bin/dispatcher.ts (1)
64-64: Path construction is correct for non-shell spawn.The direct path construction without quotes is appropriate for spawn without shell mode, where arguments are passed directly to the process without shell interpretation.
b041219 to
b56df2c
Compare
…ager classes for improved traceability
… coercion for improved accuracy in installed version reporting.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (3)
code/core/src/common/js-package-manager/JsPackageManager.ts (1)
638-644: LGTM with optional efficiency improvement.The version coercion logic correctly handles various version formats (including prereleases) and gracefully falls back to the original version when coercion fails. The use of
includePrerelease: trueis appropriate.Consider adding an early return when version is null to avoid unnecessary coercion:
const version = Object.entries(installations.dependencies)[0]?.[1]?.[0].version || null; + +if (!version) { + JsPackageManager.installedVersionCache.set(cacheKey, null); + return null; +} const coercedVersion = coerce(version, { includePrerelease: true })?.toString() ?? version;This would make the intent clearer and avoid calling
coerceon null values.code/core/src/common/js-package-manager/Yarn2Proxy.ts (2)
297-297: Consider moving debug log after the pattern check.The debug log at line 297 is placed before the pattern validation check, which means it logs every line including empty lines and non-matching packages. Moving it after the check (line 303) would reduce log noise while still providing useful debugging information.
Apply this diff to reduce unnecessary log entries:
lines.forEach((packageName) => { - logger.debug(`Processing package ${packageName}`); if ( !packageName || !pattern.some((p) => new RegExp(`${p.replace(/\*/g, '.*')}`).test(packageName)) ) { return; } + logger.debug(`Processing package ${packageName}`); const { name, value } = parsePackageData(packageName.replaceAll(`"`, ''));
202-202: Replaceconsole.errorwith logger to follow coding guidelines.The logger is already imported in this file (
import { logger } from '../../node-logger';). Replace the existingconsole.errorcall at line 202 withlogger.error()for consistency with Storybook's logging standards.- console.error('Error while fetching package version in Yarn PnP mode:', error); + logger.error('Error while fetching package version in Yarn PnP mode:', error);
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
code/addons/vitest/src/postinstall.ts(2 hunks)code/core/src/common/js-package-manager/JsPackageManager.ts(2 hunks)code/core/src/common/js-package-manager/Yarn2Proxy.ts(4 hunks)scripts/tasks/sandbox-parts.ts(1 hunks)scripts/utils/cli-step.ts(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- code/addons/vitest/src/postinstall.ts
- scripts/tasks/sandbox-parts.ts
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{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 (useyarn lint:js:cmd <file>)
Files:
scripts/utils/cli-step.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.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:
scripts/utils/cli-step.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.ts
scripts/**/*.{ts,js,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
In Node.js scripts, use
storybook/internal/node-loggerinstead ofconsole.*
Files:
scripts/utils/cli-step.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
scripts/utils/cli-step.tscode/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.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/core/src/common/js-package-manager/Yarn2Proxy.tscode/core/src/common/js-package-manager/JsPackageManager.ts
🧬 Code graph analysis (1)
code/core/src/common/js-package-manager/JsPackageManager.ts (1)
code/core/src/node-logger/index.ts (1)
logger(50-75)
⏰ 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 (4)
scripts/utils/cli-step.ts (1)
44-44: Correct theloglevelvalues constraint to include all supported levels.The principle of adding value constraints is sound. However, the suggested values are incomplete. The codebase supports six log levels: trace, debug, info, warn, error, and silent.
Additionally, verification confirms that callers have already been updated to use
loglevelinstead ofdebug(as seen inscripts/tasks/sandbox-parts.ts).Apply this corrected diff:
- loglevel: { type: 'string' }, + loglevel: { type: 'string', values: ['trace', 'debug', 'info', 'warn', 'error', 'silent'] },code/core/src/common/js-package-manager/JsPackageManager.ts (1)
12-12: LGTM!The import of
coercefrom semver is correctly added to support version normalization.code/core/src/common/js-package-manager/Yarn2Proxy.ts (2)
14-14: LGTM! Logger import follows coding guidelines.The addition of the logger import is appropriate and aligns with the coding guidelines to use Storybook loggers instead of
console.*methods in application code.
151-151: LGTM! Debug logging placement and level are appropriate.The debug log provides useful diagnostic information about found installations at an appropriate verbosity level.
…n method, enhancing test accuracy and clarity.
…-design-adjustments
…execution utility
…move redundant checks for log levels
…ents for improved clarity
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
code/core/src/node-logger/logger/colors.ts (1)
12-12: Consider using picocolors for consistency and better terminal compatibility.The new
storybookcolor uses a raw ANSI 24-bit color escape sequence, which is inconsistent with the other color functions that usepicocolors. Raw ANSI codes bypass terminal capability detection, potentially causing issues on terminals that don't support 24-bit colors.Consider using
picocolors.hex()for consistency:- storybook: (text: string) => `\x1b[38;2;255;71;133m${text}\x1b[39m`, + storybook: picocolors.hex('#FF4785'),This ensures proper fallback on terminals with limited color support and maintains consistency with the existing color definitions.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (10)
code/addons/vitest/src/postinstall.ts(2 hunks)code/core/package.json(0 hunks)code/core/src/cli/AddonVitestService.test.ts(1 hunks)code/core/src/cli/AddonVitestService.ts(1 hunks)code/core/src/common/js-package-manager/JsPackageManager.ts(2 hunks)code/core/src/common/js-package-manager/Yarn2Proxy.ts(4 hunks)code/core/src/node-logger/logger/colors.ts(1 hunks)code/core/src/node-logger/logger/logger.ts(1 hunks)code/core/src/node-logger/prompts/prompt-functions.ts(2 hunks)code/core/src/node-logger/tasks.ts(0 hunks)
💤 Files with no reviewable changes (2)
- code/core/package.json
- code/core/src/node-logger/tasks.ts
🚧 Files skipped from review as they are similar to previous changes (4)
- code/core/src/cli/AddonVitestService.ts
- code/core/src/common/js-package-manager/Yarn2Proxy.ts
- code/core/src/node-logger/logger/logger.ts
- code/addons/vitest/src/postinstall.ts
🧰 Additional context used
📓 Path-based instructions (7)
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/core/src/cli/AddonVitestService.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/core/src/cli/AddonVitestService.test.ts
**/*.{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 (useyarn lint:js:cmd <file>)
Files:
code/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/prompts/prompt-functions.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/node-logger/logger/colors.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 usingvi.mock()(e.g., filesystem, loggers)
Files:
code/core/src/cli/AddonVitestService.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/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/prompts/prompt-functions.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/node-logger/logger/colors.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/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/prompts/prompt-functions.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/node-logger/logger/colors.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/cli/AddonVitestService.test.tscode/core/src/node-logger/prompts/prompt-functions.tscode/core/src/common/js-package-manager/JsPackageManager.tscode/core/src/node-logger/logger/colors.ts
🧠 Learnings (3)
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to {code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs} : Do not use `console.log`, `console.warn`, or `console.error` directly unless in isolated files where importing loggers would significantly increase bundle size
Applied to files:
code/core/src/node-logger/prompts/prompt-functions.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to code/**/*.{ts,tsx,js,jsx,mjs} : In application code, use Storybook loggers instead of `console.*` (client code: `storybook/internal/client-logger`; server code: `storybook/internal/node-logger`)
Applied to files:
code/core/src/node-logger/logger/colors.ts
📚 Learning: 2025-10-13T13:33:14.659Z
Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-10-13T13:33:14.659Z
Learning: Applies to scripts/**/*.{ts,js,mjs} : In Node.js scripts, use `storybook/internal/node-logger` instead of `console.*`
Applied to files:
code/core/src/node-logger/logger/colors.ts
🧬 Code graph analysis (2)
code/core/src/node-logger/prompts/prompt-functions.ts (5)
code/core/src/node-logger/logger/logger.ts (2)
shouldLog(67-69)wrapTextForClack(210-210)code/core/src/node-logger/prompts/prompt-config.ts (1)
getPromptProvider(20-22)code/core/src/node-logger/index.ts (2)
TaskLogInstance(9-9)logger(49-74)code/core/src/node-logger/prompts/prompt-provider-base.ts (1)
TaskLogInstance(52-61)code/core/src/node-logger/wrap-utils.ts (1)
wrapTextForClack(201-210)
code/core/src/common/js-package-manager/JsPackageManager.ts (1)
code/core/src/node-logger/index.ts (1)
logger(49-74)
⏰ 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 (5)
code/core/src/cli/AddonVitestService.test.ts (1)
393-393: LGTM! Test correctly updated to match implementation.The test expectation now includes the abort hint in the intro message, which aligns with the implementation change in
AddonVitestService.ts.code/core/src/common/js-package-manager/JsPackageManager.ts (2)
12-12: LGTM - semver.coerce importThe addition of
coerceto the semver imports is appropriate for the version normalization logic added below.
638-644: Verification complete—version normalization is safe for all consumers.I verified all 10+ call sites of
getInstalledVersion()across the codebase. Every consumer uses the returned version in a way that's compatible with normalized semver:
- Primary usage:
satisfies(vitestVersionSpecifier, '>= X.Y.Z')pattern works correctly with coerced versions- Truthiness checks: Existing null/undefined checks remain unaffected
- String returns: Direct returns of the version string work as-is
- Build metadata: Per semver specification, build metadata (
+build.xyz) doesn't affect version precedence comparisons, which is all the consumers performThe code is safe to merge.
One minor note:
code/core/src/cli/AddonVitestService.tsline 224 redundantly callscoerce()again on the already-coerced result, which is harmless but suggests the consumer may not be aware of the normalization now happening ingetInstalledVersion(). No action needed, but could be cleaned up in a follow-up.code/core/src/node-logger/prompts/prompt-functions.ts (2)
200-200: Remove redundantshouldLogcheck.The ternary expression is redundant because the else block only executes when both
!isInteractiveTerminal()and!shouldLog('info')are true (from line 160's condition). Therefore,shouldLog('info')is guaranteed to befalsehere, andmaybeLogwill always be the no-op function.Apply this diff to simplify the code:
- const maybeLog = shouldLog('info') ? logger.log : (_: string) => {}; - + const maybeLog = (_: string) => {};Or inline the no-op directly in the return object if preferred.
⛔ Skipped due to learnings
Learnt from: CR Repo: storybookjs/storybook PR: 0 File: .github/copilot-instructions.md:0-0 Timestamp: 2025-10-13T13:33:14.659Z Learning: Applies to {code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs} : Do not use `console.log`, `console.warn`, or `console.error` directly unless in isolated files where importing loggers would significantly increase bundle size
160-160: Verify if taskLog's broader activation logic and lack of individual guards is intentional.The inconsistency identified in the review is verified as accurate. The
taskLogfunction activates under the conditionif (isInteractiveTerminal() || shouldLog('info')), whereasspinneronly activates viaif (isInteractiveTerminal()). Additionally, within the interactive branch,spinnerguards all method calls (start,stop,message) with individualif (shouldLog('info'))checks (lines 121, 128, 133), whiletaskLogdoes not—its wrapped methods directly invoke the underlying task without log-level filtering.This creates a behavioral difference where:
- In non-interactive terminals with
shouldLog('info')true,taskLogwill activate the provider's task (designed for interactive output), whereasspinnerwill not- When active in interactive mode,
spinnerrespects log-level filtering for each method call;taskLogdoes notEnsure this is the intended behavior and that the underlying TaskLog provider correctly handles non-interactive scenarios and respects log-level filtering appropriately.
…hen telemetry is enabled
…for improved command output handling
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
code/core/src/cli/AddonVitestService.ts(1 hunks)code/core/src/core-server/withTelemetry.ts(1 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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 (useyarn lint:js:cmd <file>)
Files:
code/core/src/core-server/withTelemetry.tscode/core/src/cli/AddonVitestService.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/core/src/core-server/withTelemetry.tscode/core/src/cli/AddonVitestService.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/core/src/core-server/withTelemetry.tscode/core/src/cli/AddonVitestService.ts
{code/**,scripts/**}/**/*.{ts,tsx,js,jsx,mjs}
📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Do not use
console.log,console.warn, orconsole.errordirectly unless in isolated files where importing loggers would significantly increase bundle size
Files:
code/core/src/core-server/withTelemetry.tscode/core/src/cli/AddonVitestService.ts
🧬 Code graph analysis (1)
code/core/src/core-server/withTelemetry.ts (1)
code/core/src/telemetry/error-collector.ts (1)
ErrorCollector(13-33)
⏰ 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/core/src/cli/AddonVitestService.ts (2)
142-142: LGTM! stdio configuration supports abort functionality.The change from
'ignore'to['inherit', 'pipe', 'pipe']correctly enables user interaction through stdin while piping stdout/stderr for spinner display. This aligns perfectly with theabortable: trueoption at line 150.
147-147: LGTM! Clear abort instruction improves UX.The updated message informs users of the abort capability, which is consistent with the
abortable: trueconfiguration and the stdio changes that enable user interaction.
| if (enableTelemetry) { | ||
| const errors = ErrorCollector.getErrors(); | ||
| for (const error of errors) { | ||
| await sendTelemetryError(error, eventType, options, false); | ||
| } | ||
| process.off('SIGINT', cancelTelemetry); | ||
| } |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Critical: SIGINT handler leak when telemetry is disabled.
The SIGINT handler is added on line 169 when eventType === 'init' (without checking enableTelemetry), but it's only removed on line 202 when enableTelemetry is true. This creates a resource leak when eventType === 'init' and enableTelemetry === false—the handler is registered but never cleaned up.
Apply this diff to fix the handler cleanup to match the registration condition:
} finally {
if (enableTelemetry) {
const errors = ErrorCollector.getErrors();
for (const error of errors) {
await sendTelemetryError(error, eventType, options, false);
}
- process.off('SIGINT', cancelTelemetry);
}
+ if (eventType === 'init') {
+ process.off('SIGINT', cancelTelemetry);
+ }
}📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| if (enableTelemetry) { | |
| const errors = ErrorCollector.getErrors(); | |
| for (const error of errors) { | |
| await sendTelemetryError(error, eventType, options, false); | |
| } | |
| process.off('SIGINT', cancelTelemetry); | |
| } | |
| if (enableTelemetry) { | |
| const errors = ErrorCollector.getErrors(); | |
| for (const error of errors) { | |
| await sendTelemetryError(error, eventType, options, false); | |
| } | |
| } | |
| if (eventType === 'init') { | |
| process.off('SIGINT', cancelTelemetry); | |
| } |
🤖 Prompt for AI Agents
In code/core/src/core-server/withTelemetry.ts around lines 197 to 203, the
SIGINT handler is being removed only when enableTelemetry is true, but it was
registered unconditionally when eventType === 'init', causing a leak when init
runs with telemetry disabled; update the cleanup to mirror the registration
condition by calling process.off('SIGINT', cancelTelemetry) whenever eventType
=== 'init' (regardless of enableTelemetry) — move or duplicate the off-call into
the same branch where the handler is added (or ensure it's always executed in a
finally block that checks eventType === 'init').
…npx' for improved clarity
…-design-adjustments
5df8b2f
into
valentin/cli-init-rework
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 pull request has been released as version
0.0.0-pr-32984-sha-9ba02343. Try it out in a new sandbox by runningnpx [email protected] sandboxor in an existing project withnpx [email protected] upgrade.More information
0.0.0-pr-32984-sha-9ba02343valentin/cli-init-rework-design-adjustments9ba023431762769437)To request a new release of this pull request, mention the
@storybookjs/coreteam.core team members can create a new canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=32984Summary by CodeRabbit
New Features
Bug Fixes
Improvements
--silentflag.