@wakastellar/ui 2.1.2 → 2.3.2

package/src/components/waka-ad-fallback/index.tsx

@@ -0,0 +1,181 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { AD_SIZES, type AdSize } from "../waka-ad-provider"
+
+export type AdFallbackVariant = "house" | "empty" | "custom"
+
+export interface WakaAdFallbackProps {
+  /** Fallback variant */
+  variant?: AdFallbackVariant
+  /** Ad size preset */
+  size?: AdSize
+  /** Width in pixels (overrides size) */
+  width?: number
+  /** Height in pixels (overrides size) */
+  height?: number
+  /** Title text */
+  title?: string
+  /** Description text */
+  description?: string
+  /** Call to action text */
+  ctaText?: string
+  /** Link URL */
+  ctaUrl?: string
+  /** Image URL */
+  imageUrl?: string
+  /** Show border */
+  showBorder?: boolean
+  /** Custom class name */
+  className?: string
+  /** Callback when clicked */
+  onClick?: () => void
+  /** Custom children for variant="custom" */
+  children?: React.ReactNode
+}
+
+export function WakaAdFallback({
+  variant = "house",
+  size = "rectangle",
+  width,
+  height,
+  title = "Your Ad Here",
+  description = "Advertise with us",
+  ctaText = "Learn More",
+  ctaUrl,
+  imageUrl,
+  showBorder = true,
+  className,
+  onClick,
+  children,
+}: WakaAdFallbackProps) {
+  const sizeConfig = AD_SIZES[size]
+  const finalWidth = width ?? sizeConfig.width
+  const finalHeight = height ?? sizeConfig.height
+
+  // Custom variant renders children
+  if (variant === "custom" && children) {
+    return (
+      <div
+        className={cn("rounded-md overflow-hidden", className)}
+        style={{ width: finalWidth, height: finalHeight, maxWidth: "100%" }}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  // Empty variant
+  if (variant === "empty") {
+    return (
+      <div
+        className={cn(
+          "relative overflow-hidden rounded-md",
+          showBorder && "border border-dashed border-muted-foreground/20",
+          "flex items-center justify-center",
+          "bg-muted/20",
+          className
+        )}
+        style={{ width: finalWidth, height: finalHeight, maxWidth: "100%" }}
+      >
+        <span className="text-xs text-muted-foreground/40">Ad</span>
+      </div>
+    )
+  }
+  // House variant (default)
+  const content = (
+    <div
+      className={cn(
+        "relative overflow-hidden rounded-md transition-all duration-200",
+        showBorder && "border border-dashed border-muted-foreground/30",
+        "hover:border-muted-foreground/50 hover:bg-muted/50",
+        "flex flex-col items-center justify-center p-4 text-center",
+        "bg-gradient-to-br from-muted/30 to-muted/10",
+        className
+      )}
+      style={{
+        width: finalWidth,
+        height: finalHeight,
+        maxWidth: "100%",
+        backgroundImage: imageUrl ? `url(${imageUrl})` : undefined,
+        backgroundSize: "cover",
+        backgroundPosition: "center",
+      }}
+    >
+      {imageUrl && (
+        <div className="absolute inset-0 bg-black/40" />
+      )}
+
+      <div className={cn("relative z-10", imageUrl && "text-white")}>
+        <div className="mb-2">
+          <svg
+            className="h-10 w-10 mx-auto text-muted-foreground/50"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M11 5.882V19.24a1.76 1.76 0 01-3.417.592l-2.147-6.15M18 13a3 3 0 100-6M5.436 13.683A4.001 4.001 0 017 6h1.832c4.1 0 7.625-1.234 9.168-3v14c-1.543-1.766-5.067-3-9.168-3H7a3.988 3.988 0 01-1.564-.317z"
+            />
+          </svg>
+        </div>
+
+        <h3 className={cn(
+          "font-semibold text-sm mb-1",
+          !imageUrl && "text-muted-foreground"
+        )}>
+          {title}
+        </h3>
+
+        <p className={cn(
+          "text-xs mb-3",
+          !imageUrl ? "text-muted-foreground/70" : "text-white/80"
+        )}>
+          {description}
+        </p>
+
+        <span className={cn(
+          "inline-flex items-center px-3 py-1 rounded text-xs font-medium transition-colors",
+          imageUrl
+            ? "bg-white text-black hover:bg-white/90"
+            : "bg-primary/10 text-primary hover:bg-primary/20"
+        )}>
+          {ctaText}
+          <svg className="ml-1 h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+        </span>
+      </div>
+    </div>
+  )
+
+  if (ctaUrl) {
+    return (
+      <a
+        href={ctaUrl}
+        target="_blank"
+        rel="noopener noreferrer sponsored"
+        onClick={onClick}
+        className="block cursor-pointer"
+      >
+        {content}
+      </a>
+    )
+  }
+
+  if (onClick) {
+    return (
+      <button onClick={onClick} className="block cursor-pointer text-left">
+        {content}
+      </button>
+    )
+  }
+
+  return content
+}
+
+export default WakaAdFallback

package/src/components/waka-ad-inline/index.tsx

@@ -0,0 +1,103 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { WakaAdBanner, type WakaAdBannerProps } from "../waka-ad-banner"
+
+export interface WakaAdInlineProps extends Omit<WakaAdBannerProps, "size"> {
+  /** Ad size - defaults to responsive */
+  size?: "responsive" | "rectangle" | "leaderboard"
+  /** Alignment within container */
+  align?: "left" | "center" | "right"
+  /** Vertical margin */
+  margin?: "none" | "sm" | "md" | "lg"
+  /** Show separator lines */
+  showSeparators?: boolean
+  /** Label above the ad */
+  label?: string
+}
+
+export function WakaAdInline({
+  slotId,
+  size = "responsive",
+  align = "center",
+  margin = "md",
+  showSeparators = false,
+  label,
+  className,
+  ...bannerProps
+}: WakaAdInlineProps) {
+  const alignClasses = {
+    left: "justify-start",
+    center: "justify-center",
+    right: "justify-end",
+  }
+
+  const marginClasses = {
+    none: "my-0",
+    sm: "my-4",
+    md: "my-8",
+    lg: "my-12",
+  }
+
+  // Responsive sizing based on viewport
+  const getResponsiveSize = (): "leaderboard" | "rectangle" | "mobile-banner" => {
+    if (typeof window === "undefined") return "rectangle"
+    if (window.innerWidth >= 768) return "leaderboard"
+    if (window.innerWidth >= 480) return "rectangle"
+    return "mobile-banner"
+  }
+
+  const [responsiveSize, setResponsiveSize] = React.useState<"leaderboard" | "rectangle" | "mobile-banner">("rectangle")
+
+  React.useEffect(() => {
+    const handleResize = () => {
+      setResponsiveSize(getResponsiveSize())
+    }
+    handleResize()
+    window.addEventListener("resize", handleResize)
+    return () => window.removeEventListener("resize", handleResize)
+  }, [])
+
+  const actualSize = size === "responsive" ? responsiveSize : size
+
+  return (
+    <div
+      className={cn(
+        "w-full",
+        marginClasses[margin],
+        className
+      )}
+    >
+      {showSeparators && (
+        <div className="flex items-center gap-4 mb-3">
+          <div className="flex-1 h-px bg-border" />
+          <span className="text-xs text-muted-foreground uppercase tracking-wider">
+            {label || "Advertisement"}
+          </span>
+          <div className="flex-1 h-px bg-border" />
+        </div>
+      )}
+
+      {!showSeparators && label && (
+        <p className="text-xs text-muted-foreground uppercase tracking-wider mb-2 text-center">
+          {label}
+        </p>
+      )}
+
+      <div className={cn("flex w-full", alignClasses[align])}>
+        <WakaAdBanner
+          slotId={slotId}
+          size={actualSize}
+          {...bannerProps}
+        />
+      </div>
+
+      {showSeparators && (
+        <div className="h-px bg-border mt-3" />
+      )}
+    </div>
+  )
+}
+
+export default WakaAdInline

package/src/components/waka-ad-interstitial/index.tsx

@@ -0,0 +1,278 @@
+"use client"
+
+import * as React from "react"
+import { useState, useEffect, useCallback } from "react"
+import { cn } from "../../utils/cn"
+import { useAdContext, type CustomAd } from "../waka-ad-provider"
+import { WakaAdPlaceholder } from "../waka-ad-placeholder"
+import { WakaSponsoredBadge } from "../waka-sponsored-badge"
+import { X } from "lucide-react"
+
+export interface WakaAdInterstitialProps {
+  /** Unique slot ID */
+  slotId: string
+  /** Whether the interstitial is open */
+  open: boolean
+  /** Callback when closed */
+  onClose: () => void
+  /** Minimum display time before close button appears (seconds) */
+  minDisplayTime?: number
+  /** Auto-close after duration (seconds, 0 = manual close only) */
+  autoCloseAfter?: number
+  /** GPT ad unit path */
+  adUnitPath?: string
+  /** Show countdown timer */
+  showCountdown?: boolean
+  /** Skip button text */
+  skipText?: string
+  /** Custom class name */
+  className?: string
+  /** Callback when ad loads */
+  onLoad?: () => void
+  /** Callback when ad is clicked */
+  onClick?: () => void
+}
+
+export function WakaAdInterstitial({
+  slotId,
+  open,
+  onClose,
+  minDisplayTime = 5,
+  autoCloseAfter = 0,
+  adUnitPath,
+  showCountdown = true,
+  skipText = "Skip Ad",
+  className,
+  onLoad,
+  onClick,
+}: WakaAdInterstitialProps) {
+  const { config, isReady, hasConsent, getCustomAd, trackEvent } = useAdContext()
+
+  const [status, setStatus] = useState<"loading" | "loaded" | "error">("loading")
+  const [customAd, setCustomAd] = useState<CustomAd | null>(null)
+  const [countdown, setCountdown] = useState(minDisplayTime)
+  const [canSkip, setCanSkip] = useState(minDisplayTime === 0)
+  const [autoCloseCountdown, setAutoCloseCountdown] = useState(autoCloseAfter)
+
+  // Load ad
+  useEffect(() => {
+    if (!open || !isReady || hasConsent === false) return
+
+    const loadAd = async () => {
+      setStatus("loading")
+      setCountdown(minDisplayTime)
+      setCanSkip(minDisplayTime === 0)
+      setAutoCloseCountdown(autoCloseAfter)
+
+      try {
+        if (config.network === "custom") {
+          const ad = await getCustomAd(slotId)
+          if (ad) {
+            setCustomAd(ad)
+            setStatus("loaded")
+            trackEvent({ type: "loaded", slotId, timestamp: new Date() })
+            trackEvent({ type: "impression", slotId, timestamp: new Date() })
+            onLoad?.()
+
+            // Fire tracking
+            if (ad.impressionUrl) {
+              fetch(ad.impressionUrl, { mode: "no-cors" }).catch(() => {})
+            }
+          } else {
+            setStatus("error")
+            onClose()
+          }
+        } else {
+          // For GPT, we'd need to handle differently
+          setStatus("loaded")
+          onLoad?.()
+        }
+      } catch {
+        setStatus("error")
+        onClose()
+      }
+    }
+
+    loadAd()
+  }, [open, isReady, hasConsent, config.network, slotId, getCustomAd, trackEvent, minDisplayTime, autoCloseAfter, onLoad, onClose])
+
+  // Skip countdown
+  useEffect(() => {
+    if (!open || canSkip || countdown <= 0) return
+
+    const timer = setInterval(() => {
+      setCountdown((prev) => {
+        if (prev <= 1) {
+          setCanSkip(true)
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [open, canSkip, countdown])
+
+  // Auto-close countdown
+  useEffect(() => {
+    if (!open || autoCloseAfter === 0 || autoCloseCountdown <= 0) return
+
+    const timer = setInterval(() => {
+      setAutoCloseCountdown((prev) => {
+        if (prev <= 1) {
+          onClose()
+          return 0
+        }
+        return prev - 1
+      })
+    }, 1000)
+
+    return () => clearInterval(timer)
+  }, [open, autoCloseAfter, autoCloseCountdown, onClose])
+
+  // Track viewability
+  useEffect(() => {
+    if (open && status === "loaded") {
+      trackEvent({ type: "viewable", slotId, timestamp: new Date() })
+    }
+  }, [open, status, slotId, trackEvent])
+
+  const handleClick = useCallback(() => {
+    trackEvent({ type: "click", slotId, timestamp: new Date() })
+    onClick?.()
+
+    if (customAd?.clickUrl) {
+      fetch(customAd.clickUrl, { mode: "no-cors" }).catch(() => {})
+    }
+    if (customAd?.targetUrl) {
+      window.open(customAd.targetUrl, "_blank", "noopener,noreferrer")
+    }
+  }, [slotId, customAd, trackEvent, onClick])
+
+  const handleClose = useCallback(() => {
+    if (canSkip) {
+      onClose()
+    }
+  }, [canSkip, onClose])
+
+  // Handle escape key
+  useEffect(() => {
+    if (!open) return
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape" && canSkip) {
+        onClose()
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown)
+    return () => document.removeEventListener("keydown", handleKeyDown)
+  }, [open, canSkip, onClose])
+
+  // Prevent body scroll when open
+  useEffect(() => {
+    if (open) {
+      document.body.style.overflow = "hidden"
+      return () => {
+        document.body.style.overflow = ""
+      }
+    }
+  }, [open])
+
+  if (!open) return null
+
+  return (
+    <div
+      className={cn(
+        "fixed inset-0 z-50 flex items-center justify-center",
+        "bg-black/80 backdrop-blur-sm",
+        className
+      )}
+      role="dialog"
+      aria-modal="true"
+      aria-label="Advertisement"
+    >
+      {/* Close/Skip button */}
+      <div className="absolute top-4 right-4 z-10">
+        {canSkip ? (
+          <button
+            onClick={handleClose}
+            className="flex items-center gap-2 px-4 py-2 bg-white/10 hover:bg-white/20 text-white rounded-full transition-colors"
+          >
+            <span className="text-sm font-medium">{skipText}</span>
+            <X className="h-4 w-4" />
+          </button>
+        ) : showCountdown ? (
+          <div className="flex items-center gap-2 px-4 py-2 bg-white/10 text-white rounded-full">
+            <span className="text-sm">Skip in</span>
+            <span className="w-6 h-6 flex items-center justify-center bg-white/20 rounded-full text-sm font-bold">
+              {countdown}
+            </span>
+          </div>
+        ) : null}
+      </div>
+
+      {/* Sponsored badge */}
+      <div className="absolute top-4 left-4 z-10">
+        <WakaSponsoredBadge
+          sponsor={customAd?.sponsor}
+          variant="dark"
+          size="md"
+        />
+      </div>
+
+      {/* Auto-close indicator */}
+      {autoCloseAfter > 0 && status === "loaded" && (
+        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-10">
+          <div className="px-4 py-2 bg-white/10 text-white rounded-full text-sm">
+            Closing in {autoCloseCountdown}s
+          </div>
+        </div>
+      )}
+
+      {/* Ad content */}
+      <div className="relative max-w-4xl max-h-[80vh] w-full mx-4">
+        {status === "loading" ? (
+          <WakaAdPlaceholder width={800} height={600} />
+        ) : customAd ? (
+          <button
+            onClick={handleClick}
+            className="relative w-full focus:outline-none focus:ring-2 focus:ring-white/50 rounded-lg overflow-hidden"
+          >
+            {customAd.videoUrl ? (
+              <video
+                src={customAd.videoUrl}
+                autoPlay
+                muted
+                playsInline
+                className="w-full max-h-[80vh] object-contain bg-black"
+              />
+            ) : customAd.imageUrl ? (
+              <img
+                src={customAd.imageUrl}
+                alt={customAd.title || "Advertisement"}
+                className="w-full max-h-[80vh] object-contain"
+              />
+            ) : (
+              <div className="flex flex-col items-center justify-center h-96 bg-muted rounded-lg p-8">
+                <h2 className="text-2xl font-bold mb-2">{customAd.title}</h2>
+                {customAd.description && (
+                  <p className="text-muted-foreground mb-4 text-center max-w-md">
+                    {customAd.description}
+                  </p>
+                )}
+                {customAd.cta && (
+                  <span className="px-6 py-3 bg-primary text-primary-foreground rounded-lg font-medium">
+                    {customAd.cta}
+                  </span>
+                )}
+              </div>
+            )}
+          </button>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+export default WakaAdInterstitial

package/src/components/waka-ad-placeholder/index.tsx

@@ -0,0 +1,84 @@
+"use client"
+
+import * as React from "react"
+import { cn } from "../../utils/cn"
+import { AD_SIZES, type AdSize } from "../waka-ad-provider"
+
+export interface WakaAdPlaceholderProps {
+  /** Ad size preset */
+  size?: AdSize
+  /** Width in pixels (overrides size) */
+  width?: number
+  /** Height in pixels (overrides size) */
+  height?: number
+  /** Show animated skeleton */
+  animated?: boolean
+  /** Show label text */
+  showLabel?: boolean
+  /** Custom class name */
+  className?: string
+}
+
+export function WakaAdPlaceholder({
+  size = "rectangle",
+  width,
+  height,
+  animated = true,
+  showLabel = true,
+  className,
+}: WakaAdPlaceholderProps) {
+  const sizeConfig = AD_SIZES[size]
+  const finalWidth = width ?? sizeConfig.width
+  const finalHeight = height ?? sizeConfig.height
+  return (
+    <div
+      className={cn(
+        "relative overflow-hidden bg-muted rounded-md",
+        animated && "animate-pulse",
+        className
+      )}
+      style={{ width: finalWidth, height: finalHeight, maxWidth: "100%" }}
+      role="status"
+      aria-label="Loading advertisement"
+    >
+      <div className="absolute inset-0 flex items-center justify-center">
+        <div className="flex flex-col items-center gap-2 text-muted-foreground/50">
+          <svg
+            className="h-8 w-8"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+            />
+          </svg>
+          {showLabel && <span className="text-xs">Loading ad...</span>}
+        </div>
+      </div>
+
+      {/* Shimmer effect */}
+      {animated && (
+        <div
+          className="absolute inset-0 -translate-x-full bg-gradient-to-r from-transparent via-white/10 to-transparent animate-shimmer"
+          style={{
+            animation: "shimmer 2s infinite",
+          }}
+        />
+      )}
+
+      <style>{`
+        @keyframes shimmer {
+          100% {
+            transform: translateX(100%);
+          }
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default WakaAdPlaceholder