chore(deps): update storybook monorepo to v8 (major) (#2472)

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Jeremias Peier <[email protected]>

.storybook/main.ts

@@ -1,5 +1,5 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
-import { BuildOptions, UserConfig, mergeConfig } from 'vite';
+import { type BuildOptions, type UserConfig, mergeConfig } from 'vite';
 import turbosnap from 'vite-plugin-turbosnap';
 
 const config: StorybookConfig = {

.storybook/manager.js

@@ -1,4 +1,4 @@
-import { addons } from '@storybook/addons';
+import { addons } from '@storybook/manager-api';
 import theme from './theme';
 
 addons.setConfig({

docs/DEVELOP.md

@@ -49,7 +49,7 @@ You can find a list of all branches along with their Netlify deployment URL here
 | @storybook/addon-links                | link stories together to build demos and prototypes with your UI components                   | https://github.com/storybookjs/storybook/tree/master/addons/actions                    |
 | @storybook/blocks                     | storybook doc blocks                                                                          | https://github.com/storybookjs/storybook/tree/next/code/addons/links                   |
 | @storybook/builder-vite               | plugin to run and build storybooks with vite                                                  | https://github.com/storybookjs/storybook/tree/next/code/builders/builder-vite/#readme  |
-| @storybook/testing-library            | instrumented version of testing library for storybook interactions                            | https://github.com/storybookjs/testing-library#readme                                  |
+| @storybook/test                       | instrumented version of testing library for storybook interactions                            | https://github.com/storybookjs/testing-library#readme                                  |
 | @storybook/web-components             | storybook web-components renderer                                                             | https://github.com/storybookjs/storybook/tree/next/code/renderers/web-components       |
 | @storybook/web-components-vite        | storybook for web-components and vite: develop web components in isolation with hot reloading | https://github.com/storybookjs/storybook/tree/next/code/frameworks/web-components-vite |
 | @types/glob                           | TypeScript definitions for glob                                                               | https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/glob              |

package.json

@@ -64,16 +64,15 @@
     "@open-wc/lit-helpers": "0.7.0",
     "@open-wc/testing": "4.0.0",
     "@sbb-esta/lyne-design-tokens": "0.4.1",
-    "@storybook/addon-a11y": "7.6.17",
-    "@storybook/addon-actions": "7.6.17",
-    "@storybook/addon-essentials": "7.6.17",
-    "@storybook/addon-interactions": "7.6.17",
-    "@storybook/addon-links": "7.6.17",
-    "@storybook/blocks": "7.6.17",
-    "@storybook/builder-vite": "7.6.17",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/web-components": "7.6.17",
-    "@storybook/web-components-vite": "7.6.17",
+    "@storybook/addon-a11y": "8.0.0",
+    "@storybook/addon-actions": "8.0.0",
+    "@storybook/addon-essentials": "8.0.0",
+    "@storybook/addon-interactions": "8.0.0",
+    "@storybook/addon-links": "8.0.0",
+    "@storybook/blocks": "8.0.0",
+    "@storybook/test": "8.0.0",
+    "@storybook/web-components": "8.0.0",
+    "@storybook/web-components-vite": "8.0.0",
     "@types/glob": "8.1.0",
     "@types/mocha": "^10.0.4",
     "@types/node": "20.11.27",
@@ -111,7 +110,7 @@
     "sass": "1.72.0",
     "sinon": "17.0.1",
     "standard-version": "^9.5.0",
-    "storybook": "7.6.17",
+    "storybook": "8.0.0",
     "stylelint": "16.2.1",
     "stylelint-config-prettier-scss": "1.0.0",
     "stylelint-config-standard-scss": "12.0.0",

src/components/autocomplete/autocomplete.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/datepicker/datepicker-toggle/datepicker-toggle.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/datepicker/datepicker/datepicker.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Args,

src/components/dialog/dialog.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/header/header/header.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/loading-indicator/loading-indicator.stories.ts

@@ -1,4 +1,4 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
 import isChromatic from 'chromatic';

src/components/menu/menu/menu.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/navigation/navigation-section/navigation-section.stories.ts

@@ -1,4 +1,4 @@
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args } from '@storybook/web-components';
 import isChromatic from 'chromatic';

src/components/navigation/navigation/navigation.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
+import { userEvent, waitFor, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/popover/popover/popover.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Args,

src/components/select/select.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/components/skiplink-list/skiplink-list.stories.ts

@@ -1,4 +1,4 @@
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type { Meta, StoryObj, ArgTypes, Args, StoryContext } from '@storybook/web-components';
 import isChromatic from 'chromatic';

src/components/toast/toast.stories.ts

@@ -1,5 +1,5 @@
 import { withActions } from '@storybook/addon-actions/decorator';
-import { within } from '@storybook/testing-library';
+import { within } from '@storybook/test';
 import type { InputType } from '@storybook/types';
 import type {
   Meta,

src/storybook/testing/wait-for-components-ready.ts

@@ -1,4 +1,4 @@
-import { waitFor } from '@storybook/testing-library';
+import { waitFor } from '@storybook/test';
 
 export async function waitForComponentsReady(checkFirstRenderingDone: () => any): Promise<void> {
   await new Promise<void>((resolve: () => void) => {

src/storybook/testing/wait-for-stable-position.ts

@@ -1,4 +1,4 @@
-import { waitFor } from '@storybook/testing-library';
+import { waitFor } from '@storybook/test';
 
 export async function waitForStablePosition(
   elementCallback: () => HTMLElement | Promise<HTMLElement>,