Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(deps): upgrade storybook to version 8 #1029

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

chore(deps): upgrade storybook to version 8 #1029

wants to merge 5 commits into from

Conversation

NoamGaash
Copy link
Member

@NoamGaash NoamGaash commented Feb 8, 2025

Description

upgraded storybook version.

  1. executed npx storybook@latest upgrade
  2. made some adaptations to vitest
  3. disable reactDocgen - to be honest, I'm not sure what it is, but it doesn't seem like we're using it

if anyone wants to review that, that would be appreciated. if not, I'll merge it


➜  open-bus-map-search git:(main) npx storybook@latest upgrade

Need to install the following packages:
[email protected]
Ok to proceed? (y) 

npm warn deprecated [email protected]: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated [email protected]: Rimraf versions prior to v4 are no longer supported
npm warn deprecated [email protected]: Glob versions prior to v9 are no longer supported
╭────────────────────────────────────────────────────────────────╮
│                                                                │
│   Upgrading Storybook from version 7.6.17 to version 8.5.3..   │
│                                                                │
╰────────────────────────────────────────────────────────────────╯
info Checking for upgrade blockers...
No blockers found.

info Updating dependencies in package.json..
Installing dependencies...


added 13 packages, removed 415 packages, changed 53 packages, and audited 1669 packages in 26s

338 packages are looking for funding
  run `npm fund` for details

6 vulnerabilities (1 moderate, 5 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.
🔎 checking possible migrations..

🔎 found a 'viteConfigFile' migration:
╭ Migration notification ──────────────────────────────────────────────────────────╮
│                                                                                  │
│   Since version 8.0.0, Storybook no longer ships with an in-built Vite config.   │
│   Please add a vite.config.js file to your project root.                         │
│                                                                                  │
│   You can find more information on how to do this here:                          │
│   https://storybook.js.org/docs/8.0/migration-guide#missing-viteconfigjs-file    │
│                                                                                  │
│   This change was necessary to support newer versions of Vite.                   │
│                                                                                  │
╰──────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to continue? … yes

🔎 found a 'remove-jest-testing-library' migration:
╭ Automigration detected ──────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                              │
│   Attention: We've detected that you're using the following packages which are known to be incompatible since Storybook 8:   │
│                                                                                                                              │
│   - @storybook/testing-library                                                                                               │
│                                                                                                                              │
│   We will uninstall them for you and install @storybook/test instead.                                                        │
│                                                                                                                              │
│   Also, we can help you migrate your stories to use the new package.                                                         │
│                                                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'remove-jest-testing-library' migration on your project? … yes
✔ Please enter the glob for your stories to migrate to @storybook/test … ./src/**/*.stories.*
=> Applying migrate-to-test-package: 8 files
Processing 8 files... 
Spawning 8 workers...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
Sending 1 files to free worker...
All done. 
Results: 
0 errors
8 unmodified
0 skipped
0 ok
Time elapsed: 1.755seconds 
✅ ran remove-jest-testing-library migration

🔎 found a 'remove-argtypes-regex' migration:
╭ Manual migration detected ───────────────────────────────────────────────────────────────────╮
│                                                                                              │
│   Attention: We've detected that you're using argTypesRegex:                                 │
│                                                                                              │
│   .storybook/preview.tsx                                                                     │
│      5 | const preview: Preview = {                                                          │
│      6 |   parameters: {                                                                     │
│   >  7 |     actions: { argTypesRegex: '^on[A-Z].*' },                                       │
│        |                ^^^^^^^^^^^^^                                                        │
│      8 |     controls: {                                                                     │
│      9 |       matchers: {                                                                   │
│     10 |         color: /(background|color)$/i,                                              │
│                                                                                              │
│   Storybook's play functions let you render your stories interactively.                      │
│                                                                                              │
│   In the past, play functions mocked action args implicitly by analyzing the argTypesRegex   │
│   in your preview.js|ts file.                                                                │
│                                                                                              │
│   However, Storybook 8 changes this behavior, and we now recommend using the                 │
│   (fn) function to mock your component's methods instead.                                    │
│                                                                                              │
│   Use the following command to check for implied mocked actions in your play functions:      │
│   npx storybook migrate find-implicit-spies --glob="**/*.stories.@(js|jsx|ts|tsx)"           │
│                                                                                              │
│   Then, refer to our docs to migrate your play functions to Storybook 8:                     │
│   https://storybook.js.org/docs/essentials/actions#via-storybooktest-fn-spy-function         │
│                                                                                              │
╰──────────────────────────────────────────────────────────────────────────────────────────────╯

✔ Select continue once you have made the required changes, or quit to exit the migration process … quit / continue

🔎 found a 'react-docgen' migration:
╭ Automigration detected ───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                               │
│   Since Storybook 8.0, react-docgen is now the default for generating component controls, replacing                           │
│   react-docgen-typescript.                                                                                                    │
│   This offers better performance and suits most cases.                                                                        │
│   However, for complex TypeScript types or specific type features, the generated controls might not be as precise.            │
│                                                                                                                               │
│   For more on this change, check the migration guide:                                                                         │
│   https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#react-docgen-component-analysis-by-default                  │
│                                                                                                                               │
│   For known "react-docgen" limitations, see:                                                                                  │
│   https://github.com/storybookjs/storybook/issues/26606                                                                       │
│                                                                                                                               │
│   Press Y to revert to react-docgen-typescript, press N to use react-docgen                                                   │
│                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'react-docgen' migration on your project? … no

🔎 found a 'visual-tests-addon' migration:
╭ Automigration detected ───────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                               │
│   New to Storybook 8: Storybook's Visual Tests addon helps you catch unintentional changes/bugs in your stories. The addon    │
│   is powered by Chromatic, a cloud-based testing tool developed by Storybook's core team.                                     │
│                                                                                                                               │
│   Learn more: https://storybook.js.org/docs/writing-tests/visual-testing                                                      │
│                                                                                                                               │
│   Install Visual Tests addon in your project?                                                                                 │
│                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'visual-tests-addon' migration on your project? … no

🔎 found a 'autodocs-tags' migration:
╭ Automigration detected ───────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                   │
│   The docs.autodocs setting in .storybook/main.ts is deprecated.                                                  │
│                                                                                                                   │
│   Learn more: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-docsautodocs-is-deprecated   │
│                                                                                                                   │
│   Remove docs.autodocs?                                                                                           │
│                                                                                                                   │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔ Do you want to run the 'autodocs-tags' migration on your project? … yes
✅ Removing "docs.autodocs" from .storybook/main.ts
✅ ran autodocs-tags migration

╭ Migration check ran successfully ─────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                               │
│   Successful migrations:                                                                                                      │
│                                                                                                                               │
│   remove-jest-testing-library, autodocs-tags                                                                                  │
│                                                                                                                               │
│   Manual migrations:                                                                                                          │
│                                                                                                                               │
│   remove-argtypes-regex                                                                                                       │
│                                                                                                                               │
│   Skipped migrations:                                                                                                         │
│                                                                                                                               │
│   react-docgen, visual-tests-addon                                                                                            │
│                                                                                                                               │
│   ─────────────────────────────────────────────────                                                                           │
│                                                                                                                               │
│   If you'd like to run the migrations again, you can do so by running 'npx storybook automigrate'                             │
│                                                                                                                               │
│   The automigrations try to migrate common patterns in your project, but might not contain everything needed to migrate to    │
│   the latest version of Storybook.                                                                                            │
│                                                                                                                               │
│   Please check the changelog and migration guide for manual migrations and more information:                                  │
│   https://storybook.js.org/docs/migration-guide                                                                               │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                     │
│                                                                                                                               │
╰───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

@NoamGaash NoamGaash requested a review from aviv1620 as a code owner February 8, 2025 07:20
@NoamGaash NoamGaash removed the request for review from aviv1620 February 9, 2025 06:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant