@wakastellar/ui 3.1.0 → 3.3.0

package/src/components/waka-credit-transaction/index.tsx

@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { ArrowDownLeft, ArrowUpRight, RotateCcw, Gift, Clock } from "lucide-react"
+import { Badge } from "../badge"
+import type { CreditTransaction, CreditTransactionType, CreditTransactionStatus } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type { CreditTransaction, CreditTransactionType, CreditTransactionStatus } from "../waka-credit-balance/types"
+
+export interface WakaCreditTransactionProps {
+  /** The transaction to display */
+  transaction: CreditTransaction
+  /** Show the service name column */
+  showService?: boolean
+  /** Show the status badge column */
+  showStatus?: boolean
+  /** Use compact single-line layout */
+  compact?: boolean
+  /** Custom amount formatter */
+  formatAmount?: (amount: number) => string
+  /** Custom date formatter */
+  formatDate?: (date: string | Date) => string
+  /** Click handler for the transaction row */
+  onClick?: (transaction: CreditTransaction) => void
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const TYPE_CONFIG: Record<
+  CreditTransactionType,
+  {
+    icon: React.ElementType
+    color: string
+    bg: string
+    iconColor: string
+    prefix: string
+  }
+> = {
+  debit: {
+    icon: ArrowDownLeft,
+    color: "text-red-600 dark:text-red-400",
+    bg: "bg-red-50 dark:bg-red-950/30",
+    iconColor: "text-red-500 dark:text-red-400",
+    prefix: "-",
+  },
+  credit: {
+    icon: ArrowUpRight,
+    color: "text-green-600 dark:text-green-400",
+    bg: "bg-green-50 dark:bg-green-950/30",
+    iconColor: "text-green-500 dark:text-green-400",
+    prefix: "+",
+  },
+  refund: {
+    icon: RotateCcw,
+    color: "text-blue-600 dark:text-blue-400",
+    bg: "bg-blue-50 dark:bg-blue-950/30",
+    iconColor: "text-blue-500 dark:text-blue-400",
+    prefix: "+",
+  },
+  bonus: {
+    icon: Gift,
+    color: "text-purple-600 dark:text-purple-400",
+    bg: "bg-purple-50 dark:bg-purple-950/30",
+    iconColor: "text-purple-500 dark:text-purple-400",
+    prefix: "+",
+  },
+  expiry: {
+    icon: Clock,
+    color: "text-gray-500 dark:text-gray-400",
+    bg: "bg-gray-50 dark:bg-gray-900/30",
+    iconColor: "text-gray-400 dark:text-gray-500",
+    prefix: "-",
+  },
+}
+
+const STATUS_CONFIG: Record<
+  CreditTransactionStatus,
+  {
+    label: string
+    className: string
+  }
+> = {
+  completed: {
+    label: "Completed",
+    className: "bg-green-100 text-green-800 dark:bg-green-900/40 dark:text-green-300 border-green-200 dark:border-green-800",
+  },
+  pending: {
+    label: "Pending",
+    className: "bg-yellow-100 text-yellow-800 dark:bg-yellow-900/40 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800",
+  },
+  failed: {
+    label: "Failed",
+    className: "bg-red-100 text-red-800 dark:bg-red-900/40 dark:text-red-300 border-red-200 dark:border-red-800",
+  },
+  cancelled: {
+    label: "Cancelled",
+    className: "bg-gray-100 text-gray-600 dark:bg-gray-800/40 dark:text-gray-400 border-gray-200 dark:border-gray-700",
+  },
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function defaultFormatAmount(amount: number): string {
+  return amount.toLocaleString("en-US")
+}
+
+function defaultFormatDate(date: string | Date): string {
+  const d = typeof date === "string" ? new Date(date) : date
+  return d.toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric",
+  })
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export function WakaCreditTransaction({
+  transaction,
+  showService = false,
+  showStatus = false,
+  compact = false,
+  formatAmount = defaultFormatAmount,
+  formatDate = defaultFormatDate,
+  onClick,
+  className,
+}: WakaCreditTransactionProps) {
+  const config = TYPE_CONFIG[transaction.type]
+  const Icon = config.icon
+  const statusConfig = STATUS_CONFIG[transaction.status]
+
+  const formattedAmount = `${config.prefix}${formatAmount(transaction.amount)}`
+  const formattedDate = formatDate(transaction.timestamp)
+
+  const isClickable = !!onClick
+
+  // Compact layout: Icon | Description | Amount | Date (single line, smaller)
+  if (compact) {
+    return (
+      <div
+        role={isClickable ? "button" : undefined}
+        tabIndex={isClickable ? 0 : undefined}
+        onClick={isClickable ? () => onClick(transaction) : undefined}
+        onKeyDown={
+          isClickable
+            ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  onClick(transaction)
+                }
+              }
+            : undefined
+        }
+        className={cn(
+          "flex items-center gap-3 py-2 px-3 rounded-md",
+          isClickable && "cursor-pointer hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        )}
+      >
+        {/* Icon */}
+        <div
+          className={cn(
+            "flex items-center justify-center h-7 w-7 rounded-md shrink-0",
+            config.bg
+          )}
+        >
+          <Icon className={cn("h-3.5 w-3.5", config.iconColor)} aria-hidden="true" />
+        </div>
+
+        {/* Description */}
+        <span className="flex-1 min-w-0 text-sm truncate text-foreground">
+          {transaction.description}
+        </span>
+
+        {/* Amount */}
+        <span
+          className={cn(
+            "text-sm font-semibold tabular-nums shrink-0",
+            config.color
+          )}
+        >
+          {formattedAmount}
+        </span>
+
+        {/* Date */}
+        <span className="text-xs text-muted-foreground shrink-0">
+          {formattedDate}
+        </span>
+      </div>
+    )
+  }
+
+  // Default layout: Icon | Description + Service | Amount (+/-) | Date | Status badge
+  return (
+    <div
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onClick={isClickable ? () => onClick(transaction) : undefined}
+      onKeyDown={
+        isClickable
+          ? (e) => {
+              if (e.key === "Enter" || e.key === " ") {
+                e.preventDefault()
+                onClick(transaction)
+              }
+            }
+          : undefined
+      }
+      className={cn(
+        "flex items-center gap-4 py-3 px-4 rounded-lg",
+        isClickable && "cursor-pointer hover:bg-muted/50 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        className
+      )}
+    >
+      {/* Icon */}
+      <div
+        className={cn(
+          "flex items-center justify-center h-9 w-9 rounded-lg shrink-0",
+          config.bg
+        )}
+      >
+        <Icon className={cn("h-4 w-4", config.iconColor)} aria-hidden="true" />
+      </div>
+
+      {/* Description + Service */}
+      <div className="flex-1 min-w-0">
+        <p className="text-sm font-medium text-foreground truncate">
+          {transaction.description}
+        </p>
+        {showService && transaction.service && (
+          <p className="text-xs text-muted-foreground mt-0.5 truncate">
+            {transaction.service}
+          </p>
+        )}
+      </div>
+
+      {/* Amount */}
+      <span
+        className={cn(
+          "text-sm font-semibold tabular-nums shrink-0",
+          config.color
+        )}
+      >
+        {formattedAmount}
+      </span>
+
+      {/* Date */}
+      <span className="text-xs text-muted-foreground shrink-0 w-24 text-right">
+        {formattedDate}
+      </span>
+
+      {/* Status Badge */}
+      {showStatus && (
+        <Badge
+          variant="outline"
+          className={cn("shrink-0 text-[10px] px-2 py-0.5", statusConfig.className)}
+        >
+          {statusConfig.label}
+        </Badge>
+      )}
+    </div>
+  )
+}
+
+export default WakaCreditTransaction

package/src/components/waka-credit-transfer-form/WakaCreditTransferForm.stories.tsx

@@ -0,0 +1,122 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditTransferForm } from "./index"
+import type { TransferOrganization } from "./index"
+
+const meta: Meta<typeof WakaCreditTransferForm> = {
+  title: "Components/Credit/WakaCreditTransferForm",
+  component: WakaCreditTransferForm,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "Form to transfer credits between organizations. Includes source/destination selection, amount input with max validation, reason field, and a transfer summary.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    maxAmount: {
+      control: "number",
+      description: "Maximum transferable amount",
+    },
+    loading: {
+      control: "boolean",
+      description: "Loading state for the transfer button",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-[480px]">
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditTransferForm>
+
+// ============================================================================
+// Sample data
+// ============================================================================
+
+const sampleOrganizations: TransferOrganization[] = [
+  { id: "org-1", name: "Acme Corp", balance: 5000 },
+  { id: "org-2", name: "TechStart Inc.", balance: 2300 },
+  { id: "org-3", name: "HealthData SA", balance: 800 },
+  { id: "org-4", name: "CloudOps Ltd", balance: 12000 },
+  { id: "org-5", name: "DataVault Systems", balance: 150 },
+]
+
+const sourceOrg: TransferOrganization = {
+  id: "org-1",
+  name: "Acme Corp",
+  balance: 5000,
+}
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    maxAmount: 10000,
+    organizations: sampleOrganizations,
+    onTransfer: (data) => {
+      console.log("Transfer submitted:", data)
+      alert(`Transfer ${data.amount} credits to ${data.toOrgId}\nReason: ${data.reason}`)
+    },
+    onCancel: () => {
+      console.log("Transfer cancelled")
+    },
+  },
+}
+
+export const WithSourceOrg: Story = {
+  args: {
+    maxAmount: 5000,
+    organizations: sampleOrganizations,
+    sourceOrganization: sourceOrg,
+    onTransfer: (data) => {
+      console.log("Transfer submitted:", data)
+      alert(`Transfer ${data.amount} credits to ${data.toOrgId}\nReason: ${data.reason}`)
+    },
+    onCancel: () => {
+      console.log("Transfer cancelled")
+    },
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    maxAmount: 5000,
+    organizations: sampleOrganizations,
+    sourceOrganization: sourceOrg,
+    loading: true,
+    onTransfer: (data) => {
+      console.log("Transfer submitted:", data)
+    },
+    onCancel: () => {
+      console.log("Transfer cancelled")
+    },
+  },
+}
+
+export const MaxedOut: Story = {
+  args: {
+    maxAmount: 0,
+    organizations: sampleOrganizations,
+    sourceOrganization: {
+      id: "org-1",
+      name: "Acme Corp",
+      balance: 0,
+    },
+    onTransfer: (data) => {
+      console.log("Transfer submitted:", data)
+    },
+    onCancel: () => {
+      console.log("Transfer cancelled")
+    },
+  },
+}