Merge branch 'next' into norbert/automigration-upgrading-storybook-re…

…lated-deps

code/addons/docs/template/stories/docspage/autoplay.stories.ts

@@ -1,6 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { expect } from '@storybook/test';
-import { within } from '@storybook/testing-library';
+import { expect, within } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/addons/interactions/package.json

@@ -65,7 +65,7 @@
     "@storybook/instrumenter": "workspace:*",
     "@storybook/manager-api": "workspace:*",
     "@storybook/preview-api": "workspace:*",
-    "@storybook/testing-library": "next",
+    "@storybook/test": "workspace:*",
     "@storybook/theming": "workspace:*",
     "@types/node": "^18.0.0",
     "formik": "^2.2.9",

code/addons/interactions/src/components/Interaction.stories.tsx

@@ -1,7 +1,6 @@
 import type { StoryObj, Meta } from '@storybook/react';
-import { expect } from '@storybook/test';
 import { CallStates } from '@storybook/instrumenter';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within, expect } from '@storybook/test';
 import { getCalls } from '../mocks';
 
 import { Interaction } from './Interaction';

code/addons/interactions/src/components/InteractionsPanel.stories.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import type { StoryObj, Meta } from '@storybook/react';
 import { CallStates } from '@storybook/instrumenter';
 import { styled } from '@storybook/theming';
-import { userEvent, within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { userEvent, within, waitFor, expect } from '@storybook/test';
 import isChromatic from 'chromatic/isChromatic';
 
 import { getCalls, getInteractions } from '../mocks';

code/addons/onboarding/package.json

@@ -55,7 +55,6 @@
     "@storybook/react": "workspace:*",
     "@storybook/telemetry": "workspace:*",
     "@storybook/test": "workspace:*",
-    "@storybook/testing-library": "next",
     "@storybook/theming": "workspace:*",
     "@storybook/types": "workspace:*",
     "framer-motion": "^11.0.3",

code/addons/onboarding/src/components/List/List.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, waitFor, within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { userEvent, waitFor, within, expect } from '@storybook/test';
 
 import { List } from './List';
 import { ListItem } from './ListItem/ListItem';

code/addons/onboarding/src/components/Modal/Modal.stories.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
-import { userEvent, within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { userEvent, within, expect } from '@storybook/test';
 
 import { Modal } from './Modal';
 

code/addons/onboarding/src/components/PulsatingEffect/PulsatingEffect.stories.tsx

@@ -1,8 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { PulsatingEffect } from './PulsatingEffect';
 import React from 'react';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 const meta: Meta<typeof PulsatingEffect> = {
   component: PulsatingEffect,

code/addons/onboarding/src/features/WriteStoriesModal/WriteStoriesModal.stories.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
-import { waitFor, within } from '@storybook/testing-library';
-import { expect, fn } from '@storybook/test';
+import { waitFor, within, expect, fn } from '@storybook/test';
 import { STORY_INDEX_INVALIDATED, STORY_RENDERED } from '@storybook/core-events';
 import { WriteStoriesModal } from './WriteStoriesModal';
 import typescriptSnippet from './code/typescript';

code/frameworks/angular/template/stories/core/applicationConfig/with-browser-animations.stories.ts

@@ -1,7 +1,6 @@
 import { Meta, StoryObj, applicationConfig } from '@storybook/angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, userEvent, expect } from '@storybook/test';
 import { importProvidersFrom } from '@angular/core';
 import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
 

code/frameworks/angular/template/stories/core/applicationConfig/with-noop-browser-animations.stories.ts

@@ -1,7 +1,6 @@
 import { Meta, StoryObj } from '@storybook/angular';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { within, userEvent } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, userEvent, expect } from '@storybook/test';
 import { importProvidersFrom } from '@angular/core';
 import { OpenCloseComponent } from '../moduleMetadata/angular-src/open-close-component/open-close.component';
 

code/frameworks/nextjs/template/stories/Image.stories.jsx

@@ -1,6 +1,5 @@
 import React, { useRef, useState } from 'react';
 import Image from 'next/image';
-import { waitFor } from '@storybook/testing-library';
 
 import Accessibility from '../../assets/accessibility.svg';
 import AvifImage from '../../assets/avif-test-image.avif';

code/frameworks/nextjs/template/stories_nextjs-default-js/Head.stories.jsx

@@ -1,7 +1,6 @@
-import { expect } from '@storybook/test';
 import Head from 'next/head';
 import React from 'react';
-import { within, userEvent, waitFor } from '@storybook/testing-library';
+import { waitFor, expect } from '@storybook/test';
 
 function Component() {
   return (

code/lib/cli/src/automigrate/fixes/vite-config-file.ts

@@ -105,7 +105,7 @@ export const viteConfigFile = {
         If you do already have these plugins, you can ignore this message.
 
         You can find more information on how to do this here:
-        https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added  
+        https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file
 
         This change was necessary to support newer versions of Vite.
       `;
@@ -115,7 +115,7 @@ export const viteConfigFile = {
       Please add a vite.config.js file to your project root.
 
       You can find more information on how to do this here:
-      https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#framework-specific-vite-plugins-have-to-be-explicitly-added
+      https://storybook.js.org/docs/8.0/migration-guide/#missing-viteconfigjs-file
 
       This change was necessary to support newer versions of Vite.
     `;

code/lib/cli/src/sandbox-templates.ts

@@ -443,7 +443,7 @@ const baseTemplates = {
   },
   'qwik-vite/default-ts': {
     name: 'Qwik CLI Latest (Vite | TypeScript)',
-    script: 'yarn create qwik basic {{beforeDir}}',
+    script: 'npm create qwik basic {{beforeDir}}',
     // TODO: The community template does not provide standard stories, which is required for e2e tests. Reenable once it does.
     inDevelopment: true,
     expected: {

code/lib/manager-api/src/modules/refs.ts

@@ -43,7 +43,7 @@ export interface SubAPI {
    * @param {string} id - The ID of the composed ref.
    * @param {API_ComposedRefUpdate} ref - The update object for the composed ref.
    */
-  updateRef: (id: string, ref: API_ComposedRefUpdate) => void;
+  updateRef: (id: string, ref: API_ComposedRefUpdate) => Promise<void>;
   /**
    * Gets all composed refs.
    * @returns {API_Refs} - The composed refs object.
@@ -60,7 +60,7 @@ export interface SubAPI {
    * @param {string} id - The ID of the composed ref.
    * @param {string} url - The new URL for the composed ref.
    */
-  changeRefVersion: (id: string, url: string) => void;
+  changeRefVersion: (id: string, url: string) => Promise<void>;
   /**
    * Changes the state of a composed ref by its ID and previewInitialized flag.
    * @param {string} id - The ID of the composed ref.
@@ -168,12 +168,12 @@ export const init: ModuleFn<SubAPI, SubState> = (
 
       return Object.values(refs).find(({ url }: any) => url.match(source));
     },
-    changeRefVersion: (id, url) => {
+    changeRefVersion: async (id, url) => {
       const { versions, title } = api.getRefs()[id];
       const ref: API_SetRefData = { id, url, versions, title, index: {}, expanded: true };
 
-      api.setRef(id, { ...ref, type: 'unknown' }, false);
-      api.checkRef(ref);
+      await api.setRef(id, { ...ref, type: 'unknown' }, false);
+      await api.checkRef(ref);
     },
     changeRefState: (id, previewInitialized) => {
       const { [id]: ref, ...updated } = api.getRefs();
@@ -276,7 +276,7 @@ export const init: ModuleFn<SubAPI, SubState> = (
       return refs;
     },
 
-    setRef: (id, { storyIndex, setStoriesData, ...rest }, ready = false) => {
+    setRef: async (id, { storyIndex, setStoriesData, ...rest }, ready = false) => {
       if (singleStory) {
         return;
       }
@@ -307,10 +307,10 @@ export const init: ModuleFn<SubAPI, SubState> = (
         index = addRefIds(index, ref);
       }
 
-      api.updateRef(id, { ...ref, ...rest, index, internal_index });
+      await api.updateRef(id, { ...ref, ...rest, index, internal_index });
     },
 
-    updateRef: (id, data) => {
+    updateRef: async (id, data) => {
       const { [id]: ref, ...updated } = api.getRefs();
 
       updated[id] = { ...ref, ...data };
@@ -320,7 +320,7 @@ export const init: ModuleFn<SubAPI, SubState> = (
         return obj;
       }, {});
 
-      store.setState({
+      await store.setState({
         refs: ordered,
       });
     },
@@ -331,8 +331,11 @@ export const init: ModuleFn<SubAPI, SubState> = (
   const initialState: SubState['refs'] = refs;
 
   if (runCheck) {
-    Object.entries(refs).forEach(([id, ref]) => {
-      api.checkRef({ ...ref!, stories: {} } as API_SetRefData);
+    new Promise(async (resolve) => {
+      for (const ref of Object.values(refs)) {
+        await api.checkRef({ ...ref!, stories: {} } as API_SetRefData);
+      }
+      resolve(undefined);
     });
   }
 

code/lib/manager-api/src/tests/refs.test.ts

@@ -171,6 +171,9 @@ describe('Refs API', () => {
       // given
       initRefs({ provider, store } as any);
 
+      // the `runCheck` is async, so we need to wait for it to finish
+      await vi.waitFor(() => fetchMock.mock.calls.length > 0);
+
       expect(fetchMock.mock.calls).toMatchInlineSnapshot(`
         [
           [
@@ -207,6 +210,9 @@ describe('Refs API', () => {
       };
       initRefs({ provider, store } as any);
 
+      // the `runCheck` is async, so we need to wait for it to finish
+      await vi.waitFor(() => fetchMock.mock.calls.length > 0);
+
       expect(fetchMock.mock.calls).toMatchInlineSnapshot(`
         [
           [

code/lib/preview-api/template/stories/argMapping.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 const arrows = {
   ArrowUp: { name: 'ArrowUp' },

code/lib/preview-api/template/stories/argTypes.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { expect, within } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/args.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 import pick from 'lodash/pick';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 

code/lib/preview-api/template/stories/component-play.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/decorators.stories.ts

@@ -5,8 +5,7 @@ import type {
   PlayFunctionContext,
   StoryContext,
 } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 import { useEffect } from '@storybook/preview-api';
 import { STORY_ARGS_UPDATED, UPDATE_STORY_ARGS, RESET_STORY_ARGS } from '@storybook/core-events';
 

code/lib/preview-api/template/stories/globals.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/hooks.stories.ts

@@ -1,7 +1,7 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext } from '@storybook/types';
 import { useEffect, useState } from '@storybook/preview-api';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Button,

code/lib/preview-api/template/stories/loaders.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/parameters.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/lib/preview-api/template/stories/rendering.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PlayFunctionContext } from '@storybook/types';
-import { within, waitFor } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, waitFor, expect } from '@storybook/test';
 import {
   FORCE_REMOUNT,
   RESET_STORY_ARGS,

code/lib/preview-api/template/stories/shortcuts.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within, expect, fn } from '@storybook/test';
 import { PREVIEW_KEYDOWN } from '@storybook/core-events';
-import { expect, fn } from '@storybook/test';
 import type { PlayFunctionContext } from '@storybook/csf';
 
 export default {

code/lib/preview-api/template/stories/tags.stories.ts

@@ -1,7 +1,6 @@
 import { global as globalThis } from '@storybook/global';
 import type { PartialStoryFn, PlayFunctionContext, StoryContext } from '@storybook/types';
-import { within } from '@storybook/testing-library';
-import { expect } from '@storybook/test';
+import { within, expect } from '@storybook/test';
 
 export default {
   component: globalThis.Components.Pre,

code/renderers/preact/template/cli/Header.stories.jsx

@@ -1,3 +1,4 @@
+import { fn } from '@storybook/test';
 import { Header } from './Header';
 
 export default {

code/renderers/svelte/template/stories/args.stories.js

@@ -1,11 +1,5 @@
-import { expect } from '@storybook/test';
-import { within, userEvent, waitFor } from '@storybook/testing-library';
-import {
-  UPDATE_STORY_ARGS,
-  STORY_ARGS_UPDATED,
-  RESET_STORY_ARGS,
-  STORY_RENDERED,
-} from '@storybook/core-events';
+import { within, userEvent, waitFor, expect } from '@storybook/test';
+import { UPDATE_STORY_ARGS, RESET_STORY_ARGS, STORY_RENDERED } from '@storybook/core-events';
 import { addons } from '@storybook/preview-api';
 import ButtonView from './views/ButtonJavaScript.svelte';
 

code/renderers/vue3/template/stories_vue3-vite-default-ts/GlobalSetup.stories.ts

@@ -1,6 +1,5 @@
-import { expect } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/vue3';
-import { within } from '@storybook/testing-library';
+import { within, expect } from '@storybook/test';
 import { inject } from 'vue';
 import GlobalSetup from './GlobalSetup.vue';
 

code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveArgs.stories.ts

@@ -1,7 +1,6 @@
-import { expect } from '@storybook/test';
 import { global as globalThis } from '@storybook/global';
 import type { Meta, StoryObj, StoryFn } from '@storybook/vue3';
-import { within, userEvent } from '@storybook/testing-library';
+import { within, userEvent, expect } from '@storybook/test';
 import { UPDATE_STORY_ARGS, STORY_ARGS_UPDATED, RESET_STORY_ARGS } from '@storybook/core-events';
 
 import ReactiveArgs from './ReactiveArgs.vue';

code/renderers/vue3/template/stories_vue3-vite-default-ts/ReactiveDecorators.stories.ts

@@ -1,5 +1,5 @@
 import { global as globalThis } from '@storybook/global';
-import { userEvent, within } from '@storybook/testing-library';
+import { userEvent, within } from '@storybook/test';
 import type { Meta, StoryObj } from '@storybook/vue3';
 import { h } from 'vue';
 import { RESET_STORY_ARGS, STORY_ARGS_UPDATED, UPDATE_STORY_ARGS } from '@storybook/core-events';