feat(create): move storybook to CLI command#420
Conversation
📝 WalkthroughWalkthroughAll pre-built Storybook asset files for the React add-on are deleted: Storybook config ( ChangesStorybook Add-on Refactor: Static Assets Removed, Init Command Added
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/create/src/frameworks/react/add-ons/storybook/info.json`:
- Line 10: The priority field in the Storybook info.json file is set to 1, but
according to the sorting logic in add-ons.ts (which uses bPriority - aPriority
for "Higher priority first"), this causes Storybook to execute second-to-last
rather than last. To ensure Storybook executes last, change the priority value
to 0 or remove the priority field entirely, since undefined values default to 0
and will execute after all higher-priority add-ons.
- Around line 12-13: The current args array in the info.json file passes the
`-y` flag to the storybook init command, but when Storybook is not cached
locally, npx itself will prompt for installation confirmation. To suppress this
prompt and enable automation, add `--yes` as the first element in the args
array, before the storybook command, so that the flag is passed to npx rather
than to storybook init.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 7ecb3ae0-8a33-473e-a0d7-ceef6a3282f4
📒 Files selected for processing (16)
packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.tspackages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.tspackages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsxpackages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsxpackages/create/src/frameworks/react/add-ons/storybook/info.jsonpackages/create/src/frameworks/react/add-ons/storybook/package.json
💤 Files with no reviewable changes (15)
- packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/main.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.tsx
- packages/create/src/frameworks/react/add-ons/storybook/package.json
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/_dot_storybook/preview.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.stories.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/routes/demo/storybook.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/radio-group.stories.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/dialog.tsx
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/input.stories.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/button.stories.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/slider.stories.ts
- packages/create/src/frameworks/react/add-ons/storybook/assets/src/components/storybook/index.ts
| "jsName": "StorybookDemo" | ||
| } | ||
| ] | ||
| "priority": 1, |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Verify how add-on `priority` is sorted/consumed before command execution.
rg -n -C3 '\bpriority\b' packages/create/src
rg -n -C5 'sort\(|order|compare|priority' packages/create/srcRepository: TanStack/cli
Length of output: 50369
Storybook priority is incorrect for execution order requirement.
The sorting logic in packages/create/src/add-ons.ts (lines 9–13) uses return bPriority - aPriority with comment "Higher priority first," meaning higher numeric values execute first and lower values execute last. With priority 1, Storybook will run second-to-last; only add-ons with priority 0 (or undefined, which defaults to 0) run after it.
If the PR objective requires Storybook to execute last, change priority to 0 or remove the field entirely.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/create/src/frameworks/react/add-ons/storybook/info.json` at line 10,
The priority field in the Storybook info.json file is set to 1, but according to
the sorting logic in add-ons.ts (which uses bPriority - aPriority for "Higher
priority first"), this causes Storybook to execute second-to-last rather than
last. To ensure Storybook executes last, change the priority value to 0 or
remove the priority field entirely, since undefined values default to 0 and will
execute after all higher-priority add-ons.
| "command": "npx", | ||
| "args": ["storybook", "init", "-y", "--no-dev"] |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
# First, let's check the actual file content and surrounding context
cat -n packages/create/src/frameworks/react/add-ons/storybook/info.jsonRepository: TanStack/cli
Length of output: 516
🏁 Script executed:
# Check the add-on schema and execution code mentioned in the original scratchpad
fd -e ts packages/create/src/ | head -20Repository: TanStack/cli
Length of output: 442
🏁 Script executed:
# Search for how commands are executed in the codebase
rg "environment\.execute" packages/create/src/ -A 3 -B 1Repository: TanStack/cli
Length of output: 2983
🌐 Web query:
npx --yes flag suppress installation prompts
💡 Result:
Yes, the --yes flag (or its shorthand -y) can be used with npx to automatically accept installation prompts [1][2]. When you run an npx command for a package that is not already installed in your local project, npx typically displays a prompt asking for permission to install the package [1][3]. By adding --yes or -y to your command, you explicitly suppress this confirmation prompt, allowing the installation to proceed automatically [1][4]. This is particularly useful for running commands programmatically or in non-interactive environments, such as CI/CD pipelines [5]. Conversely, you can also use the --no flag if you need to reject the prompt [1][2].
Citations:
- 1: https://docs.npmjs.com/cli/v11/commands/npx
- 2: https://docs.npmjs.com/cli/v10/commands/npx/
- 3: https://github.com/npm/cli/blob/latest/docs/lib/content/commands/npx.md
- 4: https://docs.npmjs.com/cli/v8/commands/npx/
- 5: https://stackoverflow.com/questions/70742968/automatically-accept-installing-npx-package
🌐 Web query:
npx storybook init interactive prompt behavior
💡 Result:
When running npx storybook@latest init (or using npm create storybook), the Storybook CLI utilizes an interactive, Clack-based UI to guide users through the installation process [1][2]. These prompts help configure your project by asking questions such as: - Whether you are new to Storybook (which may trigger an onboarding tour) [1][3]. - What configuration type you prefer (e.g., Recommended vs. Minimal) [3]. - Framework-specific choices, such as selecting between React Native and React Native Web [4]. If you wish to bypass these interactive prompts—for instance, for automated CI/CD pipelines—you can use the --yes flag [2][5]. Important Note for NPM Users: If you are using npm, the --yes flag may not be correctly passed to the Storybook CLI unless you use a double dash (--) separator [6]. NPM interprets flags before the double dash as its own, while those after are passed to the executed command [6]. For a non-interactive installation, use the following syntax: npm create storybook@latest -- --yes [6] Yarn and pnpm do not require this double-dash separator to pass the flag correctly [6]. Additionally, you can use the --features flag to explicitly select features (e.g., docs, test, a11y) and skip the corresponding prompts [2][7]. Using these flags ensures a non-interactive setup identical to a standard installation [2].
Citations:
- 1: https://storybook.js.org/docs/get-started/install/
- 2: CLI: Modernize Storybook CLI with new init workflow, Clack UI, and Generator System storybookjs/storybook#32717
- 3: CLI: Add skip onboarding, recommended/minimal config storybookjs/storybook#30930
- 4: CLI: Prompt users for RN vs RNW on init storybookjs/storybook#30635
- 5: storybookjs/storybook@24b1437
- 6: [Bug]: create-storybook's
--yesoption does not skip prompts with NPM storybookjs/storybook#32677 - 7: https://storybook.js.org/docs/api/cli-options.md
Add --yes to npx to suppress installation prompt on first run.
The -y flag in the current args applies to storybook init, not to npx itself. When Storybook is not cached locally, npx storybook ... will prompt for installation confirmation and block automation. Pass --yes as the first argument to npx to suppress this prompt.
Suggested change
"command": {
"command": "npx",
- "args": ["storybook", "init", "-y", "--no-dev"]
+ "args": ["--yes", "storybook", "init", "-y", "--no-dev"]
}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/create/src/frameworks/react/add-ons/storybook/info.json` around
lines 12 - 13, The current args array in the info.json file passes the `-y` flag
to the storybook init command, but when Storybook is not cached locally, npx
itself will prompt for installation confirmation. To suppress this prompt and
enable automation, add `--yes` as the first element in the args array, before
the storybook command, so that the flag is passed to npx rather than to
storybook init.
2 participants
Hi 👋
This PR moves storybook template into a CLI command.
As we're currently working on an official tanstack integration within storybook, we'd like to have storybook being called as a command for multiple reasons:
Summary by CodeRabbit
Release Notes