upgrade Storybook to v8.0.8

Author: veej

packages/bento-design-system/.storybook/main.ts

@@ -6,7 +6,7 @@ import { mergeConfig } from "vite";
 
 const config: StorybookConfig = {
   stories: [{ directory: "../stories", files: "**/*.stories.*" }],
-  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "storybook-addon-themes"],
+  addons: ["@storybook/addon-links", "@storybook/addon-essentials", "@storybook/addon-themes"],
   framework: "@storybook/react-vite",
   core: {
     builder: "@storybook/builder-vite",

packages/bento-design-system/.storybook/preview.tsx

@@ -1,6 +1,6 @@
 import { defaultMessages } from "../src/defaultMessages/en";
 import { BentoProvider } from "../stories";
-import { useArgs } from "@storybook/addons";
+import { useArgs } from "@storybook/preview-api";
 import { Decorator } from "@storybook/react";
 import "@fontsource/lexend/400.css";
 import "@fontsource/lexend/500.css";

packages/bento-design-system/package.json

@@ -143,15 +143,16 @@
     "@react-types/numberfield": "3.5.0",
     "@react-types/slider": "3.6.0",
     "@react-types/textfield": "3.7.3",
-    "@storybook/addon-actions": "7.4.0",
-    "@storybook/addon-essentials": "7.4.0",
-    "@storybook/addon-links": "7.4.0",
-    "@storybook/addons": "7.4.0",
-    "@storybook/builder-vite": "7.4.0",
-    "@storybook/react": "7.4.0",
-    "@storybook/react-vite": "7.4.0",
-    "@storybook/testing-library": "0.2.2",
-    "@storybook/types": "7.4.0",
+    "@storybook/addon-actions": "8.0.8",
+    "@storybook/addon-essentials": "8.0.8",
+    "@storybook/addon-links": "8.0.8",
+    "@storybook/addon-themes": "^8.0.8",
+    "@storybook/builder-vite": "8.0.8",
+    "@storybook/preview-api": "^8.0.8",
+    "@storybook/react": "8.0.8",
+    "@storybook/react-vite": "8.0.8",
+    "@storybook/test": "^8.0.8",
+    "@storybook/types": "8.0.8",
     "@testing-library/dom": "9.3.3",
     "@testing-library/jest-dom": "6.1.4",
     "@testing-library/react": "14.0.0",
@@ -179,7 +180,7 @@
     "eslint": "8.48.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-sort-export-all": "1.4.1",
-    "eslint-plugin-storybook": "0.6.13",
+    "eslint-plugin-storybook": "0.8.0",
     "file-loader": "6.2.0",
     "jsdom": "22.1.0",
     "lint-staged": "13.3.0",
@@ -191,8 +192,7 @@
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "storybook": "7.4.0",
-    "storybook-addon-themes": "6.1.0",
+    "storybook": "8.0.8",
     "style-loader": "3.3.3",
     "ts-loader": "9.4.4",
     "tsup": "7.2.0",

packages/bento-design-system/stories/Components/AreaLoader.stories.tsx

@@ -1,5 +1,5 @@
 import { Body, Box, Card, AreaLoader, Stack, Title, Inset } from "..";
-import { useArgs } from "@storybook/addons";
+import { useArgs } from "@storybook/preview-api";
 import { useEffect } from "react";
 import { Meta, StoryObj } from "@storybook/react";
 

packages/bento-design-system/stories/Components/DateField.stories.tsx

@@ -11,7 +11,7 @@ import {
   addWeeks,
   addDays,
 } from "date-fns";
-import { screen, waitFor } from "@storybook/testing-library";
+import { screen, waitFor } from "@storybook/test";
 import isChromatic from "chromatic/isChromatic";
 import { Meta, StoryObj } from "@storybook/react";
 

packages/bento-design-system/stories/Components/FileUploaderField.stories.tsx

@@ -1,6 +1,6 @@
 import { StoryObj, Meta } from "@storybook/react";
 import { FileUploaderField, BentoConfigProvider, Button, Stack } from "..";
-import { useArgs } from "@storybook/addons";
+import { useArgs } from "@storybook/preview-api";
 
 const fileUploaderProps = {
   value: undefined,

packages/bento-design-system/stories/Components/Modal.stories.tsx

@@ -1,6 +1,6 @@
 import { Modal, Body, Placeholder, Stack, CustomModal, Feedback, Inset } from "..";
 import { action } from "@storybook/addon-actions";
-import { screen } from "@storybook/testing-library";
+import { screen } from "@storybook/test";
 import { Meta, StoryObj } from "@storybook/react";
 
 const meta = {

packages/bento-design-system/stories/Components/Table.stories.tsx

@@ -16,7 +16,7 @@ import {
 import orderBy from "lodash.orderby";
 import { action } from "@storybook/addon-actions";
 import { Meta, StoryObj } from "@storybook/react";
-import { useArgs } from "@storybook/addons";
+import { useArgs } from "@storybook/preview-api";
 
 const exampleColumns = [
   tableColumn.button({

packages/bento-design-system/stories/Components/TextField.stories.tsx

@@ -1,5 +1,6 @@
 import { TextField } from "..";
 import { Meta, StoryObj } from "@storybook/react";
+import { within, expect } from "@storybook/test";
 
 const meta = {
   component: TextField,
@@ -43,3 +44,15 @@ export const CustomAccessory = {
     rightAccessory: "👍",
   },
 } satisfies Story;
+
+export const NonDefaultType = {
+  args: {
+    value: "[email protected]",
+    type: "email",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const textField = canvas.getByRole("textbox");
+    await expect(textField).toHaveAttribute("type", "email");
+  },
+} satisfies Story;