Migrate to Storybook 8 (#7743)

* migrate to storybook 8

* add changeset

* formatting

* test

* pnpm lock

* revert test

* update testing-library

* pass (and improve) failing tests

* add changeset

* add changeset

---------

Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com>

.changeset/angry-files-pick.md

@@ -0,0 +1,7 @@
+---
+"@gradio/radio": patch
+"@gradio/storybook": patch
+"gradio": patch
+---
+
+feat:Migrate to Storybook 8

js/dropdown/dropdown.test.ts

@@ -190,7 +190,6 @@ describe("Dropdown", () => {
 	});
 
 	test("deselecting and reselcting a filtered dropdown should show all options again", async () => {
-		vi.useFakeTimers();
 		const { getByLabelText, getAllByTestId } = await render(Dropdown, {
 			show_label: true,
 			loading_status,
@@ -219,7 +218,6 @@ describe("Dropdown", () => {
 
 		await item.blur();
 		// Mock 100ms delay between interactions.
-		vi.runAllTimers();
 		await item.focus();
 		const options_new = getAllByTestId("dropdown-option");
 

js/image/Image.stories.svelte

@@ -1,7 +1,7 @@
 <script context="module">
 	import { Template, Story } from "@storybook/addon-svelte-csf";
 	import StaticImage from "./Index.svelte";
-	import { userEvent, within } from "@storybook/testing-library";
+	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
 
 	export const meta = {

js/imageeditor/ImageEditor.stories.svelte

@@ -3,7 +3,7 @@
 	import ImageEditor from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
-	import { userEvent, within } from "@storybook/testing-library";
+	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
 
 	export const meta = {

js/radio/Radio.test.ts

@@ -4,18 +4,6 @@ import { cleanup, render } from "@gradio/tootils";
 import event from "@testing-library/user-event";
 
 import Radio from "./Index.svelte";
-import type { LoadingStatus } from "@gradio/statustracker";
-
-const loading_status = {
-	eta: 0,
-	queue_position: 1,
-	queue_size: 1,
-	status: "complete" as LoadingStatus["status"],
-	scroll_to_output: false,
-	visible: true,
-	fn_index: 0,
-	show_progress: "full" as LoadingStatus["show_progress"]
-};
 
 describe("Radio", () => {
 	afterEach(() => cleanup());
@@ -32,10 +20,9 @@ describe("Radio", () => {
 			label: "Radio"
 		});
 
-		assert.equal(
-			getByTestId("cat-radio-label").className.includes("selected"),
-			true
-		);
+		const cat_radio = getAllByRole("radio")[1];
+
+		expect(cat_radio).toBeChecked();
 
 		const radioButtons: HTMLOptionElement[] = getAllByRole(
 			"radio"
@@ -48,30 +35,27 @@ describe("Radio", () => {
 	});
 
 	test("should update the value when a radio is clicked", async () => {
-		const { getByDisplayValue, getByTestId } = await render(Radio, {
+		const { getByDisplayValue, getAllByRole } = await render(Radio, {
 			choices: choices,
 			value: "cat",
 			label: "Radio"
 		});
 
-		await event.click(getByDisplayValue("dog"));
+		const dog_radio = getAllByRole("radio")[0];
 
-		assert.equal(
-			getByTestId("dog-radio-label").className.includes("selected"),
-			true
-		);
+		await event.click(dog_radio);
 
-		assert.equal(
-			getByTestId("cat-radio-label").classList.contains("selected"),
-			false
-		);
+		expect(dog_radio).toBeChecked();
+
+		const cat_radio = getAllByRole("radio")[1];
+
+		expect(cat_radio).not.toBeChecked();
 
 		await event.click(getByDisplayValue("turtle"));
 
-		assert.equal(
-			getByTestId("turtle-radio-label").classList.contains("selected"),
-			true
-		);
+		await event.click(cat_radio);
+
+		expect(cat_radio).toBeChecked();
 	});
 
 	test("should dispatch the select event when clicks", async () => {

js/radio/shared/Radio.svelte

@@ -35,6 +35,7 @@
 		type="radio"
 		name="radio-{++id}"
 		value={internal_value}
+		aria-checked={is_selected}
 		bind:group={selected}
 	/>
 	<span class="ml-2">{display_value}</span>

js/storybook/main.ts

@@ -5,7 +5,7 @@ import turbosnap from "vite-plugin-turbosnap";
 const config: StorybookConfig = {
 	stories: [
 		"../../js/**/*.mdx",
-		"../../js/**/*.stories.@(js|jsx|ts|tsx|svelte|mdx)"
+		"../../js/**/*.@(mdx|stories.@(js|jsx|ts|tsx|svelte))"
 	],
 	addons: [
 		"@storybook/addon-links",

js/storybook/preview.ts

@@ -30,7 +30,6 @@ const preview: Preview = {
 		}
 	},
 	parameters: {
-		actions: { argTypesRegex: "^on[A-Z].*" },
 		controls: {
 			matchers: {
 				color: /(background|color)$/i,

js/video/Video.stories.svelte

@@ -3,7 +3,7 @@
 	import Video from "./Index.svelte";
 	import { format } from "svelte-i18n";
 	import { get } from "svelte/store";
-	import { userEvent, within } from "@storybook/testing-library";
+	import { userEvent, within } from "@storybook/test";
 	import { allModes } from "../storybook/modes";
 
 	export const meta = {

package.json

@@ -45,7 +45,6 @@
 		"@tailwindcss/forms": "^0.5.0",
 		"@testing-library/dom": "^9.0.0",
 		"@testing-library/jest-dom": "^6.0.0",
-		"@testing-library/user-event": "^14.0.0",
 		"@types/node": "^20.3.1",
 		"@types/testing-library__jest-dom": "^5.14.6",
 		"@types/wavesurfer.js": "^6.0.10",
@@ -89,22 +88,20 @@
 		"vitest": "^1.3.1"
 	},
 	"devDependencies": {
-		"@storybook/addon-a11y": "^7.5.1",
-		"@storybook/addon-essentials": "^7.5.1",
-		"@storybook/addon-interactions": "^7.5.1",
-		"@storybook/addon-links": "^7.5.1",
-		"@storybook/addon-styling": "^1.3.7",
-		"@storybook/addon-svelte-csf": "^4.0.9",
-		"@storybook/blocks": "^7.5.1",
-		"@storybook/manager-api": "^7.5.1",
-		"@storybook/svelte": "^7.5.1",
-		"@storybook/svelte-vite": "^7.5.1",
-		"@storybook/testing-library": "^0.2.2",
-		"@storybook/theming": "^7.5.1",
+		"@storybook/addon-a11y": "^8.0.2",
+		"@storybook/addon-essentials": "^8.0.2",
+		"@storybook/addon-interactions": "^8.0.2",
+		"@storybook/addon-links": "^8.0.2",
+		"@storybook/addon-svelte-csf": "^4.1.2",
+		"@storybook/blocks": "^8.0.2",
+		"@storybook/manager-api": "^8.0.2",
+		"@storybook/svelte": "^8.0.2",
+		"@storybook/svelte-vite": "^8.0.2",
+		"@storybook/test": "^8.0.2",
+		"@storybook/theming": "^8.0.2",
+		"@testing-library/user-event": "^14.5.2",
 		"chromatic": "^11.0.0",
-		"react": "^18.2.0",
-		"react-dom": "^18.2.0",
-		"storybook": "^7.5.1",
+		"storybook": "^8.0.2",
 		"wikidata-lang": "^4.1.2"
 	},
 	"engines": {