dashboard storybook improvements (#4369)

## Problem solved Short description of the bug fixed or feature added  --- ## PR-Codex overview This PR adds mobile viewport options to Storybook stories and updates UI components for mobile viewports. ### Detailed summary - Added mobile viewport options to Storybook stories - Updated UI components for mobile viewports in various settings pages and embedded wallets - Adjusted button sizes and styles for different viewport sizes > The following files were skipped due to too many changes: `pnpm-lock.yaml`, `apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx` > ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
thirdweb-dev · Sep 3, 2024 · b6aae7f · b6aae7f
1 parent ec4d635
commit b6aae7f
Show file tree

Hide file tree

Showing 13 changed files with 199 additions and 123 deletions.
diff --git a/apps/dashboard/.storybook/preview.tsx b/apps/dashboard/.storybook/preview.tsx
@@ -52,7 +52,7 @@ function StoryLayout(props: {
 
   return (
     <div>
-      <div className="flex justify-end p-4 border-b mb-5 gap-2">
+      <div className="flex justify-end p-4 border-b gap-2">
         <Button
           onClick={() => setTheme("dark")}
           size="sm"

diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
@@ -123,6 +123,7 @@
     "@storybook/addon-interactions": "^8.2.9",
     "@storybook/addon-links": "^8.2.9",
     "@storybook/addon-onboarding": "^8.2.9",
+    "@storybook/addon-viewport": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/nextjs": "^8.2.9",
     "@storybook/react": "^8.2.9",

diff --git a/apps/dashboard/src/app/components/Header/TeamHeader/TeamHeaderUI.stories.tsx b/apps/dashboard/src/app/components/Header/TeamHeader/TeamHeaderUI.stories.tsx
@@ -3,42 +3,36 @@ import { ThirdwebProvider } from "thirdweb/react";
 import type { Project } from "../../../../@/api/projects";
 import type { Team } from "../../../../@/api/team";
 import { Button } from "../../../../@/components/ui/button";
-import { Separator } from "../../../../@/components/ui/separator";
-import { BadgeContainer } from "../../../../stories/utils";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
 import { TeamHeaderDesktopUI, TeamHeaderMobileUI } from "./TeamHeaderUI";
 
 const meta = {
   title: "Team/Team selector",
-  component: Story,
+  component: Variants,
   parameters: {
     nextjs: {
       appDirectory: true,
     },
   },
-} satisfies Meta<typeof Story>;
+} satisfies Meta<typeof Variants>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
-  args: {},
+export const Desktop: Story = {
+  args: {
+    type: "desktop",
+  },
 };
 
-function Story() {
-  return (
-    <div className="dark:bg-zinc-900 bg-zinc-300 p-6">
-      <h2 className="text-3xl mb-6 font-semibold tracking-tight">Desktop</h2>
-      <Variants type="desktop" />
-      <Separator className="my-10" />
-      <h2 className="mt-10 mb-6 text-3xl font-semibold tracking-tight">
-        Mobile
-      </h2>
-      <div className="w-[400px]">
-        <Variants type="mobile" />
-      </div>
-    </div>
-  );
-}
+export const Mobile: Story = {
+  args: {
+    type: "mobile",
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
 
 function Variants(props: {
   type: "mobile" | "desktop";
@@ -48,7 +42,9 @@ function Variants(props: {
 
   return (
     <ThirdwebProvider>
-      <div className={"flex flex-col gap-6"}>
+      <div
+        className={"flex flex-col gap-6 bg-gray-700 px-4 py-10 min-h-screen"}
+      >
         <BadgeContainer label="Team, Free">
           <Comp
             teamsAndProjects={teamsAndProjects}

diff --git a/...ashboard/src/app/team/[team_slug]/(team)/~/settings/general/DangerSettingCard.stories.tsx b/...ashboard/src/app/team/[team_slug]/(team)/~/settings/general/DangerSettingCard.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer } from "../../../../../../../stories/utils";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../stories/utils";
 import { DangerSettingCard } from "./DangerSettingCard";
 
 const meta = {
@@ -15,13 +18,20 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
+export const Desktop: Story = {
   args: {},
 };
 
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
 function Story() {
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="min-h-screen bg-background text-foreground py-4">
       <div className="lg:p-10 container max-w-[1000px] flex flex-col gap-8">
         <BadgeContainer label="Base">
           <DangerSettingCard

diff --git a/...hboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx b/...hboard/src/app/team/[team_slug]/(team)/~/settings/general/GeneralSettingsPage.stories.tsx
@@ -1,6 +1,7 @@
 import type { Team } from "@/api/team";
 import { Toaster } from "@/components/ui/sonner";
 import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../../../../../stories/utils";
 import SettingsLayout from "../layout";
 import {
   DeleteTeamCard,
@@ -21,10 +22,17 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
+export const Desktop: Story = {
   args: {},
 };
 
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
 const testTeam: Team = {
   id: "team-id-foo-bar",
   name: "Team XYZ",

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/SettingsCard.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/SettingsCard.stories.tsx
@@ -1,5 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer } from "../../../../../../../stories/utils";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../stories/utils";
 import { SettingsCard } from "./SettingsCard";
 
 const meta = {
@@ -15,13 +18,20 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
+export const Desktop: Story = {
   args: {},
 };
 
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
 function Story() {
   return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className="min-h-screen bg-background text-foreground py-6">
       <div className="lg:p-10 container max-w-[1100px] flex flex-col gap-10">
         <BadgeContainer label="No Header">
           <SettingsCard

diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/settings/general/Sidebar.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Badge } from "../../../../../../../@/components/ui/badge";
-import { cn } from "../../../../../../../@/lib/utils";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../stories/utils";
 import { TeamSettingsSidebar } from "../_components/sidebar/TeamSettingsSidebar";
 import { TeamSettingsMobileNav } from "../_components/sidebar/TeamsMobileNav";
 
@@ -17,83 +19,57 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
+export const Desktop: Story = {
   args: {
-    theme: "dark",
+    type: "desktop",
   },
 };
 
-function Story() {
-  return (
-    <div className={"min-h-screen bg-zinc-800 text-foreground"}>
-      <div className="lg:p-10 container max-w-[1100px]">
-        <div className="grid gap-8 grid-cols-2">
-          <HighlightContainer title="Desktop">
-            <TeamSettingsSidebar teamSlug="foo" />
-          </HighlightContainer>
+export const Mobile: Story = {
+  args: {
+    type: "mobile",
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
 
-          <div>
-            <HighlightContainer
-              className="max-w-[400px]"
-              title="Mobile - full nav"
-            >
-              <TeamSettingsMobileNav
-                activeLink={{
-                  href: "/team/foo/settings",
-                  name: "Foo",
-                }}
-                teamSlug="foo"
-                setShowFull={() => {}}
-                showFull={true}
-              />
-            </HighlightContainer>
+function Story(props: {
+  type: "mobile" | "desktop";
+}) {
+  return (
+    <div
+      className={"min-h-screen text-foreground lg:max-w-[1100px] py-6 mx-auto"}
+    >
+      {props.type === "desktop" && <TeamSettingsSidebar teamSlug="foo" />}
 
-            <HighlightContainer
-              className="max-w-[400px]"
-              title="Mobile - mini - General Page"
-            >
-              <TeamSettingsMobileNav
-                activeLink={{
-                  href: "/team/foo/settings",
-                  name: "General",
-                }}
-                teamSlug="foo"
-                setShowFull={() => {}}
-                showFull={false}
-              />
-            </HighlightContainer>
+      {props.type === "mobile" && (
+        <div className="flex flex-col gap-4">
+          <BadgeContainer label="Mobile - Expanded">
+            <TeamSettingsMobileNav
+              activeLink={{
+                href: "/team/foo/settings",
+                name: "Foo",
+              }}
+              teamSlug="foo"
+              setShowFull={() => {}}
+              showFull={true}
+            />
+          </BadgeContainer>
 
-            <HighlightContainer title="Mobile - mini - Billing page">
-              <TeamSettingsMobileNav
-                activeLink={{
-                  href: "/team/foo/billing",
-                  name: "Billing",
-                }}
-                teamSlug="foo"
-                setShowFull={() => {}}
-                showFull={false}
-              />
-            </HighlightContainer>
-          </div>
+          <BadgeContainer label="Mobile - Mini">
+            <TeamSettingsMobileNav
+              activeLink={{
+                href: "/team/foo/billing",
+                name: "Billing",
+              }}
+              teamSlug="foo"
+              setShowFull={() => {}}
+              showFull={false}
+            />
+          </BadgeContainer>
         </div>
-      </div>
-    </div>
-  );
-}
-
-function HighlightContainer(props: {
-  children: React.ReactNode;
-  className?: string;
-  title: string;
-}) {
-  return (
-    <div>
-      <Badge className="mb-2 bg-background"> {props.title} </Badge>
-      <div
-        className={cn("p-2 mb-10 rounded-lg bg-background", props.className)}
-      >
-        {props.children}
-      </div>
+      )}
     </div>
   );
 }
diff --git a/...rd/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx b/...rd/src/app/team/[team_slug]/(team)/~/settings/members/TeamMembersSettingsPage.stories.tsx
@@ -2,7 +2,10 @@ import type { Team } from "@/api/team";
 import type { TeamAccountRole, TeamMember } from "@/api/team-members";
 import { Toaster } from "@/components/ui/sonner";
 import type { Meta, StoryObj } from "@storybook/react";
-import { BadgeContainer } from "../../../../../../../stories/utils";
+import {
+  BadgeContainer,
+  mobileViewport,
+} from "../../../../../../../stories/utils";
 import SettingsLayout from "../layout";
 import { InviteSection } from "./InviteSection";
 import { ManageMembersSection } from "./ManageMembersSection";
@@ -21,10 +24,17 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const AllVariants: Story = {
+export const Desktop: Story = {
   args: {},
 };
 
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
 const freeTeam: Team = {
   id: "team-id-foo-bar",
   name: "Team XYZ",

diff --git a/apps/dashboard/src/components/embedded-wallets/Configure/InAppWalletSettingsUI.stories.tsx b/apps/dashboard/src/components/embedded-wallets/Configure/InAppWalletSettingsUI.stories.tsx
@@ -1,5 +1,6 @@
 import type { ApiKey, ApiKeyService } from "@3rdweb-sdk/react/hooks/useApi";
 import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../stories/utils";
 import { InAppWalletSettingsUI } from "./index";
 
 const meta = {
@@ -27,6 +28,24 @@ export const FreePlan: Story = {
   },
 };
 
+export const GrowthPlanMobile: Story = {
+  args: {
+    canEditAdvancedFeatures: true,
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+export const FreePlanMobile: Story = {
+  args: {
+    canEditAdvancedFeatures: false,
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
 const embeddedWalletService: ApiKeyService = {
   id: "embeddedWallets",
   name: "embeddedWallets", // important
@@ -56,7 +75,7 @@ function Variants(props: {
   canEditAdvancedFeatures: boolean;
 }) {
   return (
-    <div className="min-h-screen bg-background p-6 text-foreground max-w-[1140px] mx-auto">
+    <div className="min-h-screen bg-background px-4 py-6 text-foreground max-w-[1140px] mx-auto">
       <div className="flex gap-10 flex-col">
         <InAppWalletSettingsUI
           canEditAdvancedFeatures={props.canEditAdvancedFeatures}

diff --git a/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx b/apps/dashboard/src/components/settings/Account/Billing/GatedSwitch.stories.tsx
@@ -23,7 +23,7 @@ export const AllVariants: Story = {
 function Variants() {
   return (
     <div className="bg-background p-7 min-h-screen text-foreground">
-      <div className="flex flex-col gap-8">
+      <div className="flex flex-col gap-8 max-w-[500px] mx-auto">
         <BadgeContainer label="upgradeRequired">
           <GatedSwitch upgradeRequired />
         </BadgeContainer>