Skip to content

Conversation

@valentinpalkovic
Copy link
Contributor

@valentinpalkovic valentinpalkovic commented Nov 7, 2025

Closes #

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

  • stories
  • unit tests
  • integration tests
  • end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

  • Add or update documentation reflecting your changes
  • If you are deprecating/removing a feature, make sure to update
    MIGRATION.MD

Checklist for Maintainers

  • When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts

  • Make 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 running npx [email protected] sandbox or in an existing project with npx [email protected] upgrade.

More information
Published version 0.0.0-pr-32984-sha-9ba02343
Triggered by @valentinpalkovic
Repository storybookjs/storybook
Branch valentin/cli-init-rework-design-adjustments
Commit 9ba02343
Datetime Mon Nov 10 10:10:37 UTC 2025 (1762769437)
Workflow run 19228047377

To request a new release of this pull request, mention the @storybookjs/core team.

core team members can create a new canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=32984

Summary by CodeRabbit

  • New Features

    • Added an "Other" option during project setup.
    • Playwright install now shows an explicit abort hint ("Press 'c' to abort").
  • Bug Fixes

    • Improved command execution reliability to reduce command parsing issues.
  • Improvements

    • Streamlined startup messages and reduced log verbosity.
    • npm dev runs now include a --silent flag.
    • Quieter finalization, simplified CLI boxes, and a new "storybook" color.

@valentinpalkovic valentinpalkovic self-assigned this Nov 7, 2025
@valentinpalkovic valentinpalkovic changed the title Valentin/cli init rework design adjustments CLI: Implement design feedback Nov 7, 2025
@coderabbitai
Copy link
Contributor

coderabbitai bot commented Nov 7, 2025

📝 Walkthrough

Walkthrough

Replaced 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 selectedFeatures from finalization APIs, and made multiple logging, prompt, and small UX/test tweaks.

Changes

Cohort / File(s) Summary
Process invocation & spawn changes
code/addons/themes/src/postinstall.ts, code/addons/vitest/src/vitest-plugin/global-setup.ts, code/addons/vitest/src/postinstall.ts, code/lib/codemod/src/index.ts, code/lib/cli-storybook/src/upgrade.ts, code/lib/create-storybook/src/scaffold-new-project.ts, code/core/src/bin/dispatcher.ts, code/core/src/telemetry/exec-command-count-lines.ts
Removed shell: true / string-based shell invocations; switched to direct command+args or synchronous spawnSync/execa without shell; separated flags and values where applicable.
Centralized execution helpers
code/core/src/common/js-package-manager/JsPackageManagerFactory.ts, code/lib/cli-storybook/src/link.ts
Replaced ad-hoc spawn/exec usage with centralized executeCommand/executeCommandSync helper; simplified availability/version checks to use the helper.
Dependency & startup output
code/core/package.json, code/core/src/core-server/utils/output-startup-information.ts
Removed cli-table3 dependency; replaced table-based startup output with a single logBox and simplified startup messaging flow.
API / type signature changes
code/lib/create-storybook/src/commands/FinalizationCommand.ts, code/lib/create-storybook/src/commands/FinalizationCommand.test.ts, code/core/src/node-logger/logger/logger.ts
Removed selectedFeatures from FinalizationCommand.execute and related private methods/tests; changed BoxOptions to { title?: string } & clack.BoxOptions.
Logging, color, and prompt text changes
code/core/src/node-logger/logger/colors.ts, code/core/src/node-logger/tasks.ts, code/core/src/core-server/dev-server.ts, code/core/src/core-server/utils/server-statics.ts, code/core/src/telemetry/notify.ts, code/core/src/common/js-package-manager/Yarn2Proxy.ts, code/addons/vitest/src/postinstall.ts
Added storybook ANSI color formatter; removed some instructional/colored prefixes; downgraded some info logs to debug; added debug logs for Yarn2Proxy and Vitest version printing; adjusted Playwright install prompt wording and stdio handling.
Environment & hyperlink detection
code/core/src/node-logger/wrap-utils.ts
Replaced execa-based env fetch with direct process.env access for hyperlink/support detection and simplified error handling.
CLI flags & scaffolding UX
scripts/utils/cli-step.ts, scripts/tasks/sandbox-parts.ts, code/lib/create-storybook/src/initiate.ts, code/lib/create-storybook/src/scaffold-new-project.ts
Changed init option from debug boolean to loglevel string; removed skip-install; converted combined --flag=value to separate args; added --silent for npm run; added "Other" project option that exits early.
Box styling & UI simplification
code/lib/cli-storybook/src/sandbox.ts
Removed borderColor logic, trimmed unused fs import, and simplified box options to { rounded: true }.
Version handling & tests
code/core/src/common/js-package-manager/JsPackageManager.ts, code/core/src/common/js-package-manager/JsPackageManager.test.ts
Use semver.coerce to normalize installed versions and cache coercion; tests switched from replacing mocks to spying on instance methods.
Small UX/test tweaks
code/core/src/cli/AddonVitestService.ts, code/core/src/cli/AddonVitestService.test.ts, code/lib/create-storybook/src/initiate.ts, code/lib/create-storybook/src/commands/FinalizationCommand.test.ts
Updated Playwright install prompt to mention abort key and changed stdio handling; removed final initiation outro message; adapted tests to removal of selectedFeatures.

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
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

  • Files/areas needing extra attention:
    • Argument quoting/escaping and behavior changes after removing shell: true (postinstall, scaffold, upgrade, link).
    • spawnSync vs spawn semantics and stdio behavior differences (themes/vitest/postinstall/upgrade).
    • All call sites and tests for FinalizationCommand.execute to ensure removal of selectedFeatures is consistent.
    • Centralized executeCommand behavior (sync vs async, error propagation) and its callers.

Possibly related PRs


📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 80a78e7 and a2d573b.

⛔ Files ignored due to path filters (1)
  • code/yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • code/core/package.json (0 hunks)
💤 Files with no reviewable changes (1)
  • code/core/package.json
⏰ 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

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

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 approximation

Alternatively, 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 --silent flag 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

📥 Commits

Reviewing files that changed from the base of the PR and between 9f8743a and 6e1bb50.

⛔ Files ignored due to path filters (1)
  • code/yarn.lock is 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 (use yarn lint:js:cmd <file>)

Files:

  • code/core/src/core-server/utils/server-statics.ts
  • code/core/src/core-server/dev-server.ts
  • code/lib/cli-storybook/src/upgrade.ts
  • code/core/src/node-logger/logger/colors.ts
  • code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
  • code/core/src/bin/dispatcher.ts
  • code/core/src/telemetry/notify.ts
  • code/core/src/cli/AddonVitestService.ts
  • code/core/src/builder-manager/index.ts
  • code/core/src/core-server/utils/output-startup-information.ts
  • code/core/src/telemetry/exec-command-count-lines.ts
  • code/core/src/node-logger/wrap-utils.ts
  • code/lib/create-storybook/src/scaffold-new-project.ts
  • code/addons/themes/src/postinstall.ts
  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/logger/logger.ts
  • code/lib/create-storybook/src/commands/FinalizationCommand.ts
  • code/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.ts
  • code/core/src/core-server/dev-server.ts
  • code/lib/cli-storybook/src/upgrade.ts
  • code/core/src/node-logger/logger/colors.ts
  • code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
  • code/core/src/bin/dispatcher.ts
  • code/core/src/telemetry/notify.ts
  • code/core/src/cli/AddonVitestService.ts
  • code/core/src/builder-manager/index.ts
  • code/core/src/core-server/utils/output-startup-information.ts
  • code/core/src/telemetry/exec-command-count-lines.ts
  • code/core/src/node-logger/wrap-utils.ts
  • code/lib/create-storybook/src/scaffold-new-project.ts
  • code/addons/themes/src/postinstall.ts
  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/logger/logger.ts
  • code/lib/create-storybook/src/commands/FinalizationCommand.ts
  • code/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.ts
  • code/core/src/core-server/dev-server.ts
  • code/lib/cli-storybook/src/upgrade.ts
  • code/core/src/node-logger/logger/colors.ts
  • code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
  • code/core/src/bin/dispatcher.ts
  • code/core/src/telemetry/notify.ts
  • code/core/src/cli/AddonVitestService.ts
  • code/core/src/builder-manager/index.ts
  • code/core/src/core-server/utils/output-startup-information.ts
  • code/core/src/telemetry/exec-command-count-lines.ts
  • code/core/src/node-logger/wrap-utils.ts
  • code/lib/create-storybook/src/scaffold-new-project.ts
  • code/addons/themes/src/postinstall.ts
  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/logger/logger.ts
  • code/lib/create-storybook/src/commands/FinalizationCommand.ts
  • code/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, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/core-server/utils/server-statics.ts
  • code/core/src/core-server/dev-server.ts
  • code/lib/cli-storybook/src/upgrade.ts
  • code/core/src/node-logger/logger/colors.ts
  • code/core/src/common/js-package-manager/JsPackageManagerFactory.ts
  • code/core/src/bin/dispatcher.ts
  • code/core/src/telemetry/notify.ts
  • code/core/src/cli/AddonVitestService.ts
  • code/core/src/builder-manager/index.ts
  • code/core/src/core-server/utils/output-startup-information.ts
  • code/core/src/telemetry/exec-command-count-lines.ts
  • code/core/src/node-logger/wrap-utils.ts
  • code/lib/create-storybook/src/scaffold-new-project.ts
  • code/addons/themes/src/postinstall.ts
  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/logger/logger.ts
  • code/lib/create-storybook/src/commands/FinalizationCommand.ts
  • code/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 using vi.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.ts
  • code/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.ts
  • code/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-logger per 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 info to debug aligns 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: true option 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.env access 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 executeCommandSync centralizes 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 hasBun function follows the same clean pattern as hasNPM, 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 executeCommandSync and 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 selectedFeatures from the ExecuteFinalizationParams type 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: true improves 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: true is 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 selectedFeatures from the executeFinalization call is consistent with the updated API signature in FinalizationCommand.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_PROJECTS with 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-table3 with a simple array and logBox simplifies the code while maintaining clear output formatting. The use of the new storybook color 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.BoxOptions reduces duplication and ensures the type stays in sync with the upstream library, while keeping title explicit for clarity.

@nx-cloud
Copy link

nx-cloud bot commented Nov 7, 2025

View your CI Pipeline Execution ↗ for commit a2d573b

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

☁️ Nx Cloud last updated this comment at 2025-11-13 11:34:50 UTC

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
@storybook-app-bot
Copy link

storybook-app-bot bot commented Nov 7, 2025

Package Benchmarks

Commit: a2d573b, ran on 13 November 2025 at 11:27:15 UTC

The following packages have significant changes to their size or dependencies:

@storybook/builder-vite

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.
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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: Replace console with the Storybook node-logger.

As per coding guidelines, Node.js scripts should use storybook/internal/node-logger instead of console.*.

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 unnecessary async keyword.

The function is declared async but contains no await statements and only uses the synchronous spawnSync call. The async keyword 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

📥 Commits

Reviewing files that changed from the base of the PR and between e54f891 and b041219.

📒 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 (use yarn lint:js:cmd <file>)

Files:

  • scripts/utils/yarn.ts
  • code/lib/cli-storybook/src/link.ts
  • code/addons/vitest/src/postinstall.ts
  • code/addons/themes/src/postinstall.ts
  • code/lib/cli-storybook/src/sandbox.ts
  • code/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.ts
  • code/lib/cli-storybook/src/link.ts
  • code/addons/vitest/src/postinstall.ts
  • code/addons/themes/src/postinstall.ts
  • code/lib/cli-storybook/src/sandbox.ts
  • code/core/src/bin/dispatcher.ts
scripts/**/*.{ts,js,mjs}

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

In Node.js scripts, use storybook/internal/node-logger instead of console.*

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, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • scripts/utils/yarn.ts
  • code/lib/cli-storybook/src/link.ts
  • code/addons/vitest/src/postinstall.ts
  • code/addons/themes/src/postinstall.ts
  • code/lib/cli-storybook/src/sandbox.ts
  • code/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.ts
  • code/addons/vitest/src/postinstall.ts
  • code/addons/themes/src/postinstall.ts
  • code/lib/cli-storybook/src/sandbox.ts
  • code/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.ts
  • 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 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.ts
  • code/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.ts
  • 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/**/*.{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 executeCommand from storybook/internal/common and the narrowed import of spawnSync from cross-spawn are 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 executeCommand is 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 spawnSync directly. While synchronous execution and stdout capture may be necessary here, consider whether this could be refactored to use executeCommand (with .then() or await) for consistency with the rest of the file.

If a synchronous variant is needed, verify whether executeCommand supports synchronous execution or stdout capture patterns. If not, the current approach is acceptable, but a brief comment explaining why spawnSync is 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 spawnSync with 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 mkdir import 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: both borderColor (accepting hex values like '#F1618C') and borderStyle: 'round' are valid options in boxen. The as any casts 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 false setting 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.

@valentinpalkovic valentinpalkovic force-pushed the valentin/cli-init-rework-design-adjustments branch from b041219 to b56df2c Compare November 9, 2025 13:09
… coercion for improved accuracy in installed version reporting.
Copy link
Contributor

@coderabbitai coderabbitai bot left a 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: true is 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 coerce on 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: Replace console.error with logger to follow coding guidelines.

The logger is already imported in this file (import { logger } from '../../node-logger';). Replace the existing console.error call at line 202 with logger.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

📥 Commits

Reviewing files that changed from the base of the PR and between b041219 and eee9dbe.

📒 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 (use yarn lint:js:cmd <file>)

Files:

  • scripts/utils/cli-step.ts
  • code/core/src/common/js-package-manager/Yarn2Proxy.ts
  • code/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.ts
  • code/core/src/common/js-package-manager/Yarn2Proxy.ts
  • code/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-logger instead of console.*

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, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • scripts/utils/cli-step.ts
  • code/core/src/common/js-package-manager/Yarn2Proxy.ts
  • code/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.ts
  • code/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 the loglevel values 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 loglevel instead of debug (as seen in scripts/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 coerce from 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.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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 storybook color uses a raw ANSI 24-bit color escape sequence, which is inconsistent with the other color functions that use picocolors. 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

📥 Commits

Reviewing files that changed from the base of the PR and between 9ba0234 and a84ea41.

📒 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 (use yarn lint:js:cmd <file>)

Files:

  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/prompts/prompt-functions.ts
  • code/core/src/common/js-package-manager/JsPackageManager.ts
  • code/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 using vi.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.ts
  • code/core/src/node-logger/prompts/prompt-functions.ts
  • code/core/src/common/js-package-manager/JsPackageManager.ts
  • code/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.ts
  • code/core/src/node-logger/prompts/prompt-functions.ts
  • code/core/src/common/js-package-manager/JsPackageManager.ts
  • code/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, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/cli/AddonVitestService.test.ts
  • code/core/src/node-logger/prompts/prompt-functions.ts
  • code/core/src/common/js-package-manager/JsPackageManager.ts
  • code/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 import

The addition of coerce to 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 perform

The code is safe to merge.

One minor note: code/core/src/cli/AddonVitestService.ts line 224 redundantly calls coerce() again on the already-coerced result, which is harmless but suggests the consumer may not be aware of the normalization now happening in getInstalledVersion(). 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 redundant shouldLog check.

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 be false here, and maybeLog will 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 taskLog function activates under the condition if (isInteractiveTerminal() || shouldLog('info')), whereas spinner only activates via if (isInteractiveTerminal()). Additionally, within the interactive branch, spinner guards all method calls (start, stop, message) with individual if (shouldLog('info')) checks (lines 121, 128, 133), while taskLog does 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, taskLog will activate the provider's task (designed for interactive output), whereas spinner will not
  • When active in interactive mode, spinner respects log-level filtering for each method call; taskLog does not

Ensure this is the intended behavior and that the underlying TaskLog provider correctly handles non-interactive scenarios and respects log-level filtering appropriately.

Copy link
Contributor

@coderabbitai coderabbitai bot left a 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

📥 Commits

Reviewing files that changed from the base of the PR and between a84ea41 and f9221a8.

📒 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 (use yarn lint:js:cmd <file>)

Files:

  • code/core/src/core-server/withTelemetry.ts
  • code/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.ts
  • code/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.ts
  • code/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, or console.error directly unless in isolated files where importing loggers would significantly increase bundle size

Files:

  • code/core/src/core-server/withTelemetry.ts
  • code/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 the abortable: true option 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: true configuration and the stdio changes that enable user interaction.

Comment on lines +197 to 203
if (enableTelemetry) {
const errors = ErrorCollector.getErrors();
for (const error of errors) {
await sendTelemetryError(error, eventType, options, false);
}
process.off('SIGINT', cancelTelemetry);
}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

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.

Suggested change
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').

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants