Dashboard storybook minor cleanup + fix crashing stories (#5359)

## Problem solved

Short description of the bug fixed or feature added

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on updating the titles in various story files to follow a consistent naming convention, improving UI component integration, and enhancing the use of the `getThirdwebClient()` function across multiple components.

### Detailed summary
- Updated titles in story files for consistency.
- Modified `StatBreakdownCard` to use a max width.
- Integrated `getThirdwebClient()` in multiple components.
- Adjusted `AccountTeamsUI` and `TeamRow` to accept `client` as a prop.
- Enhanced theme handling in the Storybook preview.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: MananTank

apps/dashboard/.storybook/preview.tsx

@@ -2,15 +2,13 @@ import type { Preview } from "@storybook/react";
 import "@/styles/globals.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { MoonIcon, SunIcon } from "lucide-react";
+import { ThemeProvider, useTheme } from "next-themes";
 import { Inter as interFont } from "next/font/google";
 // biome-ignore lint/style/useImportType: <explanation>
-import React, { useState } from "react";
+import React from "react";
 import { useEffect } from "react";
 import { Button } from "../src/@/components/ui/button";
 
-// Note: Wrapping the Stoy with AppRouterProviders makes the storybook server time SUPER SLOW
-// so let's just not have it there - all stories should be independent from context anyway and just rely on props
-
 const queryClient = new QueryClient();
 
 const fontSans = interFont({
@@ -31,9 +29,16 @@ const preview: Preview = {
   decorators: [
     (Story) => {
       return (
-        <StoryLayout>
-          <Story />
-        </StoryLayout>
+        <ThemeProvider
+          attribute="class"
+          disableTransitionOnChange
+          enableSystem={false}
+          defaultTheme="dark"
+        >
+          <StoryLayout>
+            <Story />
+          </StoryLayout>
+        </ThemeProvider>
       );
     },
   ],
@@ -44,34 +49,36 @@ export default preview;
 function StoryLayout(props: {
   children: React.ReactNode;
 }) {
-  const [theme, setTheme] = useState<"light" | "dark">("dark");
+  const { setTheme, theme } = useTheme();
 
   useEffect(() => {
-    document.body.className = `font-sans antialiased ${fontSans.variable} ${theme === "dark" ? " dark" : ""}`;
-  }, [theme]);
+    document.body.className = `font-sans antialiased ${fontSans.variable}`;
+  }, []);
 
   return (
     <QueryClientProvider client={queryClient}>
-      <div className="min-h-screen flex flex-col bg-background text-foreground min-w-0">
-        <div className="flex justify-end p-4 border-b gap-2">
+      <div className="flex min-h-screen min-w-0 flex-col bg-background text-foreground">
+        <div className="flex justify-end gap-2 border-b p-4">
           <Button
             onClick={() => setTheme("dark")}
             size="sm"
-            variant={theme === "dark" ? "default" : "ghost"}
+            variant={theme === "dark" ? "default" : "outline"}
+            className="h-auto w-auto rounded-full p-2"
           >
-            <MoonIcon className="size-5" />
+            <MoonIcon className="size-4" />
           </Button>
 
           <Button
             onClick={() => setTheme("light")}
             size="sm"
-            variant={theme === "light" ? "default" : "ghost"}
+            variant={theme === "light" ? "default" : "outline"}
+            className="h-auto w-auto rounded-full p-2"
           >
-            <SunIcon className="size-5" />
+            <SunIcon className="size-4" />
           </Button>
         </div>
 
-        <div className="grow flex flex-col min-w-0">{props.children}</div>
+        <div className="flex min-w-0 grow flex-col">{props.children}</div>
       </div>
     </QueryClientProvider>
   );

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

@@ -3,7 +3,7 @@ import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {
-  title: "blocks/DangerSettingCard",
+  title: "blocks/Cards/DangerSettingCard",
   component: Story,
   parameters: {
     nextjs: {

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

@@ -3,7 +3,7 @@ import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {
-  title: "blocks/SettingsCard",
+  title: "Blocks/Cards/SettingsCard",
   component: Story,
   parameters: {
     nextjs: {

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

@@ -11,7 +11,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { BadgeContainer } from "../../../stories/utils";
 
 const meta = {
-  title: "Shadcn/select",
+  title: "Shadcn/Select",
   component: Component,
   parameters: {
     layout: "centered",

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

@@ -13,7 +13,7 @@ import { BadgeContainer, mobileViewport } from "../../../stories/utils";
 import { Badge } from "./badge";
 
 const meta = {
-  title: "Shadcn/table",
+  title: "Shadcn/Table",
   component: Component,
   parameters: {
     layout: "centered",

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

@@ -10,7 +10,7 @@ import {
 } from "./AccountHeaderUI";
 
 const meta = {
-  title: "Account/Account Header",
+  title: "Headers/AccountHeader",
   component: Variants,
   parameters: {
     nextjs: {

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

@@ -1,3 +1,4 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { teamStub } from "../../../stories/stubs";
 import { BadgeContainer, mobileViewport } from "../../../stories/utils";
@@ -36,6 +37,7 @@ function Variants() {
     <div className="container mx-auto flex w-full max-w-[1100px] flex-col gap-10 py-10">
       <BadgeContainer label="4 Teams">
         <AccountTeamsUI
+          client={getThirdwebClient()}
           teamsWithRole={[
             {
               team: teamStub("1", "free"),
@@ -59,6 +61,7 @@ function Variants() {
 
       <BadgeContainer label="1 Team">
         <AccountTeamsUI
+          client={getThirdwebClient()}
           teamsWithRole={[
             {
               team: teamStub("1", "free"),

apps/dashboard/src/app/account/overview/AccountTeamsUI.tsx

@@ -11,10 +11,10 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ToolTipLabel } from "@/components/ui/tooltip";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { EllipsisIcon, PlusIcon } from "lucide-react";
 import Link from "next/link";
 import { useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
 import { TeamPlanBadge } from "../../components/TeamPlanBadge";
 import { getValidTeamPlan } from "../../team/components/TeamHeader/getValidTeamPlan";
 import { SearchInput } from "../components/SearchInput";
@@ -24,6 +24,7 @@ export function AccountTeamsUI(props: {
     team: Team;
     role: TeamAccountRole;
   }[];
+  client: ThirdwebClient;
 }) {
   const [teamSearchValue, setTeamSearchValue] = useState("");
   const teamsToShow = !teamSearchValue
@@ -70,7 +71,7 @@ export function AccountTeamsUI(props: {
               key={v.team.id}
               className="border-border border-b p-4 last:border-b-0"
             >
-              <TeamRow team={v.team} role={v.role} />
+              <TeamRow team={v.team} role={v.role} client={props.client} />
             </li>
           );
         })}
@@ -97,8 +98,8 @@ export function AccountTeamsUI(props: {
 function TeamRow(props: {
   team: Team;
   role: TeamAccountRole;
+  client: ThirdwebClient;
 }) {
-  const client = useThirdwebClient();
   const plan = getValidTeamPlan(props.team);
 
   return (
@@ -109,7 +110,7 @@ function TeamRow(props: {
           className="size-8"
           src={props.team.image}
           id={props.team.id}
-          client={client}
+          client={props.client}
         />
 
         <div>

apps/dashboard/src/app/account/page.tsx

@@ -1,5 +1,6 @@
 import { getTeams } from "@/api/team";
 import { getMembers } from "@/api/team-members";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { BillingAlerts } from "components/settings/Account/Billing/alerts/Alert";
 import { redirect } from "next/navigation";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
@@ -40,7 +41,10 @@ export default async function Page() {
   return (
     <div className="container grow py-8">
       <BillingAlerts className="mb-10" />
-      <AccountTeamsUI teamsWithRole={teamsWithRole} />
+      <AccountTeamsUI
+        teamsWithRole={teamsWithRole}
+        client={getThirdwebClient()}
+      />
     </div>
   );
 }

apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx

@@ -13,7 +13,7 @@ import { BadgeContainer, mobileViewport } from "stories/utils";
 import { ManageEngineAlertsSectionUI } from "./ManageEngineAlerts";
 
 const meta = {
-  title: "engine/alerts/manage",
+  title: "Engine/Alerts/Manage Alerts",
   component: Story,
   parameters: {
     nextjs: {