thirdweb-dev · graphite-app · Nov 8, 2024 · Nov 8, 2024
@@ -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>
   );

@@ -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: {

@@ -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: {

@@ -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",

@@ -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",

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

@@ -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"),

@@ -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>

@@ -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>
   );
 }
@@ -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: {

@@ -8,7 +8,7 @@ import { BadgeContainer, mobileViewport } from "stories/utils";
 import { RecentEngineAlertsSectionUI } from "./RecentEngineAlerts";
 
 const meta = {
-  title: "engine/alerts/recent",
+  title: "Engine/Alerts/Recent Alerts",
   component: Story,
   parameters: {
     nextjs: {

@@ -1,5 +1,6 @@
 import type { Team } from "@/api/team";
 import { Toaster } from "@/components/ui/sonner";
+import { getThirdwebClient } from "@/constants/thirdweb.server";
 import type { Meta, StoryObj } from "@storybook/react";
 import { mobileViewport } from "../../../../../../../stories/utils";
 import {
@@ -55,6 +56,7 @@ function Story() {
           console.log(value);
           await new Promise((resolve) => setTimeout(resolve, 1000));
         }}
+        client={getThirdwebClient()}
       />
       <ComponentVariantions />
       <Toaster richColors />

@@ -1,6 +1,7 @@
 "use client";
 
 import type { Team } from "@/api/team";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { getThirdwebClient } from "@/constants/thirdweb.server";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { upload } from "thirdweb/storage";
@@ -12,10 +13,12 @@ export function TeamGeneralSettingsPage(props: {
   authToken: string;
 }) {
   const router = useDashboardRouter();
+  const client = useThirdwebClient();
 
   return (
     <TeamGeneralSettingsPageUI
       team={props.team}
+      client={client}
       updateTeamField={async (teamValue) => {
         await updateTeam({
           teamId: props.team.id,

@@ -5,20 +5,21 @@ import { DangerSettingCard } from "@/components/blocks/DangerSettingCard";
 import { SettingsCard } from "@/components/blocks/SettingsCard";
 import { CopyTextButton } from "@/components/ui/CopyTextButton";
 import { Input } from "@/components/ui/input";
-import { useThirdwebClient } from "@/constants/thirdweb.client";
 import { useDashboardRouter } from "@/lib/DashboardRouter";
 import { resolveSchemeWithErrorHandler } from "@/lib/resolveSchemeWithErrorHandler";
 import { useMutation } from "@tanstack/react-query";
 import { FileInput } from "components/shared/FileInput";
 import { useState } from "react";
 import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
 
 type UpdateTeamField = (team: Partial<Team>) => Promise<void>;
 
 export function TeamGeneralSettingsPageUI(props: {
   team: Team;
   updateTeamImage: (file: File | undefined) => Promise<void>;
   updateTeamField: UpdateTeamField;
+  client: ThirdwebClient;
 }) {
   const hasPermissionToDelete = false; // TODO
   return (
@@ -34,6 +35,7 @@ export function TeamGeneralSettingsPageUI(props: {
       <TeamAvatarFormControl
         updateTeamImage={props.updateTeamImage}
         avatar={props.team.image}
+        client={props.client}
       />
       <TeamIdCard team={props.team} />
       <LeaveTeamCard enabled={false} teamName={props.team.name} />
@@ -149,10 +151,10 @@ function TeamSlugFormControl(props: {
 function TeamAvatarFormControl(props: {
   updateTeamImage: (file: File | undefined) => Promise<void>;
   avatar: string | undefined;
+  client: ThirdwebClient;
 }) {
-  const client = useThirdwebClient();
   const teamAvatarUrl = resolveSchemeWithErrorHandler({
-    client: client,
+    client: props.client,
     uri: props.avatar,
   });
 

@@ -7,35 +7,16 @@ const meta = {
   component: Component,
   parameters: {
     layout: "centered",
-  },
-} satisfies Meta<typeof Component>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Basic: Story = {
-  parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
-};
+} satisfies Meta<typeof Component>;
 
-export const WithPositiveTrend: Story = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-};
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const WithNegativeTrend: Story = {
-  parameters: {
-    nextjs: {
-      appDirectory: true,
-    },
-  },
-};
+export const Basic: Story = {};
 
 function Component() {
   return (

@@ -126,7 +126,7 @@ const withIconsData = [
 
 function Component() {
   return (
-    <div className="container space-y-8 py-8">
+    <div className="container max-w-[600px] space-y-8 py-8">
       <BadgeContainer label="Basic">
         <StatBreakdownCard
           title="Sponsored Gas"

@@ -6,7 +6,7 @@ import {
 } from "./TeamHeaderLoggedOut";
 
 const meta = {
-  title: "Team/TeamHeaderLoggedOut",
+  title: "Headers/TeamHeader/LoggedOut",
   component: Variants,
   parameters: {
     nextjs: {

@@ -7,7 +7,7 @@ import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
 import { TeamHeaderDesktopUI, TeamHeaderMobileUI } from "./TeamHeaderUI";
 
 const meta = {
-  title: "Team/Team selector",
+  title: "Headers/TeamHeader/LoggedIn",
   component: Variants,
   parameters: {
     nextjs: {

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