feat(storybook): upgrade to version 10.1.4#767
Conversation
- Upgraded Storybook from version 7.6.10 to latest 10.1.4 - Updated package versions and dependencies - Fixed imports, stories and addons to address breaking Storybook version changes - Replaced deprecated components and packages - Fix broken images within stories - Fixed initial value for dark mode hook
|
Hey @dtychshenko, thanks for the PR! Most of the stories seem to work but the 
|
| "node": ">=20.19.0", | ||
| "pnpm": ">=10.18.1" |
There was a problem hiding this comment.
Any specific reason to change the this logic?
There was a problem hiding this comment.
Storybook requires Node 20.19+ or 22.12+ or 24+. https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#nodejs-2019-or-2212-required
Although I haven't tested every version, the previous range was no longer valid and I figured >= 20.19.0 should be good enough, but I can be more specific and match what storybook requires: ^20.19.0 || ^22.12.0 || >=24 Would you prefer this instead? And I can revert the pnpm range in case future major versions aren't compatible.
There was a problem hiding this comment.
Gotcha gotcha. I think on the node side we should be fine. I'll make an issue for this but we should probably update everything to node 22.x as 20.x is going to be EOL in a couple months.
I don't have a ton of concern on the node side as things are generally stable there but that should be aligned with the node version we're using here just to make sure there are no inconsistencies between Bazel and non-Bazel invocations. pnpm I am slightly worried about majors having breaking changes, specifically in the lockfile format which may cause issues with how Bazel resolves dependencies.
Can do we do something like
"node": "20.19.6",
"pnpm": "^10.18.1"
and update the MODULE.bazel to use that node version?
There was a problem hiding this comment.
Oh I didn't realize bazel has its own version configured. I see that's it's set to 22.15.1, which already satisfies the overall project requirements. I've updated the package.json version to match that. This should now satisfy Storybook, overall project requirements and match existing Bazel and Volta settings.
Thanks! This should be fixed now |
| "type": "image", | ||
| "metaData": { | ||
| "ref": "https://player-ui.github.io/latest/logo/logo-light-large.png" | ||
| "ref": "https://raw.githubusercontent.com/player-ui/player/refs/tags/0.14.1/docs/site/src/assets/logo/logo-light-large.png" |
There was a problem hiding this comment.
Can you say a bit about what issue this fixed? I'm wondering if we can keep the original url since it points to latest, rather than a specific tag version. If not, is there a way for all of these changed links to point to main rather than a specific release?
There was a problem hiding this comment.
The previous image at https://player-ui.github.io/latest/logo/logo-light-large.png seems to no longer exist, so currently these are broken images in the storybook:
We can point to the version on the main branch, but as the codebase evolves and moves, there's a good chance that at some point the image could be moved to a different location and all the links to main would be broken again.
Hence, I wanted to point them to the latest tag 0.14. to be a bit more future proof. But the tag, of course, could also be removed or updated in the future (although there's less chance of that), but what I could also do is point it to the latest commit on the main branch, so the likelihood of it being changed is close to 0. It will be something like: https://raw.githubusercontent.com/player-ui/player/1761014/docs/site/src/assets/logo/logo-light-large.png What do you think?
There was a problem hiding this comment.
Hm, good point. If it's also just the logo image, it should be fine to point to a specific tag.
| "type": "image", | ||
| "metaData": { | ||
| "ref": "https://player-ui.github.io/latest/logo/logo-light-large.png" | ||
| "ref": "https://raw.githubusercontent.com/player-ui/player/refs/tags/0.14.1/docs/site/src/assets/logo/logo-light-large.png" |
There was a problem hiding this comment.
Hm, good point. If it's also just the logo image, it should be fine to point to a specific tag.
KetanReddy
added
minor
4 participants
7.6.10to latest10.1.4. See migration guideCloses #744
Change Type (required)
Indicate the type of change your pull request is:
patchminormajorN/ADoes your PR have any documentation updates?
Demo
Screen.Recording.2025-12-06.at.5.30.00.PM.Small.mp4
Release Notes
Upgraded Storybook from version
7.6.10to latest10.1.4. Also fixed broken images within stories and initial value for dark mode for the editors.