@wakastellar/ui 3.2.0 → 3.3.2

package/src/components/waka-credit-transfer-form/index.tsx

@@ -0,0 +1,352 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { ArrowRight, Send, AlertCircle, Building2 } from "lucide-react"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "../card"
+import { Button } from "../button"
+import { Input } from "../input"
+import { Label } from "../label"
+import { Textarea } from "../textarea"
+import {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem,
+  SelectValue,
+} from "../select"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface TransferOrganization {
+  id: string
+  name: string
+  balance?: number
+}
+
+export interface WakaCreditTransferFormProps {
+  /** Maximum amount that can be transferred */
+  maxAmount: number
+  /** List of organizations available as transfer destinations */
+  organizations: TransferOrganization[]
+  /** Source organization (displayed read-only if provided) */
+  sourceOrganization?: TransferOrganization
+  /** Callback when the transfer form is submitted */
+  onTransfer: (data: { toOrgId: string; amount: number; reason: string }) => void
+  /** Callback when the cancel button is clicked */
+  onCancel?: () => void
+  /** Loading state for the transfer button */
+  loading?: boolean
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Validation
+// ============================================================================
+
+interface FormErrors {
+  destination?: string
+  amount?: string
+  reason?: string
+}
+
+function validateForm(
+  destinationId: string,
+  amount: string,
+  reason: string,
+  maxAmount: number,
+  sourceOrganizationId?: string
+): FormErrors {
+  const errors: FormErrors = {}
+
+  if (!destinationId) {
+    errors.destination = "Please select a destination organization"
+  } else if (sourceOrganizationId && destinationId === sourceOrganizationId) {
+    errors.destination = "Destination must be different from source organization"
+  }
+
+  const numAmount = parseFloat(amount)
+  if (!amount) {
+    errors.amount = "Amount is required"
+  } else if (isNaN(numAmount) || numAmount <= 0) {
+    errors.amount = "Amount must be greater than 0"
+  } else if (numAmount > maxAmount) {
+    errors.amount = `Amount cannot exceed ${maxAmount.toLocaleString()} credits`
+  }
+
+  if (!reason.trim()) {
+    errors.reason = "Please provide a reason for the transfer"
+  }
+
+  return errors
+}
+
+// ============================================================================
+// Field Error Component
+// ============================================================================
+
+function FieldError({ message }: { message?: string }) {
+  if (!message) return null
+
+  return (
+    <div className="flex items-center gap-1.5 mt-1.5">
+      <AlertCircle className="h-3.5 w-3.5 text-destructive flex-shrink-0" />
+      <span className="text-xs text-destructive">{message}</span>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditTransferForm({
+  maxAmount,
+  organizations,
+  sourceOrganization,
+  onTransfer,
+  onCancel,
+  loading = false,
+  className,
+}: WakaCreditTransferFormProps) {
+  const [destinationId, setDestinationId] = React.useState("")
+  const [amount, setAmount] = React.useState("")
+  const [reason, setReason] = React.useState("")
+  const [errors, setErrors] = React.useState<FormErrors>({})
+  const [touched, setTouched] = React.useState<Record<string, boolean>>({})
+
+  // Filter out source organization from destination list
+  const availableOrganizations = React.useMemo(() => {
+    if (!sourceOrganization) return organizations
+    return organizations.filter((org) => org.id !== sourceOrganization.id)
+  }, [organizations, sourceOrganization])
+
+  // Get the selected destination organization
+  const destinationOrg = React.useMemo(
+    () => organizations.find((org) => org.id === destinationId),
+    [organizations, destinationId]
+  )
+
+  // Validate on change when fields have been touched
+  React.useEffect(() => {
+    if (Object.keys(touched).length === 0) return
+
+    const newErrors = validateForm(
+      destinationId,
+      amount,
+      reason,
+      maxAmount,
+      sourceOrganization?.id
+    )
+
+    // Only show errors for touched fields
+    const visibleErrors: FormErrors = {}
+    if (touched.destination && newErrors.destination) {
+      visibleErrors.destination = newErrors.destination
+    }
+    if (touched.amount && newErrors.amount) {
+      visibleErrors.amount = newErrors.amount
+    }
+    if (touched.reason && newErrors.reason) {
+      visibleErrors.reason = newErrors.reason
+    }
+
+    setErrors(visibleErrors)
+  }, [destinationId, amount, reason, maxAmount, sourceOrganization?.id, touched])
+
+  const handleBlur = (field: string) => {
+    setTouched((prev) => ({ ...prev, [field]: true }))
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+
+    // Touch all fields to show all errors
+    setTouched({ destination: true, amount: true, reason: true })
+
+    const formErrors = validateForm(
+      destinationId,
+      amount,
+      reason,
+      maxAmount,
+      sourceOrganization?.id
+    )
+
+    if (Object.keys(formErrors).length > 0) {
+      setErrors(formErrors)
+      return
+    }
+
+    onTransfer({
+      toOrgId: destinationId,
+      amount: parseFloat(amount),
+      reason: reason.trim(),
+    })
+  }
+
+  const numAmount = parseFloat(amount)
+  const isValidAmount = !isNaN(numAmount) && numAmount > 0 && numAmount <= maxAmount
+  const showSummary = destinationOrg && isValidAmount && sourceOrganization
+
+  return (
+    <Card className={cn("w-full", className)}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-lg">
+          <Send className="h-5 w-5" />
+          Transfer Credits
+        </CardTitle>
+      </CardHeader>
+
+      <form onSubmit={handleSubmit}>
+        <CardContent className="space-y-4">
+          {/* Source Organization (read-only) */}
+          {sourceOrganization && (
+            <div className="space-y-2">
+              <Label>Source Organization</Label>
+              <div className="flex items-center gap-2 rounded-md border border-input bg-muted/50 px-3 py-2 text-sm">
+                <Building2 className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+                <span className="font-medium">{sourceOrganization.name}</span>
+                {sourceOrganization.balance !== undefined && (
+                  <span className="ml-auto text-muted-foreground">
+                    {sourceOrganization.balance.toLocaleString()} credits
+                  </span>
+                )}
+              </div>
+            </div>
+          )}
+
+          {/* Destination Organization */}
+          <div className="space-y-2">
+            <Label htmlFor="destination-org">Destination Organization</Label>
+            <Select
+              value={destinationId}
+              onValueChange={(value) => {
+                setDestinationId(value)
+                setTouched((prev) => ({ ...prev, destination: true }))
+              }}
+              disabled={loading}
+            >
+              <SelectTrigger
+                id="destination-org"
+                className={cn(
+                  errors.destination && "border-destructive focus:ring-destructive"
+                )}
+                onBlur={() => handleBlur("destination")}
+              >
+                <SelectValue placeholder="Select an organization" />
+              </SelectTrigger>
+              <SelectContent>
+                {availableOrganizations.map((org) => (
+                  <SelectItem key={org.id} value={org.id}>
+                    <span className="flex items-center gap-2">
+                      <Building2 className="h-3.5 w-3.5 text-muted-foreground" />
+                      <span>{org.name}</span>
+                      {org.balance !== undefined && (
+                        <span className="text-muted-foreground">
+                          ({org.balance.toLocaleString()} credits)
+                        </span>
+                      )}
+                    </span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+            <FieldError message={errors.destination} />
+          </div>
+
+          {/* Amount */}
+          <div className="space-y-2">
+            <Label htmlFor="transfer-amount">Amount</Label>
+            <div className="relative">
+              <Input
+                id="transfer-amount"
+                type="number"
+                min={1}
+                max={maxAmount}
+                step={1}
+                placeholder={`Max: ${maxAmount.toLocaleString()} credits`}
+                value={amount}
+                onChange={(e) => setAmount(e.target.value)}
+                onBlur={() => handleBlur("amount")}
+                disabled={loading}
+                className={cn(
+                  errors.amount && "border-destructive focus-visible:ring-destructive"
+                )}
+              />
+            </div>
+            <FieldError message={errors.amount} />
+          </div>
+
+          {/* Reason */}
+          <div className="space-y-2">
+            <Label htmlFor="transfer-reason">Reason</Label>
+            <Textarea
+              id="transfer-reason"
+              placeholder="Describe the reason for this transfer..."
+              value={reason}
+              onChange={(e) => setReason(e.target.value)}
+              onBlur={() => handleBlur("reason")}
+              disabled={loading}
+              rows={3}
+              className={cn(
+                errors.reason && "border-destructive focus-visible:ring-destructive"
+              )}
+            />
+            <FieldError message={errors.reason} />
+          </div>
+
+          {/* Transfer Summary */}
+          {showSummary && (
+            <div className="rounded-md border bg-muted/30 p-3">
+              <p className="text-sm text-muted-foreground flex items-center gap-2 flex-wrap">
+                Transfer{" "}
+                <span className="font-semibold text-foreground">
+                  {numAmount.toLocaleString()} credits
+                </span>{" "}
+                from{" "}
+                <span className="font-semibold text-foreground">
+                  {sourceOrganization.name}
+                </span>
+                <ArrowRight className="h-3.5 w-3.5 flex-shrink-0" />
+                <span className="font-semibold text-foreground">
+                  {destinationOrg.name}
+                </span>
+              </p>
+            </div>
+          )}
+        </CardContent>
+
+        <CardFooter className="gap-2 justify-end">
+          {onCancel && (
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onCancel}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+          )}
+          <Button type="submit" disabled={loading}>
+            {loading ? (
+              <>
+                <span className="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+                Transferring...
+              </>
+            ) : (
+              <>
+                <Send className="h-4 w-4" />
+                Transfer
+              </>
+            )}
+          </Button>
+        </CardFooter>
+      </form>
+    </Card>
+  )
+}
+
+export default WakaCreditTransferForm

package/src/components/waka-credit-usage-chart/WakaCreditUsageChart.stories.tsx

@@ -0,0 +1,214 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { WakaCreditUsageChart } from "./index"
+import type { UsageDataPoint } from "./index"
+import * as React from "react"
+
+// ============================================================================
+// Mock Data Generation
+// ============================================================================
+
+function generateDailyData(days: number, baseValue: number, variance: number): UsageDataPoint[] {
+  const data: UsageDataPoint[] = []
+  const startDate = new Date(2026, 0, 1) // Jan 1, 2026
+
+  for (let i = 0; i < days; i++) {
+    const date = new Date(startDate)
+    date.setDate(startDate.getDate() + i)
+
+    // Simulate a realistic usage pattern with weekday peaks
+    const dayOfWeek = date.getDay()
+    const weekdayMultiplier = dayOfWeek === 0 || dayOfWeek === 6 ? 0.6 : 1.0
+    const trendMultiplier = 1 + (i / days) * 0.3 // Gradual upward trend
+    const noise = (Math.random() - 0.5) * variance * 2
+
+    const value = Math.max(
+      0,
+      Math.round(baseValue * weekdayMultiplier * trendMultiplier + noise)
+    )
+
+    data.push({
+      date: date.toLocaleDateString("en-US", { month: "short", day: "numeric" }),
+      value,
+    })
+  }
+
+  return data
+}
+
+function generateWeeklyData(weeks: number): UsageDataPoint[] {
+  const data: UsageDataPoint[] = []
+  const startDate = new Date(2025, 6, 7) // Jul 7, 2025
+
+  for (let i = 0; i < weeks; i++) {
+    const date = new Date(startDate)
+    date.setDate(startDate.getDate() + i * 7)
+
+    const value = Math.round(800 + Math.random() * 600 + i * 30)
+
+    data.push({
+      date: `W${i + 1} ${date.toLocaleDateString("en-US", { month: "short" })}`,
+      value,
+    })
+  }
+
+  return data
+}
+
+function generateMonthlyData(): UsageDataPoint[] {
+  const months = [
+    "Jan", "Feb", "Mar", "Apr", "May", "Jun",
+    "Jul", "Aug", "Sep", "Oct", "Nov", "Dec",
+  ]
+  return months.map((month, i) => ({
+    date: month,
+    value: Math.round(3000 + Math.sin(i * 0.8) * 1500 + Math.random() * 500 + i * 200),
+  }))
+}
+
+// 30 days of main usage data
+const dailyData = generateDailyData(30, 150, 40)
+
+// Previous period comparison data (30 days, slightly lower values)
+const comparisonData = generateDailyData(30, 120, 35)
+
+// Weekly data (12 weeks)
+const weeklyData = generateWeeklyData(12)
+
+// Monthly data
+const monthlyData = generateMonthlyData()
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditUsageChart> = {
+  title: "Components/Credit/WakaCreditUsageChart",
+  component: WakaCreditUsageChart,
+  parameters: {
+    layout: "centered",
+    docs: {
+      description: {
+        component:
+          "An area chart showing credit consumption over time, with optional period comparison overlay and period selector tabs.",
+      },
+    },
+  },
+  tags: ["autodocs"],
+  argTypes: {
+    period: {
+      control: "select",
+      options: ["day", "week", "month", "year"],
+      description: "Time period granularity",
+    },
+    height: {
+      control: { type: "number", min: 150, max: 600, step: 50 },
+      description: "Chart height in pixels",
+    },
+    showLegend: {
+      control: "boolean",
+      description: "Show chart legend",
+    },
+    showGrid: {
+      control: "boolean",
+      description: "Show cartesian grid",
+    },
+    animated: {
+      control: "boolean",
+      description: "Enable animations",
+    },
+    stacked: {
+      control: "boolean",
+      description: "Stack areas",
+    },
+    color: {
+      control: "color",
+      description: "Primary area color",
+    },
+    compareColor: {
+      control: "color",
+      description: "Comparison area color",
+    },
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ width: 700 }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditUsageChart>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Default: Story = {
+  args: {
+    data: dailyData,
+    height: 300,
+    showGrid: true,
+    animated: true,
+  },
+}
+
+export const WithComparison: Story = {
+  args: {
+    data: dailyData,
+    compareWith: comparisonData,
+    showLegend: true,
+    height: 350,
+  },
+}
+
+export const Weekly: Story = {
+  render: () => {
+    const [period, setPeriod] = React.useState<string>("week")
+
+    return (
+      <WakaCreditUsageChart
+        data={weeklyData}
+        period={period as "day" | "week" | "month" | "year"}
+        onPeriodChange={setPeriod}
+        height={300}
+        formatValue={(v) => `${v} cr`}
+      />
+    )
+  },
+}
+
+export const Monthly: Story = {
+  render: () => (
+    <WakaCreditUsageChart
+      data={monthlyData}
+      period="month"
+      height={300}
+      showLegend
+      formatValue={(v) => `${(v / 1000).toFixed(1)}k`}
+    />
+  ),
+}
+
+export const Stacked: Story = {
+  args: {
+    data: dailyData,
+    compareWith: comparisonData,
+    stacked: true,
+    showLegend: true,
+    height: 350,
+  },
+}
+
+export const CustomColors: Story = {
+  args: {
+    data: dailyData,
+    compareWith: comparisonData,
+    color: "#22c55e",
+    compareColor: "#f59e0b",
+    showLegend: true,
+    height: 350,
+    formatValue: (v: number) => `${v} credits`,
+  },
+}