@wakastellar/ui 3.2.0 → 3.3.0

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

@@ -0,0 +1,433 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { TrendingUp, TrendingDown, Minus, Coins } from "lucide-react"
+import type { CreditThresholds } from "./types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export type { CreditThresholds } from "./types"
+
+export interface WakaCreditBalanceProps {
+  /** Current credit balance */
+  balance: number
+  /** Currency symbol or label (default: "credits") */
+  currency?: string
+  /** Trend indicator */
+  trend?: {
+    direction: "up" | "down" | "neutral"
+    value: string
+    text?: string
+  }
+  /** Thresholds for color changes */
+  thresholds?: CreditThresholds
+  /** Visual variant */
+  variant?: "card" | "compact" | "minimal"
+  /** Component size */
+  size?: "sm" | "md" | "lg"
+  /** Enable animated counter on value change */
+  animated?: boolean
+  /** Show loading skeleton */
+  loading?: boolean
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Config
+// ============================================================================
+
+const DEFAULT_THRESHOLDS: CreditThresholds = {
+  warning: 100,
+  critical: 20,
+}
+
+const SIZE_CONFIG = {
+  sm: {
+    container: "p-3",
+    label: "text-xs",
+    value: "text-xl",
+    currency: "text-xs",
+    trend: "text-[10px]",
+    trendIcon: "h-3 w-3",
+    coinIcon: "h-4 w-4",
+    coinContainer: "h-8 w-8",
+  },
+  md: {
+    container: "p-4",
+    label: "text-sm",
+    value: "text-2xl",
+    currency: "text-sm",
+    trend: "text-xs",
+    trendIcon: "h-4 w-4",
+    coinIcon: "h-5 w-5",
+    coinContainer: "h-10 w-10",
+  },
+  lg: {
+    container: "p-6",
+    label: "text-base",
+    value: "text-4xl",
+    currency: "text-base",
+    trend: "text-sm",
+    trendIcon: "h-5 w-5",
+    coinIcon: "h-6 w-6",
+    coinContainer: "h-12 w-12",
+  },
+}
+
+// ============================================================================
+// Helpers
+// ============================================================================
+
+function getAlertLevel(
+  balance: number,
+  thresholds: CreditThresholds
+): { level: "healthy" | "warning" | "critical" | "depleted"; color: string; bg: string; iconColor: string } {
+  if (balance <= 0) {
+    return {
+      level: "depleted",
+      color: "text-red-700 dark:text-red-400",
+      bg: "bg-red-100 dark:bg-red-900/30",
+      iconColor: "text-red-600",
+    }
+  }
+  if (balance <= thresholds.critical) {
+    return {
+      level: "critical",
+      color: "text-red-600 dark:text-red-400",
+      bg: "bg-red-50 dark:bg-red-900/20",
+      iconColor: "text-red-500",
+    }
+  }
+  if (balance <= thresholds.warning) {
+    return {
+      level: "warning",
+      color: "text-yellow-600 dark:text-yellow-400",
+      bg: "bg-yellow-50 dark:bg-yellow-900/20",
+      iconColor: "text-yellow-500",
+    }
+  }
+  return {
+    level: "healthy",
+    color: "text-green-600 dark:text-green-400",
+    bg: "bg-green-50 dark:bg-green-900/20",
+    iconColor: "text-green-500",
+  }
+}
+
+function defaultFormatValue(value: number): string {
+  return value.toLocaleString("en-US")
+}
+
+// ============================================================================
+// Animated Counter Hook
+// ============================================================================
+
+function useAnimatedCounter(
+  targetValue: number,
+  animated: boolean,
+  duration: number = 800
+): number {
+  const [displayValue, setDisplayValue] = React.useState(targetValue)
+  const animationRef = React.useRef<number>()
+  const previousValueRef = React.useRef(targetValue)
+
+  React.useEffect(() => {
+    if (!animated) {
+      setDisplayValue(targetValue)
+      previousValueRef.current = targetValue
+      return
+    }
+
+    const startValue = previousValueRef.current
+    const diff = targetValue - startValue
+
+    if (diff === 0) return
+
+    const startTime = performance.now()
+
+    const animate = (currentTime: number) => {
+      const elapsed = currentTime - startTime
+      const progress = Math.min(elapsed / duration, 1)
+      // Ease-out cubic
+      const eased = 1 - Math.pow(1 - progress, 3)
+
+      const current = startValue + diff * eased
+      setDisplayValue(current)
+
+      if (progress < 1) {
+        animationRef.current = requestAnimationFrame(animate)
+      } else {
+        setDisplayValue(targetValue)
+        previousValueRef.current = targetValue
+      }
+    }
+
+    animationRef.current = requestAnimationFrame(animate)
+
+    return () => {
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current)
+      }
+    }
+  }, [targetValue, animated, duration])
+
+  return Math.round(displayValue)
+}
+
+// ============================================================================
+// Trend Indicator
+// ============================================================================
+
+interface TrendIndicatorProps {
+  direction: "up" | "down" | "neutral"
+  value: string
+  text?: string
+  size: "sm" | "md" | "lg"
+}
+
+function TrendIndicator({ direction, value, text, size }: TrendIndicatorProps) {
+  const styles = SIZE_CONFIG[size]
+
+  const Icon =
+    direction === "up"
+      ? TrendingUp
+      : direction === "down"
+        ? TrendingDown
+        : Minus
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-1",
+        styles.trend,
+        direction === "up" && "text-green-600",
+        direction === "down" && "text-red-600",
+        direction === "neutral" && "text-muted-foreground"
+      )}
+    >
+      <Icon className={styles.trendIcon} />
+      <span className="font-medium">{value}</span>
+      {text && <span className="text-muted-foreground">{text}</span>}
+    </div>
+  )
+}
+
+// ============================================================================
+// Loading Skeleton
+// ============================================================================
+
+function BalanceSkeleton({ size, variant }: { size: "sm" | "md" | "lg"; variant: "card" | "compact" | "minimal" }) {
+  const valueSizes = {
+    sm: "h-5 w-20",
+    md: "h-7 w-24",
+    lg: "h-9 w-32",
+  }
+
+  if (variant === "minimal") {
+    return (
+      <div className="animate-pulse flex items-baseline gap-2">
+        <div className={cn("bg-muted rounded", valueSizes[size])} />
+        <div className="h-3 w-12 bg-muted rounded" />
+      </div>
+    )
+  }
+
+  if (variant === "compact") {
+    return (
+      <div className="animate-pulse flex items-center gap-3">
+        <div className="h-8 w-8 bg-muted rounded-lg" />
+        <div className="space-y-1.5">
+          <div className="h-3 w-16 bg-muted rounded" />
+          <div className={cn("bg-muted rounded", valueSizes[size])} />
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="animate-pulse">
+      <div className="flex items-start justify-between">
+        <div className="space-y-2">
+          <div className="h-3 w-20 bg-muted rounded" />
+          <div className={cn("bg-muted rounded", valueSizes[size])} />
+          <div className="h-3 w-24 bg-muted rounded" />
+        </div>
+        <div className="h-10 w-10 bg-muted rounded-lg" />
+      </div>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditBalance({
+  balance,
+  currency = "credits",
+  trend,
+  thresholds = DEFAULT_THRESHOLDS,
+  variant = "card",
+  size = "md",
+  animated = true,
+  loading = false,
+  formatValue = defaultFormatValue,
+  className,
+}: WakaCreditBalanceProps) {
+  const styles = SIZE_CONFIG[size]
+  const alert = getAlertLevel(balance, thresholds)
+  const displayValue = useAnimatedCounter(balance, animated)
+
+  // Loading state
+  if (loading) {
+    return (
+      <div
+        className={cn(
+          variant === "card" && "rounded-lg border bg-card shadow-sm",
+          variant === "card" && styles.container,
+          variant === "compact" && styles.container,
+          className
+        )}
+      >
+        <BalanceSkeleton size={size} variant={variant} />
+      </div>
+    )
+  }
+
+  // Minimal variant
+  if (variant === "minimal") {
+    return (
+      <div className={cn("flex flex-col", className)}>
+        <div className="flex items-baseline gap-2">
+          <span
+            className={cn(
+              "font-bold tracking-tight tabular-nums",
+              styles.value,
+              alert.color
+            )}
+          >
+            {formatValue(displayValue)}
+          </span>
+          <span className={cn("text-muted-foreground font-medium", styles.currency)}>
+            {currency}
+          </span>
+        </div>
+        {trend && (
+          <TrendIndicator
+            direction={trend.direction}
+            value={trend.value}
+            text={trend.text}
+            size={size}
+          />
+        )}
+      </div>
+    )
+  }
+
+  // Compact variant
+  if (variant === "compact") {
+    return (
+      <div
+        className={cn(
+          "flex items-center gap-3",
+          styles.container,
+          className
+        )}
+      >
+        <div
+          className={cn(
+            "rounded-lg flex items-center justify-center flex-shrink-0",
+            styles.coinContainer,
+            alert.bg
+          )}
+        >
+          <Coins className={cn(styles.coinIcon, alert.iconColor)} />
+        </div>
+        <div className="flex-1 min-w-0">
+          <p className={cn("text-muted-foreground font-medium", styles.label)}>
+            {currency}
+          </p>
+          <div className="flex items-baseline gap-2">
+            <span
+              className={cn(
+                "font-bold tracking-tight tabular-nums",
+                styles.value,
+                alert.color
+              )}
+            >
+              {formatValue(displayValue)}
+            </span>
+            {trend && (
+              <TrendIndicator
+                direction={trend.direction}
+                value={trend.value}
+                text={trend.text}
+                size={size}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  // Card variant (default)
+  return (
+    <div
+      className={cn(
+        "rounded-lg border bg-card shadow-sm",
+        styles.container,
+        className
+      )}
+    >
+      <div className="flex items-start justify-between">
+        <div className="flex-1">
+          <p className={cn("text-muted-foreground font-medium", styles.label)}>
+            Credit Balance
+          </p>
+          <div className="flex items-baseline gap-2 mt-1">
+            <span
+              className={cn(
+                "font-bold tracking-tight tabular-nums",
+                styles.value,
+                alert.color
+              )}
+            >
+              {formatValue(displayValue)}
+            </span>
+            <span className={cn("text-muted-foreground font-medium", styles.currency)}>
+              {currency}
+            </span>
+          </div>
+          {trend && (
+            <div className="mt-2">
+              <TrendIndicator
+                direction={trend.direction}
+                value={trend.value}
+                text={trend.text}
+                size={size}
+              />
+            </div>
+          )}
+        </div>
+        <div
+          className={cn(
+            "rounded-lg flex items-center justify-center flex-shrink-0",
+            styles.coinContainer,
+            alert.bg
+          )}
+        >
+          <Coins className={cn(styles.coinIcon, alert.iconColor)} />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default WakaCreditBalance

package/src/components/waka-credit-balance/types.ts

@@ -0,0 +1,38 @@
+export type CreditTransactionType = "debit" | "credit" | "refund" | "bonus" | "expiry"
+export type CreditTransactionStatus = "completed" | "pending" | "failed" | "cancelled"
+export type CreditAlertLevel = "info" | "warning" | "critical" | "depleted"
+
+export interface CreditTransaction {
+  id: string
+  type: CreditTransactionType
+  amount: number
+  description: string
+  service?: string
+  timestamp: string | Date
+  status: CreditTransactionStatus
+  balanceAfter?: number
+}
+
+export interface CreditPack {
+  id: string
+  name: string
+  credits: number
+  price: number
+  currency?: string
+  unitPrice?: number
+  bonusPercent?: number
+  highlighted?: boolean
+  highlightLabel?: string
+}
+
+export interface CreditThresholds {
+  warning: number
+  critical: number
+}
+
+export interface CreditServiceUsage {
+  id: string
+  name: string
+  value: number
+  color?: string
+}

package/src/components/waka-credit-breakdown/WakaCreditBreakdown.stories.tsx

@@ -0,0 +1,186 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WakaCreditBreakdown } from './index'
+import type { BreakdownItem } from './index'
+import * as React from 'react'
+
+// ============================================================================
+// Mock Data
+// ============================================================================
+
+const mockData: BreakdownItem[] = [
+  { id: 'api-calls', name: 'API Calls', value: 4200 },
+  { id: 'builds', name: 'Builds', value: 2800 },
+  { id: 'storage', name: 'Storage', value: 1500 },
+  { id: 'network', name: 'Network', value: 950 },
+  { id: 'monitoring', name: 'Monitoring', value: 650 },
+]
+
+const customColorData: BreakdownItem[] = [
+  { id: 'api-calls', name: 'API Calls', value: 4200, color: '#3b82f6' },
+  { id: 'builds', name: 'Builds', value: 2800, color: '#22c55e' },
+  { id: 'storage', name: 'Storage', value: 1500, color: '#f59e0b' },
+  { id: 'network', name: 'Network', value: 950, color: '#ef4444' },
+  { id: 'monitoring', name: 'Monitoring', value: 650, color: '#8b5cf6' },
+  { id: 'ci-cd', name: 'CI/CD Pipelines', value: 420, color: '#06b6d4' },
+]
+
+// ============================================================================
+// Meta
+// ============================================================================
+
+const meta: Meta<typeof WakaCreditBreakdown> = {
+  title: 'Components/Credit/WakaCreditBreakdown',
+  component: WakaCreditBreakdown,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component:
+          'Credit consumption breakdown by service. Supports pie, donut, and horizontal bar chart variants using recharts.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['pie', 'donut', 'bar'],
+      description: 'Visualization variant',
+    },
+    showPercentages: {
+      control: 'boolean',
+      description: 'Show percentage labels on chart',
+    },
+    showLegend: {
+      control: 'boolean',
+      description: 'Show legend',
+    },
+    height: {
+      control: { type: 'number', min: 200, max: 600, step: 50 },
+      description: 'Chart height in pixels',
+    },
+    animated: {
+      control: 'boolean',
+      description: 'Enable animations',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof WakaCreditBreakdown>
+
+// ============================================================================
+// Stories
+// ============================================================================
+
+export const Pie: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="pie"
+      />
+    </div>
+  ),
+}
+
+export const Donut: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="donut"
+      />
+    </div>
+  ),
+}
+
+export const Bar: Story = {
+  render: () => (
+    <div className="w-[500px]">
+      <WakaCreditBreakdown
+        data={mockData}
+        variant="bar"
+        height={300}
+      />
+    </div>
+  ),
+}
+
+export const WithPercentages: Story = {
+  render: () => (
+    <div className="w-[600px] space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Pie with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="pie"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Donut with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="donut"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Bar with Percentages</h4>
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="bar"
+          showPercentages
+        />
+      </div>
+    </div>
+  ),
+}
+
+export const Clickable: Story = {
+  render: () => {
+    const [clicked, setClicked] = React.useState<BreakdownItem | null>(null)
+
+    return (
+      <div className="w-[500px] space-y-4">
+        <WakaCreditBreakdown
+          data={mockData}
+          variant="donut"
+          showPercentages
+          onSegmentClick={(item) => setClicked(item)}
+        />
+        {clicked && (
+          <div className="p-3 rounded-lg border bg-muted/50 text-sm">
+            <span className="font-medium">Clicked:</span>{' '}
+            {clicked.name} ({clicked.value.toLocaleString()} credits)
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const CustomColors: Story = {
+  render: () => (
+    <div className="w-[500px] space-y-8">
+      <div>
+        <h4 className="text-sm font-medium mb-2">Donut with Custom Colors</h4>
+        <WakaCreditBreakdown
+          data={customColorData}
+          variant="donut"
+          showPercentages
+        />
+      </div>
+      <div>
+        <h4 className="text-sm font-medium mb-2">Bar with Custom Colors</h4>
+        <WakaCreditBreakdown
+          data={customColorData}
+          variant="bar"
+          height={350}
+          formatValue={(value) => `${value.toLocaleString()} cr`}
+        />
+      </div>
+    </div>
+  ),
+}