update storybook

Author: jnsdls

apps/dashboard/.storybook/main.ts

@@ -13,9 +13,8 @@ const config: StorybookConfig = {
   addons: [
     getAbsolutePath("@storybook/addon-onboarding"),
     getAbsolutePath("@storybook/addon-links"),
-    getAbsolutePath("@storybook/addon-essentials"),
     getAbsolutePath("@chromatic-com/storybook"),
-    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-docs"),
   ],
   framework: {
     name: getAbsolutePath("@storybook/nextjs"),

apps/dashboard/.storybook/preview.tsx

@@ -1,4 +1,4 @@
-import type { Preview } from "@storybook/react";
+import type { Preview } from "@storybook/nextjs";
 import "../src/global.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";

apps/dashboard/package.json

@@ -109,19 +109,14 @@
   },
   "devDependencies": {
     "@chakra-ui/cli": "^2.4.1",
-    "@chromatic-com/storybook": "3.2.6",
+    "@chromatic-com/storybook": "4.0.0",
     "@next/bundle-analyzer": "15.3.3",
     "@next/eslint-plugin-next": "15.3.3",
     "@playwright/test": "1.53.0",
-    "@storybook/addon-essentials": "8.6.14",
-    "@storybook/addon-interactions": "8.6.14",
-    "@storybook/addon-links": "8.6.14",
-    "@storybook/addon-onboarding": "8.6.14",
-    "@storybook/addon-viewport": "8.6.14",
-    "@storybook/blocks": "8.6.14",
-    "@storybook/nextjs": "8.6.14",
-    "@storybook/react": "8.6.14",
-    "@storybook/test": "8.6.14",
+    "@storybook/addon-docs": "^9.0.8",
+    "@storybook/addon-links": "9.0.8",
+    "@storybook/addon-onboarding": "9.0.8",
+    "@storybook/nextjs": "9.0.8",
     "@types/color": "4.2.0",
     "@types/node": "22.14.1",
     "@types/papaparse": "^5.3.16",
@@ -139,7 +134,7 @@
     "eslint": "8.57.0",
     "eslint-config-biome": "1.9.4",
     "eslint-plugin-react-compiler": "19.0.0-beta-e993439-20250405",
-    "eslint-plugin-storybook": "0.12.0",
+    "eslint-plugin-storybook": "9.0.8",
     "knip": "5.60.2",
     "next-sitemap": "^4.2.3",
     "postcss": "8.5.3",

apps/dashboard/src/@/actions/createTeam.ts

@@ -1,9 +1,9 @@
 "use server";
 import "server-only";
 
-import { randomBytes } from "node:crypto";
 import type { Team } from "@/api/team";
 import { format } from "date-fns";
+import { bytesToString } from "thirdweb/utils";
 import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";
 import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "../constants/public-envs";
 
@@ -29,7 +29,9 @@ export async function createTeam(options?: {
     body: JSON.stringify({
       name:
         options?.name ?? `Your Projects ${format(new Date(), "MMM d yyyy")}`,
-      slug: options?.slug ?? randomBytes(20).toString("hex"),
+      slug:
+        options?.slug ??
+        bytesToString(global.crypto.getRandomValues(new Uint8Array(20))),
       billingEmail: null,
       image: null,
     }),

apps/dashboard/src/@/components/blocks/Avatars/GradientAvatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import {
   BadgeContainer,

apps/dashboard/src/@/components/blocks/Avatars/ProjectAvatar.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import {
   BadgeContainer,

apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { BadgeContainer } from "../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 

apps/dashboard/src/@/components/blocks/Img.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ImageIcon } from "lucide-react";
 import { useState } from "react";
 import { BadgeContainer } from "../../../stories/utils";

apps/dashboard/src/@/components/blocks/MultiNetworkSelector.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import {
   BadgeContainer,

apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { BadgeContainer } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";