@wakastellar/ui 2.1.2 → 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))",
 ]
 
 // ============================================================================