OZG-5271 OZG-5781 Upgrade Storybook from 7.5.3 to 8.1.4

$ npx storybook@latest upgrade --config-dir ./libs/design-system/.storybook
╭────────────────────────────────────────────────────────────────╮
│                                                                │
│   Upgrading Storybook from version 7.6.19 to version 8.1.4..   │
│                                                                │
╰────────────────────────────────────────────────────────────────╯
info Checking for upgrade blockers...
No blockers found.

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

added 72 packages, removed 97 packages, and changed 39 packages in 16s

364 packages are looking for funding
  run `npm fund` for details
🔎 checking possible migrations..

🔎 found a 'mdx-to-csf' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                            │
│   We've detected your project has one or more globs in your 'stories' config that matches .stories.mdx files:                                              │
│   "../**/*.stories.@(js|jsx|ts|tsx|mdx)"                                                                                                                   │
│                                                                                                                                                            │
│   In Storybook 7, we have deprecated defining stories in MDX files, and consequently have changed the suffix to simply .mdx. Since Storybook 8, we have    │
│   removed the support of story definition in MDX files entirely. Therefore '.stories.mdx' files aren't supported anymore.                                  │
│                                                                                                                                                            │
│   Now, since Storybook 8.0, we have removed support for .stories.mdx files.                                                                                │
│                                                                                                                                                            │
│   We can automatically migrate your 'stories' config to include any .mdx file instead of just .stories.mdx.                                                │
│   That would result in the following 'stories' config:                                                                                                     │
│   "../**/*.@(mdx|stories.@(js|jsx|ts|tsx))"                                                                                                                │
│                                                                                                                                                            │
│   Additionally, we will run the 'mdx-to-csf' codemod for you, which tries to transform '*.stories.mdx' files to '*.stories.js' and '*.mdx' files.          │
│                                                                                                                                                            │
│   To learn more about this change, see: https://storybook.js.org/docs/migration-guide#storiesmdx-to-mdxcsf                                                 │
│                                                                                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔️ Do you want to run the 'mdx-to-csf' migration on your project? … yes
✅ Setting 'stories' config:
[
  "../**/*.@(mdx|stories.@(js|jsx|ts|tsx))"
]
✔️ Please enter the glob for your MDX stories … ./src/**/*.stories.mdx
=> Applying mdx-to-csf: 0 files
=> No matching files for glob: ./src/**/*.stories.mdx
The migration successfully updated your 'stories' config to include any .mdx file instead of just .stories.mdx.

It also ran the 'mdx-to-csf' codemod to convert your MDX stories to CSF format.
This codemod is not perfect however, so you may need to manually fix any issues it couldn't handle.
✅ ran mdx-to-csf migration

🔎 found a 'autodocsTrue' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────╮
│                                                                                                    │
│   We've changed the configuration of autodocs (previous docsPage), so now the value:               │
│     - docs.autodocs: true -- means automatically create docs for every CSF file                    │
│     - docs.autodocs: 'tag' -- means only create autodocs for CSF files with the 'autodocs' tag     │
│     - docs.autodocs: false -- means never create autodocs                                          │
│                                                                                                    │
│   Based on your prior configuration,  we can set the `docs.autodocs` to keep your old behaviour:   │
│                                                                                                    │
│   docs: { autodocs: true }                                                                         │
│                                                                                                    │
│   More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#autodocs-changes      │
│                                                                                                    │
╰────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔️ Do you want to run the 'autodocsTrue' migration on your project? … yes
✅ Setting 'docs.autodocs' to true in main.js
✅ ran autodocsTrue migration

🔎 found a 'remove-react-dependency' migration:
╭ Manual migration detected ─────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                            │
│   We detected that your project has a dependency for "react" that it might not need.                                                                       │
│   Nothing breaks by having it, you can safely ignore this message, if you wish.                                                                            │
│                                                                                                                                                            │
│   Storybook asked you to add "react" as a direct dependency in the past when upgrading from Storybook 6 to 7.                                              │
│   However, since version 8.0, Storybook no longer requires you to provide "react" as a dependency.                                                         │
│   Some community addons might still wrongfully list "react" and "react-dom" as required peer dependencies, but since Storybook 7.6 it should not be        │
│   needed in the majority of cases.                                                                                                                         │
│                                                                                                                                                            │
│   If you know you are not using React outside of Storybook, it should be safe to remove the "react" and "react-dom" dependencies from your project's       │
│   package.json.                                                                                                                                            │
│   Storybook cannot do this automatically as removing it might break your project, so it should be done manually with care.                                 │
│                                                                                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯

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

🔎 found a 'upgradeStorybookRelatedDependencies' migration:
╭ Automigration detected ────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                        │
│   You're upgrading to the latest version of Storybook. We recommend upgrading the following packages:                                  │
│   - @nx/storybook: 18.3.5 => 19.1.0                                                                                                    │
│                                                                                                                                        │
│   After upgrading, we will run the dedupe command, which could possibly have effects on dependencies that are not Storybook related.   │
│   see: https://docs.npmjs.com/cli/commands/npm-dedupe                                                                                  │
│                                                                                                                                        │
│   Do you want to proceed (upgrade the detected packages)?                                                                              │
│                                                                                                                                        │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯
✔️ Do you want to run the 'upgradeStorybookRelatedDependencies' 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: 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? … yes
✅ Adding "@chromatic-com/storybook" addon
✅ ran visual-tests-addon migration

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

╭ Migration check ran successfully ──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╮
│                                                                                                                                                            │
│   Successful migrations:                                                                                                                                   │
│                                                                                                                                                            │
│   mdx-to-csf, autodocsTrue, visual-tests-addon, autodocs-tags                                                                                              │
│                                                                                                                                                            │
│   Manual migrations:                                                                                                                                       │
│                                                                                                                                                            │
│   remove-react-dependency                                                                                                                                  │
│                                                                                                                                                            │
│   Skipped migrations:                                                                                                                                      │
│                                                                                                                                                            │
│   upgradeStorybookRelatedDependencies                                                                                                                      │
│                                                                                                                                                            │
│   ─────────────────────────────────────────────────                                                                                                        │
│                                                                                                                                                            │
│   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/8.0/migration-guide             │
│   And reach out on Discord if you need help: https://discord.gg/storybook                                                                                  │
│                                                                                                                                                            │
╰────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────╯