feat: add Storybook stories for remaining UI primitives

frontend/.gitignore

@@ -2,6 +2,9 @@
 dist/
 dist-ssr/
 
+# Storybook build output
+storybook-static/
+
 # Vitest coverage
 coverage/
 

frontend/package.json

@@ -61,6 +61,7 @@
     "@vitest/coverage-v8": "^4.1.3",
     "@vitest/ui": "^4.1.3",
     "autoprefixer": "^10.4.16",
+    "esbuild": "^0.28.0",
     "eslint": "^9.0.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jsx-a11y": "^6.10.2",

frontend/src/components/UI/ConfirmModal.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { ConfirmModal } from './ConfirmModal'
+
+const meta: Meta<typeof ConfirmModal> = {
+  title: 'UI/ConfirmModal',
+  component: ConfirmModal,
+  tags: ['autodocs'],
+  args: {
+    isOpen: true,
+    title: 'Confirm Transaction',
+    details: [
+      { label: 'Amount', value: '100 XLM' },
+      { label: 'Recipient', value: 'GABCD…WXYZ' },
+      { label: 'Network Fee', value: '0.00001 XLM' },
+    ],
+    onConfirm: fn(),
+    onCancel: fn(),
+  },
+  parameters: { layout: 'fullscreen' },
+}
+export default meta
+
+type Story = StoryObj<typeof ConfirmModal>
+
+export const Default: Story = {
+  args: {
+    description: 'Please review the details before confirming.',
+  },
+}
+
+export const WithoutDescription: Story = {}
+
+export const DestructiveAction: Story = {
+  args: {
+    title: 'Delete Token',
+    description: 'This action cannot be undone.',
+    confirmLabel: 'Delete',
+    details: [{ label: 'Token', value: 'MTK — My Token' }],
+  },
+}
+
+export const Closed: Story = { args: { isOpen: false } }

frontend/src/components/UI/InsufficientBalanceWarning.stories.tsx

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { fn } from '@storybook/test'
+import { InsufficientBalanceWarning } from './InsufficientBalanceWarning'
+import { WalletContext } from '../../context/WalletContext'
+import { ToastContext } from '../../context/ToastContext'
+
+const mockWalletValue = {
+  wallet: { address: 'GABCDEFGHIJKLMNOPQRSTUVWXYZ234567', isConnected: true, balance: '5.0000000' },
+  isConnecting: false,
+  error: null,
+  isInstalled: true,
+  connect: fn(),
+  disconnect: fn(),
+  refreshBalance: fn(),
+}
+
+const mockToastValue = {
+  toasts: [],
+  addToast: fn(),
+  removeToast: fn(),
+}
+
+const meta: Meta<typeof InsufficientBalanceWarning> = {
+  title: 'UI/InsufficientBalanceWarning',
+  component: InsufficientBalanceWarning,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => (
+      <WalletContext.Provider value={mockWalletValue}>
+        <ToastContext.Provider value={mockToastValue}>
+          <Story />
+        </ToastContext.Provider>
+      </WalletContext.Provider>
+    ),
+  ],
+  args: {
+    shortfall: '0.5000000',
+    isTestnet: true,
+  },
+}
+export default meta
+
+type Story = StoryObj<typeof InsufficientBalanceWarning>
+
+export const Default: Story = {}
+
+export const Mainnet: Story = { args: { isTestnet: false } }
+
+export const LargeShortfall: Story = { args: { shortfall: '125.0000000' } }

frontend/src/components/UI/ProgressIndicator.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { ProgressIndicator } from './ProgressIndicator'
+
+const meta: Meta<typeof ProgressIndicator> = {
+  title: 'UI/ProgressIndicator',
+  component: ProgressIndicator,
+  tags: ['autodocs'],
+}
+export default meta
+
+type Story = StoryObj<typeof ProgressIndicator>
+
+export const Default: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'pending' },
+      { label: 'Submit transaction', status: 'pending' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}
+
+export const InProgress: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'in-progress' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}
+
+export const Completed: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'completed' },
+      { label: 'Confirm on network', status: 'completed' },
+    ],
+  },
+}
+
+export const WithError: Story = {
+  args: {
+    steps: [
+      { label: 'Validate token details', status: 'completed' },
+      { label: 'Submit transaction', status: 'error' },
+      { label: 'Confirm on network', status: 'pending' },
+    ],
+  },
+}