manager icon indicating copy to clipboard operation
manager copied to clipboard

tech-story: [M3-10697] - Upgrade to Storybook v10

Open jaalah-akamai opened this issue 2 months ago β€’ 1 comments

Description πŸ“

The app has been upgraded to Vite 7. Storybook v9 has compatibility issues and v10 is the supported line for Vite 7.

Storybook v10 is ESM-only and requires Node 20.19+ or 22.12+

https://storybook.js.org/docs/releases/migration-guide

Changes πŸ”„

  • Bump Storybook dependencies to v10:
    • storybook, @storybook/react-vite, @storybook/addon-docs, @storybook/addon-a11y in packages/manager.
    • @storybook/react-vite in packages/ui and packages/shared.
  • Validate .storybook configs (main.ts, preview.tsx, viteFinal) continue to work under v10.
  • Confirm the dark mode addon compatibility. If @vueless/storybook-dark-mode is not v10-compatible, migrate to @storybook/addon-themes.
  • Ensure Node used by Storybook is β‰₯ 20.19 or β‰₯ 22.12.

Scope 🚒

Upon production release, changes in this PR will be visible to:

  • [ ] All customers
  • [ ] Some customers (e.g. in Beta or Limited Availability)
  • [x] No customers / Not applicable

Target release date πŸ—“οΈ

N/A

How to test πŸ§ͺ

Verification steps

  • pnpm --filter linode-manager storybook starts successfully on Node 22.19 and loads stories.
  • pnpm --filter linode-manager build-storybook completes without errors.
  • Docs tab renders (MDX+autodocs) without TS or runtime errors.
  • Dark mode toggle works in both Canvas and Docs.
  • No new ESLint/TS errors in packages/manager due to the upgrade.
  • CI passes Storybook build step.
Author Checklists

As an Author, to speed up the review process, I considered πŸ€”

πŸ‘€ Doing a self review ❔ Our contribution guidelines 🀏 Splitting feature into small PRs βž• Adding a changeset πŸ§ͺ Providing/improving test coverage πŸ” Removing all sensitive information from the code and PR description 🚩 Using a feature flag to protect the release πŸ‘£ Providing comprehensive reproduction steps πŸ“‘ Providing or updating our documentation πŸ•› Scheduling a pair reviewing session πŸ“± Providing mobile support β™Ώ Providing accessibility support


  • [x] I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed βœ…

  • [ ] All tests and CI checks are passing
  • [ ] TypeScript compilation succeeded without errors
  • [ ] Code passes all linting rules

jaalah-akamai avatar Oct 31 '25 00:10 jaalah-akamai

Cloud Manager UI test results

:small_red_triangle: 1 failing test on test run #6 β†—οΈŽ

:x: Failing:white_check_mark: Passing:arrow_right_hook: Skipped:clock1: Duration
1 Failing861 Passing11 Skipped45m 53s

Details

Failing Tests
SpecTest
:x:clone-linode.spec.tsCloud Manager Cypress Tests→clone linode » can clone a Linode from Linode details page

Troubleshooting

Use this command to re-run the failing tests:

pnpm cy:run -s "cypress/e2e/core/linodes/clone-linode.spec.ts"

linode-gh-bot avatar Nov 25 '25 22:11 linode-gh-bot

This PR is stale because it has been open 15 days with no activity. Please attend to this PR or it will be closed in 5 days

github-actions[bot] avatar Dec 12 '25 00:12 github-actions[bot]