@wakastellar/ui 2.3.0 → 2.3.2

package/src/components/waka-content-recommendation/index.tsx

@@ -0,0 +1,294 @@
+"use client"
+
+import * as React from "react"
+import { useRef, useEffect, useState } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, useAdVisibility, type CustomAd } from "../waka-ad-provider"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { ExternalLink, ChevronLeft, ChevronRight } from "lucide-react"
+
+export type RecommendationLayout = "grid" | "carousel" | "list"
+
+export interface WakaContentRecommendationProps {
+  /** Widget title */
+  title?: string
+  /** Slot IDs for recommendations */
+  slotIds: string[]
+  /** Layout style */
+  layout?: RecommendationLayout
+  /** Number of columns for grid layout */
+  columns?: 2 | 3 | 4
+  /** Show navigation arrows for carousel */
+  showArrows?: boolean
+  /** Auto-scroll carousel */
+  autoScroll?: boolean
+  /** Auto-scroll interval (seconds) */
+  autoScrollInterval?: number
+  /** Custom class name */
+  className?: string
+  /** Callback when item is clicked */
+  onItemClick?: (slotId: string) => void
+}
+
+export function WakaContentRecommendation({
+  title = "You May Also Like",
+  slotIds,
+  layout = "grid",
+  columns = 3,
+  showArrows = true,
+  autoScroll = false,
+  autoScrollInterval = 5,
+  className,
+  onItemClick,
+}: WakaContentRecommendationProps) {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const carouselRef = useRef<HTMLDivElement>(null)
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+  const { isVisible } = useAdVisibility(containerRef)
+
+  const [ads, setAds] = useState<Map<string, CustomAd>>(new Map())
+  const [isLoading, setIsLoading] = useState(true)
+  const [currentSlide, setCurrentSlide] = useState(0)
+
+  // Load all ads
+  useEffect(() => {
+    if (!isReady || !isVisible || hasConsent === false) return
+
+    const loadAds = async () => {
+      setIsLoading(true)
+      const loadedAds = new Map<string, CustomAd>()
+
+      await Promise.all(
+        slotIds.map(async (slotId) => {
+          try {
+            const ad = await getCustomAd(slotId)
+            if (ad) {
+              loadedAds.set(slotId, ad)
+              trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+
+              // Fire impression tracking
+              if (ad.impressionUrl) {
+                fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+              }
+            }
+          } catch {
+            // Ignore errors for individual slots
+          }
+        })
+      )
+
+      setAds(loadedAds)
+      setIsLoading(false)
+    }
+
+    loadAds()
+  }, [isReady, isVisible, hasConsent, slotIds, getCustomAd, trackEvent])
+
+  // Track viewability for loaded ads
+  useEffect(() => {
+    if (isVisible && ads.size > 0) {
+      ads.forEach((_, slotId) => {
+        trackEvent({ type: "viewable", slotId, timestamp: new Date() })
+      })
+    }
+  }, [isVisible, ads, trackEvent])
+
+  // Auto-scroll for carousel
+  useEffect(() => {
+    if (layout !== "carousel" || !autoScroll || ads.size === 0) return
+
+    const interval = setInterval(() => {
+      setCurrentSlide((prev) => (prev + 1) % ads.size)
+    }, autoScrollInterval * 1000)
+
+    return () => clearInterval(interval)
+  }, [layout, autoScroll, autoScrollInterval, ads.size])
+
+  // Scroll carousel to current slide
+  useEffect(() => {
+    if (layout !== "carousel" || !carouselRef.current) return
+
+    const slideWidth = carouselRef.current.offsetWidth / Math.min(columns, ads.size)
+    carouselRef.current.scrollTo({
+      left: currentSlide * slideWidth,
+      behavior: "smooth",
+    })
+  }, [currentSlide, layout, columns, ads.size])
+
+  const handleItemClick = (slotId: string, ad: CustomAd) => {
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onItemClick?.(slotId)
+
+    if (ad.clickUrl) {
+      fetch(ad.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (ad.targetUrl) {
+      window.open(ad.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }
+
+  const handlePrev = () => {
+    setCurrentSlide((prev) => (prev - 1 + ads.size) % ads.size)
+  }
+
+  const handleNext = () => {
+    setCurrentSlide((prev) => (prev + 1) % ads.size)
+  }
+
+  if (ads.size === 0 && !isLoading) {
+    return null
+  }
+
+  const columnClasses = {
+    2: "grid-cols-1 sm:grid-cols-2",
+    3: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+    4: "grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4",
+  }
+
+  const renderItem = (slotId: string, ad: CustomAd) => (
+    <button
+      key={slotId}
+      onClick={() => handleItemClick(slotId, ad)}
+      className="group flex-shrink-0 w-full text-left rounded-lg overflow-hidden bg-card border hover:shadow-md transition-shadow"
+    >
+      {ad.imageUrl && (
+        <div className="relative aspect-video bg-muted overflow-hidden">
+          <img
+            src={ad.imageUrl}
+            alt=""
+            className="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"
+          />
+        </div>
+      )}
+
+      <div className="p-3">
+        <h4 className="font-medium text-sm line-clamp-2 mb-1 group-hover:text-primary transition-colors">
+          {ad.title}
+        </h4>
+
+        <div className="flex items-center justify-between">
+          <span className="text-xs text-muted-foreground">
+            {ad.sponsor || "Sponsored"}
+          </span>
+          <ExternalLink className="h-3 w-3 text-muted-foreground" />
+        </div>
+      </div>
+    </button>
+  )
+
+  return (
+    <div
+      ref={containerRef}
+      className={cn("relative", className)}
+    >
+      {/* Header */}
+      <div className="flex items-center justify-between mb-4">
+        <div className="flex items-center gap-3">
+          <h3 className="font-semibold text-lg">{title}</h3>
+          <WakaSponsoredBadge size="sm" showIcon={false} />
+        </div>
+
+        {layout === "carousel" && showArrows && ads.size > columns && (
+          <div className="flex items-center gap-2">
+            <button
+              onClick={handlePrev}
+              className="p-1.5 rounded-full bg-muted hover:bg-muted-foreground/20 transition-colors"
+              aria-label="Previous"
+            >
+              <ChevronLeft className="h-4 w-4" />
+            </button>
+            <button
+              onClick={handleNext}
+              className="p-1.5 rounded-full bg-muted hover:bg-muted-foreground/20 transition-colors"
+              aria-label="Next"
+            >
+              <ChevronRight className="h-4 w-4" />
+            </button>
+          </div>
+        )}
+      </div>
+
+      {/* Content */}
+      {isLoading ? (
+        <div className={cn("grid gap-4", columnClasses[columns])}>
+          {slotIds.slice(0, columns).map((_, i) => (
+            <div
+              key={i}
+              className="rounded-lg border bg-muted animate-pulse aspect-[4/3]"
+            />
+          ))}
+        </div>
+      ) : layout === "grid" ? (
+        <div className={cn("grid gap-4", columnClasses[columns])}>
+          {Array.from(ads.entries()).map(([slotId, ad]) => renderItem(slotId, ad))}
+        </div>
+      ) : layout === "carousel" ? (
+        <div
+          ref={carouselRef}
+          className="flex gap-4 overflow-x-auto scrollbar-hide snap-x snap-mandatory"
+          style={{ scrollbarWidth: "none", msOverflowStyle: "none" }}
+        >
+          {Array.from(ads.entries()).map(([slotId, ad]) => (
+            <div
+              key={slotId}
+              className="snap-start"
+              style={{ minWidth: `calc((100% - ${(columns - 1) * 16}px) / ${columns})` }}
+            >
+              {renderItem(slotId, ad)}
+            </div>
+          ))}
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {Array.from(ads.entries()).map(([slotId, ad]) => (
+            <button
+              key={slotId}
+              onClick={() => handleItemClick(slotId, ad)}
+              className="group w-full flex gap-3 p-2 rounded-lg border hover:bg-accent/50 transition-colors text-left"
+            >
+              {ad.imageUrl && (
+                <div className="w-20 h-20 flex-shrink-0 rounded-md overflow-hidden bg-muted">
+                  <img
+                    src={ad.imageUrl}
+                    alt=""
+                    className="w-full h-full object-cover"
+                  />
+                </div>
+              )}
+
+              <div className="flex-1 min-w-0">
+                <h4 className="font-medium text-sm line-clamp-2 mb-1 group-hover:text-primary transition-colors">
+                  {ad.title}
+                </h4>
+                <span className="text-xs text-muted-foreground">
+                  {ad.sponsor || "Sponsored"}
+                </span>
+              </div>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Pagination dots for carousel */}
+      {layout === "carousel" && ads.size > columns && (
+        <div className="flex justify-center gap-1.5 mt-4">
+          {Array.from({ length: Math.ceil(ads.size / columns) }).map((_, i) => (
+            <button
+              key={i}
+              onClick={() => setCurrentSlide(i * columns)}
+              className={cn(
+                "w-2 h-2 rounded-full transition-colors",
+                Math.floor(currentSlide / columns) === i
+                  ? "bg-primary"
+                  : "bg-muted-foreground/30"
+              )}
+              aria-label={`Go to slide ${i + 1}`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default WakaContentRecommendation

package/src/components/waka-cost-breakdown/index.tsx

@@ -48,16 +48,16 @@ export interface WakaCostBreakdownProps {
 // ============================================================================
 
 const defaultColors = [
-  "#3b82f6", // blue
-  "#ef4444", // red
-  "#22c55e", // green
-  "#f59e0b", // amber
-  "#8b5cf6", // violet
-  "#ec4899", // pink
-  "#14b8a6", // teal
-  "#f97316", // orange
-  "#6366f1", // indigo
-  "#84cc16", // lime
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+  "hsl(var(--primary))",
+  "hsl(var(--info))",
+  "hsl(var(--warning))",
+  "hsl(var(--success))",
+  "hsl(var(--destructive))",
 ]
 
 // ============================================================================

package/src/components/waka-funnel-chart/index.tsx

@@ -193,14 +193,14 @@ function formatValue(
 // ============================================================================
 
 const defaultColors = [
-  "#3b82f6", // blue-500
-  "#6366f1", // indigo-500
-  "#8b5cf6", // violet-500
-  "#a855f7", // purple-500
-  "#d946ef", // fuchsia-500
-  "#ec4899", // pink-500
-  "#f43f5e", // rose-500
-  "#ef4444", // red-500
+  "hsl(var(--chart-1))",
+  "hsl(var(--chart-2))",
+  "hsl(var(--chart-3))",
+  "hsl(var(--chart-4))",
+  "hsl(var(--chart-5))",
+  "hsl(var(--primary))",
+  "hsl(var(--info))",
+  "hsl(var(--destructive))",
 ]
 
 function getStageColor(index: number, stage: FunnelStage): string {

package/src/components/waka-health-pulse/index.tsx

@@ -33,15 +33,15 @@ export interface WakaHealthPulseProps {
 }
 
 // ============================================
-// DEFAULT COLORS
+// DEFAULT COLORS (using CSS variables for theme support)
 // ============================================
 
 const defaultColors: Record<HealthStatus, string> = {
-  healthy: "#22c55e",
-  warning: "#eab308",
-  critical: "#ef4444",
-  down: "#6b7280",
-  unknown: "#a855f7",
+  healthy: "hsl(var(--success))",
+  warning: "hsl(var(--warning))",
+  critical: "hsl(var(--destructive))",
+  down: "hsl(var(--muted-foreground))",
+  unknown: "hsl(var(--chart-3))",
 }
 
 // ============================================

package/src/components/waka-leaderboard/index.tsx

@@ -77,30 +77,30 @@ const medalConfig = {
   1: {
     gradient: "from-yellow-300 via-yellow-400 to-yellow-500",
     shadow: "shadow-yellow-400/50",
-    glow: "#fbbf24",
+    glow: "hsl(var(--warning))",
     border: "border-yellow-400",
-    bg: "bg-yellow-50",
-    text: "text-yellow-700",
+    bg: "bg-yellow-50 dark:bg-yellow-950/30",
+    text: "text-yellow-700 dark:text-yellow-400",
     icon: Crown,
     label: "Gold",
   },
   2: {
     gradient: "from-gray-300 via-gray-400 to-gray-500",
     shadow: "shadow-gray-400/50",
-    glow: "#9ca3af",
+    glow: "hsl(var(--muted-foreground))",
     border: "border-gray-400",
-    bg: "bg-gray-50",
-    text: "text-gray-700",
+    bg: "bg-gray-50 dark:bg-gray-950/30",
+    text: "text-gray-700 dark:text-gray-400",
     icon: Medal,
     label: "Silver",
   },
   3: {
     gradient: "from-amber-500 via-amber-600 to-amber-700",
     shadow: "shadow-amber-500/50",
-    glow: "#d97706",
+    glow: "hsl(var(--chart-4))",
     border: "border-amber-500",
-    bg: "bg-amber-50",
-    text: "text-amber-700",
+    bg: "bg-amber-50 dark:bg-amber-950/30",
+    text: "text-amber-700 dark:text-amber-400",
     icon: Medal,
     label: "Bronze",
   },

package/src/components/waka-loot-box/index.tsx

@@ -102,46 +102,46 @@ const rarityConfig = {
   common: {
     gradient: "from-slate-400 to-slate-600",
     glow: "shadow-slate-400/50",
-    glowColor: "#94a3b8",
+    glowColor: "hsl(var(--muted-foreground))",
     borderColor: "border-slate-400",
-    bgColor: "bg-slate-100",
-    textColor: "text-slate-600",
-    particleColors: ["#94a3b8", "#cbd5e1", "#64748b"],
+    bgColor: "bg-slate-100 dark:bg-slate-900",
+    textColor: "text-slate-600 dark:text-slate-400",
+    particleColors: ["hsl(var(--muted-foreground))", "hsl(var(--muted))", "hsl(var(--border))"],
     label: "Common",
-    beamColor: "rgba(148, 163, 184, 0.8)",
+    beamColor: "hsl(var(--muted-foreground) / 0.8)",
   },
   rare: {
     gradient: "from-blue-400 to-blue-600",
     glow: "shadow-blue-400/50",
-    glowColor: "#60a5fa",
+    glowColor: "hsl(var(--info))",
     borderColor: "border-blue-400",
-    bgColor: "bg-blue-100",
-    textColor: "text-blue-600",
-    particleColors: ["#60a5fa", "#93c5fd", "#3b82f6"],
+    bgColor: "bg-blue-100 dark:bg-blue-950",
+    textColor: "text-blue-600 dark:text-blue-400",
+    particleColors: ["hsl(var(--info))", "hsl(var(--chart-1))", "hsl(var(--primary))"],
     label: "Rare",
-    beamColor: "rgba(96, 165, 250, 0.8)",
+    beamColor: "hsl(var(--info) / 0.8)",
   },
   epic: {
     gradient: "from-purple-400 to-purple-600",
     glow: "shadow-purple-400/50",
-    glowColor: "#a855f7",
+    glowColor: "hsl(var(--chart-2))",
     borderColor: "border-purple-400",
-    bgColor: "bg-purple-100",
-    textColor: "text-purple-600",
-    particleColors: ["#a855f7", "#c084fc", "#9333ea"],
+    bgColor: "bg-purple-100 dark:bg-purple-950",
+    textColor: "text-purple-600 dark:text-purple-400",
+    particleColors: ["hsl(var(--chart-2))", "hsl(var(--chart-3))", "hsl(var(--primary))"],
     label: "Epic",
-    beamColor: "rgba(168, 85, 247, 0.8)",
+    beamColor: "hsl(var(--chart-2) / 0.8)",
   },
   legendary: {
     gradient: "from-amber-400 via-orange-500 to-red-500",
     glow: "shadow-amber-400/50",
-    glowColor: "#fbbf24",
+    glowColor: "hsl(var(--warning))",
     borderColor: "border-amber-400",
-    bgColor: "bg-amber-100",
-    textColor: "text-amber-600",
-    particleColors: ["#fbbf24", "#f59e0b", "#ef4444", "#fcd34d"],
+    bgColor: "bg-amber-100 dark:bg-amber-950",
+    textColor: "text-amber-600 dark:text-amber-400",
+    particleColors: ["hsl(var(--warning))", "hsl(var(--chart-4))", "hsl(var(--destructive))", "hsl(var(--chart-5))"],
     label: "Legendary",
-    beamColor: "rgba(251, 191, 36, 0.9)",
+    beamColor: "hsl(var(--warning) / 0.9)",
   },
 }