From c42838d8c63cc4cbda710388db00938b846d7cb4 Mon Sep 17 00:00:00 2001
From: Joel234-png <sandelloalleto@gmail.com>
Date: Mon, 28 Sep 2026 13:25:02 +0100
Subject: [PATCH] Add Storybook stories for input, label, select, and
 fee-estimate-dialog components

Add comprehensive input.stories.tsx covering default, disabled, invalid (aria-invalid), file, email, password, and number input variants with value examples and state comparison showcase.

Add label.stories.tsx demonstrating default label, label with input pairing, disabled state, required field indicator with asterisk, error states with messages, helper text, form field groups, and label styling variations (font size, weight, case).

Add select.stories.tsx with stories for default placeholder state, selected-value state, disabled state, many options (scrolling), token selection use case, recurrence selection from batch create, error states with validation, and multiple selects side-by-side matching real UI patterns.

Add fee-estimate-dialog.stories.tsx showing normal-fee and high-fee-warning states with multiple scenarios: large transaction normal fees, small transaction high fee ratio, very high fees, minimal fees, and side-by-side comparison of normal vs warning states to demonstrate visual differences.

Closes #724
Closes #725
Closes #726
Closes #723
---
 components/ui/fee-estimate-dialog.stories.tsx | 205 ++++++++++++++++
 components/ui/input.stories.tsx               | 117 ++++++++++
 components/ui/label.stories.tsx               | 125 ++++++++++
 components/ui/select.stories.tsx              | 220 ++++++++++++++++++
 4 files changed, 667 insertions(+)
 create mode 100644 components/ui/fee-estimate-dialog.stories.tsx
 create mode 100644 components/ui/input.stories.tsx
 create mode 100644 components/ui/label.stories.tsx
 create mode 100644 components/ui/select.stories.tsx

diff --git a/components/ui/fee-estimate-dialog.stories.tsx b/components/ui/fee-estimate-dialog.stories.tsx
new file mode 100644
index 0000000..00d8639
--- /dev/null
+++ b/components/ui/fee-estimate-dialog.stories.tsx
@@ -0,0 +1,205 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { FeeEstimateDialog } from "./fee-estimate-dialog"
+import { Button } from "./button"
+import React from "react"
+
+const meta = {
+  title: "UI/FeeEstimateDialog",
+  component: FeeEstimateDialog,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof FeeEstimateDialog>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Normal fee estimate (no warning)
+export const NormalFee: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="0.50"
+          estimatedFeeUsd="0.50"
+          networkFee="0.10"
+          protocolFee="0.40"
+          totalAmount="100.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// High fee warning state
+export const HighFeeWarning: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate (High Fee)
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="15.00"
+          estimatedFeeUsd="15.00"
+          networkFee="10.00"
+          protocolFee="5.00"
+          totalAmount="100.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Large transaction with normal fees
+export const LargeTransaction: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="5.25"
+          estimatedFeeUsd="5.25"
+          networkFee="1.00"
+          protocolFee="4.25"
+          totalAmount="10000.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// Small transaction with high relative fees
+export const SmallTransactionHighFeeRatio: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="8.50"
+          estimatedFeeUsd="8.50"
+          networkFee="5.00"
+          protocolFee="3.50"
+          totalAmount="10.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Very high fees scenario
+export const VeryHighFees: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)} variant="destructive">
+          View Fee Estimate (Very High)
+        </Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="250.00"
+          estimatedFeeUsd="250.00"
+          networkFee="200.00"
+          protocolFee="50.00"
+          totalAmount="1000.00"
+          isHighFeeWarning={true}
+        />
+      </>
+    )
+  },
+}
+
+// Minimal fees
+export const MinimalFees: Story = {
+  render: () => {
+    const [open, setOpen] = React.useState(false)
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>View Fee Estimate</Button>
+        <FeeEstimateDialog
+          open={open}
+          onOpenChange={setOpen}
+          estimatedFee="0.01"
+          estimatedFeeUsd="0.01"
+          networkFee="0.005"
+          protocolFee="0.005"
+          totalAmount="100.00"
+          isHighFeeWarning={false}
+        />
+      </>
+    )
+  },
+}
+
+// Comparison: Normal vs High Fee Side by Side (in separate components)
+export const StateComparison: Story = {
+  render: () => {
+    const [normalOpen, setNormalOpen] = React.useState(false)
+    const [highOpen, setHighOpen] = React.useState(false)
+
+    return (
+      <div className="grid grid-cols-2 gap-8">
+        <div className="space-y-4">
+          <h3 className="font-semibold">Normal Fee</h3>
+          <Button onClick={() => setNormalOpen(true)} className="w-full">
+            View Estimate
+          </Button>
+          <FeeEstimateDialog
+            open={normalOpen}
+            onOpenChange={setNormalOpen}
+            estimatedFee="0.50"
+            estimatedFeeUsd="0.50"
+            networkFee="0.10"
+            protocolFee="0.40"
+            totalAmount="100.00"
+            isHighFeeWarning={false}
+          />
+        </div>
+        <div className="space-y-4">
+          <h3 className="font-semibold">High Fee Warning</h3>
+          <Button onClick={() => setHighOpen(true)} className="w-full" variant="destructive">
+            View Estimate
+          </Button>
+          <FeeEstimateDialog
+            open={highOpen}
+            onOpenChange={setHighOpen}
+            estimatedFee="25.00"
+            estimatedFeeUsd="25.00"
+            networkFee="20.00"
+            protocolFee="5.00"
+            totalAmount="100.00"
+            isHighFeeWarning={true}
+          />
+        </div>
+      </div>
+    )
+  },
+}
diff --git a/components/ui/input.stories.tsx b/components/ui/input.stories.tsx
new file mode 100644
index 0000000..5885afc
--- /dev/null
+++ b/components/ui/input.stories.tsx
@@ -0,0 +1,117 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Input } from "./input"
+
+const meta = {
+  title: "UI/Input",
+  component: Input,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    disabled: { control: "boolean" },
+    type: { control: "select", options: ["text", "email", "password", "number", "file"] },
+  },
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default input state
+export const Default: Story = {
+  args: {
+    placeholder: "Enter text...",
+    type: "text",
+  },
+}
+
+// Disabled input
+export const Disabled: Story = {
+  args: {
+    placeholder: "Disabled input",
+    disabled: true,
+    type: "text",
+  },
+}
+
+// Invalid state with aria-invalid
+export const Invalid: Story = {
+  args: {
+    placeholder: "Invalid input",
+    "aria-invalid": true,
+    type: "text",
+  },
+}
+
+// File input type
+export const FileInput: Story = {
+  args: {
+    type: "file",
+  },
+}
+
+// Email input
+export const EmailInput: Story = {
+  args: {
+    type: "email",
+    placeholder: "your@email.com",
+  },
+}
+
+// Password input
+export const PasswordInput: Story = {
+  args: {
+    type: "password",
+    placeholder: "Enter password...",
+  },
+}
+
+// Number input
+export const NumberInput: Story = {
+  args: {
+    type: "number",
+    placeholder: "0",
+  },
+}
+
+// With value
+export const WithValue: Story = {
+  args: {
+    type: "text",
+    value: "Sample input value",
+    disabled: false,
+  },
+}
+
+// Large field
+export const LargeField: Story = {
+  args: {
+    type: "text",
+    placeholder: "Large input field",
+    className: "w-96",
+  },
+}
+
+// Comparison of states
+export const StateComparison: Story = {
+  render: () => (
+    <div className="space-y-4 w-96">
+      <div>
+        <label className="text-sm font-medium mb-1 block">Default</label>
+        <Input type="text" placeholder="Default state" />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Disabled</label>
+        <Input type="text" placeholder="Disabled state" disabled />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">Invalid</label>
+        <Input type="text" placeholder="Invalid state" aria-invalid={true} />
+      </div>
+      <div>
+        <label className="text-sm font-medium mb-1 block">With Value</label>
+        <Input type="text" value="User input" disabled={false} />
+      </div>
+    </div>
+  ),
+}
diff --git a/components/ui/label.stories.tsx b/components/ui/label.stories.tsx
new file mode 100644
index 0000000..66e0e58
--- /dev/null
+++ b/components/ui/label.stories.tsx
@@ -0,0 +1,125 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Label } from "./label"
+import { Input } from "./input"
+
+const meta = {
+  title: "UI/Label",
+  component: Label,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Label>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Basic label
+export const Default: Story = {
+  args: {
+    children: "Email Address",
+    htmlFor: "email-input",
+  },
+}
+
+// Label with input (common pattern)
+export const WithInput: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="email">Email Address</Label>
+      <Input id="email" type="email" placeholder="your@email.com" />
+    </div>
+  ),
+}
+
+// Disabled state
+export const DisabledState: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="disabled-input" className="opacity-50">
+        Disabled Field
+      </Label>
+      <Input id="disabled-input" placeholder="This field is disabled" disabled />
+    </div>
+  ),
+}
+
+// Required field indicator
+export const RequiredField: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="required" className="flex gap-1">
+        Name
+        <span className="text-destructive">*</span>
+      </Label>
+      <Input id="required" type="text" placeholder="Enter your name" required />
+    </div>
+  ),
+}
+
+// Label with error message
+export const WithError: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="error-field" className="text-destructive">
+        Username
+      </Label>
+      <Input id="error-field" type="text" placeholder="Username" aria-invalid={true} />
+      <p className="text-xs text-destructive">Username already taken</p>
+    </div>
+  ),
+}
+
+// Label with helper text
+export const WithHelperText: Story = {
+  render: () => (
+    <div className="space-y-2 w-96">
+      <Label htmlFor="password">Password</Label>
+      <Input id="password" type="password" placeholder="Enter password" />
+      <p className="text-xs text-muted-foreground">Minimum 8 characters</p>
+    </div>
+  ),
+}
+
+// Form field group
+export const FormFieldGroup: Story = {
+  render: () => (
+    <div className="space-y-6 w-96">
+      <div className="space-y-2">
+        <Label htmlFor="first-name">First Name</Label>
+        <Input id="first-name" type="text" placeholder="John" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="last-name">Last Name</Label>
+        <Input id="last-name" type="text" placeholder="Doe" />
+      </div>
+      <div className="space-y-2">
+        <Label htmlFor="email" className="flex gap-1">
+          Email
+          <span className="text-destructive">*</span>
+        </Label>
+        <Input id="email" type="email" placeholder="john@example.com" required />
+      </div>
+    </div>
+  ),
+}
+
+// Label styling variations
+export const StylingVariations: Story = {
+  render: () => (
+    <div className="space-y-8">
+      <div className="space-y-2 w-96">
+        <Label className="text-base font-semibold">Large Label</Label>
+        <Input placeholder="Input with large label" />
+      </div>
+      <div className="space-y-2 w-96">
+        <Label className="text-sm">Small Label</Label>
+        <Input placeholder="Input with small label" />
+      </div>
+      <div className="space-y-2 w-96">
+        <Label className="font-bold uppercase">Uppercase Label</Label>
+        <Input placeholder="Input with uppercase label" />
+      </div>
+    </div>
+  ),
+}
diff --git a/components/ui/select.stories.tsx b/components/ui/select.stories.tsx
new file mode 100644
index 0000000..3f4dbec
--- /dev/null
+++ b/components/ui/select.stories.tsx
@@ -0,0 +1,220 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Select } from "./select"
+import React from "react"
+
+const meta = {
+  title: "UI/Select",
+  component: Select,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Default select with placeholder
+export const Default: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select an option"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with selected value
+export const WithSelectedValue: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("option2")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Disabled select
+export const Disabled: Story = {
+  render: () => {
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+      { value: "option3", label: "Option 3" },
+    ]
+
+    return (
+      <div className="w-96">
+        <Select
+          disabled
+          placeholder="Select an option (disabled)"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with many options
+export const ManyOptions: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = Array.from({ length: 20 }, (_, i) => ({
+      value: `option${i + 1}`,
+      label: `Option ${i + 1}`,
+    }))
+
+    return (
+      <div className="w-96">
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select from many options"
+          items={items}
+        />
+      </div>
+    )
+  },
+}
+
+// Token selection (common use case)
+export const TokenSelection: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const tokens = [
+      { value: "usdc", label: "USDC" },
+      { value: "usdt", label: "USDT" },
+      { value: "eur", label: "EUR" },
+      { value: "xlm", label: "XLM" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Select Token</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Choose a token"
+          items={tokens}
+        />
+      </div>
+    )
+  },
+}
+
+// Recurrence selection (from batch create page)
+export const RecurrenceSelection: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const recurrenceOptions = [
+      { value: "once", label: "Once" },
+      { value: "daily", label: "Daily" },
+      { value: "weekly", label: "Weekly" },
+      { value: "monthly", label: "Monthly" },
+      { value: "yearly", label: "Yearly" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Recurrence</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select recurrence"
+          items={recurrenceOptions}
+        />
+      </div>
+    )
+  },
+}
+
+// Select with error state
+export const WithError: Story = {
+  render: () => {
+    const [value, setValue] = React.useState<string>("")
+    const items = [
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
+    ]
+
+    return (
+      <div className="space-y-2 w-96">
+        <label className="text-sm font-medium">Required Field</label>
+        <Select
+          value={value}
+          onChange={(newValue) => setValue(newValue)}
+          placeholder="Select an option"
+          items={items}
+          aria-invalid={!value}
+        />
+        {!value && <p className="text-xs text-destructive">This field is required</p>}
+      </div>
+    )
+  },
+}
+
+// Multiple selects side by side
+export const MultipleSelects: Story = {
+  render: () => {
+    const [token, setToken] = React.useState<string>("")
+    const [recurrence, setRecurrence] = React.useState<string>("")
+
+    const tokenItems = [
+      { value: "usdc", label: "USDC" },
+      { value: "usdt", label: "USDT" },
+    ]
+
+    const recurrenceItems = [
+      { value: "once", label: "Once" },
+      { value: "monthly", label: "Monthly" },
+    ]
+
+    return (
+      <div className="grid grid-cols-2 gap-4 w-full max-w-2xl">
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Token</label>
+          <Select
+            value={token}
+            onChange={setToken}
+            placeholder="Select token"
+            items={tokenItems}
+          />
+        </div>
+        <div className="space-y-2">
+          <label className="text-sm font-medium">Recurrence</label>
+          <Select
+            value={recurrence}
+            onChange={setRecurrence}
+            placeholder="Select recurrence"
+            items={recurrenceItems}
+          />
+        </div>
+      </div>
+    )
+  },
+}