@wakastellar/ui 3.2.0 → 3.3.2

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

@@ -0,0 +1,624 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import type { CreditThresholds } from "../waka-credit-balance/types"
+
+// ============================================================================
+// Types
+// ============================================================================
+
+export interface WakaCreditMeterProps {
+  /** Credits used */
+  used: number
+  /** Total credits available */
+  total: number
+  /** Visual variant: ring (full circle), gauge (half-circle), bar (horizontal) */
+  variant?: "gauge" | "bar" | "ring"
+  /** Thresholds for color changes based on usage percentage */
+  thresholds?: CreditThresholds
+  /** Show label below the meter */
+  showLabel?: boolean
+  /** Show value in center (ring/gauge) or alongside (bar) */
+  showValue?: boolean
+  /** Component size */
+  size?: "sm" | "md" | "lg"
+  /** Enable animation on value changes */
+  animated?: boolean
+  /** Label text */
+  label?: string
+  /** Custom value formatter */
+  formatValue?: (value: number) => string
+  /** Additional CSS classes */
+  className?: string
+}
+
+// ============================================================================
+// Constants
+// ============================================================================
+
+const DEFAULT_THRESHOLDS: CreditThresholds = {
+  warning: 70,
+  critical: 90,
+}
+
+const SIZE_CONFIG = {
+  sm: {
+    svgSize: 80,
+    strokeWidth: 6,
+    fontSize: "text-xs",
+    subFontSize: "text-[9px]",
+    labelSize: "text-xs",
+    barHeight: "h-2",
+    barText: "text-xs",
+  },
+  md: {
+    svgSize: 120,
+    strokeWidth: 8,
+    fontSize: "text-sm",
+    subFontSize: "text-[10px]",
+    labelSize: "text-sm",
+    barHeight: "h-3",
+    barText: "text-sm",
+  },
+  lg: {
+    svgSize: 180,
+    strokeWidth: 12,
+    fontSize: "text-xl",
+    subFontSize: "text-xs",
+    labelSize: "text-base",
+    barHeight: "h-4",
+    barText: "text-base",
+  },
+}
+
+const VARIANT_CONFIG = {
+  ring: {
+    startAngle: 0,
+    endAngle: 360,
+    rotation: -90,
+  },
+  gauge: {
+    startAngle: 0,
+    endAngle: 180,
+    rotation: -90,
+  },
+}
+
+// ============================================================================
+// Helper Functions
+// ============================================================================
+
+function polarToCartesian(
+  centerX: number,
+  centerY: number,
+  radius: number,
+  angleInDegrees: number
+): { x: number; y: number } {
+  const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0
+  return {
+    x: centerX + radius * Math.cos(angleInRadians),
+    y: centerY + radius * Math.sin(angleInRadians),
+  }
+}
+
+function describeArc(
+  x: number,
+  y: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number
+): string {
+  const start = polarToCartesian(x, y, radius, endAngle)
+  const end = polarToCartesian(x, y, radius, startAngle)
+  const largeArcFlag = endAngle - startAngle <= 180 ? "0" : "1"
+
+  return [
+    "M",
+    start.x,
+    start.y,
+    "A",
+    radius,
+    radius,
+    0,
+    largeArcFlag,
+    0,
+    end.x,
+    end.y,
+  ].join(" ")
+}
+
+function getColorForPercentage(
+  percentage: number,
+  thresholds: CreditThresholds
+): { color: string; glowColor: string; zone: "normal" | "warning" | "critical" } {
+  if (percentage >= thresholds.critical) {
+    return {
+      color: "#ef4444", // red-500
+      glowColor: "rgba(239, 68, 68, 0.6)",
+      zone: "critical",
+    }
+  }
+  if (percentage >= thresholds.warning) {
+    return {
+      color: "#eab308", // yellow-500
+      glowColor: "rgba(234, 179, 8, 0.4)",
+      zone: "warning",
+    }
+  }
+  return {
+    color: "#22c55e", // green-500
+    glowColor: "rgba(34, 197, 94, 0.3)",
+    zone: "normal",
+  }
+}
+
+function defaultFormatValue(value: number): string {
+  return value.toLocaleString("en-US")
+}
+
+// ============================================================================
+// Animated Counter Hook
+// ============================================================================
+
+function useAnimatedValue(
+  targetValue: number,
+  animated: boolean,
+  duration: number = 800
+): number {
+  const [displayValue, setDisplayValue] = React.useState(animated ? 0 : targetValue)
+  const animationRef = React.useRef<number>()
+  const previousValueRef = React.useRef(animated ? 0 : 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 displayValue
+}
+
+// ============================================================================
+// Ring / Gauge Variant (SVG arc)
+// ============================================================================
+
+interface SvgMeterProps {
+  used: number
+  total: number
+  percentage: number
+  displayPercentage: number
+  color: string
+  glowColor: string
+  zone: "normal" | "warning" | "critical"
+  variant: "ring" | "gauge"
+  size: "sm" | "md" | "lg"
+  showValue: boolean
+  showLabel: boolean
+  label?: string
+  formatValue: (value: number) => string
+  className?: string
+}
+
+function SvgMeter({
+  used,
+  total,
+  percentage,
+  displayPercentage,
+  color,
+  glowColor,
+  zone,
+  variant,
+  size,
+  showValue,
+  showLabel,
+  label,
+  formatValue,
+  className,
+}: SvgMeterProps) {
+  const config = SIZE_CONFIG[size]
+  const variantConfig = VARIANT_CONFIG[variant]
+
+  const svgSize = config.svgSize
+  const center = svgSize / 2
+  const radius = (svgSize - config.strokeWidth) / 2
+
+  // Generate arc paths
+  const backgroundArc = describeArc(center, center, radius, 0, variantConfig.endAngle - 0.01)
+  const progressArc = describeArc(
+    center,
+    center,
+    radius,
+    0,
+    (displayPercentage / 100) * variantConfig.endAngle || 0.01
+  )
+
+  // Container height adjustment for gauge (half-circle)
+  const containerHeight =
+    variant === "ring" ? svgSize : svgSize / 2 + config.strokeWidth
+
+  const shouldGlow = zone === "critical"
+
+  return (
+    <div className={cn("inline-flex flex-col items-center gap-1", className)}>
+      <div
+        className="relative"
+        style={{
+          width: svgSize,
+          height: containerHeight,
+          overflow: "visible",
+        }}
+      >
+        {/* Glow effect for critical zone */}
+        {shouldGlow && (
+          <div
+            className="absolute inset-0 rounded-full blur-xl animate-pulse"
+            style={{
+              background: `radial-gradient(circle, ${glowColor} 0%, transparent 70%)`,
+            }}
+          />
+        )}
+
+        <svg
+          width={svgSize}
+          height={svgSize}
+          viewBox={`0 0 ${svgSize} ${svgSize}`}
+          className="overflow-visible"
+          style={{
+            transform: `rotate(${variantConfig.rotation}deg)`,
+          }}
+        >
+          <defs>
+            <linearGradient
+              id={`credit-meter-gradient-${size}-${variant}`}
+              x1="0%"
+              y1="0%"
+              x2="100%"
+              y2="0%"
+            >
+              <stop offset="0%" stopColor={color} stopOpacity="0.8" />
+              <stop offset="100%" stopColor={color} stopOpacity="1" />
+            </linearGradient>
+
+            <filter
+              id={`credit-meter-shadow-${size}-${variant}`}
+              x="-20%"
+              y="-20%"
+              width="140%"
+              height="140%"
+            >
+              <feDropShadow
+                dx="0"
+                dy="0"
+                stdDeviation="3"
+                floodColor={color}
+                floodOpacity="0.5"
+              />
+            </filter>
+          </defs>
+
+          {/* Background track */}
+          <path
+            d={backgroundArc}
+            fill="none"
+            stroke="currentColor"
+            strokeWidth={config.strokeWidth}
+            strokeLinecap="round"
+            className="text-muted opacity-20"
+          />
+
+          {/* Progress arc */}
+          <path
+            d={progressArc}
+            fill="none"
+            stroke={`url(#credit-meter-gradient-${size}-${variant})`}
+            strokeWidth={config.strokeWidth}
+            strokeLinecap="round"
+            filter={
+              shouldGlow
+                ? `url(#credit-meter-shadow-${size}-${variant})`
+                : undefined
+            }
+            className="transition-all duration-300 ease-out"
+          />
+
+          {/* End cap dot */}
+          {displayPercentage > 0 && (
+            <circle
+              cx={
+                polarToCartesian(
+                  center,
+                  center,
+                  radius,
+                  (displayPercentage / 100) * variantConfig.endAngle
+                ).x
+              }
+              cy={
+                polarToCartesian(
+                  center,
+                  center,
+                  radius,
+                  (displayPercentage / 100) * variantConfig.endAngle
+                ).y
+              }
+              r={config.strokeWidth / 3}
+              fill="white"
+              className={cn(
+                "transition-all duration-300",
+                shouldGlow && "animate-pulse"
+              )}
+            />
+          )}
+        </svg>
+
+        {/* Center content */}
+        {showValue && (
+          <div
+            className={cn(
+              "absolute inset-0 flex flex-col items-center justify-center",
+              variant === "gauge" && "top-auto bottom-0 pb-1"
+            )}
+            style={{
+              height: variant === "gauge" ? svgSize / 2 : undefined,
+              top: variant === "gauge" ? "auto" : undefined,
+            }}
+          >
+            <div className="flex items-baseline gap-0.5">
+              <span
+                className={cn(
+                  "font-bold tabular-nums transition-colors duration-300",
+                  config.fontSize
+                )}
+                style={{ color }}
+              >
+                {formatValue(Math.round(used))}
+              </span>
+              <span
+                className={cn(
+                  "font-medium text-muted-foreground",
+                  config.subFontSize
+                )}
+              >
+                /{formatValue(total)}
+              </span>
+            </div>
+            <span
+              className={cn(
+                "font-medium tabular-nums text-muted-foreground",
+                config.subFontSize
+              )}
+            >
+              {Math.round(percentage)}%
+            </span>
+          </div>
+        )}
+      </div>
+
+      {/* Label */}
+      {showLabel && label && (
+        <span
+          className={cn("text-muted-foreground text-center", config.labelSize)}
+        >
+          {label}
+        </span>
+      )}
+    </div>
+  )
+}
+
+// ============================================================================
+// Bar Variant
+// ============================================================================
+
+interface BarMeterProps {
+  used: number
+  total: number
+  percentage: number
+  displayPercentage: number
+  color: string
+  zone: "normal" | "warning" | "critical"
+  size: "sm" | "md" | "lg"
+  showValue: boolean
+  showLabel: boolean
+  animated: boolean
+  label?: string
+  formatValue: (value: number) => string
+  className?: string
+}
+
+function BarMeter({
+  used,
+  total,
+  percentage,
+  displayPercentage,
+  color,
+  zone,
+  size,
+  showValue,
+  showLabel,
+  animated,
+  label,
+  formatValue,
+  className,
+}: BarMeterProps) {
+  const config = SIZE_CONFIG[size]
+
+  const colorClass =
+    zone === "critical"
+      ? "bg-destructive"
+      : zone === "warning"
+        ? "bg-warning"
+        : "bg-success"
+
+  return (
+    <div className={cn("w-full", className)}>
+      {/* Header with label and values */}
+      {(showLabel && label) || showValue ? (
+        <div className={cn("flex items-center justify-between mb-2")}>
+          {showLabel && label && (
+            <span className={cn("font-medium", config.barText)}>{label}</span>
+          )}
+          {showValue && (
+            <div
+              className={cn(
+                "flex items-center gap-1.5 text-muted-foreground",
+                config.barText
+              )}
+            >
+              <span className="tabular-nums" style={{ color }}>
+                {formatValue(Math.round(used))}
+              </span>
+              <span>/</span>
+              <span className="tabular-nums">{formatValue(total)}</span>
+              <span className="text-muted-foreground">
+                ({Math.round(percentage)}%)
+              </span>
+            </div>
+          )}
+        </div>
+      ) : null}
+
+      {/* Progress bar */}
+      <div
+        className={cn(
+          "relative w-full overflow-hidden rounded-full bg-muted",
+          config.barHeight
+        )}
+      >
+        <div
+          className={cn(
+            "h-full rounded-full transition-colors duration-300",
+            colorClass,
+            zone === "critical" && "animate-pulse"
+          )}
+          style={{
+            width: `${Math.min(displayPercentage, 100)}%`,
+            transition: animated ? undefined : "width 0.3s ease-out",
+          }}
+        >
+          {/* Shine effect */}
+          {animated && (
+            <div className="absolute inset-0 overflow-hidden rounded-full">
+              <div className="absolute inset-0 animate-credit-meter-shine" />
+            </div>
+          )}
+        </div>
+      </div>
+
+      {/* CSS Animation */}
+      <style>{`
+        @keyframes credit-meter-shine {
+          0% { transform: translateX(-100%); opacity: 0; }
+          50% { opacity: 0.3; }
+          100% { transform: translateX(100%); opacity: 0; }
+        }
+        .animate-credit-meter-shine {
+          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
+          animation: credit-meter-shine 2s ease-in-out infinite;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+// ============================================================================
+// Main Component
+// ============================================================================
+
+export function WakaCreditMeter({
+  used,
+  total,
+  variant = "ring",
+  thresholds = DEFAULT_THRESHOLDS,
+  showLabel = true,
+  showValue = true,
+  size = "md",
+  animated = true,
+  label,
+  formatValue = defaultFormatValue,
+  className,
+}: WakaCreditMeterProps) {
+  // Calculate usage percentage
+  const percentage = total > 0 ? Math.min(100, Math.max(0, (used / total) * 100)) : 0
+
+  // Animate the percentage
+  const displayPercentage = useAnimatedValue(percentage, animated)
+
+  // Get color based on percentage vs thresholds
+  const { color, glowColor, zone } = getColorForPercentage(percentage, thresholds)
+
+  if (variant === "bar") {
+    return (
+      <BarMeter
+        used={used}
+        total={total}
+        percentage={percentage}
+        displayPercentage={displayPercentage}
+        color={color}
+        zone={zone}
+        size={size}
+        showValue={showValue}
+        showLabel={showLabel}
+        animated={animated}
+        label={label}
+        formatValue={formatValue}
+        className={className}
+      />
+    )
+  }
+
+  return (
+    <SvgMeter
+      used={used}
+      total={total}
+      percentage={percentage}
+      displayPercentage={displayPercentage}
+      color={color}
+      glowColor={glowColor}
+      zone={zone}
+      variant={variant}
+      size={size}
+      showValue={showValue}
+      showLabel={showLabel}
+      label={label}
+      formatValue={formatValue}
+      className={className}
+    />
+  )
+}
+
+export default WakaCreditMeter