chore: Upgrade storybook to 8.6.4

[kingston]

Summary by CodeRabbit

• Refactor
  • Updated the Storybook configuration to dynamically resolve addon and framework paths for greater flexibility.
• Chores
  • Upgraded Storybook dependencies to the latest versions, ensuring improved stability and access to recent enhancements.

[linear]

ENG-566 Upgrade storybook to upgrade esbuild

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6631a64

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

This pull request modifies the Storybook configuration by introducing a new utility function, getAbsolutePath, which resolves the absolute path for a package by locating its package.json file. The function replaces hardcoded addon and framework identifiers with dynamically resolved paths in the Storybook configuration file. Additionally, the pull request updates several Storybook-related dependency versions in the project’s package.json file from ^8.4.7 to ^8.6.4.

Changes

File(s)	Change Summary
packages/ui-components/.storybook/main.ts	Added the getAbsolutePath function; replaced hardcoded addon (@storybook/addon-links, @storybook/addon-essentials, etc.) and framework strings with dynamic path resolution.
packages/ui-components/package.json	Updated Storybook-related dependency versions in devDependencies from ^8.4.7 to ^8.6.4.

Sequence Diagram(s)

sequenceDiagram
    participant Config as Storybook Config Loader
    participant Util as getAbsolutePath
    participant FS as File System

    Config->>Util: Request absolute path for addon/framework
    Util->>FS: Search for package.json location
    FS-->>Util: Return package.json path
    Util-->>Config: Return resolved absolute path

Loading

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Lite

📥 Commits

Reviewing files that changed from the base of the PR and between ed229ab and 6631a64.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (2)

• packages/ui-components/.storybook/main.ts (1 hunks)
• packages/ui-components/package.json (2 hunks)

🔇 Additional comments (4)

packages/ui-components/.storybook/main.ts (3)

3-7: Well-implemented absolute path resolution

The addition of getAbsolutePath function is a good practice for Storybook 8.x configurations. This approach resolves package paths dynamically rather than using hardcoded strings, which helps prevent resolution issues in complex setups like monorepos.

---

12-15: Properly updated addon references

Converting the addon references to use the getAbsolutePath function is in line with Storybook's recommended configuration pattern for version 8. This ensures addons are correctly located regardless of the package management structure.

---

18-18: Framework configuration correctly updated

The framework name is now dynamically resolved, which is consistent with the approach used for addons and follows Storybook's best practices for version 8.

packages/ui-components/package.json (1)

84-94:

Details

✅ Verification successful

Version upgrade looks good

The Storybook dependencies have been consistently updated from 8.4.7 to 8.6.4. This is a minor version upgrade that maintains compatibility while bringing in the latest features and bug fixes.

You might want to check the Storybook changelog between these versions to be aware of any relevant changes:

Also applies to: 107-107

---

🌐 Web query:

What changed between Storybook 8.4.7 and 8.6.4?

💡 Result:

Storybook versions 8.4.7 to 8.6.4 introduced significant improvements in testing workflows, performance optimizations, and ecosystem updates. Here's a breakdown of key changes:

Testing Enhancements

• Realtime component testing integrated directly into Storybook's UI[5][7][10]
• Accessibility "todo" workflow to systematically track and fix a11y violations[5][7]
• Test installer for out-of-the-box setup in new projects[5][7]
• Focused test execution for faster feedback on specific components[5][10]

Performance & Size

• 50% smaller install footprint compared to 8.0 through dependency optimizations (fs-extra, handlebars removed)[10]
• 80% reduction in create-storybook package size[5][7]
• SWC support for Webpack projects (2-4x faster test builds)[1][4]

Framework Updates

• React Native Storybook 8 with mobile-optimized UI[10]
• Next.js 15.2+ compatibility[5][10]
• Experimental React Server Components (RSC) mocking[4][10]
• Svelte 5 and updated CSF format support[2][10]

New Features

• Tags-based filtering for organizing large storybooks[2][10]
• Vite 5 support with improved architecture[1][4]
• Security patches for Vite/ESbuild integrations[5][7]

Developer Experience

• Improved visual regression testing via Storybook Test addon[5][7]
• Enhanced docs with better code snippets and table of contents[5][10]
• Automatic test abortion for abandoned tests in CI[8]

While specific patch notes for 8.4.7 and 8.6.4 aren't detailed in sources, the 8.6.x series focused on stabilizing these features through numerous bug fixes and dependency updates[5][7]. The migration from 8.4 to 8.6 typically requires checking for deprecated APIs like storiesOf and updating test infrastructure[1][4][10].

Citations:

• 1: https://storybook.js.org/docs/migration-guide
• 2: https://storybook.js.org/releases/8.4
• 3: https://www.alabamaachieves.org/wp-content/uploads/2024/06/AS_20240618_ELA-DIG_V1.0.pdf
• 4: https://storybook.js.org/releases/8.0
• 5: https://github.com/storybookjs/storybook/blob/next/CHANGELOG.md
• 6: https://books.bk.tudelft.nl/press/catalog/download/119/127/402?inline=1
• 7: https://github.com/storybookjs/storybook/releases
• 8: https://applitools.com/tutorials/sdks/storybook/changelog
• 9: https://www.co.columbia.wi.us/columbiacounty/Portals/3/Comprehensive%20Planning/County%20Plan/ccplan.pdf
• 10: https://storybook.js.org/blog/storybook-8-4/

---

Storybook Dependencies Upgrade Confirmed

The dependency updates from 8.4.7 to 8.6.4 look solid. The upgraded Storybook packages consistently reflect the new version, which brings along valuable improvements in testing workflows, performance optimizations, and ecosystem integrations (such as Vite 5 support and refined test infrastructure). Although this is a minor version upgrade overall, please take a moment to review the changelog—especially for any deprecated APIs (e.g., references to storiesOf) that might impact your code.

Also applies to: lines 107-107

---

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[socket-security]

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@apollo/[email protected]	network Transitive: environment, eval	+19	7.93 MB	apollo-bot
npm/@envelop/[email protected]	None	+1	176 kB	dotansimha
npm/@envelop/[email protected]	None	+1	91.8 kB	dotansimha
npm/@envelop/[email protected]	None	+1	135 kB	dotansimha
npm/@fastify/[email protected]	None	+1	128 kB	gurgunday
npm/@fastify/[email protected]	None	0	13.3 kB	matteo.collina
npm/@graphql-codegen/[email protected]	environment, filesystem, network, shell, unsafe Transitive: eval	+311	36.9 MB	dotansimha
npm/@graphql-codegen/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+152	22.3 MB	dotansimha
npm/@graphql-codegen/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+154	22.9 MB	dotansimha
npm/@graphql-codegen/[email protected]	Transitive: environment, eval, filesystem, network, shell, unsafe	+153	22.3 MB	dotansimha
npm/@parcel/[email protected]	Transitive: environment, filesystem, shell	+10	690 kB	devongovett
npm/@playwright/[email protected]	None	+2	10.8 MB	yurys
npm/@pothos/[email protected]	None	0	1.13 MB	hayes
npm/@pothos/[email protected]	Transitive: environment, shell	+2	1.01 MB	hayes
npm/@pothos/[email protected]	None	0	470 kB	hayes
npm/@pothos/[email protected]	None	0	41.5 kB	hayes
npm/@pothos/[email protected]	None	0	79 kB	hayes
npm/@pothos/[email protected]	None	0	31.9 kB	hayes
npm/@prisma/[email protected]	environment, filesystem, shell	0	8.46 MB	prismabot
npm/@prisma/[email protected]	environment Transitive: filesystem, shell, unsafe	+24	10.7 MB	prismabot
npm/@sentry/[email protected]	None	0	3.6 MB	billyvg, evanpurkhiser, haza, ...7 more
npm/@sentry/[email protected]	environment, unsafe Transitive: filesystem, shell	+70	31.2 MB	sentry-bot
npm/@sentry/[email protected]	environment, filesystem, shell	+3	3.61 MB	billyvg, evanpurkhiser, haza, ...7 more
npm/@sentry/[email protected]	Transitive: environment	+7	7.32 MB	billyvg, evanpurkhiser, haza, ...7 more
npm/@sentry/[email protected]	None	0	80.3 kB	sentry-bot
npm/@types/[email protected]	None	0	867 kB	types
npm/@types/[email protected], 18.19.74, 20.12.7, 22.10.9 ➜ 20.14.13	None	0	2.09 MB	types
npm/@types/[email protected] ➜ 9.0.1	None	0	6.64 kB	types
npm/@types/[email protected]	None	0	21.6 kB	types
npm/@typescript-eslint/[email protected] ➜ 7.16.1	Transitive: environment, filesystem	+42	8.3 MB	jameshenry
npm/@typescript-eslint/[email protected] ➜ 7.16.1	Transitive: environment, filesystem	+36	3.45 MB	jameshenry
npm/[email protected]	Transitive: environment, eval, filesystem, network, shell	+44	10.3 MB	imolorhe
npm/[email protected]	environment Transitive: filesystem, shell	+4	55.1 kB	kentcdodds
npm/[email protected], 8.6.0 ➜ 16.3.1	None	0	71.6 kB	motdotla
npm/[email protected] ➜ 3.6.1	Transitive: environment, filesystem, unsafe	+30	1.18 MB	jounqin
npm/[email protected]	filesystem, unsafe Transitive: environment, eval	+90	5.98 MB	ljharb
npm/[email protected] ➜ 6.9.0	Transitive: eval	+90	10.1 MB	ljharb
npm/[email protected] ➜ 4.6.2	None	0	118 kB	react-bot
npm/[email protected] ➜ 7.34.4	Transitive: environment, eval	+93	5.8 MB	ljharb
npm/[email protected]	Transitive: environment, filesystem	+38	4.5 MB	veritem
npm/[email protected] ➜ 8.57.0	environment, filesystem Transitive: eval, shell, unsafe	+91	10.3 MB	eslintbot
npm/[email protected]	Transitive: environment, filesystem, network	+22	2.75 MB	dotansimha
npm/[email protected]	environment	0	1.36 MB	benjie
npm/[email protected]	filesystem	0	9.1 kB	brianc
npm/[email protected] ➜ 2.5.2	Transitive: environment, filesystem	+34	914 kB	matzkoh
npm/[email protected] ➜ 0.6.6	None	0	2.58 MB	thecrypticace
npm/[email protected], 3.4.2 ➜ 3.3.3	None	0	7.7 MB	prettier-bot
npm/[email protected]	environment Transitive: eval, filesystem, network, shell	+5	12.4 MB	prismabot
npm/[email protected]	None	+2	1.54 MB	timolins
npm/[email protected]	environment, filesystem Transitive: network, shell, unsafe	+93	14.4 MB	adamwathan
npm/[email protected]	filesystem Transitive: environment, shell	+34	1.09 MB	justkey
npm/[email protected]	Transitive: environment, filesystem, network, shell, unsafe	+3	678 kB	hirokiosame
npm/[email protected]	None	0	14.9 kB	turbobot
npm/[email protected]	None	0	21.9 MB	typescript-bot

🚮 Removed packages: npm/@changesets/[email protected], npm/@changesets/[email protected], npm/@cocalc/[email protected], npm/@dnd-kit/[email protected], npm/@dnd-kit/[email protected], npm/@dnd-kit/[email protected], npm/@dnd-kit/[email protected], npm/@fastify/[email protected], npm/@headlessui/[email protected], npm/@inquirer/[email protected], npm/@originjs/[email protected], npm/@prisma/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@radix-ui/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@storybook/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/@testing-library/[email protected], npm/@trpc/[email protected], npm/@trpc/[email protected], npm/@tsconfig/[email protected], npm/@tsconfig/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@types/[email protected], npm/@vitest/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected], npm/[email protected]

View full report↗︎