feat(Simulator/screens/ConnectWeb3): create stories for main component

Author: TylerAPfledderer

src/components/Simulator/screens/ConnectWeb3/Web3App.tsx

@@ -3,6 +3,8 @@ import { GrMenu } from "react-icons/gr"
 
 import { HStack } from "@/components/ui/flex"
 
+import { cn } from "@/lib/utils/cn"
+
 import { FAKE_DEMO_ADDRESS } from "../../constants"
 import { EthGlyphIcon } from "../../icons"
 import { NotificationPopover } from "../../NotificationPopover"
@@ -15,10 +17,14 @@ export const Web3App = ({
   displayUrl,
   appName,
   children,
+  className,
   ...rest
 }: Web3AppProps) => {
   return (
-    <div className="size-full bg-background-highlight" {...rest}>
+    <div
+      className={cn("size-full bg-background-highlight", className)}
+      {...rest}
+    >
       <div className="bg-[#e8e8e8] p-1 dark:bg-[#171717]">
         <p className="text-center text-xs">{displayUrl}</p>
       </div>

src/components/Simulator/screens/ConnectWeb3/__stories__/ConnectWeb3.stories.tsx

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/react/*"
+import { fn } from "@storybook/test"
+
+import { Phone } from "@/components/Simulator/Phone"
+import { Template } from "@/components/Simulator/Template"
+
+import { ConnectWeb3 as Component } from "../"
+
+const meta = {
+  title: "Molecules / Display Content / Simulator / ConnectWeb3 Screen",
+  component: Component,
+  parameters: {
+    layout: "fullscreen",
+  },
+  decorators: [
+    (Story) => (
+      <div className="mx-auto mt-8">
+        <Template>
+          <Phone>
+            <Story />
+          </Phone>
+        </Template>
+      </div>
+    ),
+  ],
+  args: {
+    nav: {
+      progressStepper: fn(),
+      step: 0,
+      openPath: fn(),
+      regressStepper: fn(),
+      totalSteps: 3,
+    },
+    ctaLabel: "Visit NFT market",
+  },
+} satisfies Meta<typeof Component>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Initial: Story = {}
+
+export const SliderNotConnected: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 2,
+    },
+    ctaLabel: "Connect to app",
+  },
+}
+
+export const SliderConnected: Story = {
+  args: {
+    nav: {
+      ...meta.args.nav,
+      step: 3,
+    },
+    ctaLabel: "Go to account",
+  },
+}

src/components/Simulator/screens/ConnectWeb3/index.tsx

@@ -128,7 +128,7 @@ export const ConnectWeb3 = ({ nav, ctaLabel }: PhoneScreenProps) => {
           style={{ height: "100%" }}
         >
           <Web3App
-            bg="background.base"
+            className="bg-background"
             appName="NFT Marketplace"
             displayUrl="app.example.com"
           >