Update storybook, vite, and vitest and change to pnpm instead of yarn (BL-16115)#424
Open
StephenMcConnel wants to merge 3 commits into
Open
Update storybook, vite, and vitest and change to pnpm instead of yarn (BL-16115)#424StephenMcConnel wants to merge 3 commits into
StephenMcConnel wants to merge 3 commits into
Conversation
|
Warning Rate limit exceeded
You’ve run out of usage credits. Purchase more in the billing tab. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: ⛔ Files ignored due to path filters (2)
📒 Files selected for processing (8)
📝 WalkthroughWalkthroughThis PR migrates the repo from Yarn to pnpm (adds pnpm packageManager and Volta update), updates package scripts and dependency pins, adopts Storybook’s Vite variant in config and stories, adjusts TypeScript moduleResolution to "bundler", adds story-local tsconfig and less typings, and updates developer docs to use pnpm. ChangesTooling and Storybook Modernization
🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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: 5
🤖 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 @.storybook/main.ts:
- Line 15: The Storybook config's addons array currently includes
"@storybook/addon-links" and "@storybook/addon-docs" but is missing controls, so
stories using argTypes with control:"boolean" won't render controls; update the
addons array in .storybook/main.ts (the addons variable/array) to include
"@storybook/addon-controls" or replace the current addons with
"@storybook/addon-essentials" to restore controls and related features, then
reinstall or run Storybook to verify that navigation.stories.tsx and
multiBook.stories.tsx now show the control UI.
In `@package.json`:
- Line 65: Update the `@testing-library/dom` dependency in package.json by
replacing the hard-coded old version string ("@testing-library/dom": "^7.21.4")
with the current latest stable version: fetch the exact version via your package
registry (e.g., run npm view `@testing-library/dom` version or check the npmjs.org
page), update the package.json entry accordingly, run your package manager to
regenerate the lockfile (npm install / pnpm install / yarn install), and run the
test suite to ensure compatibility (fix any TypeScript or API changes in tests
referencing `@testing-library/dom`).
- Line 7: Update the packageManager entry in package.json: replace the current
value "pnpm@10.26.0" with the newer stable release (e.g. "pnpm@11.1.0") in the
packageManager field so project tooling uses the updated pnpm; after changing
packageManager run your workspace bootstrap (pnpm install / pnpm -w install) to
refresh lockfiles and ensure compatibility with the new pnpm version.
- Line 52: The package.json upgrade to "jquery": "^4.0.0" may break the
unmaintained plugin jquery.nicescroll (v3.7.6); verify compatibility by testing
UI scroll behavior and automated browser tests that exercise
$(".selector").niceScroll() usage and any nicescroll config in your codebase,
and check the jquery.nicescroll repo/issues for jQuery4 notes; if incompatible,
either pin jquery in package.json back to a compatible 3.x range or replace
jquery.nicescroll with a maintained alternative (e.g.,
OverlayScrollbars/PerfectScrollbar), updating imports and all init calls
(niceScroll() usages) accordingly and adding regression tests to prevent future
breakage.
In `@README-advanced.md`:
- Line 75: Replace the typo "Andy changes" with "Any changes" in the sentence
describing node_modules linking in README-advanced.md (the line that begins
"This adjusts node_modules to use a link to the live output in the bloom-player
output folder."); update that phrase to read "Any changes made to the
bloom-player code can be tested..." to correct the documentation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: a0831121-d7f5-4148-a6fc-b93c7a389e61
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (12)
.storybook/main.ts.storybook/preview.tsREADME-advanced.mdREADME.mdpackage.jsonpnpm-workspace.yamlsrc/stories/BloomPlayerTester.tssrc/stories/books.stories.tsxsrc/stories/controlBarInteraction.stories.tsxsrc/stories/multiBook.stories.tsxsrc/stories/navigation.stories.tsxsrc/stories/playerInteraction.stories.tsx
| "@storybook/addon-essentials", | ||
| "@storybook/addon-interactions", | ||
| ], | ||
| addons: ["@storybook/addon-links", "@storybook/addon-docs"], |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if stories use features from removed addons
echo "=== Checking for addon-essentials features usage ==="
# Check for argTypes (controls addon)
echo -e "\n--- Stories using argTypes/controls ---"
rg -n "argTypes:" --type=ts --type=tsx -g "*.stories.*" -C2
# Check for actions usage
echo -e "\n--- Stories using actions ---"
rg -n "action\(|actions\." --type=ts --type=tsx -g "*.stories.*" -C2
# Check for viewport configuration
echo -e "\n--- Stories using viewport ---"
rg -n "viewport:" --type=ts --type=tsx -g "*.stories.*" -C2
# Check for parameters that might use removed addons
echo -e "\n--- Stories with parameters ---"
rg -n "parameters:" --type=ts --type=tsx -g "*.stories.*" -A5 | head -50Repository: BloomBooks/bloom-player
Length of output: 387
🏁 Script executed:
# Find all story files in the repository
find . -name "*.stories.*" -type f 2>/dev/null | head -20
# Also check the repository structure
git ls-files | grep -i "stories" | head -20Repository: BloomBooks/bloom-player
Length of output: 518
🏁 Script executed:
# Re-run the addon feature checks with corrected patterns (no conflicting flags)
# Check for argTypes (controls addon)
echo "=== Checking for argTypes/controls usage ==="
rg -n "argTypes:" -A2 2>/dev/null
# Check for actions usage
echo -e "\n=== Checking for actions usage ==="
rg -n "action\(" 2>/dev/null
# Check for viewport configuration
echo -e "\n=== Checking for viewport usage ==="
rg -n "viewport:" 2>/dev/null
# Check for other addon-essentials features
echo -e "\n=== Checking for addon-essentials features (backgrounds, measure, outline) ==="
rg -n "backgrounds:|measure:|outline:" 2>/dev/null
# Check if there are any .stories files at all
echo -e "\n=== Total story files found ==="
find . -name "*.stories.*" -type f 2>/dev/null | wc -lRepository: BloomBooks/bloom-player
Length of output: 50381
🏁 Script executed:
# Check the git history to see the actual change
git log --oneline .storybook/main.ts | head -5
# Show the actual diff of the change
git log -p .storybook/main.ts | head -100Repository: BloomBooks/bloom-player
Length of output: 128
🏁 Script executed:
# Also verify if any stories use other removed addon features
echo "=== Checking for viewport usage ==="
rg "viewport:" src/stories/ 2>/dev/null
echo -e "\n=== Checking for backgrounds usage ==="
rg "backgrounds:" src/stories/ 2>/dev/null
echo -e "\n=== Checking for addon-actions usage ==="
rg "@storybook/addon-actions|useArgs|argTypes.*action" src/stories/ 2>/dev/nullRepository: BloomBooks/bloom-player
Length of output: 185
🏁 Script executed:
cat -n .storybook/main.tsRepository: BloomBooks/bloom-player
Length of output: 5154
🏁 Script executed:
# Also check if there's a package.json to see what addons are installed
cat package.json | grep -A 20 '"dependencies"' | head -30Repository: BloomBooks/bloom-player
Length of output: 787
Stories that use argTypes controls will not render control UI.
Stories at src/stories/navigation.stories.tsx and src/stories/multiBook.stories.tsx define argTypes with control: "boolean", which requires @storybook/addon-controls. This addon was bundled in @storybook/addon-essentials but is not present in the new configuration. @storybook/addon-links and @storybook/addon-docs do not include controls functionality.
Add @storybook/addon-controls to the addons array or reinstall @storybook/addon-essentials if other features (actions, viewport, backgrounds, measure, outline) are also needed.
🤖 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 @.storybook/main.ts at line 15, The Storybook config's addons array currently
includes "@storybook/addon-links" and "@storybook/addon-docs" but is missing
controls, so stories using argTypes with control:"boolean" won't render
controls; update the addons array in .storybook/main.ts (the addons
variable/array) to include "@storybook/addon-controls" or replace the current
addons with "@storybook/addon-essentials" to restore controls and related
features, then reinstall or run Storybook to verify that navigation.stories.tsx
and multiBook.stories.tsx now show the control UI.
| "@storybook/addon-docs": "10.3.6", | ||
| "@storybook/addon-links": "10.3.6", | ||
| "@storybook/react-vite": "10.3.6", | ||
| "@testing-library/dom": "^7.21.4", |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial | ⚡ Quick win
Consider upgrading @testing-library/dom to a more recent version.
Version ^7.21.4 of @testing-library/dom is from around 2020. More recent versions (13.x-14.x series as of early 2025) include bug fixes, performance improvements, and better TypeScript support.
What is the latest stable version of `@testing-library/dom` in May 2026?
🤖 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 `@package.json` at line 65, Update the `@testing-library/dom` dependency in
package.json by replacing the hard-coded old version string
("@testing-library/dom": "^7.21.4") with the current latest stable version:
fetch the exact version via your package registry (e.g., run npm view
`@testing-library/dom` version or check the npmjs.org page), update the
package.json entry accordingly, run your package manager to regenerate the
lockfile (npm install / pnpm install / yarn install), and run the test suite to
ensure compatibility (fix any TypeScript or API changes in tests referencing
`@testing-library/dom`).
StephenMcConnel
force-pushed
the
BL-16273-ConvertFromVoltaToVitePlus-2
branch
from
769f830 to
cabeb7f
Compare
There was a problem hiding this comment.
Actionable comments posted: 4
♻️ Duplicate comments (1)
.storybook/main.ts (1)
15-15:⚠️ Potential issue | 🟠 Major | ⚡ Quick winStories that use
argTypescontrols will not render control UI.Stories at
src/stories/navigation.stories.tsxandsrc/stories/multiBook.stories.tsxdefineargTypeswithcontrol: "boolean", which requires@storybook/addon-controls. This addon was bundled in@storybook/addon-essentialsbut is not present in the new configuration.@storybook/addon-linksand@storybook/addon-docsdo not include controls functionality.Add
@storybook/addon-controlsto theaddonsarray or reinstall@storybook/addon-essentialsif other features (actions, viewport, backgrounds, measure, outline) are also needed.🤖 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 @.storybook/main.ts at line 15, The Storybook config's addons array (the addons entry in .storybook/main.ts) is missing `@storybook/addon-controls` so argTypes with control: "boolean" won't render; update the addons array (the addons variable) to include "`@storybook/addon-controls`" or alternatively replace the current addons list with "`@storybook/addon-essentials`" if you want controls plus actions/viewport/backgrounds/etc., ensuring the addons array contains the controls or essentials package.
🤖 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 `@package.json`:
- Around line 46-58: The dependency list pins an old vulnerable axios ("axios":
"0.18.1") and conflicts with the workspace savePrefix policy; update the axios
entry in package.json to at least "0.31.1" (preferably "1.16.1") to remove the
HIGH severity vulnerability, run lockfile update (pnpm install) and test; also
decide whether you want exact pins or caret ranges—if you want workspace
behavior, align package.json version strings to use the savePrefix policy (e.g.,
"^" ranges) or update pnpm-workspace.yaml to document intentional exact pins so
versions are consistent.
In `@pnpm-workspace.yaml`:
- Line 9: The repo has an inconsistency between pnpm's savePrefix setting and
the pinned versions in package.json: adjust the pnpm-workspace.yaml savePrefix
(the savePrefix key) to match your desired policy or update package.json to
match it; either remove or set savePrefix to "" to enforce exact pins across new
installs, or change the pinned dependencies in package.json back to caret ranges
(^) so they align with savePrefix: "^". Ensure the change is applied to the
savePrefix entry in pnpm-workspace.yaml and/or the dependency version strings in
package.json so both files follow the same pinning strategy.
- Line 6: The YAML line defining allowBuilds has inconsistent spacing inside the
braces; update the allowBuilds mapping so it follows standard YAML style (no
extra spaces inside braces) by normalizing the inline mapping for allowBuilds
(the keys esbuild and swiper) to the conventional formatting.
In `@README-advanced.md`:
- Around line 67-83: Update the pnpm link/unlink instructions to use the modern
path-based workflow: remove the standalone "pnpm link" step in bloom-player's
folder (or replace with guidance to use "pnpm link --global" only if
intentionally relying on a global store), and instruct the consumer in the other
project's development folder to run "pnpm link <path-to-bloom-player>" (relative
or absolute path) to create the link; for unlinking show both "pnpm unlink
bloom-player" (by package name) and the alternative "pnpm unlink
<path-to-bloom-player>" when path form was used, and add a brief pointer to the
pnpm link documentation URL for reference.
---
Duplicate comments:
In @.storybook/main.ts:
- Line 15: The Storybook config's addons array (the addons entry in
.storybook/main.ts) is missing `@storybook/addon-controls` so argTypes with
control: "boolean" won't render; update the addons array (the addons variable)
to include "`@storybook/addon-controls`" or alternatively replace the current
addons list with "`@storybook/addon-essentials`" if you want controls plus
actions/viewport/backgrounds/etc., ensuring the addons array contains the
controls or essentials package.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: b7d00ad6-51e5-487f-bf7a-3a17ff7e0b4c
⛔ Files ignored due to path filters (2)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yamlyarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (8)
.storybook/main.tsREADME-advanced.mdREADME.mdpackage.jsonpnpm-workspace.yamlsrc/globals.d.tssrc/stories/tsconfig.jsontsconfig.json
StephenMcConnel
force-pushed
the
BL-16273-ConvertFromVoltaToVitePlus-2
branch
from
cabeb7f to
9733fdc
Compare
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Updates were inspired by BL-16273, but vite+ didn't seem to work with storybook. One of the current storybook
addons is not working with vite 8.0.
This change is
Summary by CodeRabbit
Chores
Documentation