diff --git a/apps/dashboard/.storybook/preview.tsx b/apps/dashboard/.storybook/preview.tsx index 55c073b21b2..bfba8033060 100644 --- a/apps/dashboard/.storybook/preview.tsx +++ b/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: -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 ( - - - + + + + + ); }, ], @@ -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 ( -
-
+
+
-
{props.children}
+
{props.children}
); diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx index 13e869fbda3..e7124337ae7 100644 --- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx +++ b/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: { diff --git a/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx b/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx index 398ff0a5592..2871dd92311 100644 --- a/apps/dashboard/src/@/components/blocks/SettingsCard.stories.tsx +++ b/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: { diff --git a/apps/dashboard/src/@/components/ui/select.stories.tsx b/apps/dashboard/src/@/components/ui/select.stories.tsx index 727c831971d..f8951fa19d9 100644 --- a/apps/dashboard/src/@/components/ui/select.stories.tsx +++ b/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", diff --git a/apps/dashboard/src/@/components/ui/table.stories.tsx b/apps/dashboard/src/@/components/ui/table.stories.tsx index c943f94acd2..82e0fd26cf4 100644 --- a/apps/dashboard/src/@/components/ui/table.stories.tsx +++ b/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", diff --git a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx b/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx index 534e994a1ff..e070a92b3c1 100644 --- a/apps/dashboard/src/app/account/components/AccountHeaderUI.stories.tsx +++ b/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: { diff --git a/apps/dashboard/src/app/account/overview/AccountTeamsUI.stories.tsx b/apps/dashboard/src/app/account/overview/AccountTeamsUI.stories.tsx index 70a39514f8c..997a9b5a27f 100644 --- a/apps/dashboard/src/app/account/overview/AccountTeamsUI.stories.tsx +++ b/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() {
- + ); })} @@ -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} />
diff --git a/apps/dashboard/src/app/account/page.tsx b/apps/dashboard/src/app/account/page.tsx index 32b1cbdd27c..45859311b43 100644 --- a/apps/dashboard/src/app/account/page.tsx +++ b/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 (
- +
); } diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx index 764d0eb1bfa..025988101f4 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/ManageEngineAlerts.stories.tsx +++ b/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: { diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx index b3592648b14..3d02a07fc44 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/engine/(instance)/[engineId]/alerts/components/RecentEngineAlerts.stories.tsx @@ -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: { diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx index 1173b522a34..6a8c22fa0f7 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx @@ -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()} /> diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx index bea9e1bcbea..169d569adb9 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPage.tsx @@ -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 ( { await updateTeam({ teamId: props.team.id, diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx index 5a25f75e0d1..bb43a59e5d3 100644 --- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx +++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/TeamGeneralSettingsPageUI.tsx @@ -5,13 +5,13 @@ 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) => Promise; @@ -19,6 +19,7 @@ export function TeamGeneralSettingsPageUI(props: { team: Team; updateTeamImage: (file: File | undefined) => Promise; updateTeamField: UpdateTeamField; + client: ThirdwebClient; }) { const hasPermissionToDelete = false; // TODO return ( @@ -34,6 +35,7 @@ export function TeamGeneralSettingsPageUI(props: { @@ -149,10 +151,10 @@ function TeamSlugFormControl(props: { function TeamAvatarFormControl(props: { updateTeamImage: (file: File | undefined) => Promise; avatar: string | undefined; + client: ThirdwebClient; }) { - const client = useThirdwebClient(); const teamAvatarUrl = resolveSchemeWithErrorHandler({ - client: client, + client: props.client, uri: props.avatar, }); diff --git a/apps/dashboard/src/app/team/components/Analytics/Stat.stories.tsx b/apps/dashboard/src/app/team/components/Analytics/Stat.stories.tsx index a9d72b8ff01..aa5036981fc 100644 --- a/apps/dashboard/src/app/team/components/Analytics/Stat.stories.tsx +++ b/apps/dashboard/src/app/team/components/Analytics/Stat.stories.tsx @@ -7,35 +7,16 @@ const meta = { component: Component, parameters: { layout: "centered", - }, -} satisfies Meta; - -export default meta; -type Story = StoryObj; - -export const Basic: Story = { - parameters: { nextjs: { appDirectory: true, }, }, -}; +} satisfies Meta; -export const WithPositiveTrend: Story = { - parameters: { - nextjs: { - appDirectory: true, - }, - }, -}; +export default meta; +type Story = StoryObj; -export const WithNegativeTrend: Story = { - parameters: { - nextjs: { - appDirectory: true, - }, - }, -}; +export const Basic: Story = {}; function Component() { return ( diff --git a/apps/dashboard/src/app/team/components/Analytics/StatBreakdownCard.stories.tsx b/apps/dashboard/src/app/team/components/Analytics/StatBreakdownCard.stories.tsx index fd4b542d859..e1ed051ea50 100644 --- a/apps/dashboard/src/app/team/components/Analytics/StatBreakdownCard.stories.tsx +++ b/apps/dashboard/src/app/team/components/Analytics/StatBreakdownCard.stories.tsx @@ -126,7 +126,7 @@ const withIconsData = [ function Component() { return ( -
+