update storybook

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/knip.json

@@ -10,7 +10,6 @@
   "project": ["src/**"],
   "ignoreBinaries": ["only-allow", "biome"],
   "ignoreDependencies": [
-    "@storybook/blocks",
     "@thirdweb-dev/service-utils",
     "@thirdweb-dev/vault-sdk",
     "@types/color",

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,11 +134,11 @@
     "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",
-    "storybook": "8.6.14",
+    "storybook": "9.0.8",
     "tailwindcss": "3.4.17",
     "typescript": "5.8.3"
   }

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

@@ -1,7 +1,8 @@
 "use server";
 import "server-only";
 
-import { randomBytes } from "node:crypto";
+// biome-ignore lint/style/useNodejsImportProtocol: breaks storybook if it's `node:` prefixed
+import { randomBytes } from "crypto";
 import type { Team } from "@/api/team";
 import { format } from "date-fns";
 import { getAuthToken } from "../../app/(app)/api/lib/getAuthToken";

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";
 

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

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { SidebarLayout } from "./SidebarLayout";
 
 const meta = {

apps/dashboard/src/@/components/blocks/SingleNetworkSelector.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/TokenSelector.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/UpsellBannerCard.stories.tsx

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

apps/dashboard/src/@/components/blocks/code-segment.stories.tsx

@@ -6,7 +6,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import { BadgeContainer } from "stories/utils";
 import { type CodeEnvironment, CodeSegment } from "./code-segment.client";

apps/dashboard/src/@/components/blocks/drop-zone/drop-zone.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { DropZone } from "./drop-zone";
 
 const meta = {

apps/dashboard/src/@/components/blocks/multi-select.stories.tsx

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

apps/dashboard/src/@/components/blocks/multi-step-status/multi-step-status.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { MultiStepStatus } from "./multi-step-status";
 
 const meta = {

apps/dashboard/src/@/components/blocks/select-with-search.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMemo, useState } from "react";
 import { BadgeContainer } from "../../../stories/utils";
 import { SelectWithSearch } from "./select-with-search";

apps/dashboard/src/@/components/pagination-buttons.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 } from "stories/utils";
 import { PaginationButtons } from "./pagination-buttons";

apps/dashboard/src/@/components/ui/button.stories.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { StarIcon } from "lucide-react";
 import { BadgeContainer } from "../../../stories/utils";
 

apps/dashboard/src/@/components/ui/code/code.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 { CodeClient } from "./code.client";
 

apps/dashboard/src/@/components/ui/code/plaintext-code.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 { PlainTextCodeBlock } from "./plaintext-code";
 

apps/dashboard/src/@/components/ui/select.stories.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { BadgeContainer } from "../../../stories/utils";
 
 const meta = {

apps/dashboard/src/@/components/ui/table.stories.tsx

@@ -8,7 +8,7 @@ import {
   TableHeader,
   TableRow,
 } from "@/components/ui/table";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import Link from "next/link";
 import { BadgeContainer } from "../../../stories/utils";
 import { cn } from "../../lib/utils";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/batchMetadata.stories.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import type { TransactionError } from "contexts/error-handler";
 import { useState } from "react";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/claimable.stories.tsx

@@ -6,7 +6,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { subDays } from "date-fns";
 import { useState } from "react";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/mintable.stories.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/module-card.stories.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { BadgeContainer, storybookThirdwebClient } from "stories/utils";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/openEditionMetadata.stories.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/royalty.stories.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/transferable.stories.tsx

@@ -1,5 +1,5 @@
 import { Checkbox } from "@/components/ui/checkbox";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useMutation } from "@tanstack/react-query";
 import { useState } from "react";
 import { toast } from "sonner";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/LatestEvents.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { LatestEventsUI } from "./LatestEvents";
 
 const meta: Meta<typeof LatestEventsUI> = {

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/overview/components/PermissionsTable.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { ThirdwebProvider } from "thirdweb/react";
 import { PermissionsTableUI } from "./PermissionsTable";
 

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/ContractHeader.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { storybookThirdwebClient } from "stories/utils";
 import { getContract } from "thirdweb";
 import type { ChainMetadata } from "thirdweb/chains";

apps/dashboard/src/app/(app)/(dashboard)/(chain)/[chain_id]/[contractAddress]/public-pages/erc20/_components/claim-tokens/claim-tokens-ui.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { storybookThirdwebClient } from "stories/utils";
 import { getContract } from "thirdweb";
 import { baseSepolia } from "thirdweb/chains";

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.stories.tsx

@@ -1,5 +1,5 @@
 import { Button } from "@/components/ui/button";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { teamsAndProjectsStub } from "stories/stubs";
 import {
   BadgeContainer,

apps/dashboard/src/app/(app)/account/overview/AccountTeamsUI.stories.tsx

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

apps/dashboard/src/app/(app)/account/settings/AccountSettingsPageUI.stories.tsx

@@ -7,7 +7,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import { mobileViewport, storybookThirdwebClient } from "stories/utils";
 import { AccountSettingsPageUI } from "./AccountSettingsPageUI";

apps/dashboard/src/app/(app)/account/wallets/LinkWalletsUI.stories.tsx

@@ -1,5 +1,5 @@
 import type { LinkedWallet } from "@/api/linked-wallets";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import {
   BadgeContainer,
   mobileViewport,

apps/dashboard/src/app/(app)/join/team/[team_slug]/[invite_id]/JoinTeamPage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { JoinTeamPageUI } from "./JoinTeamPage";
 
 const meta = {

apps/dashboard/src/app/(app)/login/onboarding/LinkWalletPrompt/LinkWalletPrompt.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { storybookLog } from "../../../../../stories/utils";
 import { AccountOnboardingLayout } from "../onboarding-layout";
 import { LinkWalletPrompt } from "./LinkWalletPrompt";

apps/dashboard/src/app/(app)/login/onboarding/LoginOrSignup/LoginOrSignup.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { storybookLog } from "stories/utils";
 import { AccountOnboardingLayout } from "../onboarding-layout";
 import { LoginOrSignup } from "./LoginOrSignup";

apps/dashboard/src/app/(app)/login/onboarding/VerifyEmail/VerifyEmail.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { newAccountStub } from "stories/stubs";
 import { storybookLog } from "stories/utils";
 import { AccountOnboardingLayout } from "../onboarding-layout";

apps/dashboard/src/app/(app)/login/onboarding/account-onboarding.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { newAccountStub, teamStub } from "../../../../stories/stubs";
 import { storybookLog } from "../../../../stories/utils";
 import { AccountOnboardingUI } from "./account-onboarding-ui";

apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/InviteTeamMembers.stories.tsx

@@ -1,5 +1,5 @@
 import type { Team } from "@/api/team";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { teamStub } from "stories/stubs";
 import { storybookLog, storybookThirdwebClient } from "stories/utils";
 import { TeamOnboardingLayout } from "../onboarding-layout";

apps/dashboard/src/app/(app)/login/onboarding/team-onboarding/TeamInfoForm.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { teamStub } from "stories/stubs";
 import { storybookLog, storybookThirdwebClient } from "stories/utils";
 import { TeamOnboardingLayout } from "../onboarding-layout";

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/_components/BillingAlertBanner.stories.tsx

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

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import type { EcosystemWalletStats } from "types/analytics";
 import { EcosystemWalletUsersChartCard } from "./EcosystemWalletUsersChartCard";
 

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/billing/components/PlanInfoCard.stories.tsx

@@ -1,5 +1,5 @@
 import type { Team } from "@/api/team";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { addDays } from "date-fns";
 import { teamStub, teamSubscriptionsStub } from "stories/stubs";
 import { BadgeContainer } from "stories/utils";

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { teamStub } from "stories/stubs";
 import { storybookThirdwebClient } from "stories/utils";
 import {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx

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

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/settings/members/InviteSection.stories.tsx

@@ -1,7 +1,7 @@
 import type { TeamAccountRole } from "@/api/team-members";
 import { Label } from "@/components/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/nextjs";
 import { useState } from "react";
 import { teamStub } from "stories/stubs";
 import { storybookThirdwebClient } from "../../../../../../../../stories/utils";